feat: Support selecting multiple rule sets

Author: Ayideyia

frontend/src/assets/main.less

@@ -138,6 +138,10 @@ a {
   color: #fff;
 }
 
+.text-nowrap {
+  text-wrap: nowrap;
+}
+
 @keyframes rotate {
   from {
     transform: rotate(0deg);

frontend/src/utils/generator.ts

@@ -17,7 +17,7 @@ const _generateRule = (rule: IRule, rule_set: IRuleSet[], inbounds: IInbound[])
   if (rule.type === RuleType.Inline) {
     deepAssign(extra, JSON.parse(rule.payload))
   } else if (rule.type === RuleType.RuleSet) {
-    extra[rule.type] = getRuleset(rule.payload)
+    extra[rule.type] = rule.payload.split(',').map((id) => getRuleset(id))
   } else if (rule.type === RuleType.Inbound) {
     extra[rule.type] = getInbound(rule.payload)
   } else if (rule.type === RuleType.IpIsPrivate) {

frontend/src/views/ProfilesView/components/DnsRulesConfig.vue

@@ -65,7 +65,19 @@ const handleDeleteRule = (index: number) => {
 }
 
 const handleUse = (ruleset: any) => {
-  fields.value.payload = ruleset.id
+  const ids = fields.value.payload.split(',').filter((v) => v)
+  const idx = ids.findIndex((v) => v === ruleset.id)
+  if (idx === -1) {
+    ids.push(ruleset.id)
+  } else {
+    ids.splice(idx, 1)
+  }
+  fields.value.payload = ids.join(',')
+}
+
+const handleClearRuleset = (ruleset: any) => {
+  const ids = fields.value.payload.split(',').filter((id) => props.ruleSet.find((v) => v.id === id))
+  ruleset.payload = ids.join(',')
 }
 
 const showLost = () => message.warn('kernel.route.rules.invalid')
@@ -93,7 +105,10 @@ const hasLost = (rule: IDNSRule) => {
       return rule.payload !== 'any' && !props.outboundOptions.find((v) => v.value === rule.payload)
     }
     if (rule.type === RuleType.RuleSet) {
-      return !props.ruleSet.find((v) => v.id === rule.payload)
+      const hasMissingRuleset = rule.payload
+        .split(',')
+        .some((id) => !props.ruleSet.find((v) => v.id === id))
+      return hasMissingRuleset
     }
     if (rule.type === RuleType.Inline) {
       return !isValidJson(rule.payload)
@@ -140,7 +155,14 @@ const renderRule = (rule: IDNSRule) => {
         <span v-if="hasLost(rule)" @click="showLost" class="warn"> [ ! ] </span>
         {{ renderRule(rule) }}
       </div>
-      <div class="ml-auto">
+      <div class="flex text-nowrap ml-auto">
+        <Button
+          v-if="rule.type === RuleType.RuleSet && rule.payload && hasLost(rule)"
+          @click="handleClearRuleset(rule)"
+          type="text"
+        >
+          {{ t('common.clear') }}
+        </Button>
         <Button @click="handleEdit(index)" icon="edit" type="text" size="small" />
         <Button @click="handleDeleteRule(index)" icon="delete" type="text" size="small" />
       </div>
@@ -234,7 +256,7 @@ const renderRule = (rule: IDNSRule) => {
             :key="ruleset.tag"
             :title="ruleset.tag"
             @click="handleUse(ruleset)"
-            :selected="fields.payload === ruleset.id"
+            :selected="fields.payload.includes(ruleset.id)"
             v-tips="ruleset.type"
             class="ruleset"
           >

frontend/src/views/ProfilesView/components/RouteRulesConfig.vue

@@ -55,7 +55,19 @@ const handleEdit = (index: number) => {
 }
 
 const handleUse = (ruleset: any) => {
-  fields.value.payload = ruleset.id
+  const ids = fields.value.payload.split(',').filter((v) => v)
+  const idx = ids.findIndex((v) => v === ruleset.id)
+  if (idx === -1) {
+    ids.push(ruleset.id)
+  } else {
+    ids.splice(idx, 1)
+  }
+  fields.value.payload = ids.join(',')
+}
+
+const handleClearRuleset = (ruleset: any) => {
+  const ids = fields.value.payload.split(',').filter((id) => props.ruleSet.find((v) => v.id === id))
+  ruleset.payload = ids.join(',')
 }
 
 const handleDelete = (index: number) => {
@@ -69,20 +81,31 @@ const isSupportPayload = computed(() => {
 })
 
 const hasLost = (rule: IRule) => {
-  if (rule.type === RuleType.Protocol) {
-    return false
+  const rulesValidationFlags: boolean[] = []
+  const hasMissingInbound = !props.inboundOptions.find((v) => v.value === rule.payload)
+  const hasMissingOutbound = !props.outboundOptions.find((v) => v.value === rule.outbound)
+  const hasMissingRuleset = rule.payload
+    .split(',')
+    .some((id) => !props.ruleSet.find((v) => v.id === id))
+  if (rule.action === RuleAction.Route) {
+    rulesValidationFlags.push(hasMissingOutbound)
+  } else if (rule.action === RuleAction.RouteOptions) {
+    let isValid = true
+    try {
+      JSON.parse(rule.outbound)
+    } catch {
+      isValid = false
+    }
+    rulesValidationFlags.push(!isValid)
   }
   if (rule.type === RuleType.Inbound) {
-    return !props.inboundOptions.find((v) => v.value === rule.payload)
-  }
-  if (rule.action !== RuleAction.Route) {
-    return false
-  }
-  const outboundLost = !props.outboundOptions.find((v) => v.value === rule.outbound)
-  if (rule.type === RuleType.RuleSet) {
-    return !props.ruleSet.find((v) => v.id === rule.payload) || outboundLost
+    rulesValidationFlags.push(hasMissingInbound)
+  } else if (rule.type === RuleType.IpIsPrivate) {
+    rulesValidationFlags.push(!['true', 'false'].includes(rule.payload))
+  } else if (rule.type === RuleType.RuleSet) {
+    rulesValidationFlags.push(hasMissingRuleset)
   }
-  return outboundLost
+  return rulesValidationFlags.some((v) => v) || !rule.payload
 }
 
 const renderRule = (rule: IRule) => {
@@ -121,7 +144,14 @@ const renderRule = (rule: IRule) => {
         <span v-if="hasLost(rule)" @click="showLost" class="warn"> [ ! ] </span>
         {{ renderRule(rule) }}
       </div>
-      <div class="ml-auto">
+      <div class="flex text-nowrap ml-auto">
+        <Button
+          v-if="rule.type === RuleType.RuleSet && rule.payload && hasLost(rule)"
+          @click="handleClearRuleset(rule)"
+          type="text"
+        >
+          {{ t('common.clear') }}
+        </Button>
         <Button @click="handleEdit(index)" icon="edit" type="text" size="small" />
         <Button @click="handleDelete(index)" icon="delete" type="text" size="small" />
       </div>
@@ -227,7 +257,7 @@ const renderRule = (rule: IRule) => {
             :key="ruleset.tag"
             :title="ruleset.tag"
             @click="handleUse(ruleset)"
-            :selected="fields.payload === ruleset.id"
+            :selected="fields.payload.includes(ruleset.id)"
             v-tips="ruleset.type"
             class="ruleset"
           >