diff --git a/src/api/sysDictionary.js b/src/api/system/dictionary/sysDictionary.js
similarity index 100%
rename from src/api/sysDictionary.js
rename to src/api/system/dictionary/sysDictionary.js
diff --git a/src/api/sysDictionaryDetail.js b/src/api/system/dictionary/sysDictionaryDetail.js
similarity index 100%
rename from src/api/sysDictionaryDetail.js
rename to src/api/system/dictionary/sysDictionaryDetail.js
diff --git a/src/pathInfo.json b/src/pathInfo.json
index a0ce0c6..da7147e 100644
--- a/src/pathInfo.json
+++ b/src/pathInfo.json
@@ -69,6 +69,8 @@
   "/src/view/superAdmin/authority/components/apis.vue": "Apis",
   "/src/view/superAdmin/authority/components/datas.vue": "Datas",
   "/src/view/superAdmin/authority/components/menus.vue": "Menus",
+  "/src/view/superAdmin/dictionary/sysDictionary.vue": "SysDictionary",
+  "/src/view/superAdmin/dictionary/sysDictionaryDetail.vue": "SysDictionaryDetail",
   "/src/view/superAdmin/index.vue": "SuperAdmin",
   "/src/view/superAdmin/menu/components/components-cascader.vue": "ComponentsCascader",
   "/src/view/superAdmin/menu/icon.vue": "Icon",
diff --git a/src/pinia/modules/dictionary.js b/src/pinia/modules/dictionary.js
index b0c089f..e76d19f 100644
--- a/src/pinia/modules/dictionary.js
+++ b/src/pinia/modules/dictionary.js
@@ -1,5 +1,5 @@
-import { findSysDictionary } from '@/api/sysDictionary'
-import { getDictionaryTreeListByType } from '@/api/sysDictionaryDetail'
+import { findSysDictionary } from '@/api/system/dictionary/sysDictionary'
+import { getDictionaryTreeListByType } from '@/api/system/dictionary/sysDictionaryDetail'
 
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
@@ -32,9 +32,7 @@ export const useDictionaryStore = defineStore('dictionary', () => {
       label: item.label,
       value: item.value,
       extend: item.extend,
-      children: item.children
-        ? filterTreeByDepth(item.children, currentDepth + 1, targetDepth)
-        : undefined
+      children: item.children ? filterTreeByDepth(item.children, currentDepth + 1, targetDepth) : undefined
     }))
   }
 
@@ -66,20 +64,12 @@ export const useDictionaryStore = defineStore('dictionary', () => {
       label: item.label,
       value: item.value,
       extend: item.extend,
-      children:
-        item.children && item.children.length > 0
-          ? normalizeTreeData(item.children)
-          : undefined
+      children: item.children && item.children.length > 0 ? normalizeTreeData(item.children) : undefined
     }))
   }
 
   // 根据value和depth查找指定节点并返回其children
-  const findNodeByValue = (
-    items,
-    targetValue,
-    currentDepth = 1,
-    maxDepth = 0
-  ) => {
+  const findNodeByValue = (items, targetValue, currentDepth = 1, maxDepth = 0) => {
     for (const item of items) {
       // 如果找到目标value的节点
       if (item.value === targetValue) {
@@ -95,17 +85,8 @@ export const useDictionaryStore = defineStore('dictionary', () => {
       }
 
       // 如果当前深度小于最大深度，继续在children中查找
-      if (
-        item.children &&
-        item.children.length > 0 &&
-        (maxDepth === 0 || currentDepth < maxDepth)
-      ) {
-        const result = findNodeByValue(
-          item.children,
-          targetValue,
-          currentDepth + 1,
-          maxDepth
-        )
+      if (item.children && item.children.length > 0 && (maxDepth === 0 || currentDepth < maxDepth)) {
+        const result = findNodeByValue(item.children, targetValue, currentDepth + 1, maxDepth)
         if (result !== null) {
           return result
         }
@@ -120,29 +101,16 @@ export const useDictionaryStore = defineStore('dictionary', () => {
       // 构建缓存key，包含value和depth信息
       const cacheKey = `${type}_value_${value}_depth_${depth}`
 
-      if (
-        dictionaryMap.value[cacheKey] &&
-        dictionaryMap.value[cacheKey].length
-      ) {
+      if (dictionaryMap.value[cacheKey] && dictionaryMap.value[cacheKey].length) {
         return dictionaryMap.value[cacheKey]
       }
 
       try {
         // 获取完整的树形结构数据
         const treeRes = await getDictionaryTreeListByType({ type })
-        if (
-          treeRes.code === 0 &&
-          treeRes.data &&
-          treeRes.data.list &&
-          treeRes.data.list.length > 0
-        ) {
+        if (treeRes.code === 0 && treeRes.data && treeRes.data.list && treeRes.data.list.length > 0) {
           // 查找指定value的节点并返回其children
-          const targetNodeChildren = findNodeByValue(
-            treeRes.data.list,
-            value,
-            1,
-            depth
-          )
+          const targetNodeChildren = findNodeByValue(treeRes.data.list, value, 1, depth)
 
           if (targetNodeChildren !== null) {
             let resultData
@@ -179,12 +147,7 @@ export const useDictionaryStore = defineStore('dictionary', () => {
       try {
         // 首先尝试获取树形结构数据
         const treeRes = await getDictionaryTreeListByType({ type })
-        if (
-          treeRes.code === 0 &&
-          treeRes.data &&
-          treeRes.data.list &&
-          treeRes.data.list.length > 0
-        ) {
+        if (treeRes.code === 0 && treeRes.data && treeRes.data.list && treeRes.data.list.length > 0) {
           // 使用树形结构数据
           const treeData = treeRes.data.list
 
diff --git a/src/view/superAdmin/dictionary/sysDictionary.vue b/src/view/superAdmin/dictionary/sysDictionary.vue
new file mode 100644
index 0000000..a8690c5
--- /dev/null
+++ b/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -0,0 +1,309 @@
+<template>
+  <div>
+    <warning-bar title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释" />
+    <el-splitter class="h-full">
+      <el-splitter-panel size="400px" min="200px" max="800px" collapsible>
+        <div class="flex-none bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded p-4">
+          <div class="flex justify-between items-center relative">
+            <span class="text font-bold">字典列表</span>
+            <el-input
+              class="!absolute top-0 left-0 z-2 ease-in-out animate-slide-left"
+              placeholder="搜索"
+              v-if="showSearchInput"
+              v-model="searchName"
+              clearable
+              :autofocus="showSearchInput"
+              @clear="clearSearchInput"
+              :prefix-icon="Search"
+              v-click-outside="handleCloseSearchInput"
+              @keydown="handleInputKeyDown"
+            >
+              <template #append>
+                <el-button :type="searchName ? 'primary' : 'info'" @click="getTableData">搜索</el-button>
+              </template>
+            </el-input>
+            <el-button class="ml-auto" :icon="Search" @click="showSearchInputHandler"></el-button>
+            <el-button type="primary" @click="openDrawer" :icon="Plus"> </el-button>
+          </div>
+          <el-scrollbar class="mt-4" style="height: calc(100vh - 300px)">
+            <div
+              v-for="dictionary in dictionaryData"
+              :key="dictionary.ID"
+              class="rounded flex justify-between items-center px-2 py-4 cursor-pointer mt-2 hover:bg-blue-50 dark:hover:bg-blue-900 bg-gray-50 dark:bg-gray-800 gap-4"
+              :class="[
+                selectID === dictionary.ID ? 'text-active' : 'text-slate-700 dark:text-slate-50',
+                dictionary.parentID ? 'ml-4 border-l-2 border-blue-200' : ''
+              ]"
+              @click="toDetail(dictionary)"
+            >
+              <div class="max-w-[160px] truncate">
+                <span v-if="dictionary.parentID" class="text-xs text-gray-400 mr-1">└─</span>
+                {{ dictionary.name }}
+                <span class="mr-auto text-sm">（{{ dictionary.type }}）</span>
+              </div>
+
+              <div class="min-w-[40px]">
+                <el-icon class="text-blue-500" @click.stop="updateSysDictionaryFunc(dictionary)">
+                  <Edit />
+                </el-icon>
+                <el-icon class="ml-2 text-red-500" @click="deleteSysDictionaryFunc(dictionary)">
+                  <Delete />
+                </el-icon>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-splitter-panel>
+      <el-splitter-panel :min="200">
+        <div class="flex-1 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900">
+          <sysDictionaryDetail :sys-dictionary-i-d="selectID" />
+        </div>
+      </el-splitter-panel>
+    </el-splitter>
+
+    <el-drawer v-model="drawerFormVisible" :size="appStore.drawerSize" :show-close="false" :before-close="closeDrawer">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ type === 'create' ? '添加字典' : '修改字典' }}</span>
+          <div>
+            <el-button @click="closeDrawer"> 取 消 </el-button>
+            <el-button type="primary" @click="enterDrawer"> 确 定 </el-button>
+          </div>
+        </div>
+      </template>
+      <el-form ref="drawerForm" :model="formData" :rules="rules" label-width="110px">
+        <el-form-item label="父级字典" prop="parentID">
+          <el-select
+            v-model="formData.parentID"
+            placeholder="请选择父级字典（可选）"
+            clearable
+            filterable
+            :style="{ width: '100%' }"
+          >
+            <el-option
+              v-for="dict in availableParentDictionaries"
+              :key="dict.ID"
+              :label="`${dict.name}（${dict.type}）`"
+              :value="dict.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="字典名（中）" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入字典名（中）" clearable :style="{ width: '100%' }" />
+        </el-form-item>
+        <el-form-item label="字典名（英）" prop="type">
+          <el-input v-model="formData.type" placeholder="请输入字典名（英）" clearable :style="{ width: '100%' }" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status" required>
+          <el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
+        </el-form-item>
+        <el-form-item label="描述" prop="desc">
+          <el-input v-model="formData.desc" placeholder="请输入描述" clearable :style="{ width: '100%' }" />
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+  import {
+    createSysDictionary,
+    deleteSysDictionary,
+    updateSysDictionary,
+    findSysDictionary,
+    getSysDictionaryList
+  } from '@/api/system/dictionary/sysDictionary.js' // 此处请自行替换地址
+  import WarningBar from '@/components/warningBar/warningBar.vue'
+  import { ref } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+
+  import sysDictionaryDetail from './sysDictionaryDetail.vue'
+  import { Edit, Plus, Search } from '@element-plus/icons-vue'
+  import { useAppStore } from '@/pinia'
+
+  defineOptions({
+    name: 'SysDictionary'
+  })
+
+  const appStore = useAppStore()
+
+  const selectID = ref(0)
+
+  const formData = ref({
+    name: null,
+    type: null,
+    status: true,
+    desc: null,
+    parentID: null
+  })
+  const searchName = ref('')
+  const showSearchInput = ref(false)
+  const rules = ref({
+    name: [
+      {
+        required: true,
+        message: '请输入字典名（中）',
+        trigger: 'blur'
+      }
+    ],
+    type: [
+      {
+        required: true,
+        message: '请输入字典名（英）',
+        trigger: 'blur'
+      }
+    ],
+    desc: [
+      {
+        required: true,
+        message: '请输入描述',
+        trigger: 'blur'
+      }
+    ]
+  })
+
+  const dictionaryData = ref([])
+  const availableParentDictionaries = ref([])
+
+  // 查询
+  const getTableData = async () => {
+    const res = await getSysDictionaryList({
+      name: searchName.value.trim()
+    })
+    if (res.code === 0) {
+      dictionaryData.value = res.data
+      selectID.value = res.data[0].ID
+      // 更新可选父级字典列表
+      updateAvailableParentDictionaries()
+    }
+  }
+
+  // 更新可选父级字典列表
+  const updateAvailableParentDictionaries = () => {
+    // 如果是编辑模式，排除当前字典及其子字典
+    if (type.value === 'update' && formData.value.ID) {
+      availableParentDictionaries.value = dictionaryData.value.filter((dict) => {
+        return dict.ID !== formData.value.ID && !isChildDictionary(dict.ID, formData.value.ID)
+      })
+    } else {
+      // 创建模式，显示所有字典
+      availableParentDictionaries.value = [...dictionaryData.value]
+    }
+  }
+
+  // 检查是否为子字典（防止循环引用）
+  const isChildDictionary = (dictId, parentId) => {
+    const dict = dictionaryData.value.find((d) => d.ID === dictId)
+    if (!dict || !dict.parentID) return false
+    if (dict.parentID === parentId) return true
+    return isChildDictionary(dict.parentID, parentId)
+  }
+
+  getTableData()
+
+  const toDetail = (row) => {
+    selectID.value = row.ID
+  }
+
+  const drawerFormVisible = ref(false)
+  const type = ref('')
+  const updateSysDictionaryFunc = async (row) => {
+    const res = await findSysDictionary({ ID: row.ID, status: row.status })
+    type.value = 'update'
+    if (res.code === 0) {
+      formData.value = res.data.resysDictionary
+      drawerFormVisible.value = true
+      // 更新可选父级字典列表
+      updateAvailableParentDictionaries()
+    }
+  }
+  const closeDrawer = () => {
+    drawerFormVisible.value = false
+    formData.value = {
+      name: null,
+      type: null,
+      status: true,
+      desc: null,
+      parentID: null
+    }
+  }
+  const deleteSysDictionaryFunc = async (row) => {
+    ElMessageBox.confirm('确定要删除吗?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(async () => {
+      const res = await deleteSysDictionary({ ID: row.ID })
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        })
+        getTableData()
+      }
+    })
+  }
+
+  const drawerForm = ref(null)
+  const enterDrawer = async () => {
+    drawerForm.value.validate(async (valid) => {
+      if (!valid) return
+      let res
+      switch (type.value) {
+        case 'create':
+          res = await createSysDictionary(formData.value)
+          break
+        case 'update':
+          res = await updateSysDictionary(formData.value)
+          break
+        default:
+          res = await createSysDictionary(formData.value)
+          break
+      }
+      if (res.code === 0) {
+        ElMessage.success('操作成功')
+        closeDrawer()
+        getTableData()
+      }
+    })
+  }
+  const openDrawer = () => {
+    type.value = 'create'
+    drawerForm.value && drawerForm.value.clearValidate()
+    drawerFormVisible.value = true
+    // 更新可选父级字典列表
+    updateAvailableParentDictionaries()
+  }
+
+  const clearSearchInput = () => {
+    if (!showSearchInput.value) return
+    searchName.value = ''
+    showSearchInput.value = false
+    getTableData()
+  }
+  const handleCloseSearchInput = () => {
+    if (!showSearchInput.value || searchName.value.trim() != '') return
+    showSearchInput.value = false
+  }
+
+  const showSearchInputHandler = () => {
+    showSearchInput.value = true
+  }
+
+  const handleInputKeyDown = (e) => {
+    if (e.key === 'Enter' && searchName.value.trim() !== '') {
+      getTableData()
+    }
+  }
+</script>
+
+<style>
+  .dict-box {
+    height: calc(100vh - 240px);
+  }
+
+  .active {
+    background-color: var(--el-color-primary) !important;
+    color: #fff;
+  }
+</style>
diff --git a/src/view/superAdmin/dictionary/sysDictionaryDetail.vue b/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
new file mode 100644
index 0000000..d6964b8
--- /dev/null
+++ b/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
@@ -0,0 +1,333 @@
+<template>
+  <div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list justify-between flex items-center">
+        <span class="text font-bold">字典详细内容</span>
+        <div class="flex items-center gap-2">
+          <el-input
+            placeholder="搜索展示值"
+            v-model="searchName"
+            clearable
+            class="!w-64"
+            @clear="clearSearchInput"
+            :prefix-icon="Search"
+            v-click-outside="handleCloseSearchInput"
+            @keydown="handleInputKeyDown"
+          >
+            <template #append>
+              <el-button :type="searchName ? 'primary' : 'info'" @click="getTreeData">搜索</el-button>
+            </template>
+          </el-input>
+          <el-button type="primary" icon="plus" @click="openDrawer"> 新增字典项 </el-button>
+        </div>
+      </div>
+      <!-- 表格视图 -->
+      <el-table
+        :data="treeData"
+        style="width: 100%"
+        tooltip-effect="dark"
+        :tree-props="{ children: 'children' }"
+        row-key="ID"
+        default-expand-all
+      >
+        <el-table-column type="selection" width="55" />
+
+        <el-table-column align="left" label="展示值" prop="label" min-width="240" />
+
+        <el-table-column align="left" label="字典值" prop="value" />
+
+        <el-table-column align="left" label="扩展值" prop="extend" />
+
+        <el-table-column align="left" label="日期" width="180">
+          <template #default="scope">
+            {{ formatDate(scope.row.CreatedAt) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column align="left" label="层级" prop="level" width="80" />
+
+        <el-table-column align="left" label="启用状态" prop="status" width="120">
+          <template #default="scope">
+            {{ formatBoolean(scope.row.status) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column align="left" label="排序标记" prop="sort" width="120" />
+
+        <el-table-column align="left" label="操作" :min-width="appStore.operateMinWith">
+          <template #default="scope">
+            <el-button type="success" link icon="plus" @click="addChildNode(scope.row)"> 添加子项 </el-button>
+            <el-button type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">
+              变更
+            </el-button>
+            <el-button type="primary" link icon="delete" @click="deleteSysDictionaryDetailFunc(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-drawer v-model="drawerFormVisible" :size="appStore.drawerSize" :show-close="false" :before-close="closeDrawer">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ type === 'create' ? '添加字典项' : '修改字典项' }}</span>
+          <div>
+            <el-button @click="closeDrawer"> 取 消 </el-button>
+            <el-button type="primary" @click="enterDrawer"> 确 定 </el-button>
+          </div>
+        </div>
+      </template>
+      <el-form ref="drawerForm" :model="formData" :rules="rules" label-width="110px">
+        <el-form-item label="父级字典项" prop="parentID">
+          <el-cascader
+            v-model="formData.parentID"
+            :options="[rootOption, ...treeData]"
+            :props="cascadeProps"
+            placeholder="请选择父级字典项（可选）"
+            clearable
+            filterable
+            :style="{ width: '100%' }"
+            @change="handleParentChange"
+          />
+        </el-form-item>
+        <el-form-item label="展示值" prop="label">
+          <el-input v-model="formData.label" placeholder="请输入展示值" clearable :style="{ width: '100%' }" />
+        </el-form-item>
+        <el-form-item label="字典值" prop="value">
+          <el-input v-model="formData.value" placeholder="请输入字典值" clearable :style="{ width: '100%' }" />
+        </el-form-item>
+        <el-form-item label="扩展值" prop="extend">
+          <el-input v-model="formData.extend" placeholder="请输入扩展值" clearable :style="{ width: '100%' }" />
+        </el-form-item>
+        <el-form-item label="启用状态" prop="status" required>
+          <el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
+        </el-form-item>
+        <el-form-item label="排序标记" prop="sort">
+          <el-input-number v-model.number="formData.sort" placeholder="排序标记" />
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+  import {
+    createSysDictionaryDetail,
+    deleteSysDictionaryDetail,
+    updateSysDictionaryDetail,
+    findSysDictionaryDetail,
+    getDictionaryTreeList
+  } from '@/api/system/dictionary/sysDictionaryDetail' // 此处请自行替换地址
+  import { ref, watch } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { formatBoolean, formatDate } from '@/utils/format'
+  import { useAppStore } from '@/pinia'
+  import { Search } from '@element-plus/icons-vue'
+
+  defineOptions({
+    name: 'SysDictionaryDetail'
+  })
+
+  const appStore = useAppStore()
+  const searchName = ref('')
+
+  const props = defineProps({
+    sysDictionaryID: {
+      type: Number,
+      default: 0
+    }
+  })
+
+  const formData = ref({
+    label: null,
+    value: null,
+    status: true,
+    sort: null,
+    parentID: null
+  })
+
+  const rules = ref({
+    label: [
+      {
+        required: true,
+        message: '请输入展示值',
+        trigger: 'blur'
+      }
+    ],
+    value: [
+      {
+        required: true,
+        message: '请输入字典值',
+        trigger: 'blur'
+      }
+    ],
+    sort: [
+      {
+        required: true,
+        message: '排序标记',
+        trigger: 'blur'
+      }
+    ]
+  })
+
+  const treeData = ref([])
+
+  // 级联选择器配置
+  const cascadeProps = {
+    value: 'ID',
+    label: 'label',
+    children: 'children',
+    checkStrictly: true, // 允许选择任意级别
+    emitPath: false // 只返回选中节点的值
+  }
+
+  // 获取树形数据
+  const getTreeData = async () => {
+    if (!props.sysDictionaryID) return
+    try {
+      const res = await getDictionaryTreeList({
+        sysDictionaryID: props.sysDictionaryID
+      })
+      if (res.code === 0) {
+        treeData.value = res.data.list || []
+      }
+    } catch (error) {
+      console.error('获取树形数据失败:', error)
+      ElMessage.error('获取层级数据失败')
+    }
+  }
+
+  const rootOption = {
+    ID: null,
+    label: '无父级（根级）'
+  }
+
+  // 初始加载
+  getTreeData()
+
+  const type = ref('')
+  const drawerFormVisible = ref(false)
+
+  const updateSysDictionaryDetailFunc = async (row) => {
+    drawerForm.value && drawerForm.value.clearValidate()
+    const res = await findSysDictionaryDetail({ ID: row.ID })
+    type.value = 'update'
+    if (res.code === 0) {
+      formData.value = res.data.reSysDictionaryDetail
+      drawerFormVisible.value = true
+    }
+  }
+
+  // 添加子节点
+  const addChildNode = (parentNode) => {
+    console.log(parentNode)
+    type.value = 'create'
+    formData.value = {
+      label: null,
+      value: null,
+      status: true,
+      sort: null,
+      parentID: parentNode.ID,
+      sysDictionaryID: props.sysDictionaryID
+    }
+    drawerForm.value && drawerForm.value.clearValidate()
+    drawerFormVisible.value = true
+  }
+
+  // 处理父级选择变化
+  const handleParentChange = (value) => {
+    formData.value.parentID = value
+  }
+
+  const closeDrawer = () => {
+    drawerFormVisible.value = false
+    formData.value = {
+      label: null,
+      value: null,
+      status: true,
+      sort: null,
+      parentID: null,
+      sysDictionaryID: props.sysDictionaryID
+    }
+  }
+
+  const deleteSysDictionaryDetailFunc = async (row) => {
+    ElMessageBox.confirm('确定要删除吗?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(async () => {
+      const res = await deleteSysDictionaryDetail({ ID: row.ID })
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
+        }
+        await getTreeData() // 重新加载数据
+      }
+    })
+  }
+
+  const drawerForm = ref(null)
+  const enterDrawer = async () => {
+    drawerForm.value.validate(async (valid) => {
+      formData.value.sysDictionaryID = props.sysDictionaryID
+      if (!valid) return
+      let res
+      switch (type.value) {
+        case 'create':
+          res = await createSysDictionaryDetail(formData.value)
+          break
+        case 'update':
+          res = await updateSysDictionaryDetail(formData.value)
+          break
+        default:
+          res = await createSysDictionaryDetail(formData.value)
+          break
+      }
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '创建/更改成功'
+        })
+        closeDrawer()
+        await getTreeData() // 重新加载数据
+      }
+    })
+  }
+
+  const openDrawer = () => {
+    type.value = 'create'
+    formData.value.parentID = null
+    drawerForm.value && drawerForm.value.clearValidate()
+    drawerFormVisible.value = true
+  }
+
+  const clearSearchInput = () => {
+    searchName.value = ''
+    getTreeData()
+  }
+
+  const handleCloseSearchInput = () => {
+    // 处理搜索输入框关闭
+  }
+
+  const handleInputKeyDown = (e) => {
+    if (e.key === 'Enter' && searchName.value.trim() !== '') {
+      getTreeData()
+    }
+  }
+
+  watch(
+    () => props.sysDictionaryID,
+    () => {
+      getTreeData()
+    }
+  )
+</script>
+
+<style scoped></style>