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>

src/components/Hamburger/index.vue

@@ -6,8 +6,8 @@
 
 <script setup lang="ts">
 import { useSettingsStore } from "@/store";
-import { ThemeEnum, SidebarColorEnum } from "@/enums/ThemeEnum";
-import { LayoutEnum } from "@/enums/LayoutEnum";
+import { ThemeMode, SidebarColor } from "@/enums/settings/theme.enum";
+import { LayoutMode } from "@/enums/settings/layout.enum";
 
 defineProps({
   isActive: { type: Boolean, required: true },
@@ -20,14 +20,14 @@ const layout = computed(() => settingsStore.layout);
 
 const hamburgerClass = computed(() => {
   // 如果暗黑主题
-  if (settingsStore.theme === ThemeEnum.DARK) {
+  if (settingsStore.theme === ThemeMode.DARK) {
     return "hamburger--white";
   }
 
   // 如果是混合布局 && 侧边栏配色方案是经典蓝
   if (
-    layout.value === LayoutEnum.MIX &&
-    settingsStore.sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
+    layout.value === LayoutMode.MIX &&
+    settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
   ) {
     return "hamburger--white";
   }

src/components/LangSelect/index.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from "@/store/modules/app";
-import { LanguageEnum } from "@/enums/LanguageEnum";
+import { useAppStore } from "@/store/modules/app.store";
+import { LanguageEnum } from "@/enums/settings/locale.enum";
 
 defineProps({
   size: {

src/components/NoticeDropdown/index.vue

@@ -87,7 +87,7 @@
 </template>
 
 <script setup lang="ts">
-import NoticeAPI, { NoticePageVO, NoticeDetailVO } from "@/api/system/notice";
+import NoticeAPI, { NoticePageVO, NoticeDetailVO } from "@/api/system/notice.api";
 import router from "@/router";
 
 const noticeList = ref<NoticePageVO[]>([]);

src/components/SizeSelect/index.vue

@@ -22,15 +22,15 @@
 </template>
 
 <script setup lang="ts">
-import { SizeEnum } from "@/enums/SizeEnum";
-import { useAppStore } from "@/store/modules/app";
+import { ComponentSize } from "@/enums/settings/layout.enum";
+import { useAppStore } from "@/store/modules/app.store";
 
 const { t } = useI18n();
 const sizeOptions = computed(() => {
   return [
-    { label: t("sizeSelect.default"), value: SizeEnum.DEFAULT },
-    { label: t("sizeSelect.large"), value: SizeEnum.LARGE },
-    { label: t("sizeSelect.small"), value: SizeEnum.SMALL },
+    { label: t("sizeSelect.default"), value: ComponentSize.DEFAULT },
+    { label: t("sizeSelect.large"), value: ComponentSize.LARGE },
+    { label: t("sizeSelect.small"), value: ComponentSize.SMALL },
   ];
 });
 

src/components/Upload/FileUpload.vue

@@ -50,7 +50,7 @@ import {
   UploadRequestOptions,
 } from "element-plus";
 
-import FileAPI, { FileInfo } from "@/api/file";
+import FileAPI, { FileInfo } from "@/api/file.api";
 
 const props = defineProps({
   /**

src/components/Upload/MultiImageUpload.vue

@@ -40,7 +40,7 @@
 </template>
 <script setup lang="ts">
 import { UploadRawFile, UploadRequestOptions, UploadUserFile } from "element-plus";
-import FileAPI, { FileInfo } from "@/api/file";
+import FileAPI, { FileInfo } from "@/api/file.api";
 
 const props = defineProps({
   /**

src/components/Upload/SingleImageUpload.vue

@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 import { UploadRawFile, UploadRequestOptions } from "element-plus";
-import FileAPI, { FileInfo } from "@/api/file";
+import FileAPI, { FileInfo } from "@/api/file.api";
 
 const props = defineProps({
   /**

src/components/WangEditor/index.vue

@@ -34,7 +34,7 @@ import { Toolbar, Editor } from "@wangeditor-next/editor-for-vue";
 import { IToolbarConfig, IEditorConfig } from "@wangeditor-next/editor";
 
 // 文件上传 API
-import FileAPI from "@/api/file";
+import FileAPI from "@/api/file.api";
 
 // 上传图片回调函数类型
 type InsertFnType = (_url: string, _alt: string, _href: string) => void;