From c0a01ac68c6a7c8d04571ef2c2d2829330671b3d Mon Sep 17 00:00:00 2001
From: GoEdgeLab <goedgecloud@gmail.com>
Date: Fri, 22 Oct 2021 14:40:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96HTTP=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E7=AB=AFIP=E9=85=8D=E7=BD=AE=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server/http-remote-addr-config-box.js     | 55 +++++++++++++++++--
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/web/public/js/components/server/http-remote-addr-config-box.js b/web/public/js/components/server/http-remote-addr-config-box.js
index 18b372fc..1a8e6211 100644
--- a/web/public/js/components/server/http-remote-addr-config-box.js
+++ b/web/public/js/components/server/http-remote-addr-config-box.js
@@ -6,16 +6,49 @@ Vue.component("http-remote-addr-config-box", {
 			config = {
 				isPrior: false,
 				isOn: false,
-				value: "${remoteAddr}"
+				value: "${remoteAddr}",
+				isCustomized: false
 			}
 		}
+
+		let optionValue = ""
+		if (!config.isCustomized && (config.value == "${remoteAddr}" || config.value == "${rawRemoteAddr}")) {
+			optionValue = config.value
+		}
+
 		return {
-			config: config
+			config: config,
+			options: [
+				{
+					name: "直接访问",
+					description: "用户可以直接访问边缘节点，即 \"用户 --> 边缘节点\" 模式。",
+					value: "${rawRemoteAddr}"
+				},
+				{
+					name: "代理转发",
+					description: "用户和边缘节点之间有别的代理服务转发，即 \"用户 --> [第三方代理服务] --> 边缘节点\"。",
+					value: "${remoteAddr}"
+				},
+				{
+					name: "[自定义]",
+					description: "",
+					value: ""
+				}
+			],
+			optionValue: optionValue
 		}
 	},
 	methods: {
 		isOn: function () {
 			return ((!this.vIsLocation && !this.vIsGroup) || this.config.isPrior) && this.config.isOn
+		},
+		changeOptionValue: function () {
+			if (this.optionValue.length > 0) {
+				this.config.value = this.optionValue
+				this.config.isCustomized = false
+			} else {
+				this.config.isCustomized = true
+			}
 		}
 	},
 	template: `<div>
@@ -36,10 +69,22 @@ Vue.component("http-remote-addr-config-box", {
 		</tbody>
 		<tbody v-show="isOn()">
 			<tr>
-				<td>请求变量</td>
+				<td>用户访问节点方式 *</td>
 				<td>
-					<input type="text" v-model="config.value" maxlength="100"/>
-					<p class="comment">通过此变量获取用户的IP地址。具体可用的请求变量列表可参考官方网站文档。</p>
+					<select class="ui dropdown auto-width" v-model="optionValue" @change="changeOptionValue">
+						<option v-for="option in options" :value="option.value">{{option.name}}</option>
+					</select>
+					<p class="comment" v-for="option in options" v-if="option.value == optionValue && option.description.length > 0">{{option.description}}</p>
+				</td>
+			</tr>
+			<tr v-show="optionValue.length == 0">
+				<td>读取IP变量值 *</td>
+				<td>
+					<input type="hidden" v-model="config.value" maxlength="100"/>
+					<div v-if="optionValue == ''" style="margin-top: 1em">
+						<input type="text" v-model="config.value" maxlength="100"/>
+						<p class="comment">通过此变量获取用户的IP地址。具体可用的请求变量列表可参考官方网站文档。</p>
+					</div>
 				</td>
 			</tr>
 		</tbody>