Merge pull request #57 from cshaptx4869/patch-28

refactor: ♻️ 增加设备枚举类型

src/enums/DeviceEnum.ts

@@ -0,0 +1,14 @@
+/**
+ * 设备枚举
+ */
+export const enum DeviceEnum {
+  /**
+   * 宽屏设备
+   */
+  DESKTOP = "desktop",
+
+  /**
+   * 窄屏设备
+   */
+  MOBILE = "mobile",
+}

src/layout/components/NavBar/components/NavbarRight.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <template v-if="device !== 'mobile'">
+    <template v-if="!isMobile">
       <!--全屏 -->
       <div class="setting-item" @click="toggle">
         <svg-icon
@@ -64,6 +64,7 @@ import {
   useSettingsStore,
 } from "@/store";
 import defaultSettings from "@/settings";
+import { DeviceEnum } from "@/enums/DeviceEnum";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
@@ -73,8 +74,7 @@ const settingStore = useSettingsStore();
 const route = useRoute();
 const router = useRouter();
 
-// 设备类型：desktop-宽屏设备 || mobile-窄屏设备
+const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
-const device = computed(() => appStore.device);
 
 const { isFullscreen, toggle } = useFullscreen();
 

src/layout/index.vue

@@ -46,6 +46,7 @@
 <script setup lang="ts">
 import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
 import defaultSettings from "@/settings";
+import { DeviceEnum } from "@/enums/DeviceEnum";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -71,7 +72,7 @@ watch(
 const classObj = computed(() => ({
   hideSidebar: !appStore.sidebar.opened,
   openSidebar: appStore.sidebar.opened,
-  mobile: appStore.device === "mobile",
+  mobile: appStore.device === DeviceEnum.MOBILE,
   "layout-left": layout.value === "left",
   "layout-top": layout.value === "top",
   "layout-mix": layout.value === "mix",
@@ -82,10 +83,10 @@ const WIDTH = 992; // 响应式布局容器固定宽度  大屏（>=1200px）
 
 watchEffect(() => {
   if (width.value < WIDTH) {
-    appStore.toggleDevice("mobile");
+    appStore.toggleDevice(DeviceEnum.MOBILE);
     appStore.closeSideBar();
   } else {
-    appStore.toggleDevice("desktop");
+    appStore.toggleDevice(DeviceEnum.DESKTOP);
 
     if (width.value >= 1200) {
       appStore.openSideBar();

src/store/modules/app.ts

@@ -4,11 +4,12 @@ import defaultSettings from "@/settings";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import en from "element-plus/es/locale/lang/en";
 import { store } from "@/store";
+import { DeviceEnum } from "@/enums/DeviceEnum";
 
 // setup
 export const useAppStore = defineStore("app", () => {
   // state
-  const device = useStorage("device", "desktop");
+  const device = useStorage("device", DeviceEnum.DESKTOP);
   const size = useStorage<any>("size", defaultSettings.size);
   const language = useStorage("language", defaultSettings.language);