From cf41abc5a53ae66bfd7dbbbe810149937031bd77 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Thu, 4 Sep 2025 18:50:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4demo=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/demo.ts                               |  31 ---
 src/api/index.ts                              |   1 -
 src/views/demo/dict/index.vue                 | 187 ++++++++++++------
 .../system/dict/components/DictDataModal.vue  |   2 +-
 4 files changed, 126 insertions(+), 95 deletions(-)
 delete mode 100644 src/api/demo.ts

diff --git a/src/api/demo.ts b/src/api/demo.ts
deleted file mode 100644
index 7e8f54c..0000000
--- a/src/api/demo.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { request } from '../utils/alova'
-
-/* 示例列表接口 */
-export function fetchUserList() {
-  return request.Get('/userList')
-}
-
-// 获取所有路由信息
-export function fetchAllRoutes() {
-  return request.Get<Api.Response<AppRoute.RowRoute[]>>('/getUserRoutes')
-}
-
-// 获取所有用户信息
-export function fetchUserPage() {
-  return request.Get<Api.Response<Entity.User[]>>('/userPage')
-}
-// 获取所有角色列表
-export function fetchRoleList() {
-  return request.Get<Api.Response<Entity.Role[]>>('/role/list')
-}
-
-/**
- * 请求获取字典列表
- *
- * @param code - 字典编码，用于筛选特定的字典列表
- * @returns 返回的字典列表数据
- */
-export function fetchDictList(code?: string) {
-  const params = { code }
-  return request.Get<Api.Response<Entity.DictType[]>>('/dict/list', { params })
-}
diff --git a/src/api/index.ts b/src/api/index.ts
index 99a42ff..a02cdb5 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,4 +1,3 @@
 export * from './login'
-export * from './demo'
 export * from './test'
 export * from './system'
diff --git a/src/views/demo/dict/index.vue b/src/views/demo/dict/index.vue
index 1a40826..0d522e6 100644
--- a/src/views/demo/dict/index.vue
+++ b/src/views/demo/dict/index.vue
@@ -1,109 +1,172 @@
 <script setup lang="ts">
-import { fetchDictList } from '@/api'
+import { getDictTypeList } from '@/api'
+import { useDict } from '@/hooks/useDict'
 import { useDictStore } from '@/store'
 
-const { dict } = useDictStore()
+const dictStore = useDictStore()
 
-const dictKey = ref('')
-const options = ref()
-const subOptions = ref()
-const currentDict = ref()
+const selectedDictType = ref('')
+const selectedDictValue = ref('')
+const dictTypeOptions = ref<Array<{ label: string; value: string }>>([])
+const displayData = ref<Entity.DictData[] | Record<string, any>>([])
 
-async function getAlldict() {
-  const { data } = await fetchDictList()
-  options.value = data.map((item) => {
+// 使用 useDict hook 获取字典数据
+const dictUtils = computed(() => {
+  if (!selectedDictType.value) {
     return {
-      label: item.label,
-      value: item.code,
+      rawData: ref([]),
+      enumMap: ref({}),
+      valueMap: ref({}),
+      labelMap: ref({}),
+      options: ref([])
     }
-  })
+  }
+  return useDict(selectedDictType.value)
+})
+
+// 获取所有字典类型
+async function getAllDictTypes() {
+  try {
+    const { data } = await getDictTypeList()
+    dictTypeOptions.value = data.list.map((item: Entity.DictType) => ({
+      label: item.name,
+      value: item.type,
+    }))
+  }
+  catch (error) {
+    console.error('获取字典类型失败:', error)
+  }
 }
-function changeSelect(v: string) {
-  dict(v).then((data) => {
-    currentDict.value = data
-    subOptions.value = data.data()
+
+// 选择字典类型时的处理
+function changeSelect(dictType: string) {
+  selectedDictType.value = dictType
+  selectedDictValue.value = ''
+  // 默认显示原始数据
+  nextTick(() => {
+    if (dictUtils.value.rawData.value.length > 0) {
+      displayData.value = dictUtils.value.rawData.value
+    }
   })
 }
 
 onMounted(() => {
-  getAlldict()
+  getAllDictTypes()
 })
 
-const data = ref()
-async function getDict() {
-  data.value = currentDict.value.data()
+// 显示原始字典数据
+function showRawData() {
+  displayData.value = dictUtils.value.rawData.value
 }
 
-async function getEnum() {
-  data.value = currentDict.value.enum()
+// 显示枚举映射（value -> name）
+function showEnumMap() {
+  displayData.value = dictUtils.value.enumMap.value
 }
 
-async function getValueMap() {
-  data.value = currentDict.value.valueMap()
+// 显示值映射（value -> dictData）
+function showValueMap() {
+  displayData.value = dictUtils.value.valueMap.value
 }
 
-async function getLabelMap() {
-  data.value = currentDict.value.labelMap()
+// 显示标签映射（name -> dictData）
+function showLabelMap() {
+  displayData.value = dictUtils.value.labelMap.value
 }
 
-const dictValue = ref()
+// 显示选项格式
+function showOptions() {
+  displayData.value = dictUtils.value.options.value
+}
 
+// 根据值获取标签（使用 enumMap）
 const dictLabel = computed(() => {
-  if (data.value && data.value[dictValue.value]) {
-    return data.value[dictValue.value].label
-  }
-  return '--'
+  if (!selectedDictValue.value || !dictUtils.value.enumMap.value) return '--'
+  return dictUtils.value.enumMap.value[selectedDictValue.value] || '--'
 })
 
-const enumValue = ref()
+// 清理缓存
+function clearCache() {
+  dictStore.cleanDict()
+  window.$message?.success('字典缓存已清理')
+}
 
-const enumLabel = computed(() => {
-  if (data.value && data.value[enumValue.value]) {
-    return data.value[enumValue.value]
+// 移除指定字典缓存
+function removeCache() {
+  if (selectedDictType.value) {
+    dictStore.removeDict(selectedDictType.value)
+    window.$message?.success(`已移除 ${selectedDictType.value} 的缓存`)
   }
-  return '--'
-})
+}
 </script>
 
 <template>
-  <n-card title="字典示例">
+  <n-card title="字典演示">
     <n-flex vertical>
-      <n-flex>
-        <n-select v-model:value="dictKey" class="w-1/3" :options="options" @update:value="changeSelect" />
-        子字典下拉框
-        <n-select class="w-1/3" :options="subOptions" />
+      <n-flex align="center">
+        <n-select 
+          v-model:value="selectedDictType" 
+          :options="dictTypeOptions" 
+          placeholder="请选择字典类型" 
+          @update:value="changeSelect" 
+        />
+        <n-select 
+          v-model:value="selectedDictValue" 
+          :options="dictUtils.options.value" 
+          placeholder="请选择字典项" 
+        />
       </n-flex>
+      
       <n-flex>
-        <n-button @click="getDict">
-          获取当前字典数据
+        <n-button @click="showRawData">
+          显示原始数据 (rawData)
         </n-button>
-        <n-button @click="getEnum">
-          获取当前字典枚举
+        <n-button @click="showEnumMap">
+          显示枚举映射 (enumMap)
         </n-button>
-        <n-button @click="getValueMap">
-          获取当前字典ValueMap
+        <n-button @click="showValueMap">
+          显示值映射 (valueMap)
         </n-button>
-        <n-button @click="getLabelMap">
-          获取当前字典LabelMap
+        <n-button @click="showLabelMap">
+          显示标签映射 (labelMap)
+        </n-button>
+        <n-button @click="showOptions">
+          显示选项格式 (options)
+        </n-button>
+      </n-flex>
+      
+      <n-flex>
+        <n-button @click="clearCache" type="warning">
+          清理所有缓存
+        </n-button>
+        <n-button @click="removeCache" type="error" :disabled="!selectedDictType">
+          移除当前字典缓存
         </n-button>
       </n-flex>
 
-      <pre class="bg-#eee:30">
-          {{ data }}
-        </pre>
+      <pre class="bg-gray-100 p-4 rounded text-sm overflow-auto max-h-96">
+{{ JSON.stringify(displayData, null, 2) }}</pre>
 
-      <n-flex align="center">
-        <n-input-number v-model:value="dictValue" :min="0" />
+      <n-flex align="center" v-if="selectedDictValue">
+        <n-text>选中值: {{ selectedDictValue }}</n-text>
         <n-text type="info">
-          Map回显结果 {{ dictLabel }}
-        </n-text>
-      </n-flex>
-      <n-flex align="center">
-        <n-input-number v-model:value="enumValue" :min="0" />
-        <n-text type="info">
-          Enum回显结果 {{ enumLabel }}
+          对应标签: {{ dictLabel }}
         </n-text>
       </n-flex>
+      
+      <n-divider />
+      
+      <n-text depth="3">useDict Hook 使用说明：</n-text>
+      <n-ul>
+        <n-li><n-text code>useDict(dictType)</n-text> - 使用字典类型获取字典工具对象</n-li>
+        <n-li><n-text code>rawData</n-text> - 原始字典数据数组 Entity.DictData[]</n-li>
+        <n-li><n-text code>enumMap</n-text> - 枚举映射 { value: name }</n-li>
+        <n-li><n-text code>valueMap</n-text> - 值映射 { value: dictData }</n-li>
+        <n-li><n-text code>labelMap</n-text> - 标签映射 { name: dictData }</n-li>
+        <n-li><n-text code>options</n-text> - 选项数组 [{ label: name, value }]</n-li>
+        <n-li>字典数据会自动缓存60分钟，支持手动清理缓存</n-li>
+        <n-li>推荐使用 useDict hook 而不是直接调用 API 或 store</n-li>
+      </n-ul>
     </n-flex>
   </n-card>
 </template>
diff --git a/src/views/system/dict/components/DictDataModal.vue b/src/views/system/dict/components/DictDataModal.vue
index ecd9a9e..9b67774 100644
--- a/src/views/system/dict/components/DictDataModal.vue
+++ b/src/views/system/dict/components/DictDataModal.vue
@@ -21,7 +21,7 @@ const modalForm = createProModalForm<Partial<Entity.DictData>>({
   omitEmptyString: false,
   initialValues: {
     sort: 0,
-    status: 1,
+    status: 0,
   },
   onSubmit: submitModal,
 })