mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-12-10 16:30:24 +08:00
改进WAF策略的区域封禁
This commit is contained in:
刘祥超
@@ -1,51 +1,39 @@
|
||||
{$layout}
|
||||
|
||||
{$template "../waf_menu"}
|
||||
{$template "menu"}
|
||||
{$template "../waf_menu"}
|
||||
{$template "menu"}
|
||||
|
||||
<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>
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
|
||||
<input type="hidden" name="exceptURLPatternsJSON" :value="JSON.stringify(exceptURLPatterns)"/>
|
||||
<input type="hidden" name="onlyURLPatternsJSON" :value="JSON.stringify(onlyURLPatterns)"/>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">仅允许的区域</td>
|
||||
<td>
|
||||
<http-firewall-region-selector :v-countries="allowedCountries" :v-type="'allow'" @change="changeAllowedCountries"></http-firewall-region-selector>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">仅封禁的区域</td>
|
||||
<td>
|
||||
<p class="comment" v-if="allowedCountries.length > 0">由于你已设置"仅允许的区域"，所以不需要再设置封禁区域。</p>
|
||||
<http-firewall-region-selector :v-countries="deniedCountries" :v-type="'deny'" v-show="allowedCountries.length == 0"></http-firewall-region-selector>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>例外URL <tip-icon content="对这些URL将不做任何限制。"></tip-icon></td>
|
||||
<td><url-patterns-box v-model="exceptURLPatterns"></url-patterns-box></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>限制URL <tip-icon content="只对这些URL做限制。"></tip-icon></td>
|
||||
<td><url-patterns-box v-model="onlyURLPatterns"></url-patterns-box></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -1,54 +1,11 @@
|
||||
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
|
||||
})
|
||||
this.changeAllowedCountries = function (event) {
|
||||
this.allowedCountries = event.countries
|
||||
}
|
||||
})
|
||||
@@ -5,42 +5,35 @@
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
|
||||
<input type="hidden" name="exceptURLPatternsJSON" :value="JSON.stringify(exceptURLPatterns)"/>
|
||||
<input type="hidden" name="onlyURLPatternsJSON" :value="JSON.stringify(onlyURLPatterns)"/>
|
||||
<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>
|
||||
<tr>
|
||||
<td class="title">仅允许的省份</td>
|
||||
<td>
|
||||
<http-firewall-province-selector :v-provinces="allowedProvinces" :v-type="'allow'" @change="changeAllowedProvinces"></http-firewall-province-selector>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">仅封禁的省份</td>
|
||||
<td>
|
||||
<p class="comment" v-if="allowedProvinces.length > 0">由于你已设置"仅允许的省份"，所以不需要再设置封禁省份。</p>
|
||||
<http-firewall-province-selector :v-provinces="deniedProvinces" :v-type="'deny'" v-show="allowedProvinces.length == 0"></http-firewall-province-selector>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>例外URL <tip-icon content="对这些URL将不做任何限制。"></tip-icon></td>
|
||||
<td><url-patterns-box v-model="exceptURLPatterns"></url-patterns-box></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>限制URL <tip-icon content="只对这些URL做限制。"></tip-icon></td>
|
||||
<td><url-patterns-box v-model="onlyURLPatterns"></url-patterns-box></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -1,30 +1,4 @@
|
||||
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()
|
||||
@@ -32,9 +6,7 @@ Tea.context(function () {
|
||||
}
|
||||
|
||||
|
||||
this.change = function () {
|
||||
this.countSelectedProvinces = this.provinces.$count(function (k, province) {
|
||||
return province.isChecked
|
||||
})
|
||||
this.changeAllowedProvinces = function (event) {
|
||||
this.allowedProvinces = event.provinces
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user