可以在缓存条件里设置Expires Header

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>`

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>

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>

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>

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>`
+})