From 0a4d896965f06dda5f21283b368f42b6ea72860f Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Tue, 6 Feb 2024 13:39:56 +0800
Subject: [PATCH] feat: add useDevice

---
 src/components/SearchMenu/SearchFooter.vue        |  7 ++-----
 src/components/SearchMenu/SearchModal.vue         |  7 +++----
 src/hooks/useDevice.ts                            | 11 +++++++++++
 src/layouts/LeftMode.vue                          |  6 +++---
 src/layouts/LeftTopMode.vue                       |  1 -
 src/layouts/TopMode.vue                           |  1 -
 src/layouts/components/NavigationBar/index.vue    | 15 +++++++++------
 .../components/Settings/SelectLayoutMode.vue      |  1 -
 src/layouts/components/Sidebar/index.vue          |  8 +++-----
 src/layouts/index.vue                             | 10 ++++------
 10 files changed, 35 insertions(+), 32 deletions(-)
 create mode 100644 src/hooks/useDevice.ts

diff --git a/src/components/SearchMenu/SearchFooter.vue b/src/components/SearchMenu/SearchFooter.vue
index b30cfd58..3326057c 100644
--- a/src/components/SearchMenu/SearchFooter.vue
+++ b/src/components/SearchMenu/SearchFooter.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { computed } from "vue"
-import { useAppStore } from "@/store/modules/app"
-import { DeviceEnum } from "@/constants/app-key"
+import { useDevice } from "@/hooks/useDevice"
 
 interface Props {
   total: number
@@ -9,8 +7,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const appStore = useAppStore()
-const isMobile = computed(() => appStore.device === DeviceEnum.Mobile)
+const { isMobile } = useDevice()
 </script>
 
 <template>
diff --git a/src/components/SearchMenu/SearchModal.vue b/src/components/SearchMenu/SearchModal.vue
index e185e388..c877b5a7 100644
--- a/src/components/SearchMenu/SearchModal.vue
+++ b/src/components/SearchMenu/SearchModal.vue
@@ -1,20 +1,19 @@
 <script lang="ts" setup>
 import { computed, ref, shallowRef } from "vue"
 import { type RouteRecordName, type RouteRecordRaw, useRouter } from "vue-router"
-import { useAppStore } from "@/store/modules/app"
 import { usePermissionStore } from "@/store/modules/permission"
 import SearchResult from "./SearchResult.vue"
 import SearchFooter from "./SearchFooter.vue"
 import { ElMessage, ElScrollbar } from "element-plus"
 import { cloneDeep, debounce } from "lodash-es"
-import { DeviceEnum } from "@/constants/app-key"
+import { useDevice } from "@/hooks/useDevice"
 import { isExternal } from "@/utils/validate"
 
 /** 控制 modal 显隐 */
 const modelValue = defineModel<boolean>({ required: true })
 
-const appStore = useAppStore()
 const router = useRouter()
+const { isMobile } = useDevice()
 
 const inputRef = ref<HTMLInputElement | null>(null)
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
@@ -27,7 +26,7 @@ const activeRouteName = ref<RouteRecordName | undefined>(undefined)
 const isPressUpOrDown = ref<boolean>(false)
 
 /** 控制搜索对话框宽度 */
-const modalWidth = computed(() => (appStore.device === DeviceEnum.Mobile ? "80vw" : "40vw"))
+const modalWidth = computed(() => (isMobile.value ? "80vw" : "40vw"))
 /** 树形菜单 */
 const menusData = computed(() => cloneDeep(usePermissionStore().routes))
 
diff --git a/src/hooks/useDevice.ts b/src/hooks/useDevice.ts
new file mode 100644
index 00000000..e50e7ce0
--- /dev/null
+++ b/src/hooks/useDevice.ts
@@ -0,0 +1,11 @@
+import { computed } from "vue"
+import { useAppStore } from "@/store/modules/app"
+import { DeviceEnum } from "@/constants/app-key"
+
+const appStore = useAppStore()
+const isMobile = computed(() => appStore.device === DeviceEnum.Mobile)
+const isDesktop = computed(() => appStore.device === DeviceEnum.Desktop)
+
+export function useDevice() {
+  return { isMobile, isDesktop }
+}
diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
index dfeee09f..c3d4c75b 100644
--- a/src/layouts/LeftMode.vue
+++ b/src/layouts/LeftMode.vue
@@ -4,11 +4,11 @@ import { storeToRefs } from "pinia"
 import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import { AppMain, NavigationBar, Sidebar, TagsView } from "./components"
-import { DeviceEnum } from "@/constants/app-key"
+import { useDevice } from "@/hooks/useDevice"
 
+const { isMobile } = useDevice()
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
-
 const { showTagsView, fixedHeader } = storeToRefs(settingsStore)
 
 /** 定义计算属性 layoutClasses，用于控制布局的类名 */
@@ -17,7 +17,7 @@ const layoutClasses = computed(() => {
     hideSidebar: !appStore.sidebar.opened,
     openSidebar: appStore.sidebar.opened,
     withoutAnimation: appStore.sidebar.withoutAnimation,
-    mobile: appStore.device === DeviceEnum.Mobile
+    mobile: isMobile.value
   }
 })
 
diff --git a/src/layouts/LeftTopMode.vue b/src/layouts/LeftTopMode.vue
index 11024165..6be53dd1 100644
--- a/src/layouts/LeftTopMode.vue
+++ b/src/layouts/LeftTopMode.vue
@@ -7,7 +7,6 @@ import { AppMain, NavigationBar, Sidebar, TagsView, Logo } from "./components"
 
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
-
 const { showTagsView, showLogo } = storeToRefs(settingsStore)
 
 /** 定义计算属性 layoutClasses，用于控制布局的类名 */
diff --git a/src/layouts/TopMode.vue b/src/layouts/TopMode.vue
index 447e5769..e46335d5 100644
--- a/src/layouts/TopMode.vue
+++ b/src/layouts/TopMode.vue
@@ -4,7 +4,6 @@ import { useSettingsStore } from "@/store/modules/settings"
 import { AppMain, NavigationBar, TagsView, Logo } from "./components"
 
 const settingsStore = useSettingsStore()
-
 const { showTagsView, showLogo } = storeToRefs(settingsStore)
 </script>
 
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
index f38bd9e2..77c16103 100644
--- a/src/layouts/components/NavigationBar/index.vue
+++ b/src/layouts/components/NavigationBar/index.vue
@@ -13,18 +13,16 @@ import Notify from "@/components/Notify/index.vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import Screenfull from "@/components/Screenfull/index.vue"
 import SearchMenu from "@/components/SearchMenu/index.vue"
-import { DeviceEnum } from "@/constants/app-key"
+import { useDevice } from "@/hooks/useDevice"
 
+const { isMobile } = useDevice()
 const router = useRouter()
 const appStore = useAppStore()
-const settingsStore = useSettingsStore()
 const userStore = useUserStore()
-
-const { sidebar, device } = storeToRefs(appStore)
+const settingsStore = useSettingsStore()
 const { layoutMode, showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
 
 const isTop = computed(() => layoutMode.value === "top")
-const isMobile = computed(() => device.value === DeviceEnum.Mobile)
 
 /** 切换侧边栏 */
 const toggleSidebar = () => {
@@ -40,7 +38,12 @@ const logout = () => {
 
 <template>
   <div class="navigation-bar">
-    <Hamburger v-if="!isTop || isMobile" :is-active="sidebar.opened" class="hamburger" @toggle-click="toggleSidebar" />
+    <Hamburger
+      v-if="!isTop || isMobile"
+      :is-active="appStore.sidebar.opened"
+      class="hamburger"
+      @toggle-click="toggleSidebar"
+    />
     <Breadcrumb v-if="!isTop || isMobile" class="breadcrumb" />
     <Sidebar v-if="isTop && !isMobile" class="sidebar" />
     <div class="right-menu">
diff --git a/src/layouts/components/Settings/SelectLayoutMode.vue b/src/layouts/components/Settings/SelectLayoutMode.vue
index eccc6ad1..b8fc10b4 100644
--- a/src/layouts/components/Settings/SelectLayoutMode.vue
+++ b/src/layouts/components/Settings/SelectLayoutMode.vue
@@ -4,7 +4,6 @@ import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
 
 const settingsStore = useSettingsStore()
-
 const { layoutMode } = storeToRefs(settingsStore)
 
 const isLeft = computed(() => layoutMode.value === "left")
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index 8f3f1ac5..bcba44cf 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -7,19 +7,18 @@ import { usePermissionStore } from "@/store/modules/permission"
 import { useSettingsStore } from "@/store/modules/settings"
 import SidebarItem from "./SidebarItem.vue"
 import Logo from "../Logo/index.vue"
+import { useDevice } from "@/hooks/useDevice"
 import { getCssVariableValue } from "@/utils"
-import { DeviceEnum } from "@/constants/app-key"
 
 const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
 const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
 const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
 
+const { isMobile } = useDevice()
 const route = useRoute()
 const appStore = useAppStore()
 const permissionStore = usePermissionStore()
 const settingsStore = useSettingsStore()
-
-const { sidebar, device } = storeToRefs(appStore)
 const { layoutMode, showLogo } = storeToRefs(settingsStore)
 
 const activeMenu = computed(() => {
@@ -30,10 +29,9 @@ const activeMenu = computed(() => {
   return activeMenu ? activeMenu : path
 })
 const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
-const isCollapse = computed(() => !sidebar.value.opened)
+const isCollapse = computed(() => !appStore.sidebar.opened)
 const isLeft = computed(() => layoutMode.value === "left")
 const isTop = computed(() => layoutMode.value === "top")
-const isMobile = computed(() => device.value === DeviceEnum.Mobile)
 const isLogo = computed(() => isLeft.value && showLogo.value)
 const backgroundColor = computed(() => (isLeft.value ? v3SidebarMenuBgColor : undefined))
 const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 1f5dcd0b..c31fca65 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,24 +1,22 @@
 <script lang="ts" setup>
 import { computed, watchEffect } from "vue"
 import { storeToRefs } from "pinia"
-import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import useResize from "./hooks/useResize"
 import { useWatermark } from "@/hooks/useWatermark"
+import { useDevice } from "@/hooks/useDevice"
 import LeftMode from "./LeftMode.vue"
 import TopMode from "./TopMode.vue"
 import LeftTopMode from "./LeftTopMode.vue"
 import { Settings, RightPanel } from "./components"
-import { DeviceEnum } from "@/constants/app-key"
 import { getCssVariableValue, setCssVariableValue } from "@/utils"
 
 /** Layout 布局响应式 */
 useResize()
-const { setWatermark, clearWatermark } = useWatermark()
 
-const appStore = useAppStore()
+const { setWatermark, clearWatermark } = useWatermark()
+const { isMobile } = useDevice()
 const settingsStore = useSettingsStore()
-
 const { showSettings, layoutMode, showTagsView, showWatermark, showGreyMode, showColorWeakness } =
   storeToRefs(settingsStore)
 
@@ -48,7 +46,7 @@ watchEffect(() => {
 <template>
   <div :class="classes">
     <!-- 左侧模式 -->
-    <LeftMode v-if="layoutMode === 'left' || appStore.device === DeviceEnum.Mobile" />
+    <LeftMode v-if="layoutMode === 'left' || isMobile" />
     <!-- 顶部模式 -->
     <TopMode v-else-if="layoutMode === 'top'" />
     <!-- 混合模式 -->