实现初版边缘脚本

internal/web/actions/default/servers/serverutils/server_helper.go

@@ -378,6 +378,12 @@ func (this *ServerHelper) createSettingsMenu(secondMenuItem string, serverIdStri
 				"isActive": secondMenuItem == "traffic",
 				"isOn":     serverConfig.TrafficLimit != nil && serverConfig.TrafficLimit.IsOn,
 			})
+			menuItems = append(menuItems, maps.Map{
+				"name":     "边缘脚本",
+				"url":      "/servers/server/settings/requestScripts?serverId=" + serverIdString,
+				"isActive": secondMenuItem == "requestScripts",
+				"isOn":     serverConfig.Web != nil && serverConfig.Web.RequestScripts != nil && !serverConfig.Web.RequestScripts.IsEmpty(),
+			})
 		}
 
 		menuItems = append(menuItems, maps.Map{

web/public/js/components.js

@@ -2203,6 +2203,42 @@ Vue.component("http-firewall-actions-view", {
 </div>`
 })
 
+Vue.component("http-request-scripts-config-box", {
+	props: ["vRequestScriptsConfig"],
+	data: function () {
+		let config = this.vRequestScriptsConfig
+		if (config == null) {
+			config = {}
+		}
+		return {
+			config: config
+		}
+	},
+	methods: {
+		changeInitScript: function (scriptConfig) {
+			this.config.onInitScript = scriptConfig
+			this.$forceUpdate()
+		},
+		changeRequestScript: function (scriptConfig) {
+			this.config.onRequestScript = scriptConfig
+			this.$forceUpdate()
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="requestScriptsJSON" :value="JSON.stringify(config)"/>
+	<div class="margin"></div>
+	<h4>请求初始化</h4>
+	<div>
+		<script-config-box id="init-script" :v-script-config="config.onInitScript" comment="在接收到客户端请求之后立即调用。预置req、resp变量。" @change="changeInitScript"></script-config-box>
+	</div>
+	<h4>准备发送请求</h4>
+	<div>
+		<script-config-box id="request-script" :v-script-config="config.onRequestScript" comment="在准备好转发客户端请求之前调用。预置req、resp变量。" @change="changeRequestScript"></script-config-box>
+	</div>
+	<div class="margin"></div>
+</div>`
+})
+
 // 显示WAF规则的标签
 Vue.component("http-firewall-rule-label", {
 	props: ["v-rule"],
@@ -5984,7 +6020,7 @@ Vue.component("http-header-policy-box", {
 		<submit-btn></submit-btn>
 	</div>
 	
-	<div v-if="((!vIsLocation && !vIsGroup) || requestHeaderRef.isPrior) && type == 'response'">
+	<div v-if="((!vIsLocation && !vIsGroup) || responseHeaderRef.isPrior) && type == 'response'">
 		<div v-if="vHasGroupResponseConfig">
         	<div class="margin"></div>
         	<warning-message>由于已经在当前<a :href="vGroupSettingUrl + '#response'">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
@@ -7220,6 +7256,60 @@ Vue.component("http-gzip-box", {
 </div>`
 })
 
+Vue.component("script-config-box", {
+	props: ["id", "v-script-config", "comment"],
+	data: function () {
+		let config = this.vScriptConfig
+		if (config == null) {
+			config = {
+				isPrior: false,
+				isOn: false,
+				code: ""
+			}
+		}
+
+		if (config.code.length == 0) {
+			config.code = "\n\n\n\n"
+		}
+
+		return {
+			config: config
+		}
+	},
+	watch: {
+		"config.isOn": function () {
+			this.change()
+		}
+	},
+	methods: {
+		change: function () {
+			this.$emit("change", this.config)
+		},
+		changeCode: function (code) {
+			this.config.code = code
+			this.change()
+		}
+	},
+	template: `<div>
+	<table class="ui table definition selectable">
+		<tbody>
+			<tr>
+				<td class="title">是否启用</td>
+				<td><checkbox v-model="config.isOn"></checkbox></td>
+			</tr>
+		</tbody>
+		<tbody>
+			<tr :style="{opacity: !config.isOn ? 0.5 : 1}">
+				<td>脚本代码</td>	
+				<td><source-code-box :id="id" type="text/javascript" :read-only="false" @change="changeCode">{{config.code}}</source-code-box>
+					<p class="comment">{{comment}}</p>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`
+})
+
 Vue.component("ssl-certs-view", {
 	props: ["v-certs"],
 	data: function () {
@@ -11725,6 +11815,19 @@ Vue.component("source-code-box", {
 
 		this.createEditor(box, value, readOnly)
 	},
+	data: function () {
+		let index = sourceCodeBoxIndex++
+
+		let valueBoxId = 'source-code-box-value-' + sourceCodeBoxIndex
+		if (this.id != null) {
+			valueBoxId = this.id
+		}
+
+		return {
+			index: index,
+			valueBoxId: valueBoxId
+		}
+	},
 	methods: {
 		createEditor: function (box, value, readOnly) {
 			let boxEditor = CodeMirror.fromTextArea(box, {
@@ -11739,7 +11842,11 @@ Vue.component("source-code-box", {
 				lineWrapping: true,
 				highlightFormatting: false,
 				indentUnit: 4,
-				indentWithTabs: true
+				indentWithTabs: true,
+			})
+			let that = this
+			boxEditor.on("change", function () {
+				that.change(boxEditor.getValue())
 			})
 			boxEditor.setValue(value)
 
@@ -11762,19 +11869,9 @@ Vue.component("source-code-box", {
 				CodeMirror.modeURL = "/codemirror/mode/%N/%N.js"
 				CodeMirror.autoLoadMode(boxEditor, info.mode)
 			}
-		}
 		},
-	data: function () {
+		change: function (code) {
-		let index = sourceCodeBoxIndex++
+			this.$emit("change", code)
-
-		let valueBoxId = 'source-code-box-value-' + sourceCodeBoxIndex
-		if (this.id != null) {
-			valueBoxId = this.id
-		}
-
-		return {
-			index: index,
-			valueBoxId: valueBoxId
 		}
 	},
 	template: `<div class="source-code-box">

web/public/js/components/common/source-code-box.js

@@ -18,6 +18,19 @@ Vue.component("source-code-box", {
 
 		this.createEditor(box, value, readOnly)
 	},
+	data: function () {
+		let index = sourceCodeBoxIndex++
+
+		let valueBoxId = 'source-code-box-value-' + sourceCodeBoxIndex
+		if (this.id != null) {
+			valueBoxId = this.id
+		}
+
+		return {
+			index: index,
+			valueBoxId: valueBoxId
+		}
+	},
 	methods: {
 		createEditor: function (box, value, readOnly) {
 			let boxEditor = CodeMirror.fromTextArea(box, {
@@ -32,7 +45,11 @@ Vue.component("source-code-box", {
 				lineWrapping: true,
 				highlightFormatting: false,
 				indentUnit: 4,
-				indentWithTabs: true
+				indentWithTabs: true,
+			})
+			let that = this
+			boxEditor.on("change", function () {
+				that.change(boxEditor.getValue())
 			})
 			boxEditor.setValue(value)
 
@@ -55,19 +72,9 @@ Vue.component("source-code-box", {
 				CodeMirror.modeURL = "/codemirror/mode/%N/%N.js"
 				CodeMirror.autoLoadMode(boxEditor, info.mode)
 			}
-		}
 		},
-	data: function () {
+		change: function (code) {
-		let index = sourceCodeBoxIndex++
+			this.$emit("change", code)
-
-		let valueBoxId = 'source-code-box-value-' + sourceCodeBoxIndex
-		if (this.id != null) {
-			valueBoxId = this.id
-		}
-
-		return {
-			index: index,
-			valueBoxId: valueBoxId
 		}
 	},
 	template: `<div class="source-code-box">

web/public/js/components/server/http-request-scripts-config-box.js

@@ -0,0 +1,35 @@
+Vue.component("http-request-scripts-config-box", {
+	props: ["vRequestScriptsConfig"],
+	data: function () {
+		let config = this.vRequestScriptsConfig
+		if (config == null) {
+			config = {}
+		}
+		return {
+			config: config
+		}
+	},
+	methods: {
+		changeInitScript: function (scriptConfig) {
+			this.config.onInitScript = scriptConfig
+			this.$forceUpdate()
+		},
+		changeRequestScript: function (scriptConfig) {
+			this.config.onRequestScript = scriptConfig
+			this.$forceUpdate()
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="requestScriptsJSON" :value="JSON.stringify(config)"/>
+	<div class="margin"></div>
+	<h4>请求初始化</h4>
+	<div>
+		<script-config-box id="init-script" :v-script-config="config.onInitScript" comment="在接收到客户端请求之后立即调用。预置req、resp变量。" @change="changeInitScript"></script-config-box>
+	</div>
+	<h4>准备发送请求</h4>
+	<div>
+		<script-config-box id="request-script" :v-script-config="config.onRequestScript" comment="在准备好转发客户端请求之前调用。预置req、resp变量。" @change="changeRequestScript"></script-config-box>
+	</div>
+	<div class="margin"></div>
+</div>`
+})

web/public/js/components/server/script-config-box.js

@@ -0,0 +1,53 @@
+Vue.component("script-config-box", {
+	props: ["id", "v-script-config", "comment"],
+	data: function () {
+		let config = this.vScriptConfig
+		if (config == null) {
+			config = {
+				isPrior: false,
+				isOn: false,
+				code: ""
+			}
+		}
+
+		if (config.code.length == 0) {
+			config.code = "\n\n\n\n"
+		}
+
+		return {
+			config: config
+		}
+	},
+	watch: {
+		"config.isOn": function () {
+			this.change()
+		}
+	},
+	methods: {
+		change: function () {
+			this.$emit("change", this.config)
+		},
+		changeCode: function (code) {
+			this.config.code = code
+			this.change()
+		}
+	},
+	template: `<div>
+	<table class="ui table definition selectable">
+		<tbody>
+			<tr>
+				<td class="title">是否启用</td>
+				<td><checkbox v-model="config.isOn"></checkbox></td>
+			</tr>
+		</tbody>
+		<tbody>
+			<tr :style="{opacity: !config.isOn ? 0.5 : 1}">
+				<td>脚本代码</td>	
+				<td><source-code-box :id="id" type="text/javascript" :read-only="false" @change="changeCode">{{config.code}}</source-code-box>
+					<p class="comment">{{comment}}</p>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`
+})