refactor: ♻️ 增加语言和布局大小枚举类型

Author: cshaptx4869

src/App.vue

@@ -18,14 +18,13 @@
 import { useAppStore, useSettingsStore } from "@/store";
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
+import { SizeEnum } from "@/enums/SizeEnum";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 
 const locale = computed(() => appStore.locale);
-const size = computed(
-  () => appStore.size as "default" | "small" | "large" | undefined
-);
+const size = computed(() => appStore.size as SizeEnum);
 const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);
 
 // 明亮/暗黑主题水印字体颜色适配

src/components/LangSelect/index.vue

@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import { useAppStore } from "@/store/modules/app";
+import { LanguageEnum } from "@/enums/LanguageEnum";
 
 defineProps({
   size: {
@@ -30,8 +31,8 @@ defineProps({
 });
 
 const langOptions = [
-  { label: "中文", value: "zh-cn" },
-  { label: "English", value: "en" },
+  { label: "中文", value: LanguageEnum.ZH_CN },
+  { label: "English", value: LanguageEnum.EN },
 ];
 
 const appStore = useAppStore();

src/components/SizeSelect/index.vue

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

src/enums/LanguageEnum.ts

@@ -0,0 +1,14 @@
+/**
+ * 语言枚举
+ */
+export const enum LanguageEnum {
+  /**
+   * 中文
+   */
+  ZH_CN = "zh-cn",
+
+  /**
+   * 英文
+   */
+  EN = "en",
+}

src/enums/SizeEnum.ts

@@ -0,0 +1,19 @@
+/**
+ * 布局大小枚举
+ */
+export const enum SizeEnum {
+  /**
+   * 默认
+   */
+  DEFAULT = "default",
+
+  /**
+   * 大型
+   */
+  LARGE = "large",
+
+  /**
+   * 小型
+   */
+  SMALL = "small",
+}

src/settings.ts

@@ -1,3 +1,8 @@
+import { SizeEnum } from "./enums/SizeEnum";
+import { LayoutEnum } from "./enums/LayoutEnum";
+import { ThemeEnum } from "./enums/ThemeEnum";
+import { LanguageEnum } from "./enums/LanguageEnum";
+
 const { pkg } = __APP_INFO__;
 
 const defaultSettings: AppSettings = {
@@ -7,10 +12,10 @@ const defaultSettings: AppSettings = {
   tagsView: true,
   fixedHeader: true,
   sidebarLogo: true,
-  layout: "left",
-  theme: "light",
-  size: "default",
-  language: "zh-cn",
+  layout: LayoutEnum.LEFT,
+  theme: ThemeEnum.LIGHT,
+  size: SizeEnum.DEFAULT,
+  language: LanguageEnum.ZH_CN,
   themeColor: "#409EFF",
   watermarkEnabled: false,
   watermarkContent: pkg.name,