refactor: ♻️ 字典调整按需加载，api、store和枚举文件命名优化

src/components/Dict/DictLabel.vue

@@ -6,47 +6,55 @@
     <span>{{ label }}</span>
   </template>
 </template>
-
 <script setup lang="ts">
 import { useDictStore } from "@/store";
-const dictStore = useDictStore();
 
 const props = defineProps({
-  code: String,
-  modelValue: [String, Number],
+  code: String, // 字典编码
+  modelValue: [String, Number], // 字典项的值
   size: {
     type: String,
-    default: "default",
+    default: "default", // 标签大小
   },
 });
-
 const label = ref("");
-const tagType = ref<"success" | "warning" | "info" | "primary" | "danger" | undefined>();
-
-const tagSize = ref(props.size as "default" | "large" | "small");
+const tagType = ref<"success" | "warning" | "info" | "primary" | "danger" | undefined>(); // 标签类型
+const tagSize = ref<"default" | "large" | "small">(props.size as "default" | "large" | "small"); // 标签大小
 
+const dictStore = useDictStore();
+/**
+ * 根据字典项的值获取对应的 label 和 tagType
+ * @param dictCode 字典编码
+ * @param value 字典项的值
+ * @returns 包含 label 和 tagType 的对象
+ */
 const getLabelAndTagByValue = async (dictCode: string, value: any) => {
-  // 先从本地缓存中获取字典数据
-  const dictData = dictStore.getDictionary(dictCode);
-
+  // 按需加载字典数据
+  await dictStore.loadDictItems(dictCode);
+  // 从缓存中获取字典数据
+  const dictItems = dictStore.getDictItems(dictCode);
   // 查找对应的字典项
-  const dictEntry = dictData.find((item: any) => item.value == value);
+  const dictItem = dictItems.find((item) => item.value == value);
   return {
-    label: dictEntry ? dictEntry.label : "",
-    tag: dictEntry ? dictEntry.tagType : undefined,
+    label: dictItem?.label || "",
+    tagType: dictItem?.tagType,
   };
 };
-
-// 监听 props 的变化，获取并更新 label 和 tag
-const fetchLabelAndTag = async () => {
-  const result = await getLabelAndTagByValue(props.code as string, props.modelValue);
-  label.value = result.label;
-  tagType.value = result.tag as "success" | "warning" | "info" | "primary" | "danger" | undefined;
+/**
+ * 更新 label 和 tagType
+ */
+const updateLabelAndTag = async () => {
+  console.log("updateLabelAndTag", props.code, props.modelValue);
+  if (!props.code || props.modelValue === undefined) return;
+  const { label: newLabel, tagType: newTagType } = await getLabelAndTagByValue(
+    props.code,
+    props.modelValue
+  );
+  label.value = newLabel;
+  tagType.value = newTagType as typeof tagType.value;
 };
 
-// 首次挂载时获取字典数据
-onMounted(fetchLabelAndTag);
+watch([() => props.code, () => props.modelValue], updateLabelAndTag);
 
-// 当 modelValue 发生变化时重新获取
-watch(() => props.modelValue, fetchLabelAndTag);
+onMounted(updateLabelAndTag);
 </script>

src/components/Dict/index.vue

@@ -100,41 +100,34 @@ const selectedValue = ref<any>(
       : undefined
 );
 
-// 监听 modelValue 变化
+// 监听 modelValue 和 options 的变化
 watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (props.type === "checkbox") {
-      selectedValue.value = Array.isArray(newValue) ? newValue : [];
+  [() => props.modelValue, () => options.value],
+  ([newValue, newOptions]) => {
+    if (newOptions.length > 0 && newValue !== undefined) {
+      if (props.type === "checkbox") {
+        selectedValue.value = Array.isArray(newValue) ? newValue : [];
+      } else {
+        const matchedOption = newOptions.find(
+          (option) => String(option.value) === String(newValue)
+        );
+        selectedValue.value = matchedOption?.value;
+      }
     } else {
-      selectedValue.value = newValue?.toString() || "";
+      selectedValue.value = undefined;
     }
   },
   { immediate: true }
 );
 
-// 监听 options 变化并重新匹配 selectedValue
-watch(
-  () => options.value,
-  (newOptions) => {
-    // options 加载后，确保 selectedValue 可以正确匹配到 options
-    if (newOptions.length > 0 && selectedValue.value !== undefined) {
-      const matchedOption = newOptions.find((option) => option.value === selectedValue.value);
-      if (!matchedOption && props.type !== "checkbox") {
-        // 如果找不到匹配项，清空选中
-        selectedValue.value = "";
-      }
-    }
-  }
-);
-
 // 监听 selectedValue 的变化并触发 update:modelValue
 function handleChange(val: any) {
   emit("update:modelValue", val);
 }
 
 // 获取字典数据
-onMounted(() => {
-  options.value = dictStore.getDictionary(props.code);
+onMounted(async () => {
+  await dictStore.loadDictItems(props.code);
+  options.value = dictStore.getDictItems(props.code);
 });
 </script>