diff --git a/internal/gen/generate.go b/internal/gen/generate.go
index f3512a6e..1d511005 100644
--- a/internal/gen/generate.go
+++ b/internal/gen/generate.go
@@ -9,6 +9,7 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/conds/condutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/nodeconfigs"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/firewallconfigs"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/shared"
 	"github.com/iwind/TeaGo/Tea"
 	"github.com/iwind/TeaGo/files"
@@ -115,6 +116,16 @@ func generateComponentsJSFile() error {
 		buffer.Write([]byte{'\n', '\n'})
 	}
 
+	// WAF操作符
+	wafOperatorsJSON, err := json.Marshal(firewallconfigs.AllRuleOperators)
+	if err != nil {
+		logs.Println("ComponentsAction marshal waf rule operators failed: " + err.Error())
+	} else {
+		buffer.WriteString("window.WAF_RULE_OPERATORS = ")
+		buffer.Write(wafOperatorsJSON)
+		buffer.Write([]byte{'\n', '\n'})
+	}
+
 	fp, err := os.OpenFile(filepath.Clean(Tea.PublicFile("/js/components.src.js")), os.O_CREATE|os.O_TRUNC|os.O_WRONLY, 0777)
 	if err != nil {
 		return err
diff --git a/internal/web/actions/default/ui/components.go b/internal/web/actions/default/ui/components.go
index 947af66f..b3aefc2a 100644
--- a/internal/web/actions/default/ui/components.go
+++ b/internal/web/actions/default/ui/components.go
@@ -8,6 +8,7 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/conds/condutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/nodeconfigs"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/firewallconfigs"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/shared"
 	"github.com/iwind/TeaGo/Tea"
 	"github.com/iwind/TeaGo/actions"
@@ -123,6 +124,16 @@ func (this *ComponentsAction) RunGet(params struct{}) {
 		buffer.Write([]byte{'\n', '\n'})
 	}
 
+	// WAF操作符
+	wafOperatorsJSON, err := json.Marshal(firewallconfigs.AllRuleOperators)
+	if err != nil {
+		logs.Println("ComponentsAction marshal waf rule operators failed: " + err.Error())
+	} else {
+		buffer.WriteString("window.WAF_RULE_OPERATORS = ")
+		buffer.Write(wafOperatorsJSON)
+		buffer.Write([]byte{'\n', '\n'})
+	}
+
 	componentsData = buffer.Bytes()
 
 	// ETag
diff --git a/web/public/js/components/server/http-firewall-rule-label.js b/web/public/js/components/server/http-firewall-rule-label.js
index 55e27d45..f991bb95 100644
--- a/web/public/js/components/server/http-firewall-rule-label.js
+++ b/web/public/js/components/server/http-firewall-rule-label.js
@@ -10,7 +10,18 @@ Vue.component("http-firewall-rule-label", {
 		showErr: function (err) {
 			teaweb.popupTip("规则校验错误，请修正：<span class=\"red\">"  + teaweb.encodeHTML(err) + "</span>")
 		},
+		operatorName: function (operatorCode) {
+			var operatorName = operatorCode
+			if (typeof (window.WAF_RULE_OPERATORS) != null) {
+				window.WAF_RULE_OPERATORS.forEach(function (v) {
+					if (v.code == operatorCode) {
+						operatorName = v.name
+					}
+				})
+			}
 
+			return operatorName
+		}
 	},
 	template: `<div>
 	<div class="ui label tiny basic" style="line-height: 1.5">
@@ -29,7 +40,7 @@ Vue.component("http-firewall-rule-label", {
 
 		<span v-else>
 			<span v-if="rule.paramFilters != null && rule.paramFilters.length > 0" v-for="paramFilter in rule.paramFilters"> | {{paramFilter.code}}</span> 
-		<var :class="{dash:rule.isCaseInsensitive}" :title="rule.isCaseInsensitive ? '大小写不敏感':''" v-if="!rule.isComposed">{{rule.operator}}</var> 
+		<span :class="{dash:rule.isCaseInsensitive}" :title="rule.isCaseInsensitive ? '大小写不敏感':''" v-if="!rule.isComposed">{{operatorName(rule.operator)}}</span> 
 		{{rule.value}}
 		</span>
 		
diff --git a/web/public/js/components/server/http-firewall-rules-box.js b/web/public/js/components/server/http-firewall-rules-box.js
index 32481ad7..d2e9c2f2 100644
--- a/web/public/js/components/server/http-firewall-rules-box.js
+++ b/web/public/js/components/server/http-firewall-rules-box.js
@@ -35,12 +35,24 @@ Vue.component("http-firewall-rules-box", {
 			teaweb.confirm("确定要删除此规则吗？", function () {
 				that.rules.$remove(index)
 			})
+		},
+		operatorName: function (operatorCode) {
+			var operatorName = operatorCode
+			if (typeof (window.WAF_RULE_OPERATORS) != null) {
+				window.WAF_RULE_OPERATORS.forEach(function (v) {
+					if (v.code == operatorCode) {
+						operatorName = v.name
+					}
+				})
+			}
+
+			return operatorName
 		}
 	},
 	template: `<div>
 		<input type="hidden" name="rulesJSON" :value="JSON.stringify(rules)"/>
 		<div v-if="rules.length > 0">
-			<div v-for="(rule, index) in rules" class="ui label small basic" style="margin-bottom: 0.5em">
+			<div v-for="(rule, index) in rules" class="ui label small basic" style="margin-bottom: 0.5em; line-height: 1.5">
 				{{rule.name}}[{{rule.param}}] 
 				
 				<!-- cc2 -->
@@ -55,7 +67,7 @@ Vue.component("http-firewall-rules-box", {
 				</span>
 				
 				<span v-else>
-					<span v-if="rule.paramFilters != null && rule.paramFilters.length > 0" v-for="paramFilter in rule.paramFilters"> | {{paramFilter.code}}</span> <var>{{rule.operator}}</var> {{rule.value}}
+					<span v-if="rule.paramFilters != null && rule.paramFilters.length > 0" v-for="paramFilter in rule.paramFilters"> | {{paramFilter.code}}</span> <span>{{operatorName(rule.operator)}}</span> {{rule.value}}
 				</span>
 				
 				<!-- description -->