From d33fe940732d38136c7b3f81b617208108b328e3 Mon Sep 17 00:00:00 2001
From: wh <1044541107@qq.com>
Date: Tue, 15 Jul 2025 22:53:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=AD=97=E5=85=B8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 auto-imports.d.ts                            |  14 +-
 src/api/dictApi.ts                           | 114 +++
 src/views/system/dict/compoents/DictMain.vue | 721 +++++++++++++++++++
 src/views/system/dict/compoents/DictNav.vue  | 300 ++++++++
 src/views/system/dict/index.vue              |  34 +-
 5 files changed, 1165 insertions(+), 18 deletions(-)
 create mode 100644 src/api/dictApi.ts
 create mode 100644 src/views/system/dict/compoents/DictMain.vue
 create mode 100644 src/views/system/dict/compoents/DictNav.vue

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index e4734c3..1f9f43c 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -9,6 +9,11 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const addChildMenu: typeof import('./src/api/menu')['addChildMenu']
   const addParentMenu: typeof import('./src/api/menu')['addParentMenu']
+  const addChildDictionary: typeof import('./src/api/dictApi')['addChildDictionary']
+  const addParentDic: typeof import('./src/api/dictApi')['addParentDic']
+  const addParentDict: typeof import('./src/api/dictApi')['addParentDict']
+  const addParentDictionaries: typeof import('./src/api/dictApi')['addParentDictionaries']
+  const addParentDictionary: typeof import('./src/api/dictApi')['addParentDictionary']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
@@ -17,14 +22,19 @@ declare global {
   const deleteMenu: typeof import('./src/api/menu')['deleteMenu']
   const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
   const editParentMenu: typeof import('./src/api/menu')['editParentMenu']
+  const deleteChildDictionary: typeof import('./src/api/dictApi')['deleteChildDictionary']
+  const deleteParentDictionary: typeof import('./src/api/dictApi')['deleteParentDictionary']
   const effectScope: typeof import('vue')['effectScope']
   const eidtChildMenu: typeof import('./src/api/menu')['eidtChildMenu']
   const enable: typeof import('./src/api/roleApi')['enable']
   const enableRole: typeof import('./src/api/roleApi')['enableRole']
   const getAllMenu: typeof import('./src/api/menu')['getAllMenu']
+  const getChildDictionary: typeof import('./src/api/dictApi')['getChildDictionary']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const getRoleList: typeof import('./src/api/roleApi')['getRoleList']
+  const getParentDict: typeof import('./src/api/dictApi')['getParentDict']
+  const getParentDictionaries: typeof import('./src/api/dictApi')['getParentDictionaries']
+  const getParentDictionary: typeof import('./src/api/dictApi')['getParentDictionary']
   const getUserInfo: typeof import('./src/api/userApi')['getUserInfo']
   const getUserList: typeof import('./src/api/roleApi')['getUserList']
   const h: typeof import('vue')['h']
@@ -68,6 +78,8 @@ declare global {
   const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
+  const updateChildDictionary: typeof import('./src/api/dictApi')['updateChildDictionary']
+  const updateParentDictionary: typeof import('./src/api/dictApi')['updateParentDictionary']
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
diff --git a/src/api/dictApi.ts b/src/api/dictApi.ts
new file mode 100644
index 0000000..67584e3
--- /dev/null
+++ b/src/api/dictApi.ts
@@ -0,0 +1,114 @@
+import http from "@/utils/request";
+
+const dictUrl = "/api/v1/AdminDictionary"
+
+interface DictRow {
+    uuid?: string
+    parentId?: string
+    parentValue?: string
+  label: string
+  labelEn?: string
+  remark?: string
+  value: string
+  tags?: string[]
+  createTime?: Date
+  createUserId?: string
+}
+
+// 获取父级字典
+export function getParentDictionary(label: string) {
+  return http({
+    url: "/api/v1/AdminDictionary/GetParentDictionaries",
+    method: 'POST',
+    data: label
+  })
+}
+// 新增父级字典
+/**
+ * 
+ * @param data 只需要label和value
+ * @returns 
+ */
+export function addParentDictionary(data: DictRow) {
+  data.createTime = null;
+  data.createUserId = '';
+  data.labelEn = '';
+  data.remark = '';
+  data.tags = [];
+  data.uuid = '';
+  data.parentId = '';
+  data.parentValue = '';
+  return http({
+    url: "/api/v1/AdminDictionary/AddParentDictionary",
+    method: 'POST',
+    data
+  })
+}
+// 更新父级字典
+/**
+ * 
+ * @param data 只需要label
+ * @returns 
+ */
+export function updateParentDictionary(data: DictRow) {
+  return http({
+    url: "/api/v1/AdminDictionary/UpdateParentDictionary",
+    method: 'PUT',
+    data
+  })
+}
+// 删除父级字典
+export function deleteParentDictionary(uuid: string) {
+  return http({
+    url: "/api/v1/AdminDictionary/DeleteParentDictionary",
+    method: 'DELETE',
+    data: uuid
+  })
+}
+// 新增子级字典
+/**
+ * 
+ * @param data 必需parentId, parentValue, label, value
+ * @returns 
+ */
+export function addChildDictionary(data: DictRow) {
+  return http({
+    url: "/api/v1/AdminDictionary/CreateChildDictionary",
+    method: 'POST',
+    data
+  })
+}
+// 更新子级字典
+/**
+ * 
+ * @param data 必需uuid, label, value
+ * @returns 
+ */
+export function updateChildDictionary(data: DictRow) {
+  return http({
+    url: "/api/v1/AdminDictionary/UpdateChildDictionary",
+    method: 'PUT',
+    data
+  })
+}
+// 删除子级字典
+export function deleteChildDictionary(uuid: string) {
+  return http({
+    url: "/api/v1/AdminDictionary/DeleteChildDictionary",
+    method: 'DELETE',
+    data: uuid
+  })
+}
+// 获取子级字典
+/**
+ * 
+ * @param data  必需value, 非必需tags
+ * @returns 
+ */
+export function getChildDictionary(data: DictRow) {
+  return http({
+    url: "/api/v1/AdminDictionary/GetChildDictionaries",
+    method: 'POSt',
+    data
+  })
+}
\ No newline at end of file
diff --git a/src/views/system/dict/compoents/DictMain.vue b/src/views/system/dict/compoents/DictMain.vue
new file mode 100644
index 0000000..3d6cb37
--- /dev/null
+++ b/src/views/system/dict/compoents/DictMain.vue
@@ -0,0 +1,721 @@
+<template>
+  <main class="dict-main">
+    <!-- 上面有一排操作按钮：input框查询 查询按钮，新增 -->
+    <!-- 字典表格，含有字段：字典id，字典名称，字典值，字典标签，操作列（编辑 删除） -->
+    <div v-if="tableTitle === ''">
+      <LsEmpty type="no-data" v-model:title="emptyStateTitle" v-model:description="emptyStateDescription" />
+    </div>
+    <div v-if="tableTitle !== ''" style="flex: 1;height: 100%;">
+      <h1>{{ tableTitle }}</h1>
+      <div class="main-search">
+        <n-input autosize style="min-width: 50%" v-model:value="mainSearch" placeholder="查询字典名称（中/英）" clearable
+          @keyup.enter="findTableDatas">
+        </n-input>
+        <n-button type="primary" @click="findTableDatas" :focusable="false">
+          <template #icon>
+            <n-icon :component="SearchOutline" />
+          </template>
+          查询
+        </n-button>
+        <n-button type="primary" @click="addTableDatas" :focusable="false">
+          <template #icon>
+            <n-icon :component="AddOutline" />
+          </template>
+          新增
+        </n-button>
+      </div>
+      <div class="main-table" style="flex: 1; height: 100%;" ref="tableMainRef">
+        <n-data-table v-if="height" :loading="loading" :columns="columns" :data="tableData" :table-layout="'fixed'"
+          :max-height="`${height}px`" :scroll-x="100" />
+      </div>
+    </div>
+  </main>
+
+  <n-modal v-model:show="showDataModal" title="新增字典数据" preset="dialog" :mask-closable="false">
+    <n-form ref="formRef" :model="formData" :rules="formRules">
+      <n-form-item label="字典中文名称" path="label">
+        <n-input v-model:value="formData.label" placeholder="输入字典中文名称" clearable />
+      </n-form-item>
+
+      <n-form-item label="字典英文名称" path="labelEn">
+        <n-input v-model:value="formData.labelEn" placeholder="输入字典英文名称" clearable />
+      </n-form-item>
+
+      <n-form-item label="字典描述" path="remark">
+        <n-input v-model:value="formData.remark" placeholder="输入字典描述" type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4 }" />
+      </n-form-item>
+
+      <n-form-item label="新增标签" path="tags">
+        <n-input v-model:value="newTag" placeholder="输入标签名称" @keyup.enter="addTag" />
+      </n-form-item>
+
+      <n-form-item label="已有标签">
+        <div class="tags-container">
+          <n-tag v-for="(tag, index) in formData.tags" :key="index" closable @close="removeTag(index)" :style="{
+            marginRight: '6px',
+            marginBottom: '6px',
+            color: '#3D8EFF',
+            border: 'none'
+          }" :bordered="false" type="info">
+            {{ tag }}
+          </n-tag>
+        </div>
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <n-space justify="end">
+        <n-button @click="showDataModal = false">取消</n-button>
+        <n-button type="primary" @click="handleSubmit">提交</n-button>
+      </n-space>
+    </template>
+  </n-modal>
+
+  <n-modal v-model:show="showDeleteModal" title="删除字典数据" preset="dialog" :mask-closable="false" content="确认删除该项字典数据？"
+    negative-text="取消" positive-text="确认" @negative-click="showDeleteModal = false" @positive-click="submitDelete">
+
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import LsEmpty from '@/components/Ls-UI/LsEmpty.vue';
+import { AddOutline, PencilOutline, SearchOutline, TrashOutline } from '@vicons/ionicons5';
+import { DataTableColumns, FormInst, NButton, NIcon, NSpace, NTag, NTime, useMessage } from 'naive-ui';
+
+const parentProps = defineProps<{
+  value: string
+  label: string
+}>();
+
+watch(parentProps, async (newValue) => {
+  console.log(newValue)
+
+  loading.value = true
+  setTimeout(() => {
+
+    tableTitle.value = newValue.label
+    if (!height.value) {
+      setTimeout(() => {
+        if (tableMainRef.value) {
+          height.value = tableMainRef.value.clientHeight;
+        };
+      }, 10);
+    }
+
+    tableData.value = totalData.value.filter(item => item.value === newValue.value)
+    loading.value = false
+  }, 1000);
+})
+
+interface DictRow {
+  label: string
+  labelEn?: string
+  remark?: string
+  value: string
+  tags?: string[]
+  createTime?: Date
+  createUserId?: string
+}
+
+const renderIcon = (icon: Component) => {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const getColumns = ({
+  mod: modifyRowData, del: deleteRowData
+}: {
+  mod: (row: DictRow) => void,
+  del: (row: DictRow) => void
+}): DataTableColumns<DictRow> => {
+  return [
+    {
+      title: '字典中文',
+      key: 'label',
+      width: 75,
+      ellipsis: { tooltip: true }
+    },
+    {
+      title: '字典英文',
+      key: 'labelEn',
+      width: 75,
+      ellipsis: { tooltip: true }
+    },
+    {
+      title: '备注',
+      key: 'remark',
+      width: 125,
+      ellipsis: { tooltip: true }
+    },
+    {
+      title: '字典值',
+      key: 'value',
+      width: 75,
+      ellipsis: { tooltip: true }
+    },
+    {
+      title: '标签',
+      key: 'tags',
+      width: 125,
+      render(row: DictRow) {
+        const tags = row.tags.map((tagKey) => {
+          return h(
+            NTag,
+            {
+              style: {
+                marginRight: '6px',
+                color: '#3D8EFF',
+              },
+              type: 'info',
+              bordered: false
+            },
+            {
+              default: () => tagKey
+            }
+          )
+        })
+        return tags
+      },
+      ellipsis: { tooltip: true }
+    },
+    {
+      title: '创建时间',
+      key: 'createTime',
+      width: 75,
+      render(row: DictRow) {
+        const time = row.createTime;
+        if (!time || isNaN(time.getTime())) {
+          return '无效日期';
+        }
+        return h(
+          NTime,
+          {
+            format: 'yyyy-MM-dd',
+            time: new Date(row.createTime)
+          }
+        )
+      }
+    },
+    {
+      title: '创建用户编号',
+      key: 'createUserId',
+      width: 75,
+      fixed: 'right',
+      ellipsis: { tooltip: true }
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 75,
+      align: 'center',
+      render(row: DictRow) {
+        return h(
+          NSpace,
+          {},
+          {
+            default: () => [
+              h(
+                NButton,
+                {
+                  size: 'small',
+                  quaternary: true,
+                  type: 'info',
+                  focusable: false,
+                  onClick: () => modifyRowData(row)
+                },
+                {
+                  icon: renderIcon(PencilOutline)
+                }
+              ),
+              h(
+                NButton,
+                {
+                  size: 'small',
+                  quaternary: true,
+                  type: 'error',
+                  focusable: false,
+                  onClick: () => deleteRowData(row)
+                },
+                {
+                  icon: renderIcon(TrashOutline)
+                }
+              )
+            ]
+          }
+        )
+      }
+    }
+  ]
+}
+
+const getDatas = (): DictRow[] => {
+  return [
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    },
+    {
+      label: '1',
+      labelEn: 'a',
+      value: '1',
+      tags: ['str'],
+    }, {
+      label: '2',
+      labelEn: 'b',
+      value: '2',
+      tags: ['char'],
+    }, {
+      label: '3',
+      labelEn: 'c',
+      value: '2',
+      tags: ['number'],
+    }, {
+      label: '4',
+      labelEn: 'd',
+      value: '3',
+      tags: ['any'],
+    }, {
+      label: '5',
+      labelEn: 'e',
+      value: '3',
+      tags: ['class'],
+    }, {
+      label: '6789',
+      labelEn: 'abc',
+      value: '2',
+      tags: ['number', 'string'],
+    }
+  ];
+}
+
+const findTableDatas = () => {
+  tableData.value = totalData.value.filter(item => (item.label.includes(mainSearch.value) || item.labelEn.includes(mainSearch.value)) && item.value === parentProps.value)
+}
+
+const message = useMessage()
+
+const formRef = ref<FormInst | null>(null)
+const currentMode = ref<'Add' | 'Modify'>('Add')
+const showDataModal = ref(false)
+
+const formData = ref<DictRow>()
+const formRules = {
+  label: {
+    required: true,
+    message: '请输入字典中文名称',
+    trigger: 'input'
+  },
+  labelEn: {
+    required: false,
+    message: '请输入字典英文名称',
+    trigger: 'input'
+  },
+  remark: {
+    required: false,
+    message: '请输入字典描述',
+    trigger: 'input'
+  },
+  tags: [],
+}
+
+// 新增与修改相关逻辑
+const addTableDatas = () => {
+  console.log("新增")
+  formData.value = ({
+    label: '',
+    labelEn: '',
+    remark: '',
+    value: '',
+    tags: [],
+    createTime: null,
+    createUserId: ''
+  })
+  currentMode.value = 'Add'
+  showDataModal.value = true
+}
+
+const modifyTableDatas = (row: DictRow) => {
+  console.log("修改:", row)
+  formData.value = JSON.parse(JSON.stringify(row));
+  currentMode.value = 'Modify'
+  showDataModal.value = true
+}
+
+// 表单内标签逻辑
+const newTag = ref('');
+
+const addTag = () => {
+  if (newTag.value.trim() && !formData.value.tags.includes(newTag.value.trim())) {
+    formData.value.tags.push(newTag.value.trim());
+    newTag.value = '';
+  }
+};
+
+const removeTag = (index: number) => {
+  formData.value.tags.splice(index, 1);
+};
+
+// 表单提交
+const handleSubmit = (e: MouseEvent) => {
+  e.preventDefault()
+  if (currentMode.value === 'Add') { formData.value.value = parentProps.value }
+  formRef.value?.validate(errors => {
+    if (!errors) {
+      console.log("submit " + currentMode.value, formData)
+      showDataModal.value = false
+      message.success('提交成功')
+    } else {
+      console.log('失败', errors)
+      message.error('提交失败')
+    }
+  })
+
+}
+
+// 删除相关逻辑
+const showDeleteModal = ref(false)
+const deleteData = ref<DictRow | null>(null)
+
+const deleteTableDatas = (row: DictRow) => {
+  console.log("删除:", row)
+  deleteData.value = row
+  showDeleteModal.value = true
+}
+
+const submitDelete = () => {
+  console.log('submit delete ', deleteData)
+  tableData.value = tableData.value.filter(item => item !== deleteData.value)
+  showDeleteModal.value = false
+  message.success('删除成功')
+}
+
+// 空状态展示用标题与描述
+const emptyStateTitle = ref('')
+const emptyStateDescription = ref('')
+// 搜索绑定字段
+const mainSearch = ref('')
+// 页面标题、表格列名、总数据、表格展示数据、表格是否加载
+const tableTitle = ref('')
+const columns = ref(getColumns({ mod: modifyTableDatas, del: deleteTableDatas }))
+const totalData = ref(getDatas());
+const tableData = ref<DictRow[]>([]);
+const loading = ref(true)
+// 用于控制表格最大高度参数
+const tableMainRef = ref<HTMLElement | null>(null);
+const height = ref(null);
+
+</script>
+
+<style scoped lang="scss">
+.dict-main {
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    /* 关键属性：允许换行 */
+    align-items: flex-start;
+    /* 顶部对齐 */
+    gap: 6px;
+    /* 设置标签之间的间距 */
+    padding: 4px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    min-height: 42px;
+    /* 确保没有标签时仍有合适高度 */
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/dict/compoents/DictNav.vue b/src/views/system/dict/compoents/DictNav.vue
new file mode 100644
index 0000000..460c2c9
--- /dev/null
+++ b/src/views/system/dict/compoents/DictNav.vue
@@ -0,0 +1,300 @@
+<template>
+    <nav class="dict-nav">
+        <div class="nav-search">
+            <n-input style="min-width: 100%" v-model:value="navSearch" placeholder="查询父级字典" clearable
+                @keyup.enter="findParentDict(navSearch)">
+                <template #prefix>
+                    <n-icon :component="SearchOutline" />
+                </template>
+            </n-input>
+        </div>
+        <div class="nav-aciton">
+            <n-button block type="default" @click="addParentDict" :focusable="false">
+                <template #icon>
+                    <n-icon>
+                        <AddOutline />
+                    </n-icon>
+                </template>
+                新增父级字典
+            </n-button>
+        </div>
+        <n-space vertical>
+            <n-list bordered hoverable class="menu-list">
+                <n-list-item v-for="(item, index) in parentDictDatas" :key="index" @click="updateParentValue(item)"
+                    class="menu-list__item">
+                    <n-icon :component="BookOutline" size="20" class="menu-list__icon" />
+                    <span class="menu-list__label">{{ item.label }}</span>
+                    <div class="menu-list__actions">
+                        <n-button text class="menu-list__action-button menu-list__action-button--add"
+                            @click="e => modifyParentDict(e, item)">
+                            <n-icon :component="PencilOutline" size="18" />
+                        </n-button>
+                        <n-button text class="menu-list__action-button menu-list__action-button--delete"
+                            @click="e => deleteParentDict(e, item)">
+                            <n-icon :component="TrashOutline" size="18" />
+                        </n-button>
+                    </div>
+                </n-list-item>
+            </n-list>
+        </n-space>
+    </nav>
+
+    <n-modal v-model:show="showAddModal" title="新增父级字典" preset="dialog" :mask-closable="false">
+        <n-form ref="formRef" :model="formData" :rules="formRules">
+            <n-form-item label="父级字典名称" path="label">
+                <n-input v-model:value="formData.label" placeholder="输入父级字典名称" />
+            </n-form-item>
+            <n-form-item label="父级字典值" path="value">
+                <n-input v-model:value="formData.value" placeholder="输入父级字典值" />
+            </n-form-item>
+        </n-form>
+        <template #action>
+            <n-space justify="end">
+                <n-button @click="showAddModal = false">取消</n-button>
+                <n-button type="primary" @click="handleSubmit">提交</n-button>
+            </n-space>
+        </template>
+    </n-modal>
+
+    <!-- <n-modal v-model:show="showDeleteModal" title="删除字典数据" preset="dialog" :mask-closable="false" content="确认删除该项字典数据？"
+    negative-text="取消" positive-text="确认" @negative-click="showDeleteModal = false" @positive-click="submitDelete">
+
+    </n-modal> -->
+</template>
+
+<script setup lang="ts">
+import { getParentDictionary } from '@/api/dictApi';
+import { AddOutline, BookOutline, PencilOutline, SearchOutline, TrashOutline } from '@vicons/ionicons5';
+import { FormInst, NButton, NIcon, useMessage } from 'naive-ui';
+
+defineProps<{
+    parentValue: string
+    parentTitle: string
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:parentValue', value: string): void
+    (e: 'update:parentTitle', value: string): void
+}>();
+
+interface DictRow {
+    uuid?: string
+    parentId?: string
+    parentValue?: string
+    label: string
+    labelEn?: string
+    remark?: string
+    value: string
+    tags?: string[]
+    createTime?: Date
+    createUserId?: string
+}
+
+// 图标通用渲染
+const renderIcon = (icon: Component) => {
+    return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+// 获取父级字典相关逻辑
+const findParentDict = async (label: string) => {
+    console.log('查找父级字典: ', label)
+    try {
+        const result = await getParentDictionary(label);
+        console.log("getParentDict: ", result);
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+const getParentData = (): DictRow[] => {
+    return [
+        {
+            label: '历史段位',
+            value: '1',
+        },
+        {
+            label: '陪玩业务类型',
+            value: '2',
+        },
+        {
+            label: '订单状态',
+            value: '3',
+        }, {
+            label: '?',
+            value: '?',
+        }
+    ]
+}
+
+const parentDictDatas = ref<DictRow[]>(getParentData());
+
+// 初始化
+const init = async () => {
+    findParentDict('');
+}
+
+onMounted(() => {
+    init();
+})
+
+// 按钮触发更新
+const updateParentValue = (dict: DictRow) => {
+    emit('update:parentValue', dict.value)
+    emit('update:parentTitle', dict.label)
+    return;
+}
+
+const message = useMessage()
+
+// 新增与编辑相关数据与逻辑
+interface FormData {
+    label: string;
+    value: string;
+}
+const formData = ref<FormData>({
+    label: '',
+    value: ''
+})
+const formRules = {
+    label: {
+        required: true,
+        message: '请输入父级字典名称',
+        trigger: 'input'
+    },
+    value: {
+        required: true,
+        message: '请输入父级字典值',
+        trigger: 'input'
+    }
+}
+
+const formRef = ref<FormInst | null>(null);
+const showAddModal = ref(false);
+
+const addParentDict = () => {
+    formData.value = {
+        label: '',
+        value: ''
+    }
+    showAddModal.value = true;
+}
+
+const modifyParentDict = (e: MouseEvent, data: DictRow) => {
+    e.stopPropagation();
+    console.log('修改', data);
+};
+
+const handleSubmit = async (e: MouseEvent) => {
+    e.preventDefault();
+
+    formRef.value?.validate(async (errors) => {
+        if (!errors) {
+            console.log('提交', formData.value);
+            try {
+                const result = await addParentDictionary(formData.value);
+                console.log(result);
+                showAddModal.value = false;
+                message.success('提交成功');
+            } catch (error) {
+                console.log(error);
+            }
+        } else {
+            console.log('失败', errors);
+            message.error('提交失败');
+        }
+    })
+}
+
+// 删除相关逻辑
+const deleteParentDict = (e: MouseEvent, data: DictRow) => {
+    e.stopPropagation();
+    console.log('删除', data);
+};
+
+const navSearch = ref('');
+
+</script>
+
+<style scoped lang="scss">
+.dict-nav {
+    width: 15%;
+    border-right: 1px solid #eee;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .menu-list {
+        &__item {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            transition: background-color 0.3s;
+
+            &:hover {
+                background-color: rgba(32, 128, 240, 0.1);
+
+                .menu-list__actions {
+                    opacity: 1;
+                }
+            }
+        }
+
+        &__icon {
+            margin-right: 12px;
+            color: $primaryColor;
+            flex-shrink: 0;
+        }
+
+        &__label {
+            flex: 1;
+            font-size: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding-right: 75px; // 为按钮预留空间
+        }
+
+        &__actions {
+            display: flex;
+            gap: 8px;
+            opacity: 0;
+            transition: opacity 0.3s;
+            position: absolute; // 关键：绝对定位
+            right: 16px; // 固定在右侧
+            top: 50%; // 垂直居中
+            transform: translateY(-50%); // 精确垂直居中
+        }
+
+
+        &__item:hover &__actions {
+            opacity: 1;
+        }
+
+        &__action-button {
+            transition: all 0.2s;
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 4px;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+
+            &:active {
+                transform: scale(0.95);
+            }
+
+            &--modify:hover {
+                color: $primaryColorHover;
+            }
+
+            &--delete:hover {
+                color: #d03050;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index a629b9c..88c2902 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,24 +1,24 @@
 <!-- 用户字典 -->
 <template>
-  <!-- 左右布局，左侧为占25%的nav，右侧为占据75%的main -->
-  <div class="main__container white-bg table">
-    <!-- 侧边字典属性结构 -->
-    <nav class="dict-nav">
-      <!-- 要求可以搜索 -->
-      <n-input v-model:value="search"></n-input>
-      <!-- 树结构 右侧要能够删除 -->
-      <n-tree></n-tree>
-    </nav>
-    <main class="dict-nav">
-      <!-- 上面有一排操作按钮：input框查询 查询按钮，新增 -->
-       <!-- 字典表格，含有字段：字典id，字典名称，字典值，字典标签，操作列（编辑 删除） -->
-      <n-table></n-table>
-    </main>
-
+  <!-- 左右布局，左侧为占15%的nav，右侧为占据75%的main -->
+  <div class="main__container white-bg table dict-container">
+    <DictNav v-model:parentValue="currentKey" v-model:parentTitle="currentTitle" />
+    <DictMain :value="currentKey" :label="currentTitle" />
   </div>
 </template>
 
 <script setup lang='ts'>
-const search = ref('');
+import DictNav from './compoents/DictNav.vue';
+import DictMain from './compoents/DictMain.vue';
+
+const currentKey = ref('')
+const currentTitle = ref('')
+
 </script>
-<style scoped lang='scss'></style>
\ No newline at end of file
+
+<style scoped lang='scss'>
+.dict-container {
+  display: flex;
+  height: 100%;
+}
+</style>
\ No newline at end of file