chore: 重构字典管理模块

2025-09-24 07:49:47 +08:00 · 2025-05-10 17:35:38 +08:00
parent 83b22c9d5d
commit 1a351c1c88
19 changed files with 498 additions and 621 deletions
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@ -48,7 +48,7 @@ watch(tenantId, async () => {
      <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
    </div>
    <div class="h-full flex-y-center justify-end">
-      <TenantSelect v-model:value="tenantId" class="mr-12px w-150px" />
+      <TenantSelect v-if="!appStore.isMobile" v-model:value="tenantId" class="mr-12px w-150px" />
      <GlobalSearch />
      <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
      <LangSwitch
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@ -172,8 +172,6 @@ const local: App.I18n.Schema = {
    tool_gen: 'Code Generation',
    system_user: 'User Management',
    system_dict: 'Dict Management',
-    system_dict_data: 'DictData MAnagement',
-    system_dict_type: 'DictType Management',
    system_tenant: 'Tenant Management',
    system_config: 'Config Management',
    system_dept: 'Dept Management',
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@ -172,8 +172,6 @@ const local: App.I18n.Schema = {
    tool_gen: '代码生成',
    system_user: '用户管理',
    system_dict: '字典管理',
-    system_dict_data: '字典数据管理',
-    system_dict_type: '字典类型管理',
    system_tenant: '租户管理',
    system_config: '参数设置',
    system_dept: '部门管理',
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@ -30,9 +30,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  system_client: () => import("@/views/system/client/index.vue"),
  system_config: () => import("@/views/system/config/index.vue"),
  system_dept: () => import("@/views/system/dept/index.vue"),
-  system_dict_data: () => import("@/views/system/dict/data/index.vue"),
  system_dict: () => import("@/views/system/dict/index.vue"),
-  system_dict_type: () => import("@/views/system/dict/type/index.vue"),
  system_menu: () => import("@/views/system/menu/index.vue"),
  system_notice: () => import("@/views/system/notice/index.vue"),
  "system_oss-config": () => import("@/views/system/oss-config/index.vue"),
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@ -178,27 +178,7 @@ export const generatedRoutes: GeneratedRoute[] = [
        meta: {
          title: 'system_dict',
          i18nKey: 'route.system_dict'
-        },
-        children: [
-          {
-            name: 'system_dict_data',
-            path: '/system/dict/data',
-            component: 'view.system_dict_data',
-            meta: {
-              title: 'system_dict_data',
-              i18nKey: 'route.system_dict_data'
-            }
-          },
-          {
-            name: 'system_dict_type',
-            path: '/system/dict/type',
-            component: 'view.system_dict_type',
-            meta: {
-              title: 'system_dict_type',
-              i18nKey: 'route.system_dict_type'
-            }
-          }
-        ]
+        }
      },
      {
        name: 'system_menu',
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@ -180,8 +180,6 @@ const routeMap: RouteMap = {
  "system_config": "/system/config",
  "system_dept": "/system/dept",
  "system_dict": "/system/dict",
-  "system_dict_data": "/system/dict/data",
-  "system_dict_type": "/system/dict/type",
  "system_menu": "/system/menu",
  "system_notice": "/system/notice",
  "system_oss": "/system/oss",
--- a/src/service/api/system/index.ts
+++ b/src/service/api/system/index.ts
@ -1,5 +1,6 @@
 export * from './menu';
 export * from './dict';
+export * from './dict-data';
 export * from './user';
 export * from './dept';
 export * from './role';
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@ -34,8 +34,6 @@ declare module "@elegant-router/types" {
    "system_config": "/system/config";
    "system_dept": "/system/dept";
    "system_dict": "/system/dict";
-    "system_dict_data": "/system/dict/data";
-    "system_dict_type": "/system/dict/type";
    "system_menu": "/system/menu";
    "system_notice": "/system/notice";
    "system_oss": "/system/oss";
@ -120,9 +118,7 @@ declare module "@elegant-router/types" {
    | "system_client"
    | "system_config"
    | "system_dept"
-    | "system_dict_data"
    | "system_dict"
-    | "system_dict_type"
    | "system_menu"
    | "system_notice"
    | "system_oss-config"
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@ -208,13 +208,7 @@ async function handleRefreshCache() {
          @refresh="getData"
        >
          <template #prefix>
-            <NButton
-              v-if="hasAuth('system:config:remove')"
-              type="warning"
-              ghost
-              size="small"
-              @click="handleRefreshCache"
-            >
+            <NButton v-if="hasAuth('system:config:remove')" ghost size="small" @click="handleRefreshCache">
              <template #icon>
                <icon-material-symbols:sync-outline />
              </template>
--- a/src/views/system/dict/data/index.vue
+++ b/src/views/system/dict/data/index.vue
@ -1,239 +0,0 @@
-<script setup lang="tsx">
-import { NDivider } from 'naive-ui';
-import { fetchBatchDeleteDictData, fetchGetDictDataList } from '@/service/api/system/dict-data';
-import { useAppStore } from '@/store/modules/app';
-import { useAuth } from '@/hooks/business/auth';
-import { useDownload } from '@/hooks/business/download';
-import { useTable, useTableOperate } from '@/hooks/common/table';
-import { $t } from '@/locales';
-import DictTag from '@/components/custom/dict-tag.vue';
-import ButtonIcon from '@/components/custom/button-icon.vue';
-import { emitter } from '../mitt';
-import DictDataOperateDrawer from './modules/dict-data-operate-drawer.vue';
-import DictDataSearch from './modules/dict-data-search.vue';
-
-defineOptions({
-  name: 'DictDataList'
-});
-
-const appStore = useAppStore();
-const { download } = useDownload();
-const { hasAuth } = useAuth();
-
-const {
-  columns,
-  columnChecks,
-  data,
-  getData,
-  getDataByPage,
-  loading,
-  mobilePagination,
-  searchParams,
-  resetSearchParams
-} = useTable({
-  apiFn: fetchGetDictDataList,
-  apiParams: {
-    pageNum: 1,
-    pageSize: 10,
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
-    dictLabel: null,
-    dictType: null
-  },
-  columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
-    },
-    {
-      key: 'dictLabel',
-      title: '字典标签',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      },
-      render(row) {
-        return <DictTag size="small" dictData={row} />;
-      }
-    },
-    {
-      key: 'dictValue',
-      title: '字典键值',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'dictSort',
-      title: '字典排序',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'remark',
-      title: '备注',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'createTime',
-      title: '创建时间',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'operate',
-      title: $t('common.operate'),
-      align: 'center',
-      width: 160,
-      render: row => {
-        const divider = () => {
-          if (!hasAuth('system:dict:edit') || !hasAuth('system:dict:remove')) {
-            return null;
-          }
-          return <NDivider vertical />;
-        };
-
-        const editBtn = () => {
-          if (!hasAuth('system:dict:edit')) {
-            return null;
-          }
-          return (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:drive-file-rename-outline-outline"
-              tooltipContent={$t('common.edit')}
-              onClick={() => edit(row.dictCode!)}
-            />
-          );
-        };
-
-        const deleteBtn = () => {
-          if (!hasAuth('system:dict:remove')) {
-            return null;
-          }
-          return (
-            <ButtonIcon
-              text
-              type="error"
-              icon="material-symbols:delete-outline"
-              tooltipContent={$t('common.delete')}
-              popconfirmContent={$t('common.confirmDelete')}
-              onPositiveClick={() => handleDelete(row.dictCode!)}
-            />
-          );
-        };
-
-        return (
-          <div class="flex-center gap-8px">
-            {editBtn()}
-            {divider()}
-            {deleteBtn()}
-          </div>
-        );
-      }
-    }
-  ]
-});
-
-const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
-  useTableOperate(data, getData);
-
-async function handleBatchDelete() {
-  // request
-  const { error } = await fetchBatchDeleteDictData(checkedRowKeys.value);
-  if (error) return;
-  onBatchDeleted();
-}
-
-async function handleDelete(dictCode: CommonType.IdType) {
-  // request
-  const { error } = await fetchBatchDeleteDictData([dictCode]);
-  if (error) return;
-  onDeleted();
-}
-
-async function edit(dictCode: CommonType.IdType) {
-  handleEdit('dictCode', dictCode);
-}
-
-async function handleExport() {
-  download('/system/dict/data/export', searchParams, `字典数据_${new Date().getTime()}.xlsx`);
-}
-
-emitter.on('rowClick', async (value: string) => {
-  searchParams.dictType = value;
-  await getDataByPage();
-});
-
-/** 自定义重置方法，重置dictLabel，不重置dictType */
-async function handleReset() {
-  searchParams.dictLabel = null;
-  await getDataByPage();
-}
-</script>
-
-<template>
-  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <DictDataSearch v-model:model="searchParams" @reset="handleReset" @search="getDataByPage" />
-    <NCard title="字典数据列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
-      <template #header-extra>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          :disable-add="searchParams.dictType == null"
-          :show-add="hasAuth('system:dictData:add')"
-          :show-delete="hasAuth('system:dictData:remove')"
-          :show-export="hasAuth('system:dictData:export')"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @export="handleExport"
-          @refresh="getData"
-          @reset="resetSearchParams"
-        />
-      </template>
-      <NDataTable
-        v-model:checked-row-keys="checkedRowKeys"
-        :columns="columns"
-        :data="data"
-        size="small"
-        :flex-height="!appStore.isMobile"
-        :scroll-x="608"
-        :loading="loading"
-        remote
-        :row-key="row => row.dictCode"
-        :pagination="mobilePagination"
-        class="sm:h-full"
-      />
-      <DictDataOperateDrawer
-        v-model:visible="drawerVisible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        :dict-type="searchParams.dictType || ''"
-        @submitted="getDataByPage"
-      />
-    </NCard>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@ -1,17 +1,480 @@
-<script setup lang="ts">
-import { onUnmounted } from 'vue';
-import DictTypeList from './type/index.vue';
-import DictDataList from './data/index.vue';
-import { emitter } from './mitt';
+<script setup lang="tsx">
+import { ref } from 'vue';
+import type { TreeOption } from 'naive-ui';
+import { NDivider, NTooltip } from 'naive-ui';
+import { useBoolean, useLoading } from '@sa/hooks';
+import {
+  fetchBatchDeleteDictData,
+  fetchBatchDeleteDictType,
+  fetchGetDictDataList,
+  fetchGetDictTypeOption,
+  fetchRefreshCache
+} from '@/service/api/system';
+import { useAppStore } from '@/store/modules/app';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useDict } from '@/hooks/business/dict';
+import { useAuth } from '@/hooks/business/auth';
+import { useDownload } from '@/hooks/business/download';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import { $t } from '@/locales';
+import DictTag from '@/components/custom/dict-tag.vue';
+import DictDataSearch from './modules/dict-data-search.vue';
+import DictDataOperateDrawer from './modules/dict-data-operate-drawer.vue';
+import DictTypeOperateDrawer from './modules/dict-type-operate-drawer.vue';

-onUnmounted(() => emitter.off('rowClick'));
+defineOptions({
+  name: 'DictList'
+});
+
+useDict('sys_user_sex');
+
+const { hasAuth } = useAuth();
+const appStore = useAppStore();
+const { download } = useDownload();
+
+const dictTypeData = ref<Api.System.DictType>();
+const dictOperateType = ref<NaiveUI.TableOperateType>('add');
+const { bool: dictTypeDrawerVisible, setTrue: openDictTypeDrawer } = useBoolean();
+const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagination, searchParams } = useTable({
+  apiFn: fetchGetDictDataList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    dictLabel: null,
+    dictType: null
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'dictLabel',
+      title: '字典标签',
+      align: 'center',
+      minWidth: 80,
+      resizable: true,
+      ellipsis: {
+        tooltip: true
+      },
+      render(row) {
+        return <DictTag size="small" dictData={row} />;
+      }
+    },
+    {
+      key: 'dictValue',
+      title: '字典键值',
+      align: 'center',
+      minWidth: 80,
+      resizable: true,
+      ellipsis: {
+        tooltip: true
+      }
+    },
+    {
+      key: 'dictSort',
+      title: '字典排序',
+      align: 'center',
+      minWidth: 80,
+      resizable: true,
+      ellipsis: {
+        tooltip: true
+      }
+    },
+    {
+      key: 'remark',
+      title: '备注',
+      align: 'center',
+      minWidth: 80,
+      resizable: true,
+      ellipsis: {
+        tooltip: true
+      }
+    },
+    {
+      key: 'createTime',
+      title: '创建时间',
+      align: 'center',
+      minWidth: 80,
+      resizable: true,
+      ellipsis: {
+        tooltip: true
+      }
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 160,
+      render: row => {
+        const divider = () => {
+          if (!hasAuth('system:dict:edit') || !hasAuth('system:dict:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
+        const editBtn = () => {
+          if (!hasAuth('system:dict:edit')) {
+            return null;
+          }
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.dictCode!)}
+            />
+          );
+        };
+
+        const deleteBtn = () => {
+          if (!hasAuth('system:dict:remove')) {
+            return null;
+          }
+          return (
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.dictCode!)}
+            />
+          );
+        };
+
+        return (
+          <div class="flex-center gap-8px">
+            {editBtn()}
+            {divider()}
+            {deleteBtn()}
+          </div>
+        );
+      }
+    }
+  ]
+});
+
+const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
+  useTableOperate(data, getData);
+
+async function handleBatchDelete() {
+  // request
+  const { error } = await fetchBatchDeleteDictData(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+
+async function handleDelete(dictCode: CommonType.IdType) {
+  // request
+  const { error } = await fetchBatchDeleteDictData([dictCode]);
+  if (error) return;
+  onDeleted();
+}
+
+async function edit(dictCode: CommonType.IdType) {
+  handleEdit('dictCode', dictCode);
+}
+
+async function handleExport() {
+  download('/system/dict/data/export', searchParams, `字典数据_${new Date().getTime()}.xlsx`);
+}
+
+async function handleReset() {
+  searchParams.dictLabel = null;
+  await getDataByPage();
+}
+
+async function handleRefreshCache() {
+  const { error } = await fetchRefreshCache();
+  if (error) return;
+  window.$message?.success('刷新缓存成功');
+  await getData();
+}
+
+const { loading: treeLoading, startLoading: startTreeLoading, endLoading: endTreeLoading } = useLoading();
+const dictPattern = ref<string>();
+const dictData = ref<Api.System.DictType[]>([]);
+
+function dictFilter(pattern: string, node: TreeOption) {
+  const dictName = node.dictName as string;
+  const dictType = node.dictType as string;
+  return dictName.includes(pattern) || dictType.includes(pattern);
+}
+
+async function getTreeData() {
+  startTreeLoading();
+  const { data: tree, error } = await fetchGetDictTypeOption();
+  if (!error) {
+    dictData.value = tree;
+  }
+  endTreeLoading();
+}
+
+getTreeData();
+
+function handleClickTree(keys: string[]) {
+  searchParams.dictType = keys.length ? keys[0] : null;
+  checkedRowKeys.value = [];
+  getDataByPage();
+}
+
+function handleResetTreeData() {
+  dictPattern.value = undefined;
+  getTreeData();
+}
+
+function renderLabel({ option }: { option: TreeOption }) {
+  return (
+    <NTooltip placement="left">
+      {{
+        trigger: () => (
+          <div class="w-200px flex gap-6px overflow-hidden text-ellipsis whitespace-nowrap">
+            <span>{option.dictName}</span>
+            <span class="text-12px text-gray-500">( {option.dictType} )</span>
+          </div>
+        ),
+        default: () => (
+          <div class="flex-col">
+            <span>
+              {option.dictName} {option.dictType}
+            </span>
+            {option.remark ? <span>( {option.remark} )</span> : null}
+            <span>{option.createTime}</span>
+          </div>
+        )
+      }}
+    </NTooltip>
+  );
+}
+
+function renderSuffix({ option }: { option: TreeOption }) {
+  return (
+    <div class="flex-center gap-12px">
+      <ButtonIcon
+        text
+        type="primary"
+        icon="material-symbols:drive-file-rename-outline-outline"
+        tooltip-content="修改"
+        onClick={(event: Event) => {
+          event.stopPropagation();
+          handleEditType(option as Api.System.DictType);
+        }}
+      />
+      <ButtonIcon
+        text
+        type="error"
+        icon="material-symbols:delete-outline"
+        tooltip-content="删除"
+        popconfirm-content={`确定删除字典类型 ${option.dictType} 吗？`}
+        onClick={(event: Event) => event.stopPropagation()}
+        onPositiveClick={() => handleDeleteType(option as Api.System.DictType)}
+      />
+    </div>
+  );
+}
+
+function handleAddType() {
+  dictTypeData.value = undefined;
+  dictOperateType.value = 'add';
+  openDictTypeDrawer();
+}
+
+function handleEditType(dictType: Api.System.DictType) {
+  dictTypeData.value = dictType;
+  dictOperateType.value = 'edit';
+  openDictTypeDrawer();
+}
+
+async function handleDeleteType(dictType: Api.System.DictType) {
+  const { error } = await fetchBatchDeleteDictType([dictType.dictId]);
+  if (error) return;
+  window.$message?.success('删除成功');
+  getTreeData();
+}
+
+async function handleExportType() {
+  download('/system/dict/type/export', searchParams, `字典类型_${new Date().getTime()}.xlsx`);
+}
 </script>

 <template>
-  <div class="h-full flex flex-col gap-16px md:flex-row">
-    <DictTypeList class="w-full md:w-1/2" />
-    <DictDataList class="w-full md:w-1/2" />
-  </div>
+  <TableSiderLayout sider-title="字典类型列表">
+    <template #header-extra>
+      <ButtonIcon
+        v-if="hasAuth('system:dict:add')"
+        size="small"
+        icon="material-symbols:add-rounded"
+        class="h-18px text-icon"
+        tooltip-content="新增字典类型"
+        @click.stop="() => handleAddType()"
+      />
+      <ButtonIcon
+        v-if="hasAuth('system:dict:export')"
+        size="small"
+        icon="material-symbols:download-rounded"
+        class="h-18px text-icon"
+        tooltip-content="导出字典类型"
+        @click.stop="() => handleExportType()"
+      />
+      <ButtonIcon
+        size="small"
+        icon="material-symbols:refresh-rounded"
+        class="h-18px text-icon"
+        tooltip-content="刷新列表"
+        @click.stop="() => handleResetTreeData()"
+      />
+    </template>
+    <template #sider>
+      <NInput v-model:value="dictPattern" clearable :placeholder="$t('common.keywordSearch')" />
+      <NSpin class="dict-tree" :show="treeLoading">
+        <NTree
+          block-node
+          show-line
+          :data="dictData as []"
+          :default-expanded-keys="dictData?.length ? [dictData[0].dictType!] : []"
+          :show-irrelevant-nodes="false"
+          :pattern="dictPattern"
+          :filter="dictFilter"
+          class="infinite-scroll h-full min-h-200px py-3"
+          key-field="dictType"
+          label-field="dictName"
+          virtual-scroll
+          :render-label="renderLabel"
+          :render-suffix="renderSuffix"
+          @update:selected-keys="handleClickTree"
+        >
+          <template #empty>
+            <NEmpty description="暂无字典类型" class="h-full min-h-200px justify-center" />
+          </template>
+        </NTree>
+      </NSpin>
+    </template>
+    <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
+      <DictDataSearch v-model:model="searchParams" @reset="handleReset" @search="getDataByPage" />
+      <TableRowCheckAlert v-model:checked-row-keys="checkedRowKeys" />
+      <NCard title="字典数据列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+        <template #header-extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="checkedRowKeys.length === 0"
+            :disable-add="!searchParams.dictType"
+            :loading="loading"
+            :show-add="hasAuth('system:user:add')"
+            :show-delete="hasAuth('system:user:remove')"
+            :show-export="hasAuth('system:user:export')"
+            @add="handleAdd"
+            @delete="handleBatchDelete"
+            @refresh="getData"
+            @export="handleExport"
+          >
+            <template #prefix>
+              <NButton ghost size="small" @click="handleRefreshCache">
+                <template #icon>
+                  <icon-material-symbols:refresh-rounded class="text-icon" />
+                </template>
+                刷新缓存
+              </NButton>
+            </template>
+          </TableHeaderOperation>
+        </template>
+        <NDataTable
+          v-model:checked-row-keys="checkedRowKeys"
+          :columns="columns"
+          :data="data"
+          size="small"
+          :flex-height="!appStore.isMobile"
+          :scroll-x="962"
+          :loading="loading"
+          remote
+          :row-key="row => row.dictCode"
+          :pagination="mobilePagination"
+          class="h-full"
+        />
+        <DictDataOperateDrawer
+          v-model:visible="drawerVisible"
+          :operate-type="operateType"
+          :row-data="editingData"
+          :dict-type="searchParams.dictType || ''"
+          @submitted="getDataByPage"
+        />
+        <DictTypeOperateDrawer
+          v-model:visible="dictTypeDrawerVisible"
+          :operate-type="dictOperateType"
+          :row-data="dictTypeData"
+          @submitted="getTreeData"
+        />
+      </NCard>
+    </div>
+  </TableSiderLayout>
 </template>

-<style scoped></style>
+<style scoped lang="scss">
+.dict-tree {
+  .n-button {
+    --n-padding: 8px !important;
+  }
+
+  :deep(.n-tree__empty) {
+    height: 100%;
+    justify-content: center;
+  }
+
+  :deep(.n-spin-content) {
+    height: 100%;
+  }
+
+  :deep(.infinite-scroll) {
+    height: calc(100vh - 228px - var(--calc-footer-height, 0px)) !important;
+    max-height: calc(100vh - 228px - var(--calc-footer-height, 0px)) !important;
+  }
+
+  @media screen and (max-width: 1024px) {
+    :deep(.infinite-scroll) {
+      height: calc(100vh - 227px - var(--calc-footer-height, 0px)) !important;
+      max-height: calc(100vh - 227px - var(--calc-footer-height, 0px)) !important;
+    }
+  }
+
+  :deep(.n-tree-node) {
+    height: 30px;
+  }
+
+  :deep(.n-tree-node-switcher) {
+    height: 30px;
+  }
+
+  :deep(.n-tree-node-switcher__icon) {
+    font-size: 16px !important;
+    height: 16px !important;
+    width: 16px !important;
+  }
+}
+
+:deep(.n-data-table-wrapper),
+:deep(.n-data-table-base-table),
+:deep(.n-data-table-base-table-body) {
+  height: 100%;
+}
+
+@media screen and (max-width: 800px) {
+  :deep(.n-data-table-base-table-body) {
+    max-height: calc(100vh - 400px - var(--calc-footer-height, 0px));
+  }
+}
+
+@media screen and (max-width: 802px) {
+  :deep(.n-data-table-base-table-body) {
+    max-height: calc(100vh - 473px - var(--calc-footer-height, 0px));
+  }
+}
+
+:deep(.n-card-header__main) {
+  min-width: 69px !important;
+}
+</style>
--- a/src/views/system/dict/mitt.ts
+++ b/src/views/system/dict/mitt.ts
@ -1,8 +0,0 @@
-import mitt from 'mitt';
-
-/** dictType: string */
-type Events = {
-  rowClick: string;
-};
-
-export const emitter = mitt<Events>();
--- a/src/views/system/dict/data/modules/dict-data-operate-drawer.vue
+++ b/src/views/system/dict/data/modules/dict-data-operate-drawer.vue
@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { computed, h, reactive, watch } from 'vue';
+<script setup lang="tsx">
+import { computed, reactive, watch } from 'vue';
 import { NTag } from 'naive-ui';
 import { fetchCreateDictData, fetchUpdateDictData } from '@/service/api/system/dict-data';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
@ -134,9 +134,11 @@ watch(visible, () => {
 });

 function renderTagLabel(option: { label: string; value: string }) {
-  return h('div', { class: 'flex items-center gap-2' }, [
-    h(NTag, { type: option.value as any }, { default: () => option.label })
-  ]);
+  return (
+    <NTag size="small" type={option.value as any}>
+      {option.label}
+    </NTag>
+  );
 }
 </script>

@ -150,6 +152,7 @@ function renderTagLabel(option: { label: string; value: string }) {
        <NFormItem label="标签样式" path="listClass">
          <NSelect
            v-model:value="model.listClass"
+            clearable
            :options="listClassOptions"
            placeholder="请选择标签样式"
            :render-label="renderTagLabel"
--- a/src/views/system/dict/data/modules/dict-data-search.vue
+++ b/src/views/system/dict/data/modules/dict-data-search.vue
@ -34,10 +34,10 @@ async function search() {
      <NCollapseItem :title="$t('common.search')" name="user-search">
        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
          <NGrid responsive="self" item-responsive>
-            <NFormItemGi span="12 s:12 m:6" label="字典标签" path="dictLabel" class="pr-24px">
+            <NFormItemGi :show-feedback="false" span="12" label="字典标签" path="dictLabel" class="pr-24px">
              <NInput v-model:value="model.dictLabel" placeholder="请输入字典标签" />
            </NFormItemGi>
-            <NFormItemGi span="24" class="pr-24px">
+            <NFormItemGi :show-feedback="false" span="12" class="pr-24px">
              <NSpace class="w-full" justify="end">
                <NButton @click="reset">
                  <template #icon>
--- a/src/views/system/dict/type/modules/dict-type-operate-drawer.vue
+++ b/src/views/system/dict/type/modules/dict-type-operate-drawer.vue
@ -50,10 +50,12 @@ function createDefaultModel(): Model {
  };
 }

-type RuleKey = Extract<keyof Model, 'dictId'>;
+type RuleKey = Extract<keyof Model, 'dictId' | 'dictName' | 'dictType'>;

 const rules: Record<RuleKey, App.Global.FormRule> = {
-  dictId: createRequiredRule('字典主键不能为空')
+  dictId: createRequiredRule('字典主键不能为空'),
+  dictName: createRequiredRule('字典名称不能为空'),
+  dictType: createRequiredRule('字典类型不能为空')
 };

 function handleUpdateModelWhenEdit() {
--- a/src/views/system/dict/type/index.vue
+++ b/src/views/system/dict/type/index.vue
@ -1,241 +0,0 @@
-<script setup lang="tsx">
-import { ref } from 'vue';
-import { NDivider } from 'naive-ui';
-import type { TableDataWithIndex } from '@sa/hooks';
-import { fetchBatchDeleteDictType, fetchGetDictTypeList, fetchRefreshCache } from '@/service/api/system/dict';
-import { useAppStore } from '@/store/modules/app';
-import { useAuth } from '@/hooks/business/auth';
-import { useDownload } from '@/hooks/business/download';
-import { useTable, useTableOperate } from '@/hooks/common/table';
-import { $t } from '@/locales';
-import ButtonIcon from '@/components/custom/button-icon.vue';
-import { emitter } from '../mitt';
-import DictTypeOperateDrawer from './modules/dict-type-operate-drawer.vue';
-import DictTypeSearch from './modules/dict-type-search.vue';
-
-defineOptions({
-  name: 'DictTypeList'
-});
-
-const appStore = useAppStore();
-const { download } = useDownload();
-const { hasAuth } = useAuth();
-
-const {
-  columns,
-  columnChecks,
-  data,
-  getData,
-  getDataByPage,
-  loading,
-  mobilePagination,
-  searchParams,
-  resetSearchParams
-} = useTable({
-  apiFn: fetchGetDictTypeList,
-  apiParams: {
-    pageNum: 1,
-    pageSize: 10,
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
-    dictName: null,
-    dictType: null
-  },
-  columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
-    },
-    {
-      key: 'dictName',
-      title: '字典名称',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'dictType',
-      title: '字典类型',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'remark',
-      title: '备注',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'createTime',
-      title: '创建时间',
-      align: 'center',
-      minWidth: 80,
-      resizable: true,
-      ellipsis: {
-        tooltip: true
-      }
-    },
-    {
-      key: 'operate',
-      title: $t('common.operate'),
-      align: 'center',
-      width: 160,
-      render: row => {
-        const divider = () => {
-          if (!hasAuth('system:dict:edit') || !hasAuth('system:dict:remove')) {
-            return null;
-          }
-          return <NDivider vertical />;
-        };
-
-        const editBtn = () => {
-          if (!hasAuth('system:dict:edit')) {
-            return null;
-          }
-          return (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:drive-file-rename-outline-outline"
-              tooltipContent={$t('common.edit')}
-              onClick={() => edit(row.dictId!)}
-            />
-          );
-        };
-
-        const deleteBtn = () => {
-          if (!hasAuth('system:dict:remove')) {
-            return null;
-          }
-          return (
-            <ButtonIcon
-              text
-              type="error"
-              icon="material-symbols:delete-outline"
-              tooltipContent={$t('common.delete')}
-              popconfirmContent={$t('common.confirmDelete')}
-              onPositiveClick={() => handleDelete(row.dictId!)}
-            />
-          );
-        };
-
-        return (
-          <div class="flex-center gap-8px">
-            {editBtn()}
-            {divider()}
-            {deleteBtn()}
-          </div>
-        );
-      }
-    }
-  ]
-});
-
-const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
-  useTableOperate(data, getData);
-
-const lastDictType = ref('');
-const rowClick = (row: TableDataWithIndex<Api.System.DictType>) => {
-  return {
-    style: 'cursor: pointer;',
-    onClick: () => {
-      if (lastDictType.value === row.dictType) {
-        return;
-      }
-      emitter.emit('rowClick', row.dictType);
-      lastDictType.value = row.dictType;
-    }
-  };
-};
-
-async function handleBatchDelete() {
-  // request
-  const { error } = await fetchBatchDeleteDictType(checkedRowKeys.value);
-  if (error) return;
-  onBatchDeleted();
-}
-
-async function handleDelete(dictId: CommonType.IdType) {
-  // request
-  const { error } = await fetchBatchDeleteDictType([dictId]);
-  if (error) return;
-  onDeleted();
-}
-
-async function edit(dictId: CommonType.IdType) {
-  handleEdit('dictId', dictId);
-}
-
-async function handleExport() {
-  download('/system/dict/type/export', searchParams, `字典类型_${new Date().getTime()}.xlsx`);
-}
-
-async function handleRefreshCache() {
-  const { error } = await fetchRefreshCache();
-  if (error) return;
-  window.$message?.success('刷新缓存成功');
-  await getData();
-}
-</script>
-
-<template>
-  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <DictTypeSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-    <NCard title="字典类型列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
-      <template #header-extra>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          :show-add="hasAuth('system:dict:add')"
-          :show-delete="hasAuth('system:dict:remove')"
-          :show-export="hasAuth('system:dict:export')"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @export="handleExport"
-          @refresh="getData"
-        >
-          <template #prefix>
-            <NButton v-if="hasAuth('system:dict:remove')" type="warning" ghost size="small" @click="handleRefreshCache">
-              刷新缓存
-            </NButton>
-          </template>
-        </TableHeaderOperation>
-      </template>
-      <NDataTable
-        v-model:checked-row-keys="checkedRowKeys"
-        :columns="columns"
-        :data="data"
-        size="small"
-        :flex-height="!appStore.isMobile"
-        :scroll-x="528"
-        :loading="loading"
-        remote
-        :row-key="row => row.dictId"
-        :pagination="mobilePagination"
-        class="sm:h-full"
-        :row-props="rowClick"
-      />
-      <DictTypeOperateDrawer
-        v-model:visible="drawerVisible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        @submitted="getDataByPage"
-      />
-    </NCard>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/views/system/dict/type/modules/dict-type-search.vue
+++ b/src/views/system/dict/type/modules/dict-type-search.vue
@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { useNaiveForm } from '@/hooks/common/form';
-import { $t } from '@/locales';
-
-defineOptions({
-  name: 'DictTypeSearch'
-});
-
-interface Emits {
-  (e: 'reset'): void;
-  (e: 'search'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-
-const model = defineModel<Api.System.DictTypeSearchParams>('model', { required: true });
-
-async function reset() {
-  await restoreValidation();
-  emit('reset');
-}
-
-async function search() {
-  await validate();
-  emit('search');
-}
-</script>
-
-<template>
-  <NCard :bordered="false" size="small" class="card-wrapper">
-    <NCollapse>
-      <NCollapseItem :title="$t('common.search')" name="user-search">
-        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
-          <NGrid responsive="self" item-responsive>
-            <NFormItemGi span="12 s:12 m:6" label="字典名称" path="dictName" class="pr-24px">
-              <NInput v-model:value="model.dictName" placeholder="请输入字典名称" />
-            </NFormItemGi>
-            <NFormItemGi span="12 s:12 m:6" label="字典类型" path="dictType" class="pr-24px">
-              <NInput v-model:value="model.dictType" placeholder="请输入字典名称" />
-            </NFormItemGi>
-            <NFormItemGi span="24" class="pr-24px">
-              <NSpace class="w-full" justify="end">
-                <NButton @click="reset">
-                  <template #icon>
-                    <icon-ic-round-refresh class="text-icon" />
-                  </template>
-                  {{ $t('common.reset') }}
-                </NButton>
-                <NButton type="primary" ghost @click="search">
-                  <template #icon>
-                    <icon-ic-round-search class="text-icon" />
-                  </template>
-                  {{ $t('common.search') }}
-                </NButton>
-              </NSpace>
-            </NFormItemGi>
-          </NGrid>
-        </NForm>
-      </NCollapseItem>
-    </NCollapse>
-  </NCard>
-</template>
-
-<style scoped></style>
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@ -282,14 +282,14 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
      <ButtonIcon
        v-if="hasAuth('system:menu:add')"
        size="small"
-        icon="ic-round-plus"
+        icon="material-symbols:add-rounded"
        class="h-28px text-icon"
        tooltip-content="新增菜单"
        @click.stop="handleAddMenu(0)"
      />
      <ButtonIcon
        size="small"
-        icon="ic-round-refresh"
+        icon="material-symbols:refresh-rounded"
        class="h-28px text-icon"
        tooltip-content="刷新"
        @click.stop="reset"
@ -345,13 +345,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
                @click="handleAddMenu(currentMenu.menuId!)"
              >
                <template #icon>
-                  <icon-ic-round-plus />
+                  <icon-material-symbols-add-rounded />
                </template>
                新增子菜单
              </NButton>
              <NButton v-if="hasAuth('system:menu:edit')" size="small" ghost type="primary" @click="handleUpdateMenu">
                <template #icon>
-                  <icon-ic-round-edit />
+                  <icon-material-symbols-drive-file-rename-outline-outline />
                </template>
                编辑
              </NButton>
@ -365,7 +365,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
                    :disabled="btnData.length > 0 || btnLoading"
                  >
                    <template #icon>
-                      <icon-ic-round-delete />
+                      <icon-material-symbols-delete-outline />
                    </template>
                    {{ $t('common.delete') }}
                  </NButton>
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@ -219,7 +219,7 @@ async function handleExport() {
          @refresh="getData"
        >
          <template #prefix>
-            <NButton v-if="isSuperAdmin" type="warning" ghost size="small" @click="handleSyncTenantDict">
+            <NButton v-if="isSuperAdmin" ghost size="small" @click="handleSyncTenantDict">
              <template #icon>
                <icon-material-symbols:sync-outline />
              </template>