优化WAF添加规则表单

This commit is contained in:
刘祥超
2023-08-13 10:00:41 +08:00
parent af4d14364c
commit 5bb83555a4
2 changed files with 51 additions and 16 deletions

View File

@@ -17,7 +17,7 @@
<optgroup label="通用参数"></optgroup>
<option v-for="cp in checkpoints" v-if="!cp.isComposed" :value="cp.prefix">{{cp.name}} - [{{cp.prefix}}]</option>
</select>
<p class="comment" v-if="checkpoint != null"><span class="ui label tiny">${<em style="font-style: normal;">{{checkpoint.prefix}}</em>}</span>{{checkpoint.description}}</p>
<p class="comment" v-if="checkpoint != null"><span class="ui label tiny basic">${<em style="font-style: normal;">{{checkpoint.prefix}}</em>}</span>{{checkpoint.description}}</p>
</td>
</tr>
@@ -91,7 +91,14 @@
</tr>
<tr>
<td>
<span v-if="(checkpoint == null || checkpoint.dataType != 'bool') && (rule.operator == 'match' || rule.operator == 'not match')">正则表达式</span>
<span v-if="operator != null && operator.dataType == 'regexp'">正则表达式</span>
<span v-else-if="operator != null && operator.dataType == 'number'">对比数字</span>
<span v-else-if="operator != null && operator.dataType == 'string'">对比字符串</span>
<span v-else-if="operator != null && operator.dataType == 'strings'">一组对比字符串</span>
<span v-else-if="operator != null && operator.dataType == 'string|number'">字符串或数字</span>
<span v-else-if="operator != null && operator.dataType == 'version'">对比版本号</span>
<span v-else-if="operator != null && operator.dataType == 'ip'">对比IP</span>
<span v-else-if="operator != null && operator.dataType == 'ips'">一组对比IP</span>
<span v-else>对比值</span>
</td>
<td>
@@ -114,9 +121,36 @@
</select>
</div>
<!-- number -->
<div v-else-if="operator != null && operator.dataType == 'number'">
<input type="number" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 16em" maxlength="30" placeholder="对比数字" step="any"/>
<p class="comment">输入和参数对比的数字,比如<code-label>123</code-label><code-label>123.456</code-label></p>
</div>
<!-- string|number -->
<div v-else-if="operator != null && operator.dataType == 'string|number'">
<input type="text" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 16em" maxlength="30" placeholder="对比字符串或数字" step="any"/>
<p class="comment">输入和参数对比的字符串或数字,比如<code-label>123</code-label><code-label>abc</code-label></p>
</div>
<!-- version -->
<div v-else-if="operator != null && operator.dataType == 'version'">
<input type="text" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 10em" maxlength="100" placeholder="对比版本号"/>
<p class="comment">输入和参数对比的版本号,比如<code-label>1.2.7</code-label></p>
</div>
<!-- IP -->
<div v-else-if="operator != null && operator.dataType == 'ip'">
<input type="text" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 16em" maxlength="100" placeholder="对比IP"/>
<p class="comment">输入和参数对比的IP比如<code-label>192.168.2.100</code-label></p>
</div>
<!-- 其余数据 -->
<textarea rows="3" maxlength="4096" name="value" v-model="rule.value" @input="changeRuleValue" v-else></textarea>
<p class="comment" v-if="(rule.operator == 'match' || rule.operator == 'not match') && rule.value.match(/\n/)"><span class="red">警告:发现你填写的正则表达式中包含了换行符,如果你的意图是每行都表示不同的选项,那么请使用竖杠(<code-label>|</code-label>)符号代替换行符,比如把<code-label>a换行b换行c换行</code-label>改成<code-label>a|b|c</code-label><a href="" @click.prevent="convertValueLine">[帮我转换]</a></span></p>
<div v-else>
<textarea rows="3" maxlength="4096" name="value" v-model="rule.value" @input="changeRuleValue"></textarea>
<p class="comment" v-if="operator != null && operator.dataType == 'regexp'">正则表达式中对于要匹配的内容中的特殊字符需要转义处理(即在字符前面加入反斜杠\),比如<code-label>.?*+()[]{}^$\</code-label>等符号要变成<code-label>\.\?\*\+\(\)\[\]\{\}\^\$\\</code-label></p>
</div>
<p class="comment" v-if="operator != null && operator.dataType == 'regexp' && rule.value.match(/\n/)"><span class="red">警告:发现你填写的正则表达式中包含了换行符,如果你的意图是每行都表示不同的选项,那么请使用竖杠(<code-label>|</code-label>)符号代替换行符,比如把<code-label>a换行b换行c换行</code-label>改成<code-label>a|b|c</code-label><a href="" @click.prevent="convertValueLine">[帮我转换]</a></span></p>
<!-- 特殊规则 -->
<div style="margin-top: 1em">
@@ -142,7 +176,7 @@
</div>
</td>
</tr>
<tr v-if="(checkpoint == null || checkpoint.dataType != 'bool') && (rule.operator == 'match' || rule.operator == 'not match')">
<tr v-if="operator != null && operator.dataType == 'regexp'">
<td>正则表达式测试</td>
<td>
<a href="" v-if="!regexpTestIsOn" @click.prevent="changeRegexpTestIsOn">[输入测试字符串]</a>