优化WAF添加规则表单

internal/web/actions/default/servers/components/waf/createRulePopup.go

@@ -5,7 +5,6 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/firewallconfigs"
 	"github.com/iwind/TeaGo/actions"
-	"github.com/iwind/TeaGo/lists"
 	"github.com/iwind/TeaGo/maps"
 )
 
@@ -21,7 +20,7 @@ func (this *CreateRulePopupAction) RunGet(params struct {
 	Type string
 }) {
 	// check points
-	checkpointList := []maps.Map{}
+	var checkpointList = []maps.Map{}
 	for _, checkpoint := range firewallconfigs.AllCheckpoints {
 		if (params.Type == "inbound" && checkpoint.IsRequest) || params.Type == "outbound" {
 			checkpointList = append(checkpointList, maps.Map{
@@ -38,15 +37,17 @@ func (this *CreateRulePopupAction) RunGet(params struct {
 	}
 
 	// operators
-	this.Data["operators"] = lists.Map(firewallconfigs.AllRuleOperators, func(k int, v interface{}) interface{} {
+	var operatorMaps = []maps.Map{}
-		def := v.(*firewallconfigs.RuleOperatorDefinition)
+	for _, operator := range firewallconfigs.AllRuleOperators {
-		return maps.Map{
+		operatorMaps = append(operatorMaps, maps.Map{
-			"name":        def.Name,
+			"name":        operator.Name,
-			"code":        def.Code,
+			"code":        operator.Code,
-			"description": def.Description,
+			"description": operator.Description,
-			"case":        def.CaseInsensitive,
+			"case":        operator.CaseInsensitive,
-		}
+			"dataType":    operator.DataType,
 		})
+	}
+	this.Data["operators"] = operatorMaps
 
 	this.Data["checkpoints"] = checkpointList
 

web/views/@default/servers/components/waf/createRulePopup.html

@@ -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>
+                    <div v-else>
-                    <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>
+					    <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>