Update components.js

web/public/js/components.js

@@ -2215,25 +2215,27 @@ Vue.component("http-request-scripts-config-box", {
 		}
 	},
 	methods: {
-		changeInitScript: function (scriptConfig) {
+		changeInitGroup: function (group) {
-			this.config.onInitScript = scriptConfig
+			this.config.initGroup = group
 			this.$forceUpdate()
 		},
-		changeRequestScript: function (scriptConfig) {
+		changeRequestGroup: function (group) {
-			this.config.onRequestScript = scriptConfig
+			this.config.requestGroup = group
 			this.$forceUpdate()
 		}
 	},
 	template: `<div>
 	<input type="hidden" name="requestScriptsJSON" :value="JSON.stringify(config)"/>
 	<div class="margin"></div>
-	<h4>请求初始化</h4>
+	<h4 style="margin-bottom: 0">请求初始化</h4>
+	<p class="comment">在请求刚初始化时调用，此时自定义Header等尚未生效。</p>
 	<div>
-		<script-config-box id="init-script" :v-script-config="config.onInitScript" comment="在接收到客户端请求之后立即调用。预置req、resp变量。" @change="changeInitScript"></script-config-box>
+		<script-group-config-box :v-group="config.initGroup" @change="changeInitGroup"></script-group-config-box>
 	</div>
-	<h4>准备发送请求</h4>
+	<h4 style="margin-bottom: 0">准备发送请求</h4>
+	<p class="comment">在准备执行请求或者转发请求之前调用，此时自定义Header、源站等已准备好。</p>
 	<div>
-		<script-config-box id="request-script" :v-script-config="config.onRequestScript" comment="在准备好转发客户端请求之前调用。预置req、resp变量。" @change="changeRequestScript"></script-config-box>
+		<script-group-config-box :v-group="config.requestGroup" @change="changeRequestGroup"></script-group-config-box>
 	</div>
 	<div class="margin"></div>
 </div>`
@@ -5528,7 +5530,7 @@ Vue.component("http-firewall-actions-box", {
 				<td>封锁时间</td>
 				<td>
 					<div class="ui input right labeled">
-						<input type="text" style="width: 5em" maxlength="10" v-model="blockTimeout" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
+						<input type="text" style="width: 5em" maxlength="9" v-model="blockTimeout" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
 						<span class="ui label">秒</span>
 					</div>
 				</td>
@@ -5548,7 +5550,7 @@ Vue.component("http-firewall-actions-box", {
 				<td>有效时间</td>
 				<td>
 					<div class="ui input right labeled">
-						<input type="text" style="width: 5em" maxlength="10" v-model="captchaLife" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
+						<input type="text" style="width: 5em" maxlength="9" v-model="captchaLife" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
 						<span class="ui label">秒</span>
 					</div>
 					<p class="comment">验证通过后在这个时间内不再验证，默认600秒。</p>
@@ -5560,7 +5562,7 @@ Vue.component("http-firewall-actions-box", {
 				<td>有效时间</td>
 				<td>
 					<div class="ui input right labeled">
-						<input type="text" style="width: 5em" maxlength="10" v-model="get302Life" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
+						<input type="text" style="width: 5em" maxlength="9" v-model="get302Life" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
 						<span class="ui label">秒</span>
 					</div>
 					<p class="comment">验证通过后在这个时间内不再验证。</p>
@@ -5572,7 +5574,7 @@ Vue.component("http-firewall-actions-box", {
 				<td>有效时间</td>
 				<td>
 					<div class="ui input right labeled">
-						<input type="text" style="width: 5em" maxlength="10" v-model="post307Life" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
+						<input type="text" style="width: 5em" maxlength="9" v-model="post307Life" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
 						<span class="ui label">秒</span>
 					</div>
 					<p class="comment">验证通过后在这个时间内不再验证。</p>
@@ -5609,7 +5611,7 @@ Vue.component("http-firewall-actions-box", {
 				<td>超时时间</td>
 				<td>
 					<div class="ui input right labeled">
-						<input type="text" style="width: 6em" maxlength="10" v-model="recordIPTimeout" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
+						<input type="text" style="width: 6em" maxlength="9" v-model="recordIPTimeout" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
 						<span class="ui label">秒</span>
 					</div>
 					<p class="comment">0表示不超时。</p>
@@ -9630,6 +9632,45 @@ Vue.component("server-group-selector", {
 </div>`
 })
 
+Vue.component("script-group-config-box", {
+	props: ["v-group"],
+	data: function () {
+		let group = this.vGroup
+		if (group == null) {
+			group = {
+				isPrior: false,
+				isOn: true,
+				scripts: []
+			}
+		}
+		if (group.scripts == null) {
+			group.scripts = []
+		}
+
+		let script = null
+		if (group.scripts.length > 0) {
+			script = group.scripts[group.scripts.length - 1]
+		}
+
+		return {
+			group: group,
+			script: script
+		}
+	},
+	methods: {
+		changeScript: function (script) {
+			this.group.scripts = [script] // 目前只支持单个脚本
+			this.change()
+		},
+		change: function () {
+			this.$emit("change", this.group)
+		}
+	},
+	template: `<div>
+		<script-config-box :v-script-config="script" comment="在接收到客户端请求之后立即调用。预置req、resp变量。" @change="changeScript"></script-config-box>
+</div>`
+})
+
 // 指标周期设置
 Vue.component("metric-period-config-box", {
 	props: ["v-period", "v-period-unit"],
@@ -10956,7 +10997,17 @@ Vue.component("micro-basic-label", {
 
 // 灰色的Label
 Vue.component("grey-label", {
-	template: `<span class="ui label basic grey tiny" style="margin-top: 0.4em; font-size: 0.7em; border: 1px solid #ddd!important; font-weight: normal;"><slot></slot></span>`
+	props: ["color"],
+	data: function () {
+		let color = "grey"
+		if (this.color != null && this.color.length > 0) {
+			color = "red"
+		}
+		return {
+			labelColor: color
+		}
+	},
+	template: `<span class="ui label basic tiny" :class="labelColor" style="margin-top: 0.4em; font-size: 0.7em; border: 1px solid #ddd!important; font-weight: normal;"><slot></slot></span>`
 })