refactor: 优化自定义字段逻辑

src/assets/icons/switchsvg.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710418001545" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16757" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 628.992l-256.448-224v125.12H384v197.824h383.616v125.056l256.384-224z m-384-354.88H256.384v-125.12L0 372.992l256.448 224v-125.056H640V274.112z" p-id="16758"></path></svg>

src/views/home/aside/comp/modals/CustomFilterModal.vue

@@ -1,16 +1,17 @@
 <script lang="ts" setup>
 import { computed, defineOptions, ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
-import { difference } from 'lodash-es'
+import { clone, debounce, difference } from 'lodash-es'
 import { setFilter } from '@/api/home/filter'
 import { asideMap } from '@/config/aside'
 import { useConfig } from '@/store/modules/asideConfig'
 
 defineOptions({ name: 'CustomFilterModal' })
 
-const show = ref(false)
+const show = ref(true)
 const configStore = useConfig()
 const checkAll = ref(false)
+const selectIds = ref<string[]>([])
 
 function showModal() {
   show.value = true
@@ -72,12 +73,16 @@ function generatList(config, customConfig) {
 
     // 系统配置为Y，且不是默认配置
     if (!isDefaultFilter) {
+      const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
+
       offList.push({
         id: key,
         name: name || '未配置',
         fix: isDefaultFilter,
-        checked: asideMap[key].isDefaultFilter,
+        checked: isChecked,
       })
+
+      isChecked && selectIds.value.push(key)
     }
   }
 
@@ -125,8 +130,6 @@ async function handleSumbit(e: MouseEvent) {
   closeModal()
 }
 
-const selectIds = ref<string[]>([])
-
 function onCheckAllChange(value) {
   const ids: string[] = []
 
@@ -228,10 +231,21 @@ function removeHandler(id: string) {
   if (index !== -1)
     onList.value.splice(index, 1)
 }
+
+const offKeyword = ref('')
+const onKeyword = ref('')
+
+const leftInputHandler = debounce((keyword) => {
+  offKeyword.value = keyword
+}, 300)
+
+const rightInputHandler = debounce((keyword) => {
+  onKeyword.value = keyword
+}, 300)
 </script>
 
 <template>
-  <n-modal v-model:show="show" transform-origin="center">
+  <n-modal v-model:show="show" transform-origin="center" :mask-closable="false">
     <n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
       <div class="wrapper">
         <span class="wrapper-title">自定义筛选</span>
@@ -241,14 +255,14 @@ function removeHandler(id: string) {
           </div>
         </div>
 
-        <n-grid cols="2" class="mt-4 proCard" responsive="screen" :x-gap="24">
+        <n-grid cols="24" class="mt-4 proCard" responsive="screen" :x-gap="24">
-          <n-grid-item>
+          <n-grid-item span="11">
             <NCard
               :title="allCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
               :bordered="false"
             >
               <div>
-                <n-input placeholder="搜索关键字">
+                <n-input placeholder="搜索关键字" @input="leftInputHandler">
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1" />
                   </template>
@@ -259,7 +273,7 @@ function removeHandler(id: string) {
                       <n-checkbox v-model:checked="checkAll" label="全部" @update:checked="onCheckAllChange" />
                     </div>
                     <div
-                      v-for="item in offList" :key="item.id" :class="{ 'disable-check': item.fix }"
+                      v-for="item in offList" v-show="item.name.includes(offKeyword) || offKeyword === ''" :key="item.id" :class="{ 'disable-check': item.fix }"
                       class="draggable-li"
                     >
                       <n-checkbox
@@ -272,7 +286,10 @@ function removeHandler(id: string) {
               </div>
             </NCard>
           </n-grid-item>
-          <n-grid-item>
+          <n-grid-item style="display: flex;align-items: center;" span="2">
+            <SvgIcon size="20" name="switchsvg" />
+          </n-grid-item>
+          <n-grid-item span="11">
             <NCard
               :title="selectCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
               :bordered="false"
@@ -281,7 +298,7 @@ function removeHandler(id: string) {
                 <span class="textbtnStyle" @click="clearDragSource">清空</span>
               </template>
               <div>
-                <n-input placeholder="搜索关键字">
+                <n-input placeholder="搜索关键字" @input="rightInputHandler">
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1" />
                   </template>
@@ -289,9 +306,10 @@ function removeHandler(id: string) {
                 <n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
                   <VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
                     <div
-                      v-for="item in onList" :key="item.id" :class="{ fix: item.fix }"
+                      v-for="item in onList" v-show="item.name.includes(onKeyword) || onKeyword === ''" :key="item.id" :class="{ fix: item.fix }"
                       class="cursor-move draggable-li"
                     >
+                      <SvgIcon name="drag" size="24" />
                       <span class="ml-2">{{ item.name }}</span>
                       <SvgIcon
                         v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
@@ -363,6 +381,7 @@ function removeHandler(id: string) {
 
 .cardstyle {
   width: 620px;
+  height: 800px;
   --n-padding-bottom: 20px;
   --n-padding-left: 24px;
 }