From 5529d644acb32f7d26f687de88a35ad958cca631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=A5=A5=E8=B6=85?= <iwind.liu@gmail.com>
Date: Mon, 14 Aug 2023 10:42:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BC=93=E5=AD=98=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=9B=E9=BB=98=E8=AE=A4=E7=BC=93=E5=AD=98=E6=9C=89?=
 =?UTF-8?q?=E6=95=88=E6=9C=9F=E4=BB=8E2=E4=B8=AA=E5=B0=8F=E6=97=B6?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA1=E5=A4=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/components/common/time-duration-box.js | 83 +++++++++++++++----
 .../components/server/http-cache-ref-box.js   | 10 +--
 2 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/web/public/js/components/common/time-duration-box.js b/web/public/js/components/common/time-duration-box.js
index 19891a6f..8446b04a 100644
--- a/web/public/js/components/common/time-duration-box.js
+++ b/web/public/js/components/common/time-duration-box.js
@@ -1,5 +1,5 @@
 Vue.component("time-duration-box", {
-	props: ["name", "v-name", "v-value", "v-count", "v-unit"],
+	props: ["v-name", "v-value", "v-count", "v-unit", "placeholder", "v-min-unit", "maxlength"],
 	mounted: function () {
 		this.change()
 	},
@@ -15,17 +15,52 @@ Vue.component("time-duration-box", {
 			v["count"] = -1
 		}
 
-		let realName = ""
-		if (typeof this.name == "string" && this.name.length > 0) {
-			realName = this.name
-		} else if (typeof this.vName == "string" && this.vName.length > 0) {
-			realName = this.vName
+		let minUnit = this.vMinUnit
+		let units = [
+			{
+				code: "ms",
+				name: "毫秒"
+			},
+			{
+				code: "second",
+				name: "秒"
+			},
+			{
+				code: "minute",
+				name: "分钟"
+			},
+			{
+				code: "hour",
+				name: "小时"
+			},
+			{
+				code: "day",
+				name: "天"
+			}
+		]
+		let minUnitIndex = -1
+		if (minUnit != null && typeof minUnit == "string" && minUnit.length > 0) {
+			for (let i = 0; i < units.length; i++) {
+				if (units[i].code == minUnit) {
+					minUnitIndex = i
+					break
+				}
+			}
+		}
+		if (minUnitIndex > -1) {
+			units = units.slice(minUnitIndex)
+		}
+
+		let maxLength = parseInt(this.maxlength)
+		if (typeof maxLength != "number") {
+			maxLength = 10
 		}
 
 		return {
 			duration: v,
 			countString: (v.count >= 0) ? v.count.toString() : "",
-			realName: realName
+			units: units,
+			realMaxLength: maxLength
 		}
 	},
 	watch: {
@@ -48,19 +83,37 @@ Vue.component("time-duration-box", {
 		}
 	},
 	template: `<div class="ui fields inline" style="padding-bottom: 0; margin-bottom: 0">
-	<input type="hidden" :name="realName" :value="JSON.stringify(duration)"/>
+	<input type="hidden" :name="vName" :value="JSON.stringify(duration)"/>
 	<div class="ui field">
-		<input type="text" v-model="countString" maxlength="11" size="11" @keypress.enter.prevent="1"/>
+		<input type="text" v-model="countString" :maxlength="realMaxLength" :size="realMaxLength" :placeholder="placeholder" @keypress.enter.prevent="1"/>
 	</div>
 	<div class="ui field">
 		<select class="ui dropdown" v-model="duration.unit" @change="change">
-			<option value="ms">毫秒</option>
-			<option value="second">秒</option>
-			<option value="minute">分钟</option>
-			<option value="hour">小时</option>
-			<option value="day">天</option>
-			<option value="week">周</option>
+			<option v-for="unit in units" :value="unit.code">{{unit.name}}</option>
 		</select>
 	</div>
 </div>`
+})
+
+Vue.component("time-duration-text", {
+	props: ["v-value"],
+	methods: {
+		unitName: function (unit) {
+			switch (unit) {
+				case "ms":
+					return "毫秒"
+				case "second":
+					return "秒"
+				case "minute":
+					return "分钟"
+				case "hour":
+					return "小时"
+				case "day":
+					return "天"
+			}
+		}
+	},
+	template: `<span>
+	{{vValue.count}} {{unitName(vValue.unit)}}
+</span>`
 })
\ No newline at end of file
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 e7b781da..38d2f7b9 100644
--- a/web/public/js/components/server/http-cache-ref-box.js
+++ b/web/public/js/components/server/http-cache-ref-box.js
@@ -19,7 +19,7 @@ Vue.component("http-cache-ref-box", {
 				isOn: true,
 				cachePolicyId: 0,
 				key: "${scheme}://${host}${requestPath}${isArgs}${args}",
-				life: {count: 2, unit: "hour"},
+				life: {count: 1, unit: "day"},
 				status: [200],
 				maxSize: {count: 128, unit: "mb"},
 				minSize: {count: 0, unit: "kb"},
@@ -220,7 +220,7 @@ Vue.component("http-cache-ref-box", {
 	<tr v-show="!vIsReverse">
 		<td>缓存有效期 *</td>
 		<td>
-			<time-duration-box :v-value="ref.life" @change="changeLife"></time-duration-box>
+			<time-duration-box :v-value="ref.life" @change="changeLife" :v-min-unit="'minute'" maxlength="4"></time-duration-box>
 		</td>
 	</tr>
 	<tr v-show="!vIsReverse">
@@ -231,15 +231,15 @@ Vue.component("http-cache-ref-box", {
 		</td>
 	</tr>
 	<tr v-show="!vIsReverse">
+		<td colspan="2"><more-options-indicator @change="changeOptionsVisible"></more-options-indicator></td>
+	</tr>
+	<tr v-show="moreOptionsVisible && !vIsReverse">
 		<td>缓存Key *</td>
 		<td>
 			<input type="text" v-model="ref.key" @input="changeKey(ref.key)"/>
 			<p class="comment">用来区分不同缓存内容的唯一Key。<request-variables-describer ref="variablesDescriber"></request-variables-describer>。</p>
 		</td>
 	</tr>
-	<tr v-show="!vIsReverse">
-		<td colspan="2"><more-options-indicator @change="changeOptionsVisible"></more-options-indicator></td>
-	</tr>
 	<tr v-show="moreOptionsVisible && !vIsReverse">
 		<td>请求方法限制</td>
 		<td>