From 0adb3883f4bf225a9134b0f3a316de7943c95ab8 Mon Sep 17 00:00:00 2001
From: GoEdgeLab <goedgecloud@gmail.com>
Date: Wed, 8 Dec 2021 17:41:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E5=9C=A8=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E9=87=8C=E8=AE=BE=E7=BD=AEExpires=20Header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/components/common/time-duration-box.js |  1 +
 .../components/server/http-cache-ref-box.js   | 20 +++++-
 .../components/server/http-cache-refs-box.js  |  1 +
 .../server/http-cache-refs-config-box.js      |  1 +
 .../server/http-expires-time-config-box.js    | 69 +++++++++++++++++++
 5 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 web/public/js/components/server/http-expires-time-config-box.js

diff --git a/web/public/js/components/common/time-duration-box.js b/web/public/js/components/common/time-duration-box.js
index 0ee9f530..4d8943fc 100644
--- a/web/public/js/components/common/time-duration-box.js
+++ b/web/public/js/components/common/time-duration-box.js
@@ -50,6 +50,7 @@ Vue.component("time-duration-box", {
 			<option value="minute">分钟</option>
 			<option value="hour">小时</option>
 			<option value="day">天</option>
+			<option value="week">周</option>
 		</select>
 	</div>
 </div>`
diff --git a/web/public/js/components/server/http-cache-ref-box.js b/web/public/js/components/server/http-cache-ref-box.js
index 12cb76b7..8efd1950 100644
--- a/web/public/js/components/server/http-cache-ref-box.js
+++ b/web/public/js/components/server/http-cache-ref-box.js
@@ -21,7 +21,14 @@ Vue.component("http-cache-ref-box", {
 				conds: null,
 				allowChunkedEncoding: true,
 				isReverse: this.vIsReverse,
-				methods: []
+				methods: [],
+				expiresTime: {
+					isPrior: false,
+					isOn: false,
+					overwrite: true,
+					autoCalculate: true,
+					duration: {count: -1, "unit": "hour"}
+				}
 			}
 		}
 		if (ref.key == null) {
@@ -79,6 +86,9 @@ Vue.component("http-cache-ref-box", {
 		},
 		changeKey: function (key) {
 			this.$refs.variablesDescriber.update(key)
+		},
+		changeExpiresTime: function (expiresTime) {
+			this.ref.expiresTime = expiresTime
 		}
 	},
 	template: `<tbody>
@@ -107,12 +117,18 @@ Vue.component("http-cache-ref-box", {
 		<td colspan="2"><more-options-indicator @change="changeOptionsVisible"></more-options-indicator></td>
 	</tr>
 	<tr v-show="moreOptionsVisible && !vIsReverse">
-		<td>请求方法</td>
+		<td>请求方法限制</td>
 		<td>
 			<values-box size="5" maxlength="10" :values="ref.methods" @change="changeMethods"></values-box>
 			<p class="comment">允许请求的缓存方法，默认支持所有的请求方法。</p>
 		</td>
 	</tr>
+	<tr v-show="moreOptionsVisible && !vIsReverse">
+		<td>客户端过期时间<em>（Expires）</em></td>
+		<td>
+			<http-expires-time-config-box :v-expires-time="ref.expiresTime" @change="changeExpiresTime"></http-expires-time-config-box>		
+		</td>
+	</tr>
 	<tr v-show="moreOptionsVisible && !vIsReverse">
 		<td>可缓存的最大内容尺寸</td>
 		<td>
diff --git a/web/public/js/components/server/http-cache-refs-box.js b/web/public/js/components/server/http-cache-refs-box.js
index af0276b4..150b1cae 100644
--- a/web/public/js/components/server/http-cache-refs-box.js
+++ b/web/public/js/components/server/http-cache-refs-box.js
@@ -50,6 +50,7 @@ Vue.component("http-cache-refs-box", {
 						</grey-label>
 						<grey-label v-else-if="cacheRef.maxSize != null && cacheRef.maxSize.count > 0">0 - {{cacheRef.maxSize.count}}{{cacheRef.maxSize.unit}}</grey-label>
 						<grey-label v-if="cacheRef.methods != null && cacheRef.methods.length > 0">{{cacheRef.methods.join(", ")}}</grey-label>
+						<grey-label v-if="cacheRef.expiresTime != null && cacheRef.expiresTime.isPrior && cacheRef.expiresTime.isOn">Expires</grey-label>
 						<grey-label v-if="cacheRef.status != null && cacheRef.status.length > 0 && (cacheRef.status.length > 1 || cacheRef.status[0] != 200)">状态码：{{cacheRef.status.map(function(v) {return v.toString()}).join(", ")}}</grey-label>
 					</td>
 					<td>
diff --git a/web/public/js/components/server/http-cache-refs-config-box.js b/web/public/js/components/server/http-cache-refs-config-box.js
index 25cd5d56..479ca276 100644
--- a/web/public/js/components/server/http-cache-refs-config-box.js
+++ b/web/public/js/components/server/http-cache-refs-config-box.js
@@ -173,6 +173,7 @@ Vue.component("http-cache-refs-config-box", {
 						</grey-label>
 						<grey-label v-else-if="cacheRef.maxSize != null && cacheRef.maxSize.count > 0">0 - {{cacheRef.maxSize.count}}{{cacheRef.maxSize.unit}}</grey-label>
 						<grey-label v-if="cacheRef.methods != null && cacheRef.methods.length > 0">{{cacheRef.methods.join(", ")}}</grey-label>
+						<grey-label v-if="cacheRef.expiresTime != null && cacheRef.expiresTime.isPrior && cacheRef.expiresTime.isOn">Expires</grey-label>
 						<grey-label v-if="cacheRef.status != null && cacheRef.status.length > 0 && (cacheRef.status.length > 1 || cacheRef.status[0] != 200)">状态码：{{cacheRef.status.map(function(v) {return v.toString()}).join(", ")}}</grey-label>
 					</td>
 					<td>
diff --git a/web/public/js/components/server/http-expires-time-config-box.js b/web/public/js/components/server/http-expires-time-config-box.js
new file mode 100644
index 00000000..183ba3e7
--- /dev/null
+++ b/web/public/js/components/server/http-expires-time-config-box.js
@@ -0,0 +1,69 @@
+Vue.component("http-expires-time-config-box", {
+	props: ["v-expires-time"],
+	data: function () {
+		let expiresTime = this.vExpiresTime
+		if (expiresTime == null) {
+			expiresTime = {
+				isPrior: false,
+				isOn: false,
+				overwrite: true,
+				autoCalculate: true,
+				duration: {count: -1, "unit": "hour"}
+			}
+		}
+		return {
+			expiresTime: expiresTime
+		}
+	},
+	watch: {
+		"expiresTime.isPrior": function () {
+			this.notifyChange()
+		},
+		"expiresTime.isOn": function () {
+			this.notifyChange()
+		},
+		"expiresTime.overwrite": function () {
+			this.notifyChange()
+		},
+		"expiresTime.autoCalculate": function () {
+			this.notifyChange()
+		}
+	},
+	methods: {
+		notifyChange: function () {
+			this.$emit("change", this.expiresTime)
+		}
+	},
+	template: `<div>
+	<table class="ui table">
+		<prior-checkbox :v-config="expiresTime"></prior-checkbox>
+		<tbody v-show="expiresTime.isPrior">
+			<tr>
+				<td class="title">是否启用</td>
+				<td><checkbox v-model="expiresTime.isOn"></checkbox>
+					<p class="comment">启用后，将会在响应的Header中添加<code-label>Expires</code-label>字段，浏览器据此会将内容缓存在客户端；同时，在管理后台执行清理缓存时，也将无法清理客户端已有的缓存。</p>
+				</td>
+			</tr>
+			<tr v-show="expiresTime.isPrior && expiresTime.isOn">
+				<td>覆盖源站设置</td>
+				<td>
+					<checkbox v-model="expiresTime.overwrite"></checkbox>
+					<p class="comment">选中后，会覆盖源站Header中已有的<code-label>Expires</code-label>字段。</p>
+				</td>
+			</tr>
+			<tr v-show="expiresTime.isPrior && expiresTime.isOn">
+				<td>自动计算时间</td>
+				<td><checkbox v-model="expiresTime.autoCalculate"></checkbox>
+					<p class="comment">根据当前页面中设置的缓存有效期进行计算。</p>
+				</td>
+			</tr>
+			<tr v-show="expiresTime.isPrior && expiresTime.isOn && !expiresTime.autoCalculate">
+				<td>强制缓存时间</td>
+				<td>
+					<time-duration-box :v-value="expiresTime.duration" @change="notifyChange"></time-duration-box>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`
+})
\ No newline at end of file