From e4ccc35bba27fe2c17805d42b645e66f760e65fe Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Tue, 12 Mar 2024 11:09:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=9E=9A=E4=B8=BE=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/DeviceEnum.ts                            | 14 ++++++++++++++
 .../components/NavBar/components/NavbarRight.vue   |  6 +++---
 src/layout/index.vue                               |  7 ++++---
 src/store/modules/app.ts                           |  3 ++-
 4 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 src/enums/DeviceEnum.ts

diff --git a/src/enums/DeviceEnum.ts b/src/enums/DeviceEnum.ts
new file mode 100644
index 0000000..709bcb3
--- /dev/null
+++ b/src/enums/DeviceEnum.ts
@@ -0,0 +1,14 @@
+/**
+ * 设备枚举
+ */
+export const enum DeviceEnum {
+  /**
+   * 宽屏设备
+   */
+  DESKTOP = "desktop",
+
+  /**
+   * 窄屏设备
+   */
+  MOBILE = "mobile",
+}
diff --git a/src/layout/components/NavBar/components/NavbarRight.vue b/src/layout/components/NavBar/components/NavbarRight.vue
index 2bd5598..c97d46b 100644
--- a/src/layout/components/NavBar/components/NavbarRight.vue
+++ b/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();
 
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 52dfd7f..7d17ec9 100644
--- a/src/layout/index.vue
+++ b/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();
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 4ca5ba9..8f61666 100644
--- a/src/store/modules/app.ts
+++ b/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);