From 4bd079c4c2b2bd8a2d5bdf8b65e6df01877ec26a Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Fri, 26 Sep 2025 16:33:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(dict):=20=E6=96=B0=E5=A2=9E=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E7=AE=A1=E7=90=86=E5=92=8C=E5=AD=97=E5=85=B8=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现字典类型管理页面，支持增删改查
- 实现字典数据详情页面，支持数据管理
- 添加字典类型可点击链接跳转到详情页面
- 支持状态切换开关和确认操作
- 实现标签类型动态颜色显示功能
- 采用紧凑表单布局和统一按钮样式
---
 src/views/system/dict/data.vue  | 1088 +++++++++++++++++++++++++++++++
 src/views/system/dict/index.vue |  899 +++++++++++++++++++++++++
 2 files changed, 1987 insertions(+)
 create mode 100644 src/views/system/dict/data.vue
 create mode 100644 src/views/system/dict/index.vue

diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
new file mode 100644
index 0000000..fb8c943
--- /dev/null
+++ b/src/views/system/dict/data.vue
@@ -0,0 +1,1088 @@
+<template>
+  <div class="dict-data-management p-1 bg-gray-50 h-screen flex flex-col">
+    <!-- 搜索表单和字典数据表格 -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
+      <!-- 页面标题和返回按钮 -->
+      <div class="px-4 py-3 border-b border-gray-100 bg-gray-50">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <NButton
+              size="small"
+              circle
+              @click="handleBack"
+            >
+              <template #icon>
+                <NIcon><icon-park-outline:back /></NIcon>
+              </template>
+            </NButton>
+            <div>
+              <h2 class="text-lg font-medium text-gray-900">
+                字典数据管理
+              </h2>
+              <p v-if="currentDictType" class="text-sm text-gray-500 mt-1">
+                当前字典类型：{{ currentDictType.dictName }} ({{ currentDictType.dictType }})
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 搜索表单 -->
+      <div class="px-4 py-2 border-b border-gray-100">
+        <n-form
+          ref="searchFormRef"
+          :model="searchForm"
+          label-placement="left"
+          label-width="auto"
+          class="search-form"
+        >
+          <n-grid :cols="4" :x-gap="8" :y-gap="4">
+            <n-grid-item>
+              <n-form-item label="字典类型" path="dictType">
+                <n-select
+                  v-model:value="searchForm.dictType"
+                  placeholder="请选择字典类型"
+                  clearable
+                  :options="dictTypeOptions"
+                  @update:value="handleDictTypeChange"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="字典标签" path="dictLabel">
+                <n-input
+                  v-model:value="searchForm.dictLabel"
+                  placeholder="请输入字典标签"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="状态" path="dictStatus">
+                <n-select
+                  v-model:value="searchForm.dictStatus"
+                  placeholder="请选择状态"
+                  clearable
+                  :options="statusOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="" path="">
+                <NSpace>
+                  <NButton type="primary" @click="handleSearch">
+                    <template #icon>
+                      <NIcon><icon-park-outline:search /></NIcon>
+                    </template>
+                    搜索
+                  </NButton>
+                  <NButton @click="handleReset">
+                    <template #icon>
+                      <NIcon><icon-park-outline:refresh /></NIcon>
+                    </template>
+                    重置
+                  </NButton>
+                </NSpace>
+              </n-form-item>
+            </n-grid-item>
+          </n-grid>
+        </n-form>
+      </div>
+
+      <!-- 表格头部操作栏 -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <div class="flex items-center gap-4">
+          <NButton
+            v-permission="'system:dict:add'"
+            type="primary"
+            class="px-3 flex items-center"
+            @click="handleAdd"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:plus />
+              </NIcon>
+            </template>
+            新增
+          </NButton>
+
+          <NButton
+            v-permission="'system:dict:delete'"
+            type="error"
+            :disabled="selectedRows.length === 0"
+            class="px-3 flex items-center"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:delete />
+              </NIcon>
+            </template>
+            批量删除
+          </NButton>
+
+          <NButton
+            v-permission="'system:dict:update'"
+            type="info"
+            class="px-3 flex items-center"
+            @click="handleSyncCache"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:refresh />
+              </NIcon>
+            </template>
+            同步缓存
+          </NButton>
+
+          <NButton
+            type="default"
+            class="px-3 flex items-center"
+            @click="handleClose"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <IconParkOutlineClose />
+              </NIcon>
+            </template>
+            关闭
+          </NButton>
+        </div>
+      </div>
+
+      <!-- 表格内容 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <!-- 数据表格 -->
+        <n-data-table
+          v-if="tableData.length > 0 || loading"
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="rowKey"
+          :checked-row-keys="checkedRowKeys"
+          :bordered="false"
+          :single-line="false"
+          :scroll-x="1300"
+          size="medium"
+          class="custom-table"
+          @update:checked-row-keys="handleRowSelectionChange"
+        />
+
+        <!-- 空状态 -->
+        <CoiEmpty
+          v-else
+          type="nodata"
+          title="暂无数据"
+          description="当前没有字典数据"
+          :show-action="true"
+        >
+          <template #action>
+            <NButton
+              type="primary"
+              size="medium"
+              round
+              @click="handleAdd"
+            >
+              <template #icon>
+                <NIcon>
+                  <icon-park-outline:plus />
+                </NIcon>
+              </template>
+              新增字典数据
+            </NButton>
+          </template>
+        </CoiEmpty>
+      </div>
+
+      <!-- 分页器 -->
+      <div v-if="tableData.length > 0" class="border-t border-gray-100">
+        <CoiPagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          :show-size-picker="true"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新增/编辑弹框 -->
+    <CoiDialog
+      ref="formDialogRef"
+      :title="modalTitle"
+      :width="800"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleSubmit"
+      @coi-cancel="handleCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+            class="compact-form"
+          >
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="字典类型" path="dictType" class="mb-2">
+                  <n-select
+                    v-model:value="formData.dictType"
+                    placeholder="请选择字典类型"
+                    :options="dictTypeOptions"
+                    :disabled="isFromTypeClick"
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="字典标签" path="dictLabel" class="mb-2">
+                  <n-input
+                    v-model:value="formData.dictLabel"
+                    placeholder="请输入字典标签"
+                    maxlength="50"
+                    show-count
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="字典键值" path="dictValue" class="mb-2">
+                  <n-input
+                    v-model:value="formData.dictValue"
+                    placeholder="请输入字典键值"
+                    maxlength="50"
+                    show-count
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="状态" path="dictStatus" class="mb-2">
+                  <n-select
+                    v-model:value="formData.dictStatus"
+                    placeholder="请选择状态"
+                    :options="statusOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="标签类型" path="dictTag" class="mb-2">
+                  <n-select
+                    v-model:value="formData.dictTag"
+                    placeholder="请选择标签类型"
+                    :options="tagOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="排序" path="sorted" class="mb-2">
+                  <NInputNumber
+                    v-model:value="formData.sorted"
+                    placeholder="请输入排序号"
+                    :min="1"
+                    :max="999"
+                    style="width: 100%"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+            <n-form-item label="自定义颜色" path="dictColor" class="mb-2">
+              <n-input
+                v-model:value="formData.dictColor"
+                placeholder="请输入自定义颜色（如：#1890ff、red等）"
+                maxlength="20"
+                show-count
+              />
+            </n-form-item>
+            <n-form-item label="备注" path="remark" class="mb-2">
+              <n-input
+                v-model:value="formData.remark"
+                type="textarea"
+                placeholder="请输入备注信息"
+                :rows="3"
+                maxlength="500"
+                show-count
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
+import { NButton, NIcon, NInputNumber, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
+import CoiDialog from '@/components/common/CoiDialog.vue'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import CoiPagination from '@/components/common/CoiPagination.vue'
+import { usePermission } from '@/hooks/usePermission'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import {
+  addDictData,
+  batchDeleteDictData,
+  deleteDictData,
+  DictStatus,
+  DictTag,
+  getDictDataById,
+  getDictDataList,
+  getDictDataSorted,
+  getDictTypeOptions,
+  syncDictCache,
+  updateDictData,
+  updateDictDataStatus,
+} from '@/service/api/system/dict'
+import type {
+  DictDataForm,
+  DictDataSearchForm,
+  DictDataVo,
+  DictTypeOption,
+} from '@/service/api/system/dict'
+
+// 图标导入
+import IconParkOutlineClose from '~icons/icon-park-outline/close'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineEdit from '~icons/icon-park-outline/edit'
+
+// 路由和权限
+const route = useRoute()
+const router = useRouter()
+const { hasPermission } = usePermission()
+
+// 响应式数据
+const loading = ref(false)
+const tableData = ref<DictDataVo[]>([])
+const selectedRows = ref<DictDataVo[]>([])
+const checkedRowKeys = ref<string[]>([])
+const searchFormRef = ref<FormInst>()
+const formRef = ref<FormInst>()
+const formDialogRef = ref()
+const isEdit = ref(false)
+const modalTitle = ref('')
+const currentDictType = ref<DictTypeOption | null>(null)
+const dictTypeOptions = ref<{ label: string, value: string }[]>([])
+const isFromTypeClick = ref(false)
+
+// 搜索表单数据
+const searchForm = reactive<DictDataSearchForm>({
+  dictType: '',
+  dictLabel: '',
+  dictStatus: '',
+})
+
+// 表单数据
+const formData = reactive<DictDataForm>({
+  dictId: '',
+  dictLabel: '',
+  dictValue: '',
+  dictType: '',
+  dictStatus: DictStatus.NORMAL,
+  dictTag: DictTag.PRIMARY,
+  dictColor: '',
+  sorted: 1,
+  remark: '',
+})
+
+// 分页配置
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+})
+
+// 分页处理函数
+function handlePageChange(page: number) {
+  pagination.page = page
+  getTableData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.pageSize = pageSize
+  pagination.page = 1
+  getTableData()
+}
+
+// 状态选项
+const statusOptions = [
+  { label: '正常', value: DictStatus.NORMAL },
+  { label: '停用', value: DictStatus.DISABLED },
+]
+
+// 标签类型选项
+const tagOptions = [
+  { label: 'primary', value: DictTag.PRIMARY },
+  { label: 'success', value: DictTag.SUCCESS },
+  { label: 'info', value: DictTag.INFO },
+  { label: 'warning', value: DictTag.WARNING },
+]
+
+// 表单验证规则
+const rules: FormRules = {
+  dictType: [
+    { required: true, message: '请选择字典类型', trigger: ['blur', 'change'] },
+  ],
+  dictLabel: [
+    { required: true, message: '请输入字典标签', trigger: ['blur', 'input'] },
+    { min: 1, max: 50, message: '字典标签长度在1到50个字符', trigger: ['blur', 'input'] },
+  ],
+  dictValue: [
+    { required: true, message: '请输入字典键值', trigger: ['blur', 'input'] },
+    { min: 1, max: 50, message: '字典键值长度在1到50个字符', trigger: ['blur', 'input'] },
+  ],
+  dictStatus: [
+    { required: true, message: '请选择状态', trigger: ['blur', 'change'] },
+  ],
+  dictTag: [
+    { required: true, message: '请选择标签类型', trigger: ['blur', 'change'] },
+  ],
+  sorted: [
+    { required: true, type: 'number', message: '请输入排序号', trigger: ['blur', 'change'] },
+  ],
+}
+
+// 表格行键
+const rowKey = (row: DictDataVo) => row.dictId
+
+// 表格列配置
+const columns: DataTableColumns<DictDataVo> = [
+  { type: 'selection' },
+  {
+    title: '序号',
+    key: 'index',
+    width: 70,
+    align: 'center',
+    render: (_, index) => {
+      return (pagination.page - 1) * pagination.pageSize + index + 1
+    },
+  },
+  {
+    title: '字典类型',
+    key: 'dictType',
+    width: 150,
+    ellipsis: { tooltip: true },
+    render: (row) => {
+      return h(NTag, {
+        type: 'primary',
+        size: 'small',
+      }, { default: () => row.dictType })
+    },
+  },
+  {
+    title: '字典名称',
+    key: 'dictLabel',
+    width: 120,
+    ellipsis: { tooltip: true },
+    render: (row) => {
+      // 根据dictTag字段渲染不同颜色的标签
+      const tagColorMap: Record<string, { backgroundColor: string, color: string, borderColor: string }> = {
+        primary: {
+          backgroundColor: '#7C3AED1A', // 紫色半透明背景
+          color: '#7C3AED', // 紫色文字 - 跟系统主题色一致
+          borderColor: 'transparent', // 透明边框，去掉黑边
+        },
+        success: {
+          backgroundColor: '#F9DFE3',
+          color: '#D03050',
+          borderColor: '#F9DFE3',
+        },
+        info: {
+          backgroundColor: '#0961BE20', // 蓝色半透明背景
+          color: '#0961BEFF',
+          borderColor: 'transparent', // 透明边框，去掉黑边
+        },
+        warning: {
+          backgroundColor: '#FBBF241A', // 黄色半透明背景
+          color: '#D97706', // 黄色文字
+          borderColor: '#FBBF24',
+        },
+        error: {
+          backgroundColor: '#EF44441A', // 红色半透明背景
+          color: '#EF4444', // 红色文字
+          borderColor: '#EF4444',
+        },
+      }
+
+      const colorConfig = tagColorMap[row.dictTag] || tagColorMap.primary
+
+      return h(NTag, {
+        size: 'small',
+        style: {
+          backgroundColor: colorConfig.backgroundColor,
+          color: colorConfig.color,
+          border: `1px solid ${colorConfig.borderColor}`,
+        },
+      }, { default: () => row.dictLabel })
+    },
+  },
+  {
+    title: '字典键值',
+    key: 'dictValue',
+    width: 120,
+    align: 'center',
+    ellipsis: { tooltip: true },
+    render: (row) => {
+      return h(NTag, {
+        type: 'info',
+        size: 'small',
+      }, { default: () => row.dictValue })
+    },
+  },
+  {
+    title: '字典状态',
+    key: 'dictStatus',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      return h('div', { class: 'flex items-center justify-center' }, [
+        h(NPopconfirm, {
+          onPositiveClick: () => handleStatusChange(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => `确定要${row.dictStatus === DictStatus.NORMAL ? '停用' : '启用'}字典数据「${row.dictLabel}」吗？`,
+          trigger: () => h(NSwitch, {
+            value: row.dictStatus === DictStatus.NORMAL,
+            size: 'small',
+          }),
+        }),
+      ])
+    },
+  },
+  {
+    title: '字典排序',
+    key: 'sorted',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '字典备注',
+    key: 'remark',
+    width: 150,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 180,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 编辑按钮
+      if (hasPermission('system:dict:update')) {
+        buttons.push(h(NButton, {
+          type: 'primary',
+          size: 'small',
+          class: 'action-btn-primary',
+          onClick: () => handleEdit(row),
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineEdit),
+          }),
+          default: () => '编辑',
+        }))
+      }
+
+      // 删除按钮
+      if (hasPermission('system:dict:delete')) {
+        buttons.push(h(NPopconfirm, {
+          onPositiveClick: () => handleDelete(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => '确定删除此字典数据吗？',
+          trigger: () => h(NButton, {
+            type: 'error',
+            secondary: true,
+            size: 'small',
+            class: 'action-btn-secondary action-btn-danger',
+          }, {
+            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+              default: () => h(IconParkOutlineDelete),
+            }),
+            default: () => '删除',
+          }),
+        }))
+      }
+
+      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+    },
+  },
+]
+
+// 计算属性
+const _hasSearchConditions = computed(() => {
+  return !!(searchForm.dictType || searchForm.dictLabel || searchForm.dictStatus)
+})
+
+// 监听路由参数变化
+watch(
+  () => route.query,
+  (newQuery) => {
+    if (newQuery.dictType) {
+      searchForm.dictType = newQuery.dictType as string
+      isFromTypeClick.value = true
+      getTableData()
+    }
+  },
+  { immediate: true },
+)
+
+// 获取字典类型选项
+async function getDictTypeOptionList() {
+  try {
+    const { data, isSuccess } = await getDictTypeOptions()
+
+    if (isSuccess && data) {
+      dictTypeOptions.value = data.map(item => ({
+        label: `${item.dictName} (${item.dictType})`,
+        value: item.dictType,
+      }))
+
+      // 设置当前字典类型信息
+      if (searchForm.dictType) {
+        const current = data.find(item => item.dictType === searchForm.dictType)
+        if (current) {
+          currentDictType.value = current
+        }
+      }
+    }
+  }
+  catch {
+    coiMsgError('获取字典类型选项失败')
+  }
+}
+
+// 获取表格数据
+async function getTableData() {
+  try {
+    loading.value = true
+    const params = {
+      pageNo: pagination.page,
+      pageSize: pagination.pageSize,
+      dictType: searchForm.dictType || undefined,
+      dictLabel: searchForm.dictLabel || undefined,
+      dictStatus: searchForm.dictStatus || undefined,
+    }
+
+    const { data, isSuccess } = await getDictDataList(params)
+
+    if (isSuccess && data) {
+      tableData.value = data.records
+      pagination.itemCount = data.total
+    }
+    else {
+      tableData.value = []
+      pagination.itemCount = 0
+    }
+  }
+  catch {
+    coiMsgError('获取数据失败')
+    tableData.value = []
+    pagination.itemCount = 0
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 字典类型变化处理
+function handleDictTypeChange(value: string) {
+  if (value) {
+    const selected = dictTypeOptions.value.find(opt => opt.value === value)
+    if (selected) {
+      const dictType = selected.value
+      const dictName = selected.label.split(' (')[0]
+      currentDictType.value = { dictType, dictName }
+    }
+  }
+  else {
+    currentDictType.value = null
+  }
+  getTableData()
+}
+
+// 搜索
+function handleSearch() {
+  pagination.page = 1
+  getTableData()
+}
+
+// 重置搜索
+function handleReset() {
+  searchForm.dictLabel = ''
+  searchForm.dictStatus = ''
+
+  // 如果不是从字典类型页面跳转来的，则可以清空字典类型
+  if (!isFromTypeClick.value) {
+    searchForm.dictType = ''
+    currentDictType.value = null
+  }
+
+  pagination.page = 1
+  getTableData()
+}
+
+// 返回上一页
+function handleBack() {
+  router.back()
+}
+
+// 新增
+async function handleAdd() {
+  isEdit.value = false
+  modalTitle.value = '新增字典数据'
+
+  let defaultSorted = 1
+
+  // 如果有选中的字典类型，获取最新排序号
+  if (searchForm.dictType) {
+    try {
+      const { data, isSuccess } = await getDictDataSorted(searchForm.dictType)
+      if (isSuccess && typeof data === 'number') {
+        defaultSorted = data
+      }
+    }
+    catch {
+      // 忽略错误，使用默认排序
+    }
+  }
+
+  // 重置表单数据
+  Object.assign(formData, {
+    dictId: '',
+    dictLabel: '',
+    dictValue: '',
+    dictType: searchForm.dictType || '',
+    dictStatus: DictStatus.NORMAL,
+    dictTag: DictTag.PRIMARY,
+    dictColor: '',
+    sorted: defaultSorted,
+    remark: '',
+  })
+
+  formDialogRef.value?.coiOpen()
+}
+
+// 编辑
+async function handleEdit(row: DictDataVo) {
+  isEdit.value = true
+  modalTitle.value = '编辑字典数据'
+
+  try {
+    const { data, isSuccess } = await getDictDataById(row.dictId)
+
+    if (isSuccess && data) {
+      // 填充表单数据
+      Object.assign(formData, {
+        dictId: data.dictId,
+        dictLabel: data.dictLabel,
+        dictValue: data.dictValue,
+        dictType: data.dictType,
+        dictStatus: data.dictStatus,
+        dictTag: data.dictTag,
+        dictColor: data.dictColor || '',
+        sorted: data.sorted,
+        remark: data.remark || '',
+      })
+
+      formDialogRef.value?.coiOpen()
+    }
+    else {
+      coiMsgError('获取字典数据详情失败')
+    }
+  }
+  catch {
+    coiMsgError('获取字典数据详情失败，请检查网络连接')
+  }
+}
+
+// 删除
+async function handleDelete(row: DictDataVo) {
+  try {
+    const { isSuccess } = await deleteDictData(row.dictId)
+
+    if (isSuccess) {
+      coiMsgSuccess('删除成功')
+      getTableData()
+    }
+    else {
+      coiMsgError('删除失败')
+    }
+  }
+  catch {
+    coiMsgError('删除失败，请检查网络连接')
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (checkedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的数据')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定删除选中的${checkedRowKeys.value.length}条记录吗？`, '批量删除确认')
+
+    const { isSuccess } = await batchDeleteDictData(checkedRowKeys.value)
+
+    if (isSuccess) {
+      coiMsgSuccess('批量删除成功')
+      checkedRowKeys.value = []
+      selectedRows.value = []
+      getTableData()
+    }
+    else {
+      coiMsgError('批量删除失败')
+    }
+  }
+  catch {
+    // 用户取消删除
+  }
+}
+
+// 状态切换
+async function handleStatusChange(row: DictDataVo) {
+  const newStatus = row.dictStatus === DictStatus.NORMAL ? DictStatus.DISABLED : DictStatus.NORMAL
+
+  try {
+    const { isSuccess } = await updateDictDataStatus(row.dictId, newStatus)
+
+    if (isSuccess) {
+      coiMsgSuccess('状态修改成功')
+      getTableData()
+    }
+    else {
+      coiMsgError('状态修改失败')
+    }
+  }
+  catch {
+    coiMsgError('状态修改失败，请检查网络连接')
+  }
+}
+
+// 同步缓存
+async function handleSyncCache() {
+  try {
+    loading.value = true
+    const { isSuccess } = await syncDictCache()
+
+    if (isSuccess) {
+      coiMsgSuccess('缓存同步成功')
+    }
+    else {
+      coiMsgError('缓存同步失败')
+    }
+  }
+  catch {
+    coiMsgError('缓存同步失败，请检查网络连接')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 关闭页面，返回字典管理
+function handleClose() {
+  router.push('/system/dict')
+}
+
+// 行选择变化
+function handleRowSelectionChange(rowKeys: string[]) {
+  checkedRowKeys.value = rowKeys
+  selectedRows.value = tableData.value.filter(row => rowKeys.includes(row.dictId))
+}
+
+// 表单提交
+async function handleSubmit() {
+  if (!formRef.value)
+    return
+
+  try {
+    // 先进行表单验证
+    await formRef.value.validate()
+  }
+  catch {
+    // 表单验证失败，提示用户检查填写内容
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  // 表单验证通过，执行API调用
+  try {
+    const submitData = { ...formData }
+
+    const { isSuccess } = isEdit.value ? await updateDictData(submitData) : await addDictData(submitData)
+
+    if (isSuccess) {
+      coiMsgSuccess(isEdit.value ? '修改成功' : '新增成功')
+      formDialogRef.value?.coiClose()
+      getTableData()
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请稍后重试' : '新增失败，请稍后重试')
+    }
+  }
+  catch (error) {
+    if (error instanceof Error) {
+      coiMsgError(error.message || (isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接'))
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接')
+    }
+  }
+}
+
+// 取消操作
+function handleCancel() {
+  formDialogRef.value?.coiClose()
+}
+
+// 初始化
+onMounted(() => {
+  getDictTypeOptionList()
+})
+</script>
+
+<style scoped>
+.dict-data-management {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.search-form {
+  margin-bottom: 0;
+}
+
+.table-wrapper {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+/* 表格样式 */
+.custom-table :deep(.n-data-table-td) {
+  padding: 8px 16px !important;
+  font-size: 14px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.custom-table :deep(.n-data-table-th) {
+  padding: 12px 16px !important;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.custom-table :deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f5f5f5;
+}
+
+/* 操作按钮样式 */
+.action-btn-primary {
+  background-color: #1890ff;
+  border-color: #1890ff;
+  color: white;
+}
+
+.action-btn-secondary {
+  background-color: transparent;
+  color: #666;
+}
+
+.action-btn-secondary.action-btn-danger {
+  color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+
+.action-btn-secondary.action-btn-danger:hover {
+  background-color: #ff4d4f;
+  color: white;
+}
+
+/* 滚动条样式 */
+.custom-table :deep(.n-data-table-base-table) {
+  overflow: auto;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 紧凑表单样式 */
+.compact-form :deep(.n-form-item) {
+  margin-bottom: 8px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
+  min-height: 0 !important;
+  padding-top: 2px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-label) {
+  padding-bottom: 2px !important;
+}
+
+.compact-form :deep(.n-input),
+.compact-form :deep(.n-input-number),
+.compact-form :deep(.n-select),
+.compact-form :deep(.n-cascader),
+.compact-form :deep(.n-radio-group) {
+  font-size: 14px !important;
+}
+
+.compact-form :deep(.n-input .n-input__input-el),
+.compact-form :deep(.n-input-number .n-input__input-el) {
+  padding: 2px 1px !important;
+  min-height: 32px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
+  padding: 0 6px !important;
+  min-height: 30px !important;
+  line-height: 30px !important;
+}
+
+.compact-form :deep(.n-cascader .n-cascader-trigger) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+</style>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
new file mode 100644
index 0000000..6d7dd3a
--- /dev/null
+++ b/src/views/system/dict/index.vue
@@ -0,0 +1,899 @@
+<template>
+  <div class="dict-management p-1 bg-gray-50 h-screen flex flex-col">
+    <!-- 搜索表单和字典表格 -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
+      <!-- 搜索表单 -->
+      <div class="px-4 py-2 border-b border-gray-100">
+        <n-form
+          ref="searchFormRef"
+          :model="searchForm"
+          label-placement="left"
+          label-width="auto"
+          class="search-form"
+        >
+          <n-grid :cols="4" :x-gap="8" :y-gap="4">
+            <n-grid-item>
+              <n-form-item label="字典名称" path="dictName">
+                <n-input
+                  v-model:value="searchForm.dictName"
+                  placeholder="请输入字典名称"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="字典类型" path="dictType">
+                <n-input
+                  v-model:value="searchForm.dictType"
+                  placeholder="请输入字典类型"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="状态" path="dictStatus">
+                <n-select
+                  v-model:value="searchForm.dictStatus"
+                  placeholder="请选择状态"
+                  clearable
+                  :options="statusOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="" path="">
+                <NSpace>
+                  <NButton type="primary" @click="handleSearch">
+                    <template #icon>
+                      <NIcon><icon-park-outline:search /></NIcon>
+                    </template>
+                    搜索
+                  </NButton>
+                  <NButton @click="handleReset">
+                    <template #icon>
+                      <NIcon><icon-park-outline:refresh /></NIcon>
+                    </template>
+                    重置
+                  </NButton>
+                </NSpace>
+              </n-form-item>
+            </n-grid-item>
+          </n-grid>
+        </n-form>
+      </div>
+
+      <!-- 表格头部操作栏 -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <div class="flex items-center gap-4">
+          <NButton
+            v-permission="'system:dict:add'"
+            type="primary"
+            class="px-3 flex items-center"
+            @click="handleAdd"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:plus />
+              </NIcon>
+            </template>
+            新增
+          </NButton>
+
+          <NButton
+            v-permission="'system:dict:delete'"
+            type="error"
+            :disabled="selectedRows.length === 0"
+            class="px-3 flex items-center"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:delete />
+              </NIcon>
+            </template>
+            批量删除
+          </NButton>
+
+          <NButton
+            v-permission="'system:dict:update'"
+            type="info"
+            class="px-3 flex items-center"
+            @click="handleSyncCache"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:refresh />
+              </NIcon>
+            </template>
+            同步缓存
+          </NButton>
+        </div>
+      </div>
+
+      <!-- 表格内容 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <!-- 数据表格 -->
+        <n-data-table
+          v-if="tableData.length > 0 || loading"
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="rowKey"
+          :checked-row-keys="checkedRowKeys"
+          :bordered="false"
+          :single-line="false"
+          :scroll-x="1450"
+          size="medium"
+          class="custom-table"
+          @update:checked-row-keys="handleRowSelectionChange"
+        />
+
+        <!-- 空状态 -->
+        <CoiEmpty
+          v-else
+          type="nodata"
+          title="暂无数据"
+          description="当前没有字典类型数据"
+          :show-action="true"
+        >
+          <template #action>
+            <NButton
+              type="primary"
+              size="medium"
+              round
+              @click="handleAdd"
+            >
+              <template #icon>
+                <NIcon>
+                  <icon-park-outline:plus />
+                </NIcon>
+              </template>
+              新增字典类型
+            </NButton>
+          </template>
+        </CoiEmpty>
+      </div>
+
+      <!-- 分页器 -->
+      <div v-if="tableData.length > 0" class="border-t border-gray-100">
+        <CoiPagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          :show-size-picker="true"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新增/编辑弹框 -->
+    <CoiDialog
+      ref="formDialogRef"
+      :title="modalTitle"
+      :width="800"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleSubmit"
+      @coi-cancel="handleCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+            class="compact-form"
+          >
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="字典名称" path="dictName" class="mb-2">
+                  <n-input
+                    v-model:value="formData.dictName"
+                    placeholder="请输入字典名称"
+                    maxlength="50"
+                    show-count
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="字典类型" path="dictType" class="mb-2">
+                  <n-input
+                    v-model:value="formData.dictType"
+                    placeholder="请输入字典类型"
+                    :disabled="isEdit"
+                    maxlength="50"
+                    show-count
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="状态" path="dictStatus" class="mb-2">
+                  <n-select
+                    v-model:value="formData.dictStatus"
+                    placeholder="请选择状态"
+                    :options="statusOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+            <n-form-item label="备注" path="remark" class="mb-2">
+              <n-input
+                v-model:value="formData.remark"
+                type="textarea"
+                placeholder="请输入备注信息"
+                :rows="3"
+                maxlength="500"
+                show-count
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
+import { NButton, NIcon, NPopconfirm, NSpace, NSwitch } from 'naive-ui'
+import CoiDialog from '@/components/common/CoiDialog.vue'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import CoiPagination from '@/components/common/CoiPagination.vue'
+import { usePermission } from '@/hooks/usePermission'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import {
+  addDictType,
+  batchDeleteDictType,
+  deleteDictType,
+  DictStatus,
+  getDictTypeList,
+  syncDictCache,
+  updateDictType,
+  updateDictTypeStatus,
+} from '@/service/api/system/dict'
+import type {
+  DictTypeForm,
+  DictTypeSearchForm,
+  DictTypeVo,
+} from '@/service/api/system/dict'
+
+// 图标导入
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineEdit from '~icons/icon-park-outline/edit'
+
+// 路由和权限验证
+const router = useRouter()
+const { hasPermission } = usePermission()
+
+// 响应式数据
+const loading = ref(false)
+const tableData = ref<DictTypeVo[]>([])
+const selectedRows = ref<DictTypeVo[]>([])
+const checkedRowKeys = ref<string[]>([])
+const searchFormRef = ref<FormInst>()
+const formRef = ref<FormInst>()
+const formDialogRef = ref()
+const isEdit = ref(false)
+const modalTitle = ref('')
+
+// 搜索表单数据
+const searchForm = reactive<DictTypeSearchForm>({
+  dictName: '',
+  dictType: '',
+  dictStatus: '',
+})
+
+// 表单数据
+const formData = reactive<DictTypeForm>({
+  dictId: '',
+  dictType: '',
+  dictName: '',
+  dictStatus: DictStatus.NORMAL,
+  remark: '',
+})
+
+// 分页配置
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+})
+
+// 分页处理函数
+function handlePageChange(page: number) {
+  pagination.page = page
+  getTableData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.pageSize = pageSize
+  pagination.page = 1
+  getTableData()
+}
+
+// 状态选项
+const statusOptions = [
+  { label: '正常', value: DictStatus.NORMAL },
+  { label: '停用', value: DictStatus.DISABLED },
+]
+
+// 表单验证规则
+const rules: FormRules = {
+  dictName: [
+    { required: true, message: '请输入字典名称', trigger: ['blur', 'input'] },
+    { min: 1, max: 50, message: '字典名称长度在1到50个字符', trigger: ['blur', 'input'] },
+  ],
+  dictType: [
+    { required: true, message: '请输入字典类型', trigger: ['blur', 'input'] },
+    { min: 1, max: 50, message: '字典类型长度在1到50个字符', trigger: ['blur', 'input'] },
+    { pattern: /^[a-z_]\w*$/i, message: '字典类型只能包含字母、数字、下划线，且不能以数字开头', trigger: ['blur', 'input'] },
+  ],
+  dictStatus: [
+    { required: true, message: '请选择状态', trigger: ['blur', 'change'] },
+  ],
+}
+
+// 表格行键
+const rowKey = (row: DictTypeVo) => row.dictId
+
+// 表格列配置
+const columns: DataTableColumns<DictTypeVo> = [
+  { type: 'selection' },
+  {
+    title: '序号',
+    key: 'index',
+    width: 70,
+    align: 'center',
+    render: (_, index) => {
+      return (pagination.page - 1) * pagination.pageSize + index + 1
+    },
+  },
+  {
+    title: '字典名称',
+    key: 'dictName',
+    width: 150,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '字典类型',
+    key: 'dictType',
+    width: 150,
+    ellipsis: { tooltip: true },
+    render: (row) => {
+      return h('a', {
+        class: 'dict-type-clickable-link',
+        style: {
+          color: '#326C72',
+          cursor: 'pointer',
+          textDecoration: 'none',
+          fontWeight: '500',
+          transition: 'all 0.2s ease',
+          display: 'inline-block',
+        },
+        onClick: (e: MouseEvent) => {
+          e.preventDefault()
+          handleViewDictData(row)
+        },
+        onMouseenter: (e: MouseEvent) => {
+          const target = e.target as HTMLElement
+          target.style.color = '#4A9BA1'
+          target.style.textDecoration = 'underline'
+        },
+        onMouseleave: (e: MouseEvent) => {
+          const target = e.target as HTMLElement
+          target.style.color = '#326C72'
+          target.style.textDecoration = 'none'
+        },
+      }, row.dictType)
+    },
+  },
+  {
+    title: '字典状态',
+    key: 'dictStatus',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      return h('div', { class: 'flex items-center justify-center' }, [
+        h(NPopconfirm, {
+          onPositiveClick: () => handleStatusChange(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => `确定要${row.dictStatus === DictStatus.NORMAL ? '停用' : '启用'}字典类型「${row.dictName}」吗？`,
+          trigger: () => h(NSwitch, {
+            value: row.dictStatus === DictStatus.NORMAL,
+            size: 'small',
+          }),
+        }),
+      ])
+    },
+  },
+  {
+    title: '备注',
+    key: 'remark',
+    width: 150,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 170,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '修改时间',
+    key: 'updateTime',
+    width: 170,
+    ellipsis: { tooltip: true },
+    render: (row) => {
+      return h('span', { class: 'text-gray-500 text-sm' }, row.updateTime || '-')
+    },
+  },
+  {
+    title: '修改人',
+    key: 'updateBy',
+    width: 120,
+    ellipsis: { tooltip: true },
+    render: (row) => {
+      return h('span', { class: 'text-gray-600' }, row.updateBy || '-')
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 180,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 编辑按钮
+      if (hasPermission('system:dict:update')) {
+        buttons.push(h(NButton, {
+          type: 'primary',
+          size: 'small',
+          class: 'action-btn-primary',
+          onClick: () => handleEdit(row),
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineEdit),
+          }),
+          default: () => '编辑',
+        }))
+      }
+
+      // 删除按钮
+      if (hasPermission('system:dict:delete')) {
+        buttons.push(h(NPopconfirm, {
+          onPositiveClick: () => handleDelete(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => '确定删除此字典类型吗？删除后将同时删除相关的字典数据！',
+          trigger: () => h(NButton, {
+            type: 'error',
+            secondary: true,
+            size: 'small',
+            class: 'action-btn-secondary action-btn-danger',
+          }, {
+            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+              default: () => h(IconParkOutlineDelete),
+            }),
+            default: () => '删除',
+          }),
+        }))
+      }
+
+      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+    },
+  },
+]
+
+// 计算属性
+const _hasSearchConditions = computed(() => {
+  return !!(searchForm.dictName || searchForm.dictType || searchForm.dictStatus)
+})
+
+// 获取表格数据
+async function getTableData() {
+  try {
+    loading.value = true
+    const params = {
+      pageNo: pagination.page,
+      pageSize: pagination.pageSize,
+      dictName: searchForm.dictName || undefined,
+      dictType: searchForm.dictType || undefined,
+      dictStatus: searchForm.dictStatus || undefined,
+    }
+
+    const { data, isSuccess } = await getDictTypeList(params)
+
+    if (isSuccess && data) {
+      tableData.value = data.records
+      pagination.itemCount = data.total
+    }
+    else {
+      tableData.value = []
+      pagination.itemCount = 0
+    }
+  }
+  catch {
+    coiMsgError('获取数据失败')
+    tableData.value = []
+    pagination.itemCount = 0
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.page = 1
+  getTableData()
+}
+
+// 重置搜索
+function handleReset() {
+  searchForm.dictName = ''
+  searchForm.dictType = ''
+  searchForm.dictStatus = ''
+  pagination.page = 1
+  getTableData()
+}
+
+// 新增
+function handleAdd() {
+  isEdit.value = false
+  modalTitle.value = '新增字典类型'
+
+  // 重置表单数据
+  Object.assign(formData, {
+    dictId: '',
+    dictType: '',
+    dictName: '',
+    dictStatus: DictStatus.NORMAL,
+    remark: '',
+  })
+
+  formDialogRef.value?.coiOpen()
+}
+
+// 编辑
+function handleEdit(row: DictTypeVo) {
+  isEdit.value = true
+  modalTitle.value = '编辑字典类型'
+
+  // 填充表单数据
+  Object.assign(formData, {
+    dictId: row.dictId,
+    dictType: row.dictType,
+    dictName: row.dictName,
+    dictStatus: row.dictStatus,
+    remark: row.remark || '',
+  })
+
+  formDialogRef.value?.coiOpen()
+}
+
+// 删除
+async function handleDelete(row: DictTypeVo) {
+  try {
+    const { isSuccess } = await deleteDictType(row.dictId)
+
+    if (isSuccess) {
+      coiMsgSuccess('删除成功')
+      getTableData()
+    }
+    else {
+      coiMsgError('删除失败')
+    }
+  }
+  catch {
+    coiMsgError('删除失败，请检查网络连接')
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (checkedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的数据')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定删除选中的${checkedRowKeys.value.length}条记录吗？删除后将同时删除相关的字典数据！`, '批量删除确认')
+
+    const { isSuccess } = await batchDeleteDictType(checkedRowKeys.value)
+
+    if (isSuccess) {
+      coiMsgSuccess('批量删除成功')
+      checkedRowKeys.value = []
+      selectedRows.value = []
+      getTableData()
+    }
+    else {
+      coiMsgError('批量删除失败')
+    }
+  }
+  catch {
+    // 用户取消删除
+  }
+}
+
+// 状态切换
+async function handleStatusChange(row: DictTypeVo) {
+  const newStatus = row.dictStatus === DictStatus.NORMAL ? DictStatus.DISABLED : DictStatus.NORMAL
+
+  try {
+    const { isSuccess } = await updateDictTypeStatus(row.dictId, newStatus)
+
+    if (isSuccess) {
+      coiMsgSuccess('状态修改成功')
+      getTableData()
+    }
+    else {
+      coiMsgError('状态修改失败')
+    }
+  }
+  catch {
+    coiMsgError('状态修改失败，请检查网络连接')
+  }
+}
+
+// 同步缓存
+async function handleSyncCache() {
+  try {
+    loading.value = true
+    const { isSuccess } = await syncDictCache()
+
+    if (isSuccess) {
+      coiMsgSuccess('缓存同步成功')
+    }
+    else {
+      coiMsgError('缓存同步失败')
+    }
+  }
+  catch {
+    coiMsgError('缓存同步失败，请检查网络连接')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 行选择变化
+function handleRowSelectionChange(rowKeys: string[]) {
+  checkedRowKeys.value = rowKeys
+  selectedRows.value = tableData.value.filter(row => rowKeys.includes(row.dictId))
+}
+
+// 表单提交
+async function handleSubmit() {
+  if (!formRef.value)
+    return
+
+  try {
+    // 先进行表单验证
+    await formRef.value.validate()
+  }
+  catch {
+    // 表单验证失败，提示用户检查填写内容
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  // 表单验证通过，执行API调用
+  try {
+    const submitData = { ...formData }
+
+    const { isSuccess } = isEdit.value ? await updateDictType(submitData) : await addDictType(submitData)
+
+    if (isSuccess) {
+      coiMsgSuccess(isEdit.value ? '修改成功' : '新增成功')
+      formDialogRef.value?.coiClose()
+      getTableData()
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请稍后重试' : '新增失败，请稍后重试')
+    }
+  }
+  catch (error) {
+    if (error instanceof Error) {
+      coiMsgError(error.message || (isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接'))
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接')
+    }
+  }
+}
+
+// 查看字典数据
+function handleViewDictData(row: DictTypeVo) {
+  router.push({
+    path: '/system/dict/data',
+    query: {
+      dictType: row.dictType,
+    },
+  })
+}
+
+// 取消操作
+function handleCancel() {
+  formDialogRef.value?.coiClose()
+}
+
+// 初始化
+onMounted(() => {
+  getTableData()
+})
+</script>
+
+<style scoped>
+.dict-management {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.search-form {
+  margin-bottom: 0;
+}
+
+.table-wrapper {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+/* 表格样式 */
+.custom-table :deep(.n-data-table-td) {
+  padding: 8px 16px !important;
+  font-size: 14px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.custom-table :deep(.n-data-table-th) {
+  padding: 12px 16px !important;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.custom-table :deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f5f5f5;
+}
+
+/* 操作按钮样式 */
+.action-btn-primary {
+  background-color: #1890ff;
+  border-color: #1890ff;
+  color: white;
+}
+
+.action-btn-secondary {
+  background-color: transparent;
+  color: #666;
+}
+
+.action-btn-secondary.action-btn-danger {
+  color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+
+.action-btn-secondary.action-btn-danger:hover {
+  background-color: #ff4d4f;
+  color: white;
+}
+
+/* 滚动条样式 */
+.custom-table :deep(.n-data-table-base-table) {
+  overflow: auto;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 紧凑表单样式 */
+.compact-form :deep(.n-form-item) {
+  margin-bottom: 8px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
+  min-height: 0 !important;
+  padding-top: 2px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-label) {
+  padding-bottom: 2px !important;
+}
+
+.compact-form :deep(.n-input),
+.compact-form :deep(.n-input-number),
+.compact-form :deep(.n-select),
+.compact-form :deep(.n-cascader),
+.compact-form :deep(.n-radio-group) {
+  font-size: 14px !important;
+}
+
+.compact-form :deep(.n-input .n-input__input-el),
+.compact-form :deep(.n-input-number .n-input__input-el) {
+  padding: 2px 1px !important;
+  min-height: 32px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
+  padding: 0 6px !important;
+  min-height: 30px !important;
+  line-height: 30px !important;
+}
+
+.compact-form :deep(.n-cascader .n-cascader-trigger) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+/* 字典类型可点击链接样式 - 使用青绿色系配色 */
+.custom-table :deep(.dict-type-clickable-link) {
+  color: #326C72 !important;
+  cursor: pointer !important;
+  text-decoration: none !important;
+  font-weight: 500 !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  display: inline-block !important;
+}
+
+.custom-table :deep(.dict-type-clickable-link:hover) {
+  color: #4A9BA1 !important;
+  text-decoration: underline !important;
+}
+
+.custom-table :deep(.dict-type-clickable-link:active) {
+  color: #275A5F !important;
+}
+
+/* 针对表格单元格内容的强制样式 */
+.custom-table :deep(.n-data-table-td .dict-type-clickable-link) {
+  color: #326C72 !important;
+  cursor: pointer !important;
+  text-decoration: none !important;
+  font-weight: 500 !important;
+}
+
+/* 更加具体的选择器以确保样式生效 */
+.dict-management .custom-table :deep(.n-data-table-tbody .n-data-table-tr .n-data-table-td .dict-type-clickable-link) {
+  color: #326C72 !important;
+  font-weight: 500 !important;
+}
+</style>