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

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 device = computed(() => appStore.device);
+const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 
 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();