支持更多的分组全局设置功能

2021-10-07 16:47:14 +08:00
parent 17b03ff76d
commit 39bf5c70bd
126 changed files with 3969 additions and 220 deletions
--- a/web/public/js/components/server/http-access-log-config-box.js
+++ b/web/public/js/components/server/http-access-log-config-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-access-log-config-box", {
-	props: ["v-access-log-config", "v-fields", "v-default-field-codes", "v-is-location"],
+	props: ["v-access-log-config", "v-fields", "v-default-field-codes", "v-is-location", "v-is-group"],
 	data: function () {
 		let that = this

@@ -47,9 +47,9 @@ Vue.component("http-access-log-config-box", {
 	},
 	template: `<div>
 	<input type="hidden" name="accessLogJSON" :value="JSON.stringify(accessLog)"/>
-	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="accessLog" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || accessLog.isPrior">
+	<table class="ui table definition selectable" :class="{'opacity-mask': this.accessLog.firewallOnly}">
+		<prior-checkbox :v-config="accessLog" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || accessLog.isPrior">
 			<tr>
 				<td class="title">是否开启访问日志存储</td>
 				<td>
@@ -61,7 +61,7 @@ Vue.component("http-access-log-config-box", {
 				</td>
 			</tr>
 		</tbody>
-		<tbody  v-show="(!vIsLocation || accessLog.isPrior) && accessLog.isOn">
+		<tbody  v-show="((!vIsLocation && !vIsGroup) || accessLog.isPrior) && accessLog.isOn">
 			<tr>
 				<td>要存储的访问日志字段</td>
 				<td>
@@ -99,7 +99,7 @@ Vue.component("http-access-log-config-box", {
 		</tbody>
 	</table>
 	
-	<div v-show="(!vIsLocation || accessLog.isPrior) && accessLog.isOn">
+	<div v-show="((!vIsLocation && !vIsGroup) || accessLog.isPrior) && accessLog.isOn">
        <h4>WAF相关</h4>
        <table class="ui table definition selectable">
            <tr>
--- a/web/public/js/components/server/http-cache-config-box.js
+++ b/web/public/js/components/server/http-cache-config-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-cache-config-box", {
-	props: ["v-cache-config", "v-is-location", "v-cache-policy"],
+	props: ["v-cache-config", "v-is-location", "v-is-group", "v-cache-policy"],
 	data: function () {
 		let cacheConfig = this.vCacheConfig
 		if (cacheConfig == null) {
@@ -16,15 +16,15 @@ Vue.component("http-cache-config-box", {
 	},
 	methods: {
 		isOn: function () {
-			return (!this.vIsLocation || this.cacheConfig.isPrior) && this.cacheConfig.isOn
+			return ((!this.vIsLocation && !this.vIsGroup) || this.cacheConfig.isPrior) && this.cacheConfig.isOn
 		}
 	},
 	template: `<div>
 	<input type="hidden" name="cacheJSON" :value="JSON.stringify(cacheConfig)"/>
 	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="cacheConfig" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || cacheConfig.isPrior">
-			<tr>
+		<prior-checkbox :v-config="cacheConfig" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || cacheConfig.isPrior">
+			<tr v-show="!vIsGroup">
 				<td>缓存策略</td>
 				<td>
 					<div v-if="vCachePolicy != null">{{vCachePolicy.name}} <link-icon :href="'/servers/components/cache/policy?cachePolicyId=' + vCachePolicy.id"></link-icon>
--- a/web/public/js/components/server/http-charsets-box.js
+++ b/web/public/js/components/server/http-charsets-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-charsets-box", {
-	props: ["v-usual-charsets", "v-all-charsets", "v-charset-config", "v-is-location"],
+	props: ["v-usual-charsets", "v-all-charsets", "v-charset-config", "v-is-location", "v-is-group"],
 	data: function () {
 		let charsetConfig = this.vCharsetConfig
 		if (charsetConfig == null) {
@@ -23,8 +23,8 @@ Vue.component("http-charsets-box", {
 	template: `<div>
 	<input type="hidden" name="charsetJSON" :value="JSON.stringify(charsetConfig)"/>
 	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="charsetConfig" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || charsetConfig.isPrior">
+		<prior-checkbox :v-config="charsetConfig" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || charsetConfig.isPrior">
 			<tr>
 				<td class="title">是否启用</td>
 				<td>
@@ -35,7 +35,7 @@ Vue.component("http-charsets-box", {
 				</td>
 			</tr>
 		</tbody>
-		<tbody v-show="(!vIsLocation || charsetConfig.isPrior) && charsetConfig.isOn">	
+		<tbody v-show="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn">	
 			<tr>
 				<td class="title">选择字符编码</td>
 				<td><select class="ui dropdown" style="width:20em" name="charset" v-model="charsetConfig.charset">
@@ -48,8 +48,8 @@ Vue.component("http-charsets-box", {
 				</td>
 			</tr>
 		</tbody>
-		<more-options-tbody @change="changeAdvancedVisible" v-if="(!vIsLocation || charsetConfig.isPrior) && charsetConfig.isOn"></more-options-tbody>
-		<tbody v-show="(!vIsLocation || charsetConfig.isPrior) && charsetConfig.isOn && advancedVisible">
+		<more-options-tbody @change="changeAdvancedVisible" v-if="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn"></more-options-tbody>
+		<tbody v-show="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn && advancedVisible">
 			<tr>
 				<td>字符编码是否大写</td>
 				<td>
--- a/web/public/js/components/server/http-compression-config-box.js
+++ b/web/public/js/components/server/http-compression-config-box.js
@@ -1,6 +1,6 @@
 // 压缩配置
 Vue.component("http-compression-config-box", {
-	props: ["v-compression-config", "v-is-location"],
+	props: ["v-compression-config", "v-is-location", "v-is-group"],
 	mounted: function () {
 		let that = this
 		sortLoad(function () {
@@ -92,7 +92,7 @@ Vue.component("http-compression-config-box", {
 	},
 	methods: {
 		isOn: function () {
-			return (!this.vIsLocation || this.config.isPrior) && this.config.isOn
+			return ((!this.vIsLocation && !this.vIsGroup) || this.config.isPrior) && this.config.isOn
 		},
 		changeExtensions: function (values) {
 			values.forEach(function (v, k) {
@@ -144,8 +144,8 @@ Vue.component("http-compression-config-box", {
 	template: `<div>
 	<input type="hidden" name="compressionJSON" :value="JSON.stringify(config)"/>
 	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="config" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || config.isPrior">
+		<prior-checkbox :v-config="config" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || config.isPrior">
 			<tr>
 				<td class="title">是否启用</td>
 				<td>
--- a/web/public/js/components/server/http-firewall-config-box.js
+++ b/web/public/js/components/server/http-firewall-config-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-firewall-config-box", {
-	props: ["v-firewall-config", "v-is-location", "v-firewall-policy"],
+	props: ["v-firewall-config", "v-is-location", "v-is-group", "v-firewall-policy"],
 	data: function () {
 		let firewall = this.vFirewallConfig
 		if (firewall == null) {
@@ -17,12 +17,12 @@ Vue.component("http-firewall-config-box", {
 	template: `<div>
 	<input type="hidden" name="firewallJSON" :value="JSON.stringify(firewall)"/>
 	<table class="ui table selectable definition">
-		<prior-checkbox :v-config="firewall" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || firewall.isPrior">
-			<tr>
+		<prior-checkbox :v-config="firewall" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || firewall.isPrior">
+			<tr v-show="!vIsGroup">
 				<td>WAF策略</td>
 				<td>
-					<div v-if="vFirewallPolicy != null">{{vFirewallPolicy.name}} <span v-if="vFirewallPolicy.modeInfo != null">&nbsp; <span :class="{green: vFirewallPolicy.modeInfo.code == 'defend', blue: vFirewallPolicy.modeInfo.code == 'observe', grey: vFirewallPolicy.modeInfo.code == 'pass'}">[{{vFirewallPolicy.modeInfo.name}}]</span>&nbsp;</span> <link-icon :href="'/servers/components/waf/policy?firewallPolicyId=' + vFirewallPolicy.id"></link-icon>
+					<div v-if="vFirewallPolicy != null">{{vFirewallPolicy.name}} <span v-if="vFirewallPolicy.modeInfo != null">&nbsp; <span :class="{green: vFirewallPolicy.modeInfo.code == 'defend', blue: vFirewallPolicy.modeInfo.code == 'observe', grey: vFirewallPolicy.modeInfo.code == 'bypass'}">[{{vFirewallPolicy.modeInfo.name}}]</span>&nbsp;</span> <link-icon :href="'/servers/components/waf/policy?firewallPolicyId=' + vFirewallPolicy.id"></link-icon>
 						<p class="comment">使用当前服务所在集群的设置。</p>
 					</div>
 					<span v-else class="red">当前集群没有设置WAF策略，当前配置无法生效。</span>
--- a/web/public/js/components/server/http-header-policy-box.js
+++ b/web/public/js/components/server/http-header-policy-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-header-policy-box", {
-	props: ["v-request-header-policy", "v-request-header-ref", "v-response-header-policy", "v-response-header-ref", "v-params", "v-is-location"],
+	props: ["v-request-header-policy", "v-request-header-ref", "v-response-header-policy", "v-response-header-ref", "v-params", "v-is-location", "v-is-group", "v-has-group-request-config", "v-has-group-response-config", "v-group-setting-url"],
 	data: function () {
 		let type = "request"
 		let hash = window.location.hash
@@ -127,7 +127,7 @@ Vue.component("http-header-policy-box", {
 	<input type="hidden" name="type" :value="type"/>
 	
 	<!-- 请求 -->
-	<div v-if="vIsLocation && type == 'request'">
+	<div v-if="(vIsLocation || vIsGroup) && type == 'request'">
 		<input type="hidden" name="requestHeaderJSON" :value="JSON.stringify(requestHeaderRef)"/>
 		<table class="ui table definition selectable">
 			<prior-checkbox :v-config="requestHeaderRef"></prior-checkbox>
@@ -135,41 +135,47 @@ Vue.component("http-header-policy-box", {
 		<submit-btn></submit-btn>
 	</div>
 	
-	<div v-if="(!vIsLocation || requestHeaderRef.isPrior) && type == 'request'">
+	<div v-if="((!vIsLocation && !vIsGroup) || requestHeaderRef.isPrior) && type == 'request'">
+		<div v-if="vHasGroupRequestConfig">
+        	<div class="margin"></div>
+        	<warning-message>由于已经在当前<a :href="vGroupSettingUrl + '#request'">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    	</div>
+    	<div :class="{'opacity-mask': vHasGroupRequestConfig}">
 		<h3>设置请求Header <a href="" @click.prevent="addSettingHeader(vRequestHeaderPolicy.id)">[添加新Header]</a></h3>
-		<p class="comment" v-if="requestSettingHeaders.length == 0">暂时还没有Header。</p>
-		<table class="ui table selectable celled" v-if="requestSettingHeaders.length > 0">
-			<thead>
-				<tr>
-					<th>名称</th>
-					<th>值</th>
-					<th class="two op">操作</th>
+			<p class="comment" v-if="requestSettingHeaders.length == 0">暂时还没有Header。</p>
+			<table class="ui table selectable celled" v-if="requestSettingHeaders.length > 0">
+				<thead>
+					<tr>
+						<th>名称</th>
+						<th>值</th>
+						<th class="two op">操作</th>
+					</tr>
+				</thead>
+				<tr v-for="header in requestSettingHeaders">
+					<td class="five wide">{{header.name}}</td>
+					<td>{{header.value}}</td>
+					<td><a href="" @click.prevent="updateSettingPopup(vRequestHeaderPolicy.id, header.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteHeader(vRequestHeaderPolicy.id, 'setHeader', header.id)">删除</a> </td>
 				</tr>
-			</thead>
-			<tr v-for="header in requestSettingHeaders">
-				<td class="five wide">{{header.name}}</td>
-				<td>{{header.value}}</td>
-				<td><a href="" @click.prevent="updateSettingPopup(vRequestHeaderPolicy.id, header.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteHeader(vRequestHeaderPolicy.id, 'setHeader', header.id)">删除</a> </td>
-			</tr>
-		</table>
-		
-		<h3>删除请求Header</h3>
-		<p class="comment">这里可以设置需要从请求中删除的Header。</p>
-		
-		<table class="ui table definition selectable">
-			<td class="title">需要删除的Header</td>
-			<td>
-				<div v-if="requestDeletingHeaders.length > 0">
-					<div class="ui label small basic" v-for="headerName in requestDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vRequestHeaderPolicy.id, headerName)"></i></a> </div>
-					<div class="ui divider" ></div>
-				</div>
-				<button class="ui button small" type="button" @click.prevent="addDeletingHeader(vRequestHeaderPolicy.id, 'request')">+</button>
-			</td>
-		</table>
+			</table>
+			
+			<h3>删除请求Header</h3>
+			<p class="comment">这里可以设置需要从请求中删除的Header。</p>
+			
+			<table class="ui table definition selectable">
+				<td class="title">需要删除的Header</td>
+				<td>
+					<div v-if="requestDeletingHeaders.length > 0">
+						<div class="ui label small basic" v-for="headerName in requestDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vRequestHeaderPolicy.id, headerName)"></i></a> </div>
+						<div class="ui divider" ></div>
+					</div>
+					<button class="ui button small" type="button" @click.prevent="addDeletingHeader(vRequestHeaderPolicy.id, 'request')">+</button>
+				</td>
+			</table>
+		</div>			
 	</div>
 	
 	<!-- 响应 -->
-	<div v-if="vIsLocation && type == 'response'">
+	<div v-if="(vIsLocation || vIsGroup) && type == 'response'">
 		<input type="hidden" name="responseHeaderJSON" :value="JSON.stringify(responseHeaderRef)"/>
 		<table class="ui table definition selectable">
 			<prior-checkbox :v-config="responseHeaderRef"></prior-checkbox>
@@ -177,38 +183,44 @@ Vue.component("http-header-policy-box", {
 		<submit-btn></submit-btn>
 	</div>
 	
-	<div v-if="type == 'response'">
-		<h3>设置响应Header <a href="" @click.prevent="addSettingHeader(vResponseHeaderPolicy.id)">[添加新Header]</a></h3>
-		<p class="comment" style="margin-top: 0; padding-top: 0">将会覆盖已有的同名Header。</p>
-		<p class="comment" v-if="responseSettingHeaders.length == 0">暂时还没有Header。</p>
-		<table class="ui table selectable celled" v-if="responseSettingHeaders.length > 0">
-			<thead>
-				<tr>
-					<th>名称</th>
-					<th>值</th>
-					<th class="two op">操作</th>
+	<div v-if="((!vIsLocation && !vIsGroup) || requestHeaderRef.isPrior) && type == 'response'">
+		<div v-if="vHasGroupResponseConfig">
+        	<div class="margin"></div>
+        	<warning-message>由于已经在当前<a :href="vGroupSettingUrl + '#response'">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    	</div>
+    	<div :class="{'opacity-mask': vHasGroupResponseConfig}">
+			<h3>设置响应Header <a href="" @click.prevent="addSettingHeader(vResponseHeaderPolicy.id)">[添加新Header]</a></h3>
+			<p class="comment" style="margin-top: 0; padding-top: 0">将会覆盖已有的同名Header。</p>
+			<p class="comment" v-if="responseSettingHeaders.length == 0">暂时还没有Header。</p>
+			<table class="ui table selectable celled" v-if="responseSettingHeaders.length > 0">
+				<thead>
+					<tr>
+						<th>名称</th>
+						<th>值</th>
+						<th class="two op">操作</th>
+					</tr>
+				</thead>
+				<tr v-for="header in responseSettingHeaders">
+					<td class="five wide">{{header.name}}</td>
+					<td>{{header.value}}</td>
+					<td><a href="" @click.prevent="updateSettingPopup(vResponseHeaderPolicy.id, header.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteHeader(vResponseHeaderPolicy.id, 'setHeader', header.id)">删除</a> </td>
 				</tr>
-			</thead>
-			<tr v-for="header in responseSettingHeaders">
-				<td class="five wide">{{header.name}}</td>
-				<td>{{header.value}}</td>
-				<td><a href="" @click.prevent="updateSettingPopup(vResponseHeaderPolicy.id, header.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteHeader(vResponseHeaderPolicy.id, 'setHeader', header.id)">删除</a> </td>
-			</tr>
-		</table>
-		
-		<h3>删除响应Header</h3>
-		<p class="comment">这里可以设置需要从响应中删除的Header。</p>
-		
-		<table class="ui table definition selectable">
-			<td class="title">需要删除的Header</td>
-			<td>
-				<div v-if="responseDeletingHeaders.length > 0">
-					<div class="ui label small basic" v-for="headerName in responseDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vResponseHeaderPolicy.id, headerName)"></i></a> </div>
-					<div class="ui divider" ></div>
-				</div>
-				<button class="ui button small" type="button" @click.prevent="addDeletingHeader(vResponseHeaderPolicy.id, 'response')">+</button>
-			</td>
-		</table>
+			</table>
+			
+			<h3>删除响应Header</h3>
+			<p class="comment">这里可以设置需要从响应中删除的Header。</p>
+			
+			<table class="ui table definition selectable">
+				<td class="title">需要删除的Header</td>
+				<td>
+					<div v-if="responseDeletingHeaders.length > 0">
+						<div class="ui label small basic" v-for="headerName in responseDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vResponseHeaderPolicy.id, headerName)"></i></a> </div>
+						<div class="ui divider" ></div>
+					</div>
+					<button class="ui button small" type="button" @click.prevent="addDeletingHeader(vResponseHeaderPolicy.id, 'response')">+</button>
+				</td>
+			</table>
+		</div>			
 	</div>
 	<div class="margin"></div>
 </div>`
--- a/web/public/js/components/server/http-remote-addr-config-box.js
+++ b/web/public/js/components/server/http-remote-addr-config-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-remote-addr-config-box", {
-	props: ["v-remote-addr-config", "v-is-location"],
+	props: ["v-remote-addr-config", "v-is-location", "v-is-group"],
 	data: function () {
 		let config = this.vRemoteAddrConfig
 		if (config == null) {
@@ -15,14 +15,14 @@ Vue.component("http-remote-addr-config-box", {
 	},
 	methods: {
 		isOn: function () {
-			return (!this.vIsLocation || this.config.isPrior) && this.config.isOn
+			return ((!this.vIsLocation && !this.vIsGroup) || this.config.isPrior) && this.config.isOn
 		}
 	},
 	template: `<div>
 	<input type="hidden" name="remoteAddrJSON" :value="JSON.stringify(config)"/>
 	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="config" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || config.isPrior">
+		<prior-checkbox :v-config="config" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || config.isPrior">
 			<tr>
 				<td class="title">是否启用</td>
 				<td>
--- a/web/public/js/components/server/http-stat-config-box.js
+++ b/web/public/js/components/server/http-stat-config-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-stat-config-box", {
-	props: ["v-stat-config", "v-is-location"],
+	props: ["v-stat-config", "v-is-location", "v-is-group"],
 	data: function () {
 		let stat = this.vStatConfig
 		if (stat == null) {
@@ -15,8 +15,8 @@ Vue.component("http-stat-config-box", {
 	template: `<div>
 	<input type="hidden" name="statJSON" :value="JSON.stringify(stat)"/>
 	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="stat" v-if="vIsLocation" ></prior-checkbox>
-		<tbody v-show="!vIsLocation || stat.isPrior">
+		<prior-checkbox :v-config="stat" v-if="vIsLocation || vIsGroup" ></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || stat.isPrior">
 			<tr>
 				<td class="title">是否开启统计</td>
 				<td>
--- a/web/public/js/components/server/http-web-root-box.js
+++ b/web/public/js/components/server/http-web-root-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-web-root-box", {
-	props: ["v-root-config", "v-is-location"],
+	props: ["v-root-config", "v-is-location", "v-is-group"],
 	data: function () {
 		let rootConfig = this.vRootConfig
 		if (rootConfig == null) {
@@ -38,14 +38,14 @@ Vue.component("http-web-root-box", {
 			this.rootConfig.indexes.$remove(i)
 		},
 		isOn: function () {
-			return (!this.vIsLocation || this.rootConfig.isPrior) && this.rootConfig.isOn
+			return ((!this.vIsLocation && !this.vIsGroup) || this.rootConfig.isPrior) && this.rootConfig.isOn
 		}
 	},
 	template: `<div>
 	<input type="hidden" name="rootJSON" :value="JSON.stringify(rootConfig)"/>
 	<table class="ui table selectable definition">
-		<prior-checkbox :v-config="rootConfig" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || rootConfig.isPrior">
+		<prior-checkbox :v-config="rootConfig" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || rootConfig.isPrior">
 			<tr>
 				<td class="title">是否开启静态资源分发</td>
 				<td>
--- a/web/public/js/components/server/http-webp-config-box.js
+++ b/web/public/js/components/server/http-webp-config-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-webp-config-box", {
-	props: ["v-webp-config", "v-is-location"],
+	props: ["v-webp-config", "v-is-location", "v-is-group"],
 	data: function () {
 		let config = this.vWebpConfig
 		if (config == null) {
@@ -43,7 +43,7 @@ Vue.component("http-webp-config-box", {
 	},
 	methods: {
 		isOn: function () {
-			return (!this.vIsLocation || this.config.isPrior) && this.config.isOn
+			return ((!this.vIsLocation && !this.vIsGroup) || this.config.isPrior) && this.config.isOn
 		},
 		changeExtensions: function (values) {
 			values.forEach(function (v, k) {
@@ -66,8 +66,8 @@ Vue.component("http-webp-config-box", {
 	template: `<div>
 	<input type="hidden" name="webpJSON" :value="JSON.stringify(config)"/>
 	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="config" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="!vIsLocation || config.isPrior">
+		<prior-checkbox :v-config="config" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="(!vIsLocation && !vIsGroup) || config.isPrior">
 			<tr>
 				<td class="title">是否启用</td>
 				<td>
--- a/web/public/js/components/server/http-websocket-box.js
+++ b/web/public/js/components/server/http-websocket-box.js
@@ -1,5 +1,5 @@
 Vue.component("http-websocket-box", {
-	props: ["v-websocket-ref", "v-websocket-config", "v-is-location"],
+	props: ["v-websocket-ref", "v-websocket-config", "v-is-location", "v-is-group"],
 	data: function () {
 		let websocketRef = this.vWebsocketRef
 		if (websocketRef == null) {
@@ -55,7 +55,7 @@ Vue.component("http-websocket-box", {
 	},
 	methods: {
 		isOn: function () {
-			return (!this.vIsLocation || this.websocketRef.isPrior) && this.websocketRef.isOn
+			return ((!this.vIsLocation && !this.vIsGroup) || this.websocketRef.isPrior) && this.websocketRef.isOn
 		},
 		changeAdvancedVisible: function (v) {
 			this.advancedVisible = v
@@ -77,8 +77,8 @@ Vue.component("http-websocket-box", {
 	<input type="hidden" name="websocketRefJSON" :value="JSON.stringify(websocketRef)"/>
 	<input type="hidden" name="websocketJSON" :value="JSON.stringify(websocketConfig)"/>
 	<table class="ui table definition selectable">
-		<prior-checkbox :v-config="websocketRef" v-if="vIsLocation"></prior-checkbox>
-		<tbody v-show="(!this.vIsLocation || this.websocketRef.isPrior)">
+		<prior-checkbox :v-config="websocketRef" v-if="vIsLocation || vIsGroup"></prior-checkbox>
+		<tbody v-show="((!vIsLocation && !vIsGroup) || websocketRef.isPrior)">
 			<tr>
 				<td class="title">是否启用配置</td>
 				<td>
--- a/web/public/js/components/server/prior-checkbox.js
+++ b/web/public/js/components/server/prior-checkbox.js
@@ -18,7 +18,7 @@ Vue.component("prior-checkbox", {
 				<input type="checkbox" v-model="isPrior"/>
 				<label class="red"></label>
 			</div>
-			<p class="comment"><strong v-if="isPrior">[已打开]</strong> 打开后可以覆盖父级配置。</p>
+			<p class="comment"><strong v-if="isPrior">[已打开]</strong> 打开后可以覆盖父级或子级配置。</p>
 		</td>
 	</tr>
 </tbody>`
--- a/web/views/@default/@layout.css
+++ b/web/views/@default/@layout.css
@@ -187,7 +187,7 @@ p.margin {
  margin-top: 1em;
 }
 .opacity-mask {
-  opacity: 0.6;
+  opacity: 0.3;
 }
 /** 操作按钮容器 **/
 .op.one {
--- a/web/views/@default/@layout.less
+++ b/web/views/@default/@layout.less
@@ -104,7 +104,7 @@ div.margin, p.margin {
 }

 .opacity-mask {
-	opacity: 0.6;
+	opacity: 0.3;
 }

 /** 操作按钮容器 **/
--- a/web/views/@default/servers/groups/group/settings/accessLog/index.html
+++ b/web/views/@default/servers/groups/group/settings/accessLog/index.html
@@ -0,0 +1,15 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="webId" :value="webId"/>
+		<http-access-log-config-box
+				:v-access-log-config="accessLogConfig"
+				:v-fields="fields"
+				:v-default-field-codes="defaultFieldCodes"
+                :v-is-group="true"></http-access-log-config-box>
+		<submit-btn></submit-btn>
+	</form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/accessLog/index.js
+++ b/web/views/@default/servers/groups/group/settings/accessLog/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/cache/@menu.html
+++ b/web/views/@default/servers/groups/group/settings/cache/@menu.html
@@ -0,0 +1,5 @@
+<first-menu>
+    <menu-item :href="'.?serverId=' + serverId" code="index">设置</menu-item>
+    <menu-item :href="'.purge?serverId=' + serverId" code="purge">清理</menu-item>
+    <menu-item :href="'.preheat?serverId=' + serverId" code="preheat">预热</menu-item>
+</first-menu>
--- a/web/views/@default/servers/groups/group/settings/cache/createPopup.html
+++ b/web/views/@default/servers/groups/group/settings/cache/createPopup.html
@@ -0,0 +1,11 @@
+{$layout "layout_popup"}
+
+<h3 v-if="!isReverse">添加缓存设置</h3>
+<h3 v-if="isReverse">添加不缓存设置</h3>
+<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+    <table class="ui table definition selectable">
+        <tbody is="http-cache-ref-box" :v-cache-ref="cacheRef" :v-is-reverse="isReverse"></tbody>
+    </table>
+    <p class="comment" v-if="isReverse">如果请求满足当前添加的条件，则不缓存。</p>
+    <submit-btn>确定</submit-btn>
+</form>
--- a/web/views/@default/servers/groups/group/settings/cache/createPopup.js
+++ b/web/views/@default/servers/groups/group/settings/cache/createPopup.js
@@ -0,0 +1,9 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+	this.cacheRef = null
+
+	if (window.parent.UPDATING_CACHE_REF != null) {
+		this.cacheRef = window.parent.UPDATING_CACHE_REF
+		this.isReverse = this.cacheRef.isReverse
+	}
+})
--- a/web/views/@default/servers/groups/group/settings/cache/index.html
+++ b/web/views/@default/servers/groups/group/settings/cache/index.html
@@ -0,0 +1,16 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="webId" :value="webId"/>
+		<http-cache-config-box
+                :v-cache-config="cacheConfig"
+                :v-cache-policy="cachePolicy"
+                :v-is-group="true"
+        ></http-cache-config-box>
+		<submit-btn></submit-btn>
+        <p class="comment">修改条件设置后请记得保存。</p>
+	</form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/cache/index.js
+++ b/web/views/@default/servers/groups/group/settings/cache/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/cache/preheat.html
+++ b/web/views/@default/servers/groups/group/settings/cache/preheat.html
@@ -0,0 +1,39 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "menu"}
+
+    <div class="margin"></div>
+    <div v-show="webConfig.cache == null || !webConfig.cache.isOn">
+        <p class="comment">没有开启缓存，不需要清理。</p>
+    </div>
+    <div v-show="webConfig.cache != null && webConfig.cache.isOn">
+        <p class="comment">可以在这里批量预热一组Key。</p>
+        <form method="post" class="ui form" data-tea-action="$" data-tea-before="before" data-tea-success="success" data-tea-fail="fail" data-tea-done="done" data-tea-timeout="3600">
+            <input type="hidden" name="serverId" :value="serverId"/>
+            <input type="hidden" name="webId" :value="webId"/>
+            <table class="ui table definition selectable">
+                <tr>
+                    <td>Key列表</td>
+                    <td>
+                        <textarea name="keys" rows="10" ref="focus"></textarea>
+                        <p class="comment">每行一个Key。</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="title">操作结果</td>
+                    <td>
+                        <div v-if="isRequesting">数据发送中...</div>
+                        <span class="red" v-if="!isRequesting && !isOk && message.length > 0">失败：{{message}}</span>
+                        <div v-if="!isRequesting && isOk">
+                            <span v-if="results.length == 0" class="red">此集群下没有任何可用的节点。</span>
+                            <div class="ui label tiny" v-for="one in results" :class="{green:one.isOk, red:!one.isOk}" style="margin-bottom: 0.5em">{{one.nodeName}}：{{one.message}}</div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+            <submit-btn v-if="!isRequesting">提交</submit-btn>
+        </form>
+    </div>
+</div>
--- a/web/views/@default/servers/groups/group/settings/cache/preheat.js
+++ b/web/views/@default/servers/groups/group/settings/cache/preheat.js
@@ -0,0 +1,26 @@
+Tea.context(function () {
+	this.isRequesting = false
+	this.isOk = false
+	this.message = ""
+	this.results = []
+
+	this.before = function () {
+		this.isRequesting = true
+		this.isOk = false
+		this.message = ""
+		this.results = []
+	}
+
+	this.success = function (resp) {
+		this.isOk = true
+		this.results = resp.data.results
+	}
+
+	this.fail = function (resp) {
+		this.message = resp.message
+	}
+
+	this.done = function () {
+		this.isRequesting = false
+	}
+});
--- a/web/views/@default/servers/groups/group/settings/cache/purge.html
+++ b/web/views/@default/servers/groups/group/settings/cache/purge.html
@@ -0,0 +1,51 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "menu"}
+
+    <div class="margin"></div>
+    <div v-show="webConfig.cache == null || !webConfig.cache.isOn">
+        <p class="comment">没有开启缓存，不需要清理。</p>
+    </div>
+    <div v-show="webConfig.cache != null && webConfig.cache.isOn">
+        <p class="comment">可以在这里批量删除一组Key。</p>
+
+        <form method="post" class="ui form" data-tea-action="$" data-tea-before="before" data-tea-success="success" data-tea-fail="fail" data-tea-done="done" data-tea-timeout="300">
+            <input type="hidden" name="serverId" :value="serverId"/>
+            <input type="hidden" name="webId" :value="webId"/>
+            <table class="ui table definition selectable">
+                <tr>
+                    <td class="title">操作类型</td>
+                    <td>
+                        <radio name="type" :v-value="'key'" v-model="type">根据Key</radio> &nbsp;
+                        <radio name="type" :v-value="'prefix'" v-model="type">根据前缀</radio>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span v-if="type == 'key'">Key列表</span>
+                        <span v-if="type == 'prefix'">Key前缀列表</span>
+                    </td>
+                    <td>
+                        <textarea name="keys" rows="10" ref="focus"></textarea>
+                        <p class="comment" v-if="type == 'key'">每行一个Key，比如是一个完整的URL<code-label>https://example.com/hello/world.html</code-label>。</p>
+                        <p class="comment" v-if="type == 'prefix'">每行一个Key前缀，比如是一个URL前缀<code-label>https://example.com/hello/</code-label>。</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td>操作结果</td>
+                    <td>
+                        <div v-if="isRequesting">数据发送中...</div>
+                        <span class="red" v-if="!isRequesting && !isOk && message.length > 0">失败：{{message}}</span>
+                        <div v-if="!isRequesting && isOk">
+                            <span v-if="results.length == 0" class="red">此集群下没有任何可用的节点。</span>
+                            <div class="ui label tiny" v-for="one in results" :class="{green:one.isOk, red:!one.isOk}" style="margin-bottom: 0.5em">{{one.nodeName}}：{{one.message}}</div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+            <submit-btn v-if="!isRequesting">提交</submit-btn>
+        </form>
+    </div>
+</div>
--- a/web/views/@default/servers/groups/group/settings/cache/purge.js
+++ b/web/views/@default/servers/groups/group/settings/cache/purge.js
@@ -0,0 +1,31 @@
+Tea.context(function () {
+	this.isRequesting = false
+	this.isOk = false
+	this.message = ""
+	this.results = []
+
+	this.before = function () {
+		this.isRequesting = true
+		this.isOk = false
+		this.message = ""
+		this.results = []
+	}
+
+	this.success = function (resp) {
+		this.isOk = true
+		this.results = resp.data.results
+	}
+
+	this.fail = function (resp) {
+		this.message = resp.message
+	}
+
+	this.done = function () {
+		this.isRequesting = false
+	}
+
+	/**
+	 * 操作类型
+	 */
+	this.type = "key" // key | prefix
+})
--- a/web/views/@default/servers/groups/group/settings/charset/index.html
+++ b/web/views/@default/servers/groups/group/settings/charset/index.html
@@ -0,0 +1,11 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="webId" :value="webId"/>
+		<http-charsets-box :v-usual-charsets="usualCharsets" :v-all-charsets="allCharsets" :v-charset-config="charsetConfig" :v-is-group="true"></http-charsets-box>
+		<submit-btn></submit-btn>
+	</form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/charset/index.js
+++ b/web/views/@default/servers/groups/group/settings/charset/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/compression/gzip/index.html
+++ b/web/views/@default/servers/groups/group/settings/compression/gzip/index.html
@@ -0,0 +1,15 @@
+{$layout}
+
+{$template "/left_menu"}
+
+<div class="right-box">
+	<form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
+		<input type="hidden" name="webId" :value="webId"/>
+		<input type="hidden" name="gzipId" :value="gzipConfig.id"/>
+
+		<http-gzip-box :v-gzip-ref="gzipRef" :v-gzip-config="gzipConfig"></http-gzip-box>
+
+		<div class="margin"></div>
+		<submit-btn></submit-btn>
+	</form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/compression/gzip/index.js
+++ b/web/views/@default/servers/groups/group/settings/compression/gzip/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/compression/index.html
+++ b/web/views/@default/servers/groups/group/settings/compression/index.html
@@ -0,0 +1,13 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+    <form class="ui form" data-tea-action="$" data-tea-success="success">
+        <csrf-token></csrf-token>
+        <input type="hidden" name="webId" :value="webId"/>
+
+        <http-compression-config-box :v-compression-config="compressionConfig" :v-is-group="true"></http-compression-config-box>
+        <submit-btn></submit-btn>
+    </form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/compression/index.js
+++ b/web/views/@default/servers/groups/group/settings/compression/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/headers/index.html
+++ b/web/views/@default/servers/groups/group/settings/headers/index.html
@@ -0,0 +1,16 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+    <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+        <input type="hidden" name="webId" :value="webId"/>
+	    <http-header-policy-box
+                :v-request-header-policy="requestHeaderPolicy"
+                :v-request-header-ref="requestHeaderRef"
+                :v-response-header-policy="responseHeaderPolicy"
+                :v-response-header-ref="responseHeaderRef"
+                :v-params="'groupId=' + group.id"
+    :v-is-group="true"></http-header-policy-box>
+    </form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/headers/index.js
+++ b/web/views/@default/servers/groups/group/settings/headers/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/remoteAddr/index.html
+++ b/web/views/@default/servers/groups/group/settings/remoteAddr/index.html
@@ -0,0 +1,16 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+    <form class="ui form" data-tea-action="$" data-tea-success="success">
+        <csrf-token></csrf-token>
+        <input type="hidden" name="webId" :value="webId"/>
+
+        <http-remote-addr-config-box
+                :v-remote-addr-config="remoteAddrConfig"
+                :v-is-group="true"></http-remote-addr-config-box>
+
+        <submit-btn></submit-btn>
+    </form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/remoteAddr/index.js
+++ b/web/views/@default/servers/groups/group/settings/remoteAddr/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/stat/index.html
+++ b/web/views/@default/servers/groups/group/settings/stat/index.html
@@ -0,0 +1,11 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="webId" :value="webId"/>
+		<http-stat-config-box :v-stat-config="statConfig" :v-is-group="true"></http-stat-config-box>
+		<submit-btn></submit-btn>
+	</form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/stat/index.js
+++ b/web/views/@default/servers/groups/group/settings/stat/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/waf/@menu.html
+++ b/web/views/@default/servers/groups/group/settings/waf/@menu.html
@@ -0,0 +1,11 @@
+<first-menu>
+    <menu-item :href="'/servers/server/settings/waf?serverId=' + serverId" code="index">设置</menu-item>
+    <menu-item :href="'/servers/server/settings/waf/groups?serverId=' + serverId + '&type=inbound&firewallPolicyId='+firewallPolicyId" code="inbound">入站规则</menu-item>
+    <menu-item :href="'/servers/server/settings/waf/groups?serverId=' + serverId + '&type=outbound&firewallPolicyId='+firewallPolicyId" code="outbound">出站规则</menu-item>
+    <span class="item disabled">|</span>
+    <menu-item :href="'/servers/server/settings/waf/ipadmin/countries?serverId=' + serverId + '&firewallPolicyId='+firewallPolicyId" code="country">国家/地区封禁</menu-item>
+    <menu-item :href="'/servers/server/settings/waf/ipadmin/provinces?serverId=' + serverId + '&firewallPolicyId='+firewallPolicyId" code="province">省份封禁</menu-item>
+    <menu-item :href="'/servers/server/settings/waf/ipadmin/allowList?serverId=' + serverId + '&firewallPolicyId='+firewallPolicyId" code="allowList">白名单</menu-item>
+    <menu-item :href="'/servers/server/settings/waf/ipadmin/denyList?serverId=' + serverId + '&firewallPolicyId='+firewallPolicyId" code="denyList">黑名单</menu-item>
+    <menu-item :href="'/servers/server/settings/waf/ipadmin/test?serverId=' + serverId + '&firewallPolicyId='+firewallPolicyId" code="test">IP检查</menu-item>
+</first-menu>
--- a/web/views/@default/servers/groups/group/settings/waf/group.html
+++ b/web/views/@default/servers/groups/group/settings/waf/group.html
@@ -0,0 +1,70 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "menu"}
+
+	<h3>分组<a href="" @click.prevent="updateGroup(group.id)">[修改]</a></h3>
+	<table class="ui table selectable definition">
+		<tr>
+			<td class="title">名称</td>
+			<td>{{group.name}}</td>
+		</tr>
+		<tr>
+			<td>描述</td>
+			<td>
+				<span v-if="group.description.length == 0" class="disabled">暂时还没有描述。</span>
+				<span v-if="group.description.length > 0">{{group.description}}</span>
+			</td>
+		</tr>
+		<tr>
+			<td>启用状态</td>
+			<td>
+				<label-on :v-is-on="group.isOn"></label-on>
+			</td>
+		</tr>
+	</table>
+
+	<h3 style="padding-top:0.8em">规则集<a href="" @click.prevent="createSet(group.id)">[添加规则集]</a> </h3>
+	<p class="comment" v-if="sets == null || sets.length == 0">暂时还没有规则。</p>
+	<table class="ui table selectable celled" id="sortable-table" v-if="sets != null && sets.length > 0">
+		<thead>
+			<tr>
+				<th style="width:3em"></th>
+				<th nowrap="">规则集名称</th>
+				<th nowrap="">规则</th>
+				<th nowrap="" class="center one wide">关系</th>
+				<th nowrap="">动作</th>
+				<th class="three op">操作</th>
+			</tr>
+		</thead>
+		<tbody v-for="set in sets" :data-set-id="set.id">
+		<tr>
+			<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
+            <td nowrap=""><a href="" @click.prevent="updateSet(set.id)"><span :class="{disabled:!set.isOn}">{{set.name}}</span></a>
+				<p style="margin-top:0.5em">
+					<label-on :v-is-on="set.isOn"></label-on>
+				</p>
+			</td>
+			<td class="rules-box">
+				<div v-for="rule in set.rules" style="margin-top: 0.4em;margin-bottom:0.4em">
+                    <http-firewall-rule-label :v-rule="rule"></http-firewall-rule-label>
+				</div>
+				<span class="ui disabled" v-if="set.rules.length == 0">暂时还没有规则</span>
+			</td>
+			<td class="center">
+                <span v-if="set.connector.toUpperCase() == 'OR'">或</span><span v-else>和</span>
+                <span class="small grey">({{set.connector.toUpperCase()}})</span>
+            </td>
+			<td nowrap="">
+                <http-firewall-actions-view :v-actions="set.actions"></http-firewall-actions-view>
+			</td>
+			<td>
+				<a href="" @click.prevent="updateSet(set.id)">修改</a> &nbsp; <a href="" @click.prevent="updateSetOn(set.id, false)" v-if="set.isOn">停用</a><a href="" @click.prevent="updateSetOn(set.id, true)" v-if="!set.isOn">启用</a> &nbsp; <a href="" @click.prevent="deleteSet(set.id)">删除</a>
+			</td>
+		</tr>
+		</tbody>
+	</table>
+
+	<p class="comment" v-if="group.sets != null && group.sets.length > 1">所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。</p>
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/group.js
+++ b/web/views/@default/servers/groups/group/settings/waf/group.js
@@ -0,0 +1,82 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+		sortTable(function () {
+			let setIds = []
+			document
+				.querySelectorAll("tbody[data-set-id]")
+				.forEach(function (v) {
+					setIds.push(v.getAttribute("data-set-id"))
+				})
+			that.$post("/servers/components/waf/sortSets")
+				.params({
+					groupId: that.group.id,
+					setIds: setIds
+				})
+				.success(function () {
+					teaweb.successToast("排序保存成功")
+				})
+		})
+	})
+
+	// 更改分组
+	this.updateGroup = function (groupId) {
+		teaweb.popup("/servers/components/waf/updateGroupPopup?groupId=" + groupId, {
+			height: "16em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					window.location.reload()
+				})
+			}
+		})
+	}
+
+	// 创建规则集
+	this.createSet = function (groupId) {
+		teaweb.popup("/servers/components/waf/createSetPopup?firewallPolicyId=" + this.firewallPolicyId + "&groupId=" + groupId + "&type=" + this.type, {
+			width: "50em",
+			height: "30em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					window.location.reload()
+				})
+			}
+		})
+	}
+
+	// 修改规则集
+	this.updateSet = function (setId) {
+		teaweb.popup("/servers/components/waf/updateSetPopup?firewallPolicyId=" + this.firewallPolicyId + "&groupId=" + this.group.id + "&type=" + this.type + "&setId=" + setId, {
+			width: "50em",
+			height: "30em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					window.location.reload()
+				})
+			}
+		})
+	}
+
+	// 停用|启用规则集
+	this.updateSetOn = function (setId, isOn) {
+		this.$post("/servers/components/waf/updateSetOn")
+			.params({
+				setId: setId,
+				isOn: isOn ? 1 : 0
+			})
+			.refresh()
+	}
+
+	// 删除规则集
+	this.deleteSet = function (setId) {
+		let that = this
+		teaweb.confirm("确定要删除此规则集吗？", function () {
+			that.$post("/servers/components/waf/deleteSet")
+				.params({
+					groupId: this.group.id,
+					setId: setId
+				})
+				.refresh()
+		})
+	}
+})
--- a/web/views/@default/servers/groups/group/settings/waf/groups.html
+++ b/web/views/@default/servers/groups/group/settings/waf/groups.html
@@ -0,0 +1,50 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "menu"}
+
+	<second-menu>
+		<a href="" class="item" @click.prevent="createGroup(type)">[添加分组]</a>
+	</second-menu>
+
+    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用]</a>后生效。</warning-message>
+
+	<p class="comment" v-if="groups.length == 0">暂时还没有规则分组。</p>
+
+	<table class="ui table selectable celled" v-if="groups.length > 0" id="sortable-table">
+		<thead>
+		<tr>
+			<th style="width:3em"></th>
+			<th>规则分组</th>
+			<th class="center">规则集</th>
+			<th class="three op">操作</th>
+		</tr>
+		</thead>
+		<tbody  v-for="group in groups" :data-group-id="group.id">
+			<tr>
+				<td style="text-align: center;"><i class="icon bars handle grey" title="拖动排序"></i> </td>
+                <td><a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + group.id"><span :class="{disabled:!group.isOn}">{{group.name}}</span></a>
+					<p class="comment" v-if="group.description.length > 0" style="padding-bottom:0">{{group.description}}</p>
+					<p style="margin-top: 0.5em">
+						<span v-if="group.isOn" class="ui label tiny basic green">启用</span>
+						<span v-if="!group.isOn" class="ui label tiny basic red">停用</span>
+						<span v-if="group.code.length > 0" class="ui label basic tiny">预置</span>
+						<span v-if="group.code.length == 0" class="ui label basic tiny">自定义</span>
+					</p>
+				</td>
+				<td class="center">
+					<a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + group.id">{{group.countSets}}</a>
+				</td>
+				<td>
+					<a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + group.id">详情</a> &nbsp;
+					<a href="" v-if="!group.isOn" @click.prevent="enableGroup(group.id)">启用</a><a href="" v-if="group.isOn" @click.prevent="disableGroup(group.id)">停用</a> &nbsp;
+					<a href="" @click.prevent="deleteGroup(group.id)" v-if="group.canDelete">删除</a>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+
+	<p class="comment" v-if="groups.length > 0">所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。</p>
+
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/groups.js
+++ b/web/views/@default/servers/groups/group/settings/waf/groups.js
@@ -0,0 +1,68 @@
+Tea.context(function () {
+	// 排序
+	this.$delay(function () {
+		let that = this
+		sortTable(function () {
+			let groupIds = []
+			document.querySelectorAll("tbody[data-group-id]")
+				.forEach(function (v) {
+					groupIds.push(v.getAttribute("data-group-id"))
+				})
+
+			that.$post("/servers/components/waf/sortGroups")
+				.params({
+					firewallPolicyId: that.firewallPolicyId,
+					type: that.type,
+					groupIds: groupIds
+				})
+				.success(function () {
+					teaweb.successToast("排序保存成功")
+				})
+		})
+	})
+
+	// 启用
+	this.enableGroup = function (groupId) {
+		this.$post("/servers/components/waf/updateGroupOn")
+			.params({
+				groupId: groupId,
+				isOn: 1
+			})
+			.refresh()
+
+	}
+
+	// 停用
+	this.disableGroup = function (groupId) {
+		this.$post("/servers/components/waf/updateGroupOn")
+			.params({
+				groupId: groupId,
+				isOn: 0
+			})
+			.refresh()
+	}
+
+	// 删除
+	this.deleteGroup = function (groupId) {
+		teaweb.confirm("确定要删除此规则分组吗？", function () {
+			this.$post("/servers/components/waf/deleteGroup")
+				.params({
+					firewallPolicyId: this.firewallPolicyId,
+					groupId: groupId
+				})
+				.refresh()
+		})
+	}
+
+	// 添加分组
+	this.createGroup = function (type) {
+		teaweb.popup("/servers/components/waf/createGroupPopup?firewallPolicyId=" + this.firewallPolicyId + "&type=" + type, {
+			height: "16em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					window.location.reload()
+				})
+			}
+		})
+	}
+})
--- a/web/views/@default/servers/groups/group/settings/waf/index.html
+++ b/web/views/@default/servers/groups/group/settings/waf/index.html
@@ -0,0 +1,11 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+    <form method="post" class="ui form" data-tea-action="$"  data-tea-success="success">
+        <input type="hidden" name="webId" :value="webId"/>
+        <http-firewall-config-box :v-firewall-config="firewallConfig" :v-firewall-policy="firewallPolicy" :v-is-group="true"></http-firewall-config-box>
+        <submit-btn></submit-btn>
+    </form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/index.js
+++ b/web/views/@default/servers/groups/group/settings/waf/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/allowList.html
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/allowList.html
@@ -0,0 +1,25 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "../menu"}
+
+    <warning-message v-if="!featureIsOn">尚未为当前用户开通此功能。</warning-message>
+
+    {$ if .featureIsOn}
+    <second-menu>
+        <menu-item @click.prevent="createIP('white')">添加IP</menu-item>
+        <span class="item">|</span>
+        <div class="item"><ip-list-bind-box :v-http-firewall-policy-id="firewallPolicyId" :v-type="'white'"></ip-list-bind-box></div>
+        <span class="item">|</span>
+        <span class="item">ID: {{listId}} &nbsp; <tip-icon content="ID可以用于使用API操作此IP名单"></tip-icon></span>
+    </second-menu>
+
+    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用]</a>后生效。</warning-message>
+
+    <p class="comment" v-if="items.length == 0">暂时还没有IP。</p>
+    <ip-list-table v-if="items.length > 0" :v-items="items" @update-item="updateItem" @delete-item="deleteItem"></ip-list-table>
+
+    <div class="page" v-html="page"></div>
+    {$end}
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/allowList.js
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/allowList.js
@@ -0,0 +1,38 @@
+Tea.context(function () {
+	this.updateItem = function (itemId) {
+		teaweb.popup(Tea.url(".updateIPPopup?listId=" + this.listId, {itemId: itemId}), {
+			height: "26em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
+	this.deleteItem = function (itemId) {
+		let that = this
+		teaweb.confirm("确定要删除这个IP吗？", function () {
+			that.$post(".deleteIP")
+				.params({
+					"listId": this.listId,
+					"itemId": itemId
+				})
+				.refresh()
+		})
+	}
+
+	/**
+	 * 添加IP名单菜单
+	 */
+	this.createIP = function (type) {
+		teaweb.popup("/servers/iplists/createIPPopup?listId=" + this.listId + '&type=' + type, {
+			height: "26em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+})
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.css
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.css
@@ -0,0 +1,16 @@
+.region-letter-group .item {
+  padding-left: 1em !important;
+  padding-right: 1em !important;
+}
+.country-group {
+  padding-bottom: 1em;
+}
+.country-group .country-list .item {
+  float: left;
+  width: 12em;
+  margin-bottom: 0.5em;
+}
+.country-group .country-list .item .checkbox label {
+  font-size: 12px !important;
+}
+/*# sourceMappingURL=countries.css.map */
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.css.map
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["countries.less"],"names":[],"mappings":"AAAA,oBACC;EACC,4BAAA;EACA,6BAAA;;AAIF;EAaC,mBAAA;;AAbD,cACC,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AALH,cACC,cACC,MAKC,UAAU;EACT,0BAAA","file":"countries.css"}
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.html
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.html
@@ -0,0 +1,59 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "../menu"}
+
+    <warning-message v-if="!featureIsOn">尚未为当前用户开通此功能。</warning-message>
+
+    {$ if .featureIsOn}
+    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用]</a>后生效。</warning-message>
+
+	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
+		<table class="ui table selectable definition">
+			<tr>
+				<td class="title">已封禁</td>
+				<td>
+					<span v-if="countSelectedCountries == 0" class="disabled">暂时没有选择封禁区域。</span>
+					<div class="ui label tiny basic" v-for="country in countries" v-if="country.isChecked" style="margin-bottom: 0.5em">
+						<input type="hidden" name="countryIds" :value="country.id"/>
+						({{country.letter}}){{country.name}} <a href="" @click.prevent="deselectCountry(country)" title="取消封禁"><i class="icon remove"></i></a>
+					</div>
+				</td>
+			</tr>
+			<tr>
+				<td>选择封禁区域</td>
+				<td>
+					<more-options-indicator>选择区域</more-options-indicator>
+
+					<div class="ui menu tabular tiny region-letter-group" v-show="moreOptionsVisible">
+						<a href="" v-for="group in letterGroups" class="item" :class="{active: group == selectedGroup}" @click.prevent="selectGroup(group)">{{group}}</a>
+						<div class="item right">
+							<div class="ui checkbox" @click.prevent="checkAll">
+								<input type="checkbox" v-model="isCheckingAll"/>
+								<label>全选</label>
+							</div>
+						</div>
+					</div>
+					<div v-for="group in letterGroups"  v-show="moreOptionsVisible">
+						<div v-for="letter in group" v-if="letterCountries[letter] != null && group == selectedGroup" class="country-group">
+							<h4>{{letter}}</h4>
+							<div class="country-list">
+								<div class="item" v-for="country in letterCountries[letter]">
+									<div class="ui checkbox" @click.prevent="selectCountry(country)">
+										<input type="checkbox" v-model="country.isChecked"/>
+										<label>{{country.name}}</label>
+									</div>
+								</div>
+							</div>
+							<div class="clear"></div>
+						</div>
+					</div>
+				</td>
+			</tr>
+		</table>
+		<submit-btn></submit-btn>
+	</form>
+    {$end}
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.js
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.js
@@ -0,0 +1,54 @@
+Tea.context(function () {
+	this.letterGroups = [
+		"ABC", "DEF", "GHI", "JKL", "MNO", "PQR", "STU", "VWX", "YZ"
+	];
+	this.selectedGroup = "ABC"
+	this.letterCountries = {}
+	let that = this
+	this.countSelectedCountries = this.countries.$count(function (k, country) {
+		return country.isChecked
+	})
+	this.countries.forEach(function (country) {
+		if (typeof (that.letterCountries[country.letter]) == "undefined") {
+			that.letterCountries[country.letter] = []
+		}
+		that.letterCountries[country.letter].push(country)
+	})
+	this.isCheckingAll = false
+
+	this.selectGroup = function (group) {
+		this.selectedGroup = group
+	}
+
+	this.selectCountry = function (country) {
+		country.isChecked = !country.isChecked
+		this.change()
+	}
+
+	this.deselectCountry = function (country) {
+		country.isChecked = false
+		this.change()
+	}
+
+	this.checkAll = function () {
+		this.isCheckingAll = !this.isCheckingAll
+
+		this.countries.forEach(function (country) {
+			country.isChecked = that.isCheckingAll
+		})
+
+		this.change()
+	}
+
+	this.success = function () {
+		teaweb.success("保存成功", function () {
+			teaweb.reload()
+		})
+	}
+
+	this.change = function () {
+		this.countSelectedCountries = this.countries.$count(function (k, country) {
+			return country.isChecked
+		})
+	}
+})
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.less
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/countries.less
@@ -0,0 +1,22 @@
+.region-letter-group {
+	.item {
+		padding-left: 1em !important;
+		padding-right: 1em !important;
+	}
+}
+
+.country-group {
+	.country-list {
+		.item {
+			float: left;
+			width: 12em;
+			margin-bottom: 0.5em;
+
+			.checkbox label {
+				font-size: 12px !important;
+			}
+		}
+	}
+
+	padding-bottom: 1em;
+}
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/denyList.html
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/denyList.html
@@ -0,0 +1,25 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "../menu"}
+
+    <warning-message v-if="!featureIsOn">尚未为当前用户开通此功能。</warning-message>
+
+    {$ if .featureIsOn}
+    <second-menu>
+        <menu-item @click.prevent="createIP('black')">添加IP</menu-item>
+        <span class="item">|</span>
+        <div class="item"><ip-list-bind-box :v-http-firewall-policy-id="firewallPolicyId" :v-type="'black'"></ip-list-bind-box></div>
+        <span class="item">|</span>
+        <span class="item">ID: {{listId}} &nbsp; <tip-icon content="ID可以用于使用API操作此IP名单"></tip-icon></span>
+    </second-menu>
+
+    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用]</a>后生效。</warning-message>
+
+    <p class="comment" v-if="items.length == 0">暂时还没有IP。</p>
+    <ip-list-table v-if="items.length > 0" :v-items="items" @update-item="updateItem" @delete-item="deleteItem"></ip-list-table>
+
+    <div class="page" v-html="page"></div>
+    {$end}
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/denyList.js
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/denyList.js
@@ -0,0 +1,38 @@
+Tea.context(function () {
+	this.updateItem = function (itemId) {
+		teaweb.popup(Tea.url(".updateIPPopup?listId=" + this.listId, {itemId: itemId}), {
+			height: "26em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
+	this.deleteItem = function (itemId) {
+		let that = this
+		teaweb.confirm("确定要删除这个IP吗？", function () {
+			that.$post(".deleteIP")
+				.params({
+					"listId": this.listId,
+					"itemId": itemId
+				})
+				.refresh()
+		})
+	}
+
+	/**
+	 * 添加IP名单菜单
+	 */
+	this.createIP = function (type) {
+		teaweb.popup("/servers/iplists/createIPPopup?listId=" + this.listId + '&type=' + type, {
+			height: "26em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+})
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.css
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.css
@@ -0,0 +1,9 @@
+.province-list .item {
+  float: left;
+  width: 12em;
+  margin-bottom: 0.5em;
+}
+.province-list .item .checkbox label {
+  font-size: 12px !important;
+}
+/*# sourceMappingURL=provinces.css.map */
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.css.map
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["provinces.less"],"names":[],"mappings":"AAAA,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AAJF,cACC,MAKC,UAAU;EACT,0BAAA","file":"provinces.css"}
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.html
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.html
@@ -0,0 +1,54 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "../menu"}
+
+    <warning-message v-if="!featureIsOn">尚未为当前用户开通此功能。</warning-message>
+
+    {$ if .featureIsOn}
+    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用]</a>后生效。</warning-message>
+
+	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
+		<table class="ui table selectable definition">
+			<tr>
+				<td class="title">已封禁</td>
+				<td>
+					<span v-if="countSelectedProvinces == 0" class="disabled">暂时没有选择封禁省份。</span>
+					<div class="ui label tiny basic" v-for="province in provinces" v-if="province.isChecked" style="margin-bottom: 0.5em">
+						<input type="hidden" name="provinceIds" :value="province.id"/>
+						{{province.name}} <a href="" @click.prevent="deselectProvince(province)" title="取消封禁"><i class="icon remove"></i></a>
+					</div>
+				</td>
+			</tr>
+			<tr>
+				<td>选择封禁区域</td>
+				<td>
+
+					<first-menu>
+						<menu-item><more-options-indicator>选择省份/自治区</more-options-indicator></menu-item>
+						<div class="item right" v-show="moreOptionsVisible">
+							<div class="ui checkbox" @click.prevent="checkAll">
+								<input type="checkbox" v-model="isCheckingAll"/>
+								<label>全选</label>
+							</div>
+						</div>
+					</first-menu>
+
+					<div class="province-list" v-show="moreOptionsVisible" style="margin-top:0.5em">
+						<div class="item" v-for="province in provinces">
+							<div class="ui checkbox" @click.prevent="selectProvince(province)">
+								<input type="checkbox" v-model="province.isChecked"/>
+								<label>{{province.name}}</label>
+							</div>
+						</div>
+					</div>
+					<div class="clear"></div>
+				</td>
+			</tr>
+		</table>
+		<submit-btn></submit-btn>
+	</form>
+    {$end}
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.js
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.js
@@ -0,0 +1,40 @@
+Tea.context(function () {
+	this.isCheckingAll = false
+
+	this.countSelectedProvinces = this.provinces.$count(function (k, province) {
+		return province.isChecked
+	})
+
+	this.selectProvince = function (province) {
+		province.isChecked = !province.isChecked
+		this.change()
+	}
+
+	this.deselectProvince = function (province) {
+		province.isChecked = false
+		this.change()
+	}
+
+	this.checkAll = function () {
+		this.isCheckingAll = !this.isCheckingAll
+		let that = this
+		this.provinces.forEach(function (province) {
+			province.isChecked = that.isCheckingAll
+		})
+
+		this.change()
+	}
+
+	this.success = function () {
+		teaweb.success("保存成功", function () {
+			teaweb.reload()
+		})
+	}
+
+
+	this.change = function () {
+		this.countSelectedProvinces = this.provinces.$count(function (k, province) {
+			return province.isChecked
+		})
+	}
+})
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.less
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/provinces.less
@@ -0,0 +1,11 @@
+.province-list {
+	.item {
+		float: left;
+		width: 12em;
+		margin-bottom: 0.5em;
+
+		.checkbox label {
+			font-size: 12px !important;
+		}
+	}
+}
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/test.html
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/test.html
@@ -0,0 +1,55 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+    {$template "../menu"}
+
+    <warning-message v-if="!featureIsOn">尚未为当前用户开通此功能。</warning-message>
+
+    {$ if .featureIsOn}
+    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用]</a>后生效。</warning-message>
+
+	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
+		<table class="ui table selectable definition">
+			<tr>
+                <td class="title">IP *</td>
+                <td>
+                    <input type="text" name="ip" class="text" maxlength="100" ref="focus" placeholder="x.x.x.x" v-model="ip"/>
+                    <p class="comment">要检查的IP</p>
+                </td>
+            </tr>
+            <tr>
+                <td>检查结果</td>
+                <td>
+                    <div v-if="result.isDone">
+                        <div v-if="!result.isOk">
+                            <span class="red">{{result.error}}</span>
+                        </div>
+                        <div v-if="result.isFound">
+                            <div v-if="result.item != null">
+                                <div v-if="result.isAllowed">
+                                    <span class="green">在白名单中 <ip-item-text :v-item="result.item"></ip-item-text>&nbsp;<a href="" @click.prevent="updateItem(result.list.id, result.item.id)" title="查看和修改"><i class="icon pencil small"></i></a></span>
+                                </div>
+                                <div v-else>
+                                    <span class="red">在黑名单中 <ip-item-text :v-item="result.item"></ip-item-text>&nbsp;<a href="" @click.prevent="updateItem(result.list.id, result.item.id)" title="查看和修改"><i class="icon pencil small"></i></a></span>
+                                </div>
+                            </div>
+                            <div v-if="result.province != null">
+                                <span class="red">在省份封禁中 "{{result.province.name}}"</span>
+                            </div>
+                            <div v-if="result.country != null && result.province == null">
+                                <span class="red">在国家/地区封禁中 "{{result.country.name}}"</span>
+                            </div>
+                        </div>
+                        <div v-if="!result.isFound">
+                            没有找到和{{ip}}匹配的配置。
+                        </div>
+                    </div>
+                </td>
+            </tr>
+		</table>
+		<submit-btn>检查IP状态</submit-btn>
+	</form>
+    {$end}
+</div>
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/test.js
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/test.js
@@ -0,0 +1,35 @@
+Tea.context(function () {
+    this.ip = ""
+    this.result = {
+        isDone: false,
+        isOk: false,
+        isFound: false,
+        isAllowed: false,
+        error: "",
+        province: null,
+        country: null,
+        ipItem: null,
+        ipList: null
+    }
+
+    this.$delay(function () {
+        this.$watch("ip", function () {
+            this.result.isDone = false
+        })
+    })
+
+    this.success = function (resp) {
+        this.result = resp.data.result
+    }
+
+    this.updateItem = function (listId, itemId) {
+        teaweb.popup(Tea.url(".updateIPPopup?listId=" + listId, {itemId: itemId}), {
+            height: "26em",
+            callback: function () {
+                teaweb.success("保存成功", function () {
+
+                })
+            }
+        })
+    }
+})
--- a/web/views/@default/servers/groups/group/settings/waf/ipadmin/updateIPPopup.html
+++ b/web/views/@default/servers/groups/group/settings/waf/ipadmin/updateIPPopup.html
@@ -0,0 +1,77 @@
+{$layout "layout_popup"}
+
+<h3>修改IP</h3>
+
+<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+	<input type="hidden" name="itemId" :value="item.id"/>
+    <input type="hidden" name="type" :value="item.type"/>
+	<csrf-token></csrf-token>
+	<table class="ui table definition selectable">
+        <tr>
+            <td class="title">类型 *</td>
+            <td>
+                <!-- 类型不允许修改 -->
+                <span v-if="item.type == 'ipv4'">IPv4</span>
+                <span v-if="item.type == 'ipv6'">IPv6</span>
+                <span v-if="item.type == 'all'">所有IP</span>
+
+                <p class="comment" v-if="type == 'ipv4'">单个IPv4或一个IPv4范围。</p>
+                <p class="comment" v-if="type == 'ipv6'">单个IPv6。</p>
+                <p class="comment" v-if="type == 'all'">允许或禁用所有的IP。</p>
+            </td>
+        </tr>
+
+        <!-- IPv4 -->
+        <tbody v-if="type == 'ipv4'">
+            <tr>
+                <td>开始IP *</td>
+                <td>
+                    <input type="text" name="ipFrom" maxlength="64" placeholder="x.x.x.x" ref="focus" v-model="item.ipFrom"/>
+                </td>
+            </tr>
+            <tr>
+                <td>结束IP</td>
+                <td>
+                    <input type="text" name="ipTo" maxlength="64" placeholder="x.x.x.x" v-model="item.ipTo"/>
+                    <p class="comment">表示IP段的时候需要填写此项。</p>
+                </td>
+            </tr>
+        </tbody>
+
+        <!-- IPv6 -->
+        <tbody v-if="type == 'ipv6'">
+            <tr>
+                <td>IP *</td>
+                <td>
+                    <input type="text" name="ipFrom" maxlength="64" placeholder="x:x:x:x:x:x:x:x" ref="focus" v-model="item.ipFrom"/>
+                    <p class="comment">IPv6地址，比如 1406:3c00:0:2409:13:58:103:15</p>
+                </td>
+            </tr>
+        </tbody>
+
+        <tr>
+            <td>级别</td>
+            <td>
+                <firewall-event-level-options :v-value="item.eventLevel"></firewall-event-level-options>
+            </td>
+        </tr>
+
+        <tr>
+			<td colspan="2"><more-options-indicator></more-options-indicator></td>
+		</tr>
+		<tbody v-show="moreOptionsVisible">
+			<tr>
+				<td>过期时间</td>
+				<td>
+					<datetime-input :v-name="'expiredAt'" :v-timestamp="item.expiredAt"></datetime-input>
+					<p class="comment">在加入名单某一段时间后会失效，留空表示永久有效。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>备注</td>
+				<td><input type="text" name="reason" maxlength="100" v-model="item.reason"/></td>
+			</tr>
+		</tbody>
+	</table>
+	<submit-btn></submit-btn>
+</form>
--- a/web/views/@default/servers/groups/group/settings/web/index.html
+++ b/web/views/@default/servers/groups/group/settings/web/index.html
@@ -0,0 +1,11 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+	<form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
+		<input type="hidden" name="webId" :value="webId"/>
+		<http-web-root-box :v-root-config="rootConfig" :v-is-group="true"></http-web-root-box>
+		<submit-btn></submit-btn>
+	</form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/web/index.js
+++ b/web/views/@default/servers/groups/group/settings/web/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/webp/index.html
+++ b/web/views/@default/servers/groups/group/settings/webp/index.html
@@ -0,0 +1,14 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+    <form class="ui form" data-tea-action="$" data-tea-success="success">
+        <csrf-token></csrf-token>
+        <input type="hidden" name="webId" :value="webId"/>
+
+        <http-webp-config-box :v-webp-config="webpConfig" :v-is-group="true"></http-webp-config-box>
+
+        <submit-btn></submit-btn>
+    </form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/webp/index.js
+++ b/web/views/@default/servers/groups/group/settings/webp/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/groups/group/settings/websocket/index.html
+++ b/web/views/@default/servers/groups/group/settings/websocket/index.html
@@ -0,0 +1,11 @@
+{$layout}
+{$template "/servers/groups/group/menu"}
+{$template "/left_menu_without_menu"}
+
+<div class="right-box without-menu">
+	<form method="post" class="ui form" data-tea-action="$"  data-tea-success="success">
+		<input type="hidden" name="webId" :value="webId"/>
+		<http-websocket-box :v-websocket-ref="websocketRef" :v-websocket-config="websocketConfig" :v-is-group="true"></http-websocket-box>
+		<submit-btn></submit-btn>
+	</form>
+</div>
--- a/web/views/@default/servers/groups/group/settings/websocket/index.js
+++ b/web/views/@default/servers/groups/group/settings/websocket/index.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/server/settings/cache/index.html
+++ b/web/views/@default/servers/server/settings/cache/index.html
@@ -4,10 +4,17 @@
 <div class="right-box">
    {$template "menu"}

-	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
-		<input type="hidden" name="webId" :value="webId"/>
-		<http-cache-config-box :v-cache-config="cacheConfig" :v-cache-policy="cachePolicy"></http-cache-config-box>
-		<submit-btn></submit-btn>
-        <p class="comment">修改条件设置后请记得保存。</p>
-	</form>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>
+
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+            <input type="hidden" name="webId" :value="webId"/>
+            <http-cache-config-box :v-cache-config="cacheConfig" :v-cache-policy="cachePolicy"></http-cache-config-box>
+            <submit-btn></submit-btn>
+            <p class="comment">修改条件设置后请记得保存。</p>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/charset/index.html
+++ b/web/views/@default/servers/server/settings/charset/index.html
@@ -3,9 +3,16 @@
 {$template "/left_menu"}

 <div class="right-box">
-	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
-		<input type="hidden" name="webId" :value="webId"/>
-		<http-charsets-box :v-usual-charsets="usualCharsets" :v-all-charsets="allCharsets" :v-charset-config="charsetConfig"></http-charsets-box>
-		<submit-btn></submit-btn>
-	</form>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>
+
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+            <input type="hidden" name="webId" :value="webId"/>
+            <http-charsets-box :v-usual-charsets="usualCharsets" :v-all-charsets="allCharsets" :v-charset-config="charsetConfig"></http-charsets-box>
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/compression/index.html
+++ b/web/views/@default/servers/server/settings/compression/index.html
@@ -2,11 +2,18 @@
 {$template "/left_menu"}

 <div class="right-box">
-    <form class="ui form" data-tea-action="$" data-tea-success="success">
-        <csrf-token></csrf-token>
-        <input type="hidden" name="webId" :value="webId"/>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>

-        <http-compression-config-box :v-compression-config="compressionConfig"></http-compression-config-box>
-        <submit-btn></submit-btn>
-    </form>
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form class="ui form" data-tea-action="$" data-tea-success="success">
+            <csrf-token></csrf-token>
+            <input type="hidden" name="webId" :value="webId"/>
+
+            <http-compression-config-box :v-compression-config="compressionConfig"></http-compression-config-box>
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/headers/createSetPopup.html
+++ b/web/views/@default/servers/server/settings/headers/createSetPopup.html
@@ -2,7 +2,6 @@
 <h3>设置Header</h3>

 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
-	<input type="hidden" name="serverId" :value="serverId"/>
 	<input type="hidden" name="headerPolicyId" :value="headerPolicyId"/>
 	<table class="ui table definition selectable">
 		<tr>
--- a/web/views/@default/servers/server/settings/headers/index.html
+++ b/web/views/@default/servers/server/settings/headers/index.html
@@ -3,5 +3,11 @@
 {$template "/left_menu"}

 <div class="right-box">
-	<http-header-policy-box :v-request-header-policy="requestHeaderPolicy" :v-response-header-policy="responseHeaderPolicy" :v-params="'serverId=' + serverId"></http-header-policy-box>
+	<http-header-policy-box
+            :v-request-header-policy="requestHeaderPolicy"
+            :v-response-header-policy="responseHeaderPolicy"
+            :v-params="'serverId=' + serverId"
+            :v-has-group-request-config="hasGroupRequestConfig"
+            :v-has-group-response-config="hasGroupResponseConfig"
+            :v-group-setting-url="groupSettingURL"></http-header-policy-box>
 </div>
--- a/web/views/@default/servers/server/settings/headers/updateSetPopup.html
+++ b/web/views/@default/servers/server/settings/headers/updateSetPopup.html
@@ -2,7 +2,6 @@
 <h3>修改Header</h3>

 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
-	<input type="hidden" name="serverId" :value="serverId"/>
 	<input type="hidden" name="headerPolicyId" :value="headerPolicyId"/>
 	<input type="hidden" name="headerId" :value="headerId"/>
 	<table class="ui table definition selectable">
--- a/web/views/@default/servers/server/settings/remoteAddr/index.html
+++ b/web/views/@default/servers/server/settings/remoteAddr/index.html
@@ -2,12 +2,19 @@
 {$template "/left_menu"}

 <div class="right-box">
-    <form class="ui form" data-tea-action="$" data-tea-success="success">
-        <csrf-token></csrf-token>
-        <input type="hidden" name="webId" :value="webId"/>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>

-        <http-remote-addr-config-box :v-remote-addr-config="remoteAddrConfig"></http-remote-addr-config-box>
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form class="ui form" data-tea-action="$" data-tea-success="success">
+            <csrf-token></csrf-token>
+            <input type="hidden" name="webId" :value="webId"/>

-        <submit-btn></submit-btn>
-    </form>
+            <http-remote-addr-config-box :v-remote-addr-config="remoteAddrConfig"></http-remote-addr-config-box>
+
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/stat/index.html
+++ b/web/views/@default/servers/server/settings/stat/index.html
@@ -3,9 +3,16 @@
 {$template "/left_menu"}

 <div class="right-box">
-	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
-		<input type="hidden" name="webId" :value="webId"/>
-		<http-stat-config-box :v-stat-config="statConfig"></http-stat-config-box>
-		<submit-btn></submit-btn>
-	</form>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>
+
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+            <input type="hidden" name="webId" :value="webId"/>
+            <http-stat-config-box :v-stat-config="statConfig"></http-stat-config-box>
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/waf/index.html
+++ b/web/views/@default/servers/server/settings/waf/index.html
@@ -2,10 +2,18 @@
 {$template "/left_menu"}

 <div class="right-box">
-    {$template "menu"}
-    <form method="post" class="ui form" data-tea-action="$"  data-tea-success="success">
-        <input type="hidden" name="webId" :value="webId"/>
-        <http-firewall-config-box :v-firewall-config="firewallConfig" :v-firewall-policy="firewallPolicy"></http-firewall-config-box>
-        <submit-btn></submit-btn>
-    </form>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>
+
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        {$template "menu"}
+
+        <form method="post" class="ui form" data-tea-action="$"  data-tea-success="success">
+            <input type="hidden" name="webId" :value="webId"/>
+            <http-firewall-config-box :v-firewall-config="firewallConfig" :v-firewall-policy="firewallPolicy"></http-firewall-config-box>
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/web/index.html
+++ b/web/views/@default/servers/server/settings/web/index.html
@@ -3,9 +3,16 @@
 {$template "/left_menu"}

 <div class="right-box">
-	<form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
-		<input type="hidden" name="webId" :value="webId"/>
-		<http-web-root-box :v-root-config="rootConfig"></http-web-root-box>
-		<submit-btn></submit-btn>
-	</form>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>
+
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
+            <input type="hidden" name="webId" :value="webId"/>
+            <http-web-root-box :v-root-config="rootConfig"></http-web-root-box>
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/webp/index.html
+++ b/web/views/@default/servers/server/settings/webp/index.html
@@ -2,12 +2,19 @@
 {$template "/left_menu"}

 <div class="right-box">
-    <form class="ui form" data-tea-action="$" data-tea-success="success">
-        <csrf-token></csrf-token>
-        <input type="hidden" name="webId" :value="webId"/>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>

-        <http-webp-config-box :v-webp-config="webpConfig"></http-webp-config-box>
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form class="ui form" data-tea-action="$" data-tea-success="success">
+            <csrf-token></csrf-token>
+            <input type="hidden" name="webId" :value="webId"/>

-        <submit-btn></submit-btn>
-    </form>
+            <http-webp-config-box :v-webp-config="webpConfig"></http-webp-config-box>
+
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
--- a/web/views/@default/servers/server/settings/websocket/index.html
+++ b/web/views/@default/servers/server/settings/websocket/index.html
@@ -3,9 +3,16 @@
 {$template "/left_menu"}

 <div class="right-box">
-	<form method="post" class="ui form" data-tea-action="$"  data-tea-success="success">
-		<input type="hidden" name="webId" :value="webId"/>
-		<http-websocket-box :v-websocket-ref="websocketRef" :v-websocket-config="websocketConfig"></http-websocket-box>
-		<submit-btn></submit-btn>
-	</form>
+    <div v-if="hasGroupConfig">
+        <div class="margin"></div>
+        <warning-message>由于已经在当前<a :href="groupSettingURL">服务分组</a>中进行了对应的配置，在这里的配置将不会生效。</warning-message>
+    </div>
+
+    <div :class="{'opacity-mask': hasGroupConfig}">
+        <form method="post" class="ui form" data-tea-action="$"  data-tea-success="success">
+            <input type="hidden" name="webId" :value="webId"/>
+            <http-websocket-box :v-websocket-ref="websocketRef" :v-websocket-config="websocketConfig"></http-websocket-box>
+            <submit-btn></submit-btn>
+        </form>
+    </div>
 </div>
				`@@ -0,0 +1 @@`
				`{"version":3,"sources":["countries.less"],"names":[],"mappings":"AAAA,oBACC;EACC,4BAAA;EACA,6BAAA;;AAIF;EAaC,mBAAA;;AAbD,cACC,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AALH,cACC,cACC,MAKC,UAAU;EACT,0BAAA","file":"countries.css"}`
				`@@ -0,0 +1 @@`
				`{"version":3,"sources":["provinces.less"],"names":[],"mappings":"AAAA,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AAJF,cACC,MAKC,UAAU;EACT,0BAAA","file":"provinces.css"}`