style: Update FilterRuleCard and FilterRuleGroupCard to include custom_rules prop

src/components/cards/FilterRuleCard.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+import { CustomRule } from '@/api/types'
+
 // 输入参数
 const props = defineProps({
   pri: String,
   rules: Array as PropType<string[]>,
-  width: String,
-  height: String,
+  custom_rules: Array as PropType<CustomRule[]>,
 })
 
 // 定义触发的自定义事件
@@ -61,6 +62,17 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
   { title: '效果: 3D', value: ' 3D ' },
   { title: '排除: 3D', value: ' !3D ' },
 ])
+
+onMounted(() => {
+  if (props.custom_rules) {
+    props.custom_rules.map(rule => {
+      selectFilterOptions.value.push({
+        title: rule.name,
+        value: rule.id,
+      })
+    })
+  }
+})
 </script>
 
 <template>

src/components/cards/FilterRuleGroupCard.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import draggable from 'vuedraggable'
 import { copyToClipboard } from '@/@core/utils/navigator'
-import { FilterRuleGroup } from '@/api/types'
+import { CustomRule, FilterRuleGroup } from '@/api/types'
 import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
 import { useToast } from 'vue-toast-notification'
 import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
@@ -13,6 +13,7 @@ const props = defineProps({
     type: Object as PropType<FilterRuleGroup>,
     required: true,
   },
+  custom_rules: Array as PropType<CustomRule[]>,
 })
 
 // 规则卡片类型
@@ -212,6 +213,7 @@ function onClose() {
                 :pri="element.pri"
                 :maxpri="filterRuleCards.length.toString()"
                 :rules="element.rules"
+                :custom_rules="props.custom_rules"
                 @changed="updateFilterCardValue"
                 @close="filterCardClose(element.pri)"
               />