From 07cd615d8f6c41c317d4719de9de0ecd473dd99c Mon Sep 17 00:00:00 2001
From: GoEdgeLab <goedgecloud@gmail.com>
Date: Tue, 6 Dec 2022 22:32:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BA=BF=E8=B7=AF?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8C=BA=E5=9F=9F=E4=B9=8B=E9=97=B4=E5=85=B3?=
 =?UTF-8?q?=E7=B3=BB=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/components/ns/ns-route-ranges-box.js   | 52 ++++++++++++++++---
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/web/public/js/components/ns/ns-route-ranges-box.js b/web/public/js/components/ns/ns-route-ranges-box.js
index 93809415..b62aa953 100644
--- a/web/public/js/components/ns/ns-route-ranges-box.js
+++ b/web/public/js/components/ns/ns-route-ranges-box.js
@@ -26,7 +26,8 @@ Vue.component("ns-route-ranges-box", {
 
 			// region
 			regions: [],
-			regionType: "country"
+			regionType: "country",
+			regionConnector: "OR"
 		}
 	},
 	methods: {
@@ -68,6 +69,7 @@ Vue.component("ns-route-ranges-box", {
 			this.isAdding = false
 			this.regions = []
 			this.regionType = "country"
+			this.regionConnector = "OR"
 			this.isReverse = false
 		},
 		confirmIPRange: function () {
@@ -131,6 +133,7 @@ Vue.component("ns-route-ranges-box", {
 			}
 			this.ranges.push({
 				type: "region",
+				connector: this.regionConnector,
 				params: {
 					regions: this.regions,
 					isReverse: this.isReverse
@@ -362,10 +365,24 @@ Vue.component("ns-route-ranges-box", {
 			<span class="red" v-if="range.params.isReverse">[排除]</span>
 			<span v-if="range.type == 'ipRange'">IP范围：</span>
 			<span v-if="range.type == 'cidr'">CIDR：</span>
-			<span v-if="range.type == 'region'">区域：</span>
+			<span v-if="range.type == 'region'"></span>
 			<span v-if="range.type == 'ipRange'">{{range.params.ipFrom}} - {{range.params.ipTo}}</span>
 			<span v-if="range.type == 'cidr'">{{range.params.cidr}}</span>
-			<span v-if="range.type == 'region'"><span v-for="(region, index) in range.params.regions">{{region.name}}<span v-if="index < range.params.regions.length - 1">，</span></span></span>
+			<span v-if="range.type == 'region'">
+				<span v-for="(region, index) in range.params.regions">
+					<span v-if="region.type == 'country'">国家/地区</span>
+					<span v-if="region.type == 'province'">省份</span>
+					<span v-if="region.type == 'city'">城市</span>
+					<span v-if="region.type == 'provider'">ISP</span>
+					：{{region.name}}
+					<span v-if="index < range.params.regions.length - 1" class="grey">
+						&nbsp;
+						<span v-if="range.connector == 'OR' || range.connector == '' || range.connector == null">或</span>
+						<span v-if="range.connector == 'AND'">且</span>
+						&nbsp;
+					</span>
+				</span>
+			</span>
 			 &nbsp; <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
 		</div>
 		<div class="ui divider"></div>
@@ -488,9 +505,21 @@ Vue.component("ns-route-ranges-box", {
 				<tr>
 					<td>已添加</td>
 					<td>
-						<div v-for="(region, index) in regions" class="ui label small basic">
-							{{region.name}} <a href="" title="删除" @click.prevent="removeRegion(index)"><i class="icon remove small"></i></a>
-						</div>
+						<span v-for="(region, index) in regions">
+							<span class="ui label small basic">
+								<span v-if="region.type == 'country'">国家/地区</span>
+								<span v-if="region.type == 'province'">省份</span>
+								<span v-if="region.type == 'city'">城市</span>
+								<span v-if="region.type == 'provider'">ISP</span>
+								：{{region.name}} <a href="" title="删除" @click.prevent="removeRegion(index)"><i class="icon remove small"></i></a>
+							</span>
+							<span v-if="index < regions.length - 1" class="grey">
+								&nbsp;
+								<span v-if="regionConnector == 'OR' || regionConnector == ''">或</span>
+								<span v-if="regionConnector == 'AND'">且</span>
+								&nbsp;
+							</span>
+						</span>
 					</td>
 				</tr>
 				<tr>
@@ -526,6 +555,17 @@ Vue.component("ns-route-ranges-box", {
 						</div>
 					</td>	
 				</tr>
+				<tr>
+					<td>区域之间关系</td>
+					<td>
+						<select class="ui dropdown auto-width" v-model="regionConnector">
+							<option value="OR">或</option>
+							<option value="AND">且</option>
+						</select>
+						<p class="comment" v-if="regionConnector == 'OR'">匹配所选任一区域即认为匹配成功。</p>
+						<p class="comment" v-if="regionConnector == 'AND'">匹配所有所选区域才认为匹配成功。</p>
+					</td>
+				</tr>
 				<tr>
 					<td>排除</td>
 					<td>