新增：css样式支持

src/views/cms/design/components/search.vue

@@ -7,6 +7,18 @@
       </template>
       <span>添加</span>
     </a-button>
+    <a-tree-select
+      allow-clear
+      :tree-data="navigationList"
+      tree-default-expand-all
+      style="width: 230px"
+      placeholder="请选择栏目"
+      :value="where.categoryId || undefined"
+      :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+      @update:value="(value?: number) => (where.categoryId = value)"
+      @change="onCategoryId"
+    />
+    <a-button @click="reset">重置</a-button>
   </a-space>
 </template>
 
@@ -14,11 +26,14 @@
   import { PlusOutlined } from '@ant-design/icons-vue';
   import type { GradeParam } from '@/api/user/grade/model';
   import { watch } from 'vue';
+  import useSearch from "@/utils/use-search";
+  import type { ArticleParam } from "@/api/cms/article/model";
 
   const props = withDefaults(
     defineProps<{
       // 选中的角色
       selection?: [];
+      navigationList?: Navigator[];
     }>(),
     {}
   );
@@ -35,6 +50,29 @@
     emit('add');
   };
 
+  // 表单数据
+  const { where, resetFields } = useSearch<ArticleParam>({
+    articleId: undefined,
+    navigationId: undefined,
+    categoryId: undefined,
+    merchantId: undefined,
+    status: undefined,
+    keywords: ''
+  });
+
+  // 按分类查询
+  const onCategoryId = (id: number) => {
+    where.categoryId = id;
+    emit('search', where);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    type.value = '';
+    reload();
+  };
+
   watch(
     () => props.selection,
     () => {}

src/views/cms/design/index.vue

@@ -15,6 +15,7 @@
             <search
               @search="reload"
               :selection="selection"
+              :navigationList="navigationList"
               @add="openEdit"
               @remove="removeBatch"
               @batchMove="openMove"
@@ -65,7 +66,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref, watch } from 'vue';
+  import { createVNode, ref } from 'vue';
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
@@ -82,8 +83,11 @@
   } from '@/api/cms/design';
   import type { Design, DesignParam } from '@/api/cms/design/model';
   import { useRouter } from 'vue-router';
-  import { openPreview, openUrl } from "@/utils/common";
+  import { toTreeData } from 'ele-admin-pro';
+  import { openUrl } from '@/utils/common';
   import { getSiteDomain } from '@/utils/domain';
+  import { Navigation } from '@/api/cms/navigation/model';
+  import { listNavigation } from '@/api/cms/navigation';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -98,6 +102,8 @@
   const showMove = ref(false);
   // 网站域名
   const domain = getSiteDomain();
+  // 栏目数据
+  const navigationList = ref<Navigation[]>();
 
   // 加载状态
   const loading = ref(true);
@@ -243,6 +249,23 @@
   /* 查询 */
   const query = () => {
     loading.value = true;
+    // 加载栏目数据
+    if (!navigationList.value) {
+      listNavigation({}).then((res) => {
+        navigationList.value = toTreeData({
+          data: res?.map((d) => {
+            d.value = d.navigationId;
+            d.label = d.title;
+            if (d.model != 'custom') {
+              d.disabled = true;
+            }
+            return d;
+          }),
+          idField: 'navigationId',
+          parentIdField: 'parentId'
+        });
+      });
+    }
   };
 
   /* 自定义行属性 */