feat: add useDevice

src/components/SearchMenu/SearchFooter.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { computed } from "vue"
+import { useDevice } from "@/hooks/useDevice"
-import { useAppStore } from "@/store/modules/app"
-import { DeviceEnum } from "@/constants/app-key"
 
 interface Props {
   total: number
@@ -9,8 +7,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const appStore = useAppStore()
+const { isMobile } = useDevice()
-const isMobile = computed(() => appStore.device === DeviceEnum.Mobile)
 </script>
 
 <template>

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))
 

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 }
+}

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
   }
 })
 

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，用于控制布局的类名 */

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>
 

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 settingsStore = useSettingsStore()
-const { sidebar, device } = storeToRefs(appStore)
 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">

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")

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))

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 { isMobile } = useDevice()
-const appStore = useAppStore()
 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'" />
     <!-- 混合模式 -->