feat(settings): AccountSettingRule

- 增加防抖。
- `card` 从父组件获取到的值改为深复制，解决 `card` 内修改数据，会直接导致在父组件中同步更新的问题。
- 修复 规则id与name 只缺少一项时，仍能正常确定的问题。
- 保存前增加一次检查，避免通过分享导入的规则存在重名与空名引发的错误。

src/components/cards/CustomRuleCard.vue

@@ -2,6 +2,7 @@
 import { CustomRule } from '@/api/types'
 import { useToast } from 'vue-toast-notification'
 import filter_svg from '@images/svg/filter.svg'
+import { cloneDeep } from 'lodash'
 
 // 输入参数
 const props = defineProps({
@@ -37,50 +38,41 @@ const ruleInfo = ref<CustomRule>({
   publish_time: '',
 })
 
-// 规则ID
-const ruleId = ref('')
-
-// 规则名称
-const ruleName = ref('')
-
 // 打开详情弹窗
 function openRuleInfoDialog() {
-  ruleInfo.value = props.rule
-  ruleId.value = props.rule.id
-  ruleName.value = props.rule.name
+  // 深复制
+  ruleInfo.value = cloneDeep(props.rule)
   ruleInfoDialog.value = true
 }
 
 // 保存详情数据
 function saveRuleInfo() {
   // 有空值
-  if (!ruleId.value && !ruleName.value) {
-    if (!ruleId.value && ruleName.value) {
+  if (!ruleInfo.value.id || !ruleInfo.value.name) {
+    if (!ruleInfo.value.id && ruleInfo.value.name) {
       $toast.error('规则ID不能为空')
     }
-    if (ruleId.value && !ruleName.value) {
+    if (ruleInfo.value.id && !ruleInfo.value.name) {
       $toast.error('规则名称不能为空')
     }
-    if (!ruleId.value && !ruleName.value) {
+    if (!ruleInfo.value.id && !ruleInfo.value.name) {
       $toast.error('规则ID和规则名称不能为空')
     }
     return
   }
   // ID已存在
-  if (ruleId.value !== props.rule.id && props.rules.find(rule => rule.id === ruleId.value)) {
-    $toast.error(`规则ID【${ruleId.value}】已存在，请替换`)
+  if (ruleInfo.value.id !== props.rule.id && props.rules.find(rule => rule.id === ruleInfo.value.id)) {
+    $toast.error(`规则ID【${ruleInfo.value.id}】已存在，请替换`)
     return
   }
   // 规则名称已存在
-  if (ruleName.value !== props.rule.name && props.rules.find(rule => rule.name === ruleName.value)) {
-    $toast.error(`规则名称【${ruleName.value}】已存在，请替换`)
+  if (ruleInfo.value.name !== props.rule.name && props.rules.find(rule => rule.name === ruleInfo.value.name)) {
+    $toast.error(`规则名称【${ruleInfo.value.name}】已存在，请替换`)
     return
   }
   // 保存数据
   ruleInfoDialog.value = false
-  ruleInfo.value.id = ruleId.value
-  ruleInfo.value.name = ruleName.value
-  emit('change', ruleInfo.value)
+  emit('change', ruleInfo.value, props.rule.id)
   emit('done')
 }
 
@@ -107,7 +99,7 @@ function onClose() {
         <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="ruleInfoDialog" scrollable max-width="40rem" persistent >
+    <VDialog v-model="ruleInfoDialog" scrollable max-width="40rem" persistent>
       <VCard :title="`${props.rule.id} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="ruleInfoDialog" />
         <VDivider />
@@ -116,7 +108,7 @@ function onClose() {
             <VRow>
               <VCol cols="12" md="6">
                 <VTextField
-                  v-model="ruleId"
+                  v-model="ruleInfo.id"
                   label="规则ID"
                   placeholder="必填；不可与其他规则ID重名"
                   hint="字符与数字组合，不能含空格"
@@ -126,7 +118,7 @@ function onClose() {
               </VCol>
               <VCol cols="12" md="6">
                 <VTextField
-                  v-model="ruleName"
+                  v-model="ruleInfo.name"
                   label="规则名称"
                   placeholder="必填；不可与其他规则名称重名"
                   hint="使用别名便于区分规则"

src/components/cards/FilterRuleGroupCard.vue

@@ -6,6 +6,7 @@ import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
 import { useToast } from 'vue-toast-notification'
 import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
 import filter_group_svg from '@images/svg/filter-group.svg'
+import { cloneDeep } from 'lodash'
 
 // 输入参数
 const props = defineProps({
@@ -53,9 +54,6 @@ const groupInfo = ref<FilterRuleGroup>({
   category: props.group?.category,
 })
 
-// 规则组名称
-const groupName = ref('')
-
 // 媒体类型字典
 const mediaTypeItems = [
   { title: '通用', value: '' },
@@ -88,15 +86,12 @@ function updateFilterCardValue(pri: string, rules: string[]) {
 
 // 移除卡片
 function filterCardClose(pri: string) {
-  // 将pri对应的卡片从列表中删除，并更新剩余卡片的序号
-  const updatedCards = filterRuleCards.value
+  filterRuleCards.value = filterRuleCards.value
     .filter(card => card.pri !== pri)
     .map((card, index) => {
       card.pri = (index + 1).toString()
       return card
     })
-  // 更新 filterRuleCards.value
-  filterRuleCards.value = updatedCards
 }
 
 // 分享规则
@@ -163,8 +158,8 @@ function dragOrderEnd() {
 
 // 打开详情弹窗
 function opengroupInfoDialog() {
-  groupInfo.value = props.group
-  groupName.value = props.group.name
+  // 深复制
+  groupInfo.value = cloneDeep(props.group)
   if (props.group.rule_string) {
     filterRuleCards.value = props.group.rule_string.split('>').map((group: string, index: number) => {
       return {
@@ -177,26 +172,25 @@ function opengroupInfoDialog() {
 }
 
 // 保存详情数据
-function savegroupInfo() {
+function saveGroupInfo() {
   // 为空
-  if (!groupName.value) {
+  if (!groupInfo.value.name) {
     $toast.error('规则组名称不能为空')
     return
   }
   // 重名判断
-  if (props.groups.some(item => item.name === groupName.value && item !== props.group)) {
-    $toast.error(`规则组名称【${groupName.value}】已存在，请替换`)
+  if (props.groups.some(item => item.name === groupInfo.value.name && item !== props.group)) {
+    $toast.error(`规则组名称【${groupInfo.value.name}】已存在，请替换`)
     return
   }
   // 保存
   groupInfoDialog.value = false
-  groupInfo.value.name = groupName.value
   // 更新到 groupInfo的rule_string
   groupInfo.value.rule_string = filterRuleCards.value
     .filter(card => card.rules.length > 0)
     .map(card => card.rules.join('&'))
     .join('>')
-  emit('change', groupInfo.value)
+  emit('change', groupInfo.value, props.group.name)
   emit('done')
 }
 
@@ -226,7 +220,7 @@ function onClose() {
         <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="groupInfoDialog" scrollable max-width="80rem" persistent >
+    <VDialog v-model="groupInfoDialog" scrollable max-width="80rem" persistent>
       <VCard :title="`${props.group.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="groupInfoDialog" />
         <VDivider />
@@ -234,7 +228,7 @@ function onClose() {
           <VRow>
             <VCol cols="12" md="6">
               <VTextField
-                v-model="groupName"
+                v-model="groupInfo.name"
                 label="规则组名称"
                 placeholder="必填；不可与其他规则组重名"
                 hint="自定义规则组名称"
@@ -297,7 +291,7 @@ function onClose() {
             <VIcon icon="mdi-share" />
           </VBtn>
           <VSpacer />
-          <VBtn @click="savegroupInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 确定 </VBtn>
+          <VBtn @click="saveGroupInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 确定 </VBtn>
         </VCardActions>
       </VCard>
     </VDialog>