|
@@ -17,6 +17,7 @@ import {
|
|
|
} from "@dnd-kit/sortable";
|
|
|
import {
|
|
|
Autocomplete,
|
|
|
+ Box,
|
|
|
Button,
|
|
|
Dialog,
|
|
|
DialogActions,
|
|
@@ -43,100 +44,197 @@ interface Props {
|
|
|
onChange?: (prev?: string, curr?: string) => void;
|
|
|
}
|
|
|
|
|
|
-const RuleTypeList = [
|
|
|
- "DOMAIN",
|
|
|
- "DOMAIN-SUFFIX",
|
|
|
- "DOMAIN-KEYWORD",
|
|
|
- "DOMAIN-REGEX",
|
|
|
- "GEOSITE",
|
|
|
- "IP-CIDR",
|
|
|
- "IP-SUFFIX",
|
|
|
- "IP-ASN",
|
|
|
- "GEOIP",
|
|
|
- "SRC-GEOIP",
|
|
|
- "SRC-IP-ASN",
|
|
|
- "SRC-IP-CIDR",
|
|
|
- "SRC-IP-SUFFIX",
|
|
|
- "DST-PORT",
|
|
|
- "SRC-PORT",
|
|
|
- "IN-PORT",
|
|
|
- "IN-TYPE",
|
|
|
- "IN-USER",
|
|
|
- "IN-NAME",
|
|
|
- "PROCESS-PATH",
|
|
|
- "PROCESS-PATH-REGEX",
|
|
|
- "PROCESS-NAME",
|
|
|
- "PROCESS-NAME-REGEX",
|
|
|
- "UID",
|
|
|
- "NETWORK",
|
|
|
- "DSCP",
|
|
|
- "RULE-SET",
|
|
|
- "SUB-RULE",
|
|
|
- "AND",
|
|
|
- "OR",
|
|
|
- "NOT",
|
|
|
- "MATCH",
|
|
|
-] as const;
|
|
|
+const portValidator = (value: string): boolean => {
|
|
|
+ return new RegExp(
|
|
|
+ "^(?:[1-9]\\d{0,3}|[1-5]\\d{4}|6[0-4]\\d{3}|65[0-4]\\d{2}|655[0-2]\\d|6553[0-5])$"
|
|
|
+ ).test(value);
|
|
|
+};
|
|
|
+const ipv4CIDRValidator = (value: string): boolean => {
|
|
|
+ return new RegExp(
|
|
|
+ "^(?:(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))\\.){3}(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))(?:\\/(?:[12]?[0-9]|3[0-2]))$"
|
|
|
+ ).test(value);
|
|
|
+};
|
|
|
+const ipv6CIDRValidator = (value: string): boolean => {
|
|
|
+ return new RegExp(
|
|
|
+ "^([0-9a-fA-F]{1,4}(?::[0-9a-fA-F]{1,4}){7}|::|:(?::[0-9a-fA-F]{1,4}){1,6}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,5}|(?:[0-9a-fA-F]{1,4}:){2}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){3}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){4}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){5}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,6}:)\\/(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])$"
|
|
|
+ ).test(value);
|
|
|
+};
|
|
|
|
|
|
-const NoResolveList = [
|
|
|
- "GEOIP",
|
|
|
- "IP-ASN",
|
|
|
- "IP-CIDR",
|
|
|
- "IP-CIDR6",
|
|
|
- "IP-SUFFIX",
|
|
|
- "RULE-SET",
|
|
|
+const rules: {
|
|
|
+ name: string;
|
|
|
+ required?: boolean;
|
|
|
+ example?: string;
|
|
|
+ noResolve?: boolean;
|
|
|
+ validator?: (value: string) => boolean;
|
|
|
+}[] = [
|
|
|
+ {
|
|
|
+ name: "DOMAIN",
|
|
|
+ example: "example.com",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "DOMAIN-SUFFIX",
|
|
|
+ example: "example.com",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "DOMAIN-KEYWORD",
|
|
|
+ example: "example",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "DOMAIN-REGEX",
|
|
|
+ example: "example.*",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "GEOSITE",
|
|
|
+ example: "youtube",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "GEOIP",
|
|
|
+ example: "CN",
|
|
|
+ noResolve: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "SRC-GEOIP",
|
|
|
+ example: "CN",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IP-ASN",
|
|
|
+ example: "13335",
|
|
|
+ noResolve: true,
|
|
|
+ validator: (value) => (+value ? true : false),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "SRC-IP-ASN",
|
|
|
+ example: "9808",
|
|
|
+ validator: (value) => (+value ? true : false),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IP-CIDR",
|
|
|
+ example: "127.0.0.0/8",
|
|
|
+ noResolve: true,
|
|
|
+ validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IP-CIDR6",
|
|
|
+ example: "2620:0:2d0:200::7/32",
|
|
|
+ noResolve: true,
|
|
|
+ validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "SRC-IP-CIDR",
|
|
|
+ example: "192.168.1.201/32",
|
|
|
+ validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IP-SUFFIX",
|
|
|
+ example: "8.8.8.8/24",
|
|
|
+ noResolve: true,
|
|
|
+ validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "SRC-IP-SUFFIX",
|
|
|
+ example: "192.168.1.201/8",
|
|
|
+ validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "SRC-PORT",
|
|
|
+ example: "7777",
|
|
|
+ validator: (value) => portValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "DST-PORT",
|
|
|
+ example: "80",
|
|
|
+ validator: (value) => portValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IN-PORT",
|
|
|
+ example: "7890",
|
|
|
+ validator: (value) => portValidator(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "DSCP",
|
|
|
+ example: "4",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "PROCESS-NAME",
|
|
|
+ example: getSystem() === "windows" ? "chrome.exe" : "curl",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "PROCESS-PATH",
|
|
|
+ example:
|
|
|
+ getSystem() === "windows"
|
|
|
+ ? "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
|
|
|
+ : "/usr/bin/wget",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "PROCESS-NAME-REGEX",
|
|
|
+ example: ".*telegram.*",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "PROCESS-PATH-REGEX",
|
|
|
+ example:
|
|
|
+ getSystem() === "windows" ? "(?i).*Application\\chrome.*" : ".*bin/wget",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "NETWORK",
|
|
|
+ example: "udp",
|
|
|
+ validator: (value) => ["tcp", "udp"].includes(value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "UID",
|
|
|
+ example: "1001",
|
|
|
+ validator: (value) => (+value ? true : false),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IN-TYPE",
|
|
|
+ example: "SOCKS/HTTP",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IN-USER",
|
|
|
+ example: "mihomo",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "IN-NAME",
|
|
|
+ example: "ss",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "SUB-RULE",
|
|
|
+ example: "(NETWORK,tcp)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "RULE-SET",
|
|
|
+ example: "providername",
|
|
|
+ noResolve: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "AND",
|
|
|
+ example: "((DOMAIN,baidu.com),(NETWORK,UDP))",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "OR",
|
|
|
+ example: "((NETWORK,UDP),(DOMAIN,baidu.com))",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "NOT",
|
|
|
+ example: "((DOMAIN,baidu.com))",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "MATCH",
|
|
|
+ required: false,
|
|
|
+ },
|
|
|
];
|
|
|
-const ExampleMap = {
|
|
|
- DOMAIN: "example.com",
|
|
|
- "DOMAIN-SUFFIX": "example.com",
|
|
|
- "DOMAIN-KEYWORD": "example",
|
|
|
- "DOMAIN-REGEX": "example.*",
|
|
|
- GEOSITE: "youtube",
|
|
|
- "IP-CIDR": "127.0.0.0/8",
|
|
|
- "IP-SUFFIX": "8.8.8.8/24",
|
|
|
- "IP-ASN": "13335",
|
|
|
- GEOIP: "CN",
|
|
|
- "SRC-GEOIP": "cn",
|
|
|
- "SRC-IP-ASN": "9808",
|
|
|
- "SRC-IP-CIDR": "192.168.1.201/32",
|
|
|
- "SRC-IP-SUFFIX": "192.168.1.201/8",
|
|
|
- "DST-PORT": "80",
|
|
|
- "SRC-PORT": "7777",
|
|
|
- "IN-PORT": "7890",
|
|
|
- "IN-TYPE": "SOCKS/HTTP",
|
|
|
- "IN-USER": "mihomo",
|
|
|
- "IN-NAME": "ss",
|
|
|
- "PROCESS-PATH":
|
|
|
- getSystem() === "windows"
|
|
|
- ? "C:Program FilesGoogleChromeApplicationchrome.exe"
|
|
|
- : "/usr/bin/wget",
|
|
|
- "PROCESS-PATH-REGEX":
|
|
|
- getSystem() === "windows" ? "(?i).*Application\\chrome.*" : ".*bin/wget",
|
|
|
- "PROCESS-NAME": getSystem() === "windows" ? "chrome.exe" : "curl",
|
|
|
- "PROCESS-NAME-REGEX": ".*telegram.*",
|
|
|
- UID: "1001",
|
|
|
- NETWORK: "udp",
|
|
|
- DSCP: "4",
|
|
|
- "RULE-SET": "providername",
|
|
|
- "SUB-RULE": "",
|
|
|
- AND: "((DOMAIN,baidu.com),(NETWORK,UDP))",
|
|
|
- OR: "((NETWORK,UDP),(DOMAIN,baidu.com))",
|
|
|
- NOT: "((DOMAIN,baidu.com))",
|
|
|
- MATCH: "",
|
|
|
-};
|
|
|
|
|
|
-const BuiltinProxyPolicyList = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
|
|
|
+const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
|
|
|
|
|
|
export const RulesEditorViewer = (props: Props) => {
|
|
|
const { title, profileUid, property, open, onClose, onChange } = props;
|
|
|
const { t } = useTranslation();
|
|
|
|
|
|
const [prevData, setPrevData] = useState("");
|
|
|
- const [ruleType, setRuleType] =
|
|
|
- useState<(typeof RuleTypeList)[number]>("DOMAIN");
|
|
|
+
|
|
|
+ const [ruleType, setRuleType] = useState<(typeof rules)[number]>(rules[0]);
|
|
|
const [ruleContent, setRuleContent] = useState("");
|
|
|
const [noResolve, setNoResolve] = useState(false);
|
|
|
- const [proxyPolicy, setProxyPolicy] = useState("DIRECT");
|
|
|
+ const [proxyPolicy, setProxyPolicy] = useState(builtinProxyPolicies[0]);
|
|
|
const [proxyPolicyList, setProxyPolicyList] = useState<string[]>([]);
|
|
|
const [ruleList, setRuleList] = useState<string[]>([]);
|
|
|
const [ruleSetList, setRuleSetList] = useState<string[]>([]);
|
|
@@ -195,7 +293,7 @@ export const RulesEditorViewer = (props: Props) => {
|
|
|
let ruleSetObj = yaml.load(data) as { "rule-providers": [] };
|
|
|
let subRuleObj = yaml.load(data) as { "sub-rules": [] };
|
|
|
setProxyPolicyList(
|
|
|
- BuiltinProxyPolicyList.concat(
|
|
|
+ builtinProxyPolicies.concat(
|
|
|
groupsObj["proxy-groups"]
|
|
|
? groupsObj["proxy-groups"].map((item: any) => item.name)
|
|
|
: []
|
|
@@ -217,29 +315,17 @@ export const RulesEditorViewer = (props: Props) => {
|
|
|
fetchProfile();
|
|
|
}, [open]);
|
|
|
|
|
|
- const spliceRule = () => {
|
|
|
- if (ruleContent === "") return "";
|
|
|
- // Check valid by regex
|
|
|
- switch (ruleType) {
|
|
|
- case "IP-CIDR": {
|
|
|
- let v4regex = new RegExp(
|
|
|
- "^((?:(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))\\.){3}(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5])))?:(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-5]{2}[0-3][0-5])$"
|
|
|
- );
|
|
|
- let v6regex = new RegExp(
|
|
|
- "^([0-9a-fA-F]{1,4}(?::[0-9a-fA-F]{1,4}){7}|::|:(?::[0-9a-fA-F]{1,4}){1,6}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,5}|(?:[0-9a-fA-F]{1,4}:){2}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){3}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){4}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){5}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,6}:)\\/(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])$"
|
|
|
- );
|
|
|
- if (!v4regex.test(ruleContent) && !v6regex.test(ruleContent)) return "";
|
|
|
-
|
|
|
- break;
|
|
|
- }
|
|
|
- default:
|
|
|
- break;
|
|
|
+ const validateRule = () => {
|
|
|
+ if ((ruleType.required ?? true) && !ruleContent) {
|
|
|
+ throw new Error(t("Rule Condition Required"));
|
|
|
+ }
|
|
|
+ if (ruleType.validator && !ruleType.validator(ruleContent)) {
|
|
|
+ throw new Error(t("Invalid Rule"));
|
|
|
}
|
|
|
- return `${ruleType}${
|
|
|
- ruleType === "MATCH" ? "" : "," + ruleContent
|
|
|
- },${proxyPolicy}${
|
|
|
- NoResolveList.includes(ruleType) && noResolve ? ",no-resolve" : ""
|
|
|
- }`;
|
|
|
+
|
|
|
+ return `${ruleType.name}${
|
|
|
+ ruleContent ? "," + ruleContent : ""
|
|
|
+ },${proxyPolicy}${ruleType.noResolve && noResolve ? ",no-resolve" : ""}`;
|
|
|
};
|
|
|
|
|
|
const onSave = useLockFn(async () => {
|
|
@@ -274,49 +360,50 @@ export const RulesEditorViewer = (props: Props) => {
|
|
|
<Autocomplete
|
|
|
size="small"
|
|
|
sx={{ minWidth: "240px" }}
|
|
|
- value={ruleType}
|
|
|
- options={RuleTypeList}
|
|
|
- onChange={(_, v) => {
|
|
|
- if (v) setRuleType(v);
|
|
|
- }}
|
|
|
renderInput={(params) => <TextField {...params} />}
|
|
|
+ options={rules}
|
|
|
+ value={ruleType}
|
|
|
+ getOptionLabel={(option) => option.name}
|
|
|
+ renderOption={(props, option) => (
|
|
|
+ <li {...props} title={t(option.name)}>
|
|
|
+ {option.name}
|
|
|
+ </li>
|
|
|
+ )}
|
|
|
+ onChange={(_, value) => value && setRuleType(value)}
|
|
|
/>
|
|
|
</Item>
|
|
|
- <Item>
|
|
|
+ <Item sx={{ display: !(ruleType.required ?? true) ? "none" : "" }}>
|
|
|
<ListItemText primary={t("Rule Content")} />
|
|
|
- {ruleType === "RULE-SET" && (
|
|
|
+
|
|
|
+ {ruleType.name === "RULE-SET" && (
|
|
|
<Autocomplete
|
|
|
size="small"
|
|
|
sx={{ minWidth: "240px" }}
|
|
|
- value={ruleContent}
|
|
|
- options={ruleSetList}
|
|
|
- onChange={(_, v) => {
|
|
|
- if (v) setRuleContent(v);
|
|
|
- }}
|
|
|
renderInput={(params) => <TextField {...params} />}
|
|
|
+ options={ruleSetList}
|
|
|
+ value={ruleContent}
|
|
|
+ onChange={(_, value) => value && setRuleContent(value)}
|
|
|
/>
|
|
|
)}
|
|
|
- {ruleType === "SUB-RULE" && (
|
|
|
+ {ruleType.name === "SUB-RULE" && (
|
|
|
<Autocomplete
|
|
|
size="small"
|
|
|
sx={{ minWidth: "240px" }}
|
|
|
- value={ruleContent}
|
|
|
- options={subRuleList}
|
|
|
- onChange={(_, v) => {
|
|
|
- if (v) setRuleContent(v);
|
|
|
- }}
|
|
|
renderInput={(params) => <TextField {...params} />}
|
|
|
+ options={subRuleList}
|
|
|
+ value={ruleContent}
|
|
|
+ onChange={(_, value) => value && setRuleContent(value)}
|
|
|
/>
|
|
|
)}
|
|
|
- {ruleType !== "RULE-SET" && ruleType !== "SUB-RULE" && (
|
|
|
+ {ruleType.name !== "RULE-SET" && ruleType.name !== "SUB-RULE" && (
|
|
|
<TextField
|
|
|
size="small"
|
|
|
sx={{ minWidth: "240px" }}
|
|
|
value={ruleContent}
|
|
|
- placeholder={ExampleMap[ruleType]}
|
|
|
- onChange={(e) => {
|
|
|
- setRuleContent(e.target.value);
|
|
|
- }}
|
|
|
+ required={ruleType.required ?? true}
|
|
|
+ error={(ruleType.required ?? true) && !ruleContent}
|
|
|
+ placeholder={ruleType.example}
|
|
|
+ onChange={(e) => setRuleContent(e.target.value)}
|
|
|
/>
|
|
|
)}
|
|
|
</Item>
|
|
@@ -325,22 +412,23 @@ export const RulesEditorViewer = (props: Props) => {
|
|
|
<Autocomplete
|
|
|
size="small"
|
|
|
sx={{ minWidth: "240px" }}
|
|
|
- value={proxyPolicy}
|
|
|
- options={proxyPolicyList}
|
|
|
- onChange={(_, v) => {
|
|
|
- if (v) setProxyPolicy(v);
|
|
|
- }}
|
|
|
renderInput={(params) => <TextField {...params} />}
|
|
|
+ options={proxyPolicyList}
|
|
|
+ value={proxyPolicy}
|
|
|
+ renderOption={(props, option) => (
|
|
|
+ <li {...props} title={t(option)}>
|
|
|
+ {option}
|
|
|
+ </li>
|
|
|
+ )}
|
|
|
+ onChange={(_, value) => value && setProxyPolicy(value)}
|
|
|
/>
|
|
|
</Item>
|
|
|
- {NoResolveList.includes(ruleType) && (
|
|
|
+ {ruleType.noResolve && (
|
|
|
<Item>
|
|
|
<ListItemText primary={t("No Resolve")} />
|
|
|
<Switch
|
|
|
checked={noResolve}
|
|
|
- onChange={() => {
|
|
|
- setNoResolve(!noResolve);
|
|
|
- }}
|
|
|
+ onChange={() => setNoResolve(!noResolve)}
|
|
|
/>
|
|
|
</Item>
|
|
|
)}
|
|
@@ -350,16 +438,18 @@ export const RulesEditorViewer = (props: Props) => {
|
|
|
fullWidth
|
|
|
variant="contained"
|
|
|
onClick={() => {
|
|
|
- let raw = spliceRule();
|
|
|
- if (raw === "") {
|
|
|
- Notice.error(t("Invalid Rule"));
|
|
|
- return;
|
|
|
+ try {
|
|
|
+ let raw = validateRule();
|
|
|
+ console.log(raw);
|
|
|
+
|
|
|
+ if (prependSeq.includes(raw)) return;
|
|
|
+ setPrependSeq([...prependSeq, raw]);
|
|
|
+ } catch (err: any) {
|
|
|
+ Notice.error(err.message || err.toString());
|
|
|
}
|
|
|
- if (prependSeq.includes(raw)) return;
|
|
|
- setPrependSeq([...prependSeq, raw]);
|
|
|
}}
|
|
|
>
|
|
|
- {t("Add Prepend Rule")}
|
|
|
+ {t("Prepend Rule")}
|
|
|
</Button>
|
|
|
</Item>
|
|
|
<Item>
|
|
@@ -367,16 +457,16 @@ export const RulesEditorViewer = (props: Props) => {
|
|
|
fullWidth
|
|
|
variant="contained"
|
|
|
onClick={() => {
|
|
|
- let raw = spliceRule();
|
|
|
- if (raw === "") {
|
|
|
- Notice.error(t("Invalid Rule"));
|
|
|
- return;
|
|
|
+ try {
|
|
|
+ let raw = validateRule();
|
|
|
+ if (appendSeq.includes(raw)) return;
|
|
|
+ setPrependSeq([...appendSeq, raw]);
|
|
|
+ } catch (err: any) {
|
|
|
+ Notice.error(err.message || err.toString());
|
|
|
}
|
|
|
- if (appendSeq.includes(raw)) return;
|
|
|
- setAppendSeq([...appendSeq, raw]);
|
|
|
}}
|
|
|
>
|
|
|
- {t("Add Append Rule")}
|
|
|
+ {t("Append Rule")}
|
|
|
</Button>
|
|
|
</Item>
|
|
|
</div>
|