From 60958accae2adf2e8af32512258e0ca93983d80d Mon Sep 17 00:00:00 2001
From: zhaopan <zhaopanhw@foxmail.com>
Date: Thu, 27 Apr 2023 20:06:23 +0800
Subject: [PATCH 1/6] feat(theme-default): optimizing css variable acquisition
 method

---
 .../src/client/components/Navbar.vue          | 30 ++++++++-----------
 .../src/client/components/NavbarItems.vue     | 30 ++++++++-----------
 ecosystem/theme-default/src/client/shim.d.ts  |  8 +++++
 .../src/client/styles/_variables.module.scss  |  5 ++++
 .../theme-default/src/client/utils/index.ts   |  1 +
 .../src/client/utils/updateDeviceType.ts      | 28 +++++++++++++++++
 6 files changed, 67 insertions(+), 35 deletions(-)
 create mode 100644 ecosystem/theme-default/src/client/styles/_variables.module.scss
 create mode 100644 ecosystem/theme-default/src/client/utils/updateDeviceType.ts

diff --git a/ecosystem/theme-default/src/client/components/Navbar.vue b/ecosystem/theme-default/src/client/components/Navbar.vue
index 8fbfa7f3ab..5b4645aa84 100644
--- a/ecosystem/theme-default/src/client/components/Navbar.vue
+++ b/ecosystem/theme-default/src/client/components/Navbar.vue
@@ -3,8 +3,9 @@ import NavbarBrand from '@theme/NavbarBrand.vue'
 import NavbarItems from '@theme/NavbarItems.vue'
 import ToggleColorModeButton from '@theme/ToggleColorModeButton.vue'
 import ToggleSidebarButton from '@theme/ToggleSidebarButton.vue'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useThemeLocaleData } from '../composables/index.js'
+import { DeviceType, updateDeviceType } from '../utils/index.js'
 
 defineEmits(['toggle-sidebar'])
 
@@ -24,27 +25,20 @@ const linksWrapperStyle = computed(() => {
 })
 
 // avoid overlapping of long title and long navbar links
-onMounted(() => {
-  // TODO: migrate to css var
-  // refer to _variables.scss
-  const MOBILE_DESKTOP_BREAKPOINT = 719
+const handleLinksWrapWidth = (mobileDesktopBreakpoint: number): void => {
   const navbarHorizontalPadding =
     getCssValue(navbar.value, 'paddingLeft') +
     getCssValue(navbar.value, 'paddingRight')
-  const handleLinksWrapWidth = (): void => {
-    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
-      linksWrapperMaxWidth.value = 0
-    } else {
-      linksWrapperMaxWidth.value =
-        navbar.value!.offsetWidth -
-        navbarHorizontalPadding -
-        (navbarBrand.value?.offsetWidth || 0)
-    }
+  if (window.innerWidth < mobileDesktopBreakpoint) {
+    linksWrapperMaxWidth.value = 0
+  } else {
+    linksWrapperMaxWidth.value =
+      navbar.value!.offsetWidth -
+      navbarHorizontalPadding -
+      (navbarBrand.value?.offsetWidth || 0)
   }
-  handleLinksWrapWidth()
-  window.addEventListener('resize', handleLinksWrapWidth, false)
-  window.addEventListener('orientationchange', handleLinksWrapWidth, false)
-})
+}
+updateDeviceType(DeviceType.MOBILE, handleLinksWrapWidth)
 
 function getCssValue(el: HTMLElement | null, property: string): number {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'
diff --git a/ecosystem/theme-default/src/client/components/NavbarItems.vue b/ecosystem/theme-default/src/client/components/NavbarItems.vue
index 9d64ad3dc4..67d27c874e 100644
--- a/ecosystem/theme-default/src/client/components/NavbarItems.vue
+++ b/ecosystem/theme-default/src/client/components/NavbarItems.vue
@@ -3,7 +3,7 @@ import AutoLink from '@theme/AutoLink.vue'
 import NavbarDropdown from '@theme/NavbarDropdown.vue'
 import { useRouteLocale, useSiteLocaleData } from '@vuepress/client'
 import { isLinkHttp, isString } from '@vuepress/shared'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 import { useRouter } from 'vue-router'
 import type {
@@ -12,7 +12,11 @@ import type {
   ResolvedNavbarItem,
 } from '../../shared/index.js'
 import { useNavLink, useThemeLocaleData } from '../composables/index.js'
-import { resolveRepoType } from '../utils/index.js'
+import {
+  DeviceType,
+  resolveRepoType,
+  updateDeviceType,
+} from '../utils/index.js'
 
 /**
  * Get navbar config of select language dropdown
@@ -153,22 +157,14 @@ const navbarLinks = computed(() => [
 ])
 
 // avoid overlapping of long title and long navbar links
-onMounted(() => {
-  // TODO: migrate to css var
-  // refer to _variables.scss
-  const MOBILE_DESKTOP_BREAKPOINT = 719
-
-  const handleMobile = (): void => {
-    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
-      isMobile.value = true
-    } else {
-      isMobile.value = false
-    }
+const handleMobile = (mobileDesktopBreakpoint: number): void => {
+  if (window.innerWidth < mobileDesktopBreakpoint) {
+    isMobile.value = true
+  } else {
+    isMobile.value = false
   }
-  handleMobile()
-  window.addEventListener('resize', handleMobile, false)
-  window.addEventListener('orientationchange', handleMobile, false)
-})
+}
+updateDeviceType(DeviceType.MOBILE, handleMobile)
 </script>
 
 <template>
diff --git a/ecosystem/theme-default/src/client/shim.d.ts b/ecosystem/theme-default/src/client/shim.d.ts
index bf554924f3..84845c8077 100644
--- a/ecosystem/theme-default/src/client/shim.d.ts
+++ b/ecosystem/theme-default/src/client/shim.d.ts
@@ -3,3 +3,11 @@ declare module '*.vue' {
   const comp: ComponentOptions
   export default comp
 }
+
+declare module '*.module.scss' {
+  type Variables = {
+    [className: string]: string
+  }
+  const cssVar: Variables
+  export default cssVar
+}
diff --git a/ecosystem/theme-default/src/client/styles/_variables.module.scss b/ecosystem/theme-default/src/client/styles/_variables.module.scss
new file mode 100644
index 0000000000..d4dd629bb7
--- /dev/null
+++ b/ecosystem/theme-default/src/client/styles/_variables.module.scss
@@ -0,0 +1,5 @@
+@import '_variables';
+
+:export {
+  mobile: $MQMobile;
+}
diff --git a/ecosystem/theme-default/src/client/utils/index.ts b/ecosystem/theme-default/src/client/utils/index.ts
index dde9a7c815..9a72018c72 100644
--- a/ecosystem/theme-default/src/client/utils/index.ts
+++ b/ecosystem/theme-default/src/client/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './isActiveSidebarItem.js'
 export * from './resolveEditLink.js'
 export * from './resolveRepoType.js'
+export * from './updateDeviceType.js'
diff --git a/ecosystem/theme-default/src/client/utils/updateDeviceType.ts b/ecosystem/theme-default/src/client/utils/updateDeviceType.ts
new file mode 100644
index 0000000000..86a1203da0
--- /dev/null
+++ b/ecosystem/theme-default/src/client/utils/updateDeviceType.ts
@@ -0,0 +1,28 @@
+import { onMounted } from 'vue'
+import cssVariables from '../styles/_variables.module.scss'
+
+export enum DeviceType {
+  MOBILE = 'mobile',
+}
+
+const DeviceTypeMap = {
+  [DeviceType.MOBILE]: Number(cssVariables.mobile?.replace('px', '')),
+}
+
+/**
+ * add listener to detect screen though device type
+ */
+export const updateDeviceType = (
+  deviceType: DeviceType,
+  callback: (w: number) => void
+): void => {
+  onMounted(() => {
+    const width = DeviceTypeMap[deviceType]
+    if (!width) return
+
+    callback(width)
+
+    window.addEventListener('resize', () => callback(width), false)
+    window.addEventListener('orientationchange', () => callback(width), false)
+  })
+}

From 810e3cb732090fee209e5f2e3346f081153e770a Mon Sep 17 00:00:00 2001
From: zhaopan <zhaopanhw@foxmail.com>
Date: Fri, 28 Apr 2023 11:41:08 +0800
Subject: [PATCH 2/6] feat(theme-default): optimized naming

---
 .../theme-default/src/client/components/Navbar.vue  |  4 ++--
 .../src/client/components/NavbarItems.vue           |  4 ++--
 ecosystem/theme-default/src/client/utils/index.ts   |  2 +-
 .../{updateDeviceType.ts => updateDeviceStatus.ts}  | 13 ++++++-------
 4 files changed, 11 insertions(+), 12 deletions(-)
 rename ecosystem/theme-default/src/client/utils/{updateDeviceType.ts => updateDeviceStatus.ts} (65%)

diff --git a/ecosystem/theme-default/src/client/components/Navbar.vue b/ecosystem/theme-default/src/client/components/Navbar.vue
index 5b4645aa84..d8c6230067 100644
--- a/ecosystem/theme-default/src/client/components/Navbar.vue
+++ b/ecosystem/theme-default/src/client/components/Navbar.vue
@@ -5,7 +5,7 @@ import ToggleColorModeButton from '@theme/ToggleColorModeButton.vue'
 import ToggleSidebarButton from '@theme/ToggleSidebarButton.vue'
 import { computed, ref } from 'vue'
 import { useThemeLocaleData } from '../composables/index.js'
-import { DeviceType, updateDeviceType } from '../utils/index.js'
+import { DeviceType, updateDeviceStatus } from '../utils/index.js'
 
 defineEmits(['toggle-sidebar'])
 
@@ -38,7 +38,7 @@ const handleLinksWrapWidth = (mobileDesktopBreakpoint: number): void => {
       (navbarBrand.value?.offsetWidth || 0)
   }
 }
-updateDeviceType(DeviceType.MOBILE, handleLinksWrapWidth)
+updateDeviceStatus(DeviceType.MOBILE, handleLinksWrapWidth)
 
 function getCssValue(el: HTMLElement | null, property: string): number {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'
diff --git a/ecosystem/theme-default/src/client/components/NavbarItems.vue b/ecosystem/theme-default/src/client/components/NavbarItems.vue
index 67d27c874e..3c65989981 100644
--- a/ecosystem/theme-default/src/client/components/NavbarItems.vue
+++ b/ecosystem/theme-default/src/client/components/NavbarItems.vue
@@ -15,7 +15,7 @@ import { useNavLink, useThemeLocaleData } from '../composables/index.js'
 import {
   DeviceType,
   resolveRepoType,
-  updateDeviceType,
+  updateDeviceStatus,
 } from '../utils/index.js'
 
 /**
@@ -164,7 +164,7 @@ const handleMobile = (mobileDesktopBreakpoint: number): void => {
     isMobile.value = false
   }
 }
-updateDeviceType(DeviceType.MOBILE, handleMobile)
+updateDeviceStatus(DeviceType.MOBILE, handleMobile)
 </script>
 
 <template>
diff --git a/ecosystem/theme-default/src/client/utils/index.ts b/ecosystem/theme-default/src/client/utils/index.ts
index 9a72018c72..96c4834555 100644
--- a/ecosystem/theme-default/src/client/utils/index.ts
+++ b/ecosystem/theme-default/src/client/utils/index.ts
@@ -1,4 +1,4 @@
 export * from './isActiveSidebarItem.js'
 export * from './resolveEditLink.js'
 export * from './resolveRepoType.js'
-export * from './updateDeviceType.js'
+export * from './updateDeviceStatus.js'
diff --git a/ecosystem/theme-default/src/client/utils/updateDeviceType.ts b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
similarity index 65%
rename from ecosystem/theme-default/src/client/utils/updateDeviceType.ts
rename to ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
index 86a1203da0..28d8e73025 100644
--- a/ecosystem/theme-default/src/client/utils/updateDeviceType.ts
+++ b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
@@ -1,27 +1,26 @@
 import { onMounted } from 'vue'
-import cssVariables from '../styles/_variables.module.scss'
+import cssVars from '../styles/_variables.module.scss'
 
 export enum DeviceType {
   MOBILE = 'mobile',
 }
 
 const DeviceTypeMap = {
-  [DeviceType.MOBILE]: Number(cssVariables.mobile?.replace('px', '')),
+  [DeviceType.MOBILE]: Number(cssVars.mobile?.replace('px', '')),
 }
 
 /**
  * add listener to detect screen though device type
  */
-export const updateDeviceType = (
+export const updateDeviceStatus = (
   deviceType: DeviceType,
   callback: (w: number) => void
 ): void => {
-  onMounted(() => {
-    const width = DeviceTypeMap[deviceType]
-    if (!width) return
+  const width = DeviceTypeMap[deviceType]
+  if (!width) return
 
+  onMounted(() => {
     callback(width)
-
     window.addEventListener('resize', () => callback(width), false)
     window.addEventListener('orientationchange', () => callback(width), false)
   })

From 55cabf37223052c7bd8c6623e121322d9922f10e Mon Sep 17 00:00:00 2001
From: zhaopan <zhaopanhw@foxmail.com>
Date: Fri, 28 Apr 2023 13:34:29 +0800
Subject: [PATCH 3/6] feat(theme-default): optimize naming

---
 ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
index 28d8e73025..f9ca4006ba 100644
--- a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
+++ b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
@@ -14,7 +14,7 @@ const DeviceTypeMap = {
  */
 export const updateDeviceStatus = (
   deviceType: DeviceType,
-  callback: (w: number) => void
+  callback: (width: number) => void
 ): void => {
   const width = DeviceTypeMap[deviceType]
   if (!width) return

From acaee34831a782243b4a899f60c7fbcf22eb2199 Mon Sep 17 00:00:00 2001
From: zhaopan <zhaopanhw@foxmail.com>
Date: Sat, 29 Apr 2023 18:46:39 +0800
Subject: [PATCH 4/6] feat: fix cssModule problem in webpack environment

---
 ecosystem/theme-default/src/client/shim.d.ts                   | 2 +-
 ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ecosystem/theme-default/src/client/shim.d.ts b/ecosystem/theme-default/src/client/shim.d.ts
index 84845c8077..b25037b653 100644
--- a/ecosystem/theme-default/src/client/shim.d.ts
+++ b/ecosystem/theme-default/src/client/shim.d.ts
@@ -4,7 +4,7 @@ declare module '*.vue' {
   export default comp
 }
 
-declare module '*.module.scss' {
+declare module '*.module.scss?module' {
   type Variables = {
     [className: string]: string
   }
diff --git a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
index f9ca4006ba..6e9211e616 100644
--- a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
+++ b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
@@ -1,5 +1,5 @@
 import { onMounted } from 'vue'
-import cssVars from '../styles/_variables.module.scss'
+import cssVars from '../styles/_variables.module.scss?module'
 
 export enum DeviceType {
   MOBILE = 'mobile',

From 6884f5bc043730956b1db42a2c3380804e16a1e5 Mon Sep 17 00:00:00 2001
From: zhaopan <zhaopanhw@foxmail.com>
Date: Mon, 8 May 2023 23:10:13 +0800
Subject: [PATCH 5/6] feat: optimize code

---
 ecosystem/theme-default/src/client/shim.d.ts               | 7 ++-----
 .../theme-default/src/client/utils/updateDeviceStatus.ts   | 7 +++++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ecosystem/theme-default/src/client/shim.d.ts b/ecosystem/theme-default/src/client/shim.d.ts
index b25037b653..0c543aa80c 100644
--- a/ecosystem/theme-default/src/client/shim.d.ts
+++ b/ecosystem/theme-default/src/client/shim.d.ts
@@ -5,9 +5,6 @@ declare module '*.vue' {
 }
 
 declare module '*.module.scss?module' {
-  type Variables = {
-    [className: string]: string
-  }
-  const cssVar: Variables
-  export default cssVar
+  const cssVars: Record<string, string>
+  export default cssVars
 }
diff --git a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
index 6e9211e616..62afc2e562 100644
--- a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
+++ b/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
@@ -6,7 +6,7 @@ export enum DeviceType {
 }
 
 const DeviceTypeMap = {
-  [DeviceType.MOBILE]: Number(cssVars.mobile?.replace('px', '')),
+  [DeviceType.MOBILE]: Number.parseInt(cssVars.mobile?.replace('px', ''), 10),
 }
 
 /**
@@ -17,7 +17,10 @@ export const updateDeviceStatus = (
   callback: (width: number) => void
 ): void => {
   const width = DeviceTypeMap[deviceType]
-  if (!width) return
+  if (!Number.isInteger(width)) {
+    if (__VUEPRESS_DEV__) throw new Error('device width must be a number type')
+    return
+  }
 
   onMounted(() => {
     callback(width)

From 44b1dd5b472b56ee114398ea3db2e11dd012163d Mon Sep 17 00:00:00 2001
From: zhaopan <zhaopanhw@foxmail.com>
Date: Tue, 9 May 2023 14:57:08 +0800
Subject: [PATCH 6/6] feat: optimize code structure

---
 .../src/client/components/Navbar.vue          | 37 +++++++++++--------
 .../src/client/components/NavbarItems.vue     | 27 ++++++++------
 .../src/client/composables/index.ts           |  1 +
 .../useUpdateDeviceStatus.ts}                 |  4 +-
 .../theme-default/src/client/utils/index.ts   |  1 -
 5 files changed, 39 insertions(+), 31 deletions(-)
 rename ecosystem/theme-default/src/client/{utils/updateDeviceStatus.ts => composables/useUpdateDeviceStatus.ts} (93%)

diff --git a/ecosystem/theme-default/src/client/components/Navbar.vue b/ecosystem/theme-default/src/client/components/Navbar.vue
index d8c6230067..d08800d7ea 100644
--- a/ecosystem/theme-default/src/client/components/Navbar.vue
+++ b/ecosystem/theme-default/src/client/components/Navbar.vue
@@ -4,8 +4,11 @@ import NavbarItems from '@theme/NavbarItems.vue'
 import ToggleColorModeButton from '@theme/ToggleColorModeButton.vue'
 import ToggleSidebarButton from '@theme/ToggleSidebarButton.vue'
 import { computed, ref } from 'vue'
-import { useThemeLocaleData } from '../composables/index.js'
-import { DeviceType, updateDeviceStatus } from '../utils/index.js'
+import {
+  DeviceType,
+  useThemeLocaleData,
+  useUpdateDeviceStatus,
+} from '../composables/index.js'
 
 defineEmits(['toggle-sidebar'])
 
@@ -24,21 +27,23 @@ const linksWrapperStyle = computed(() => {
   }
 })
 
-// avoid overlapping of long title and long navbar links
-const handleLinksWrapWidth = (mobileDesktopBreakpoint: number): void => {
-  const navbarHorizontalPadding =
-    getCssValue(navbar.value, 'paddingLeft') +
-    getCssValue(navbar.value, 'paddingRight')
-  if (window.innerWidth < mobileDesktopBreakpoint) {
-    linksWrapperMaxWidth.value = 0
-  } else {
-    linksWrapperMaxWidth.value =
-      navbar.value!.offsetWidth -
-      navbarHorizontalPadding -
-      (navbarBrand.value?.offsetWidth || 0)
+useUpdateDeviceStatus(
+  DeviceType.MOBILE,
+  (mobileDesktopBreakpoint: number): void => {
+    // avoid overlapping of long title and long navbar links
+    const navbarHorizontalPadding =
+      getCssValue(navbar.value, 'paddingLeft') +
+      getCssValue(navbar.value, 'paddingRight')
+    if (window.innerWidth < mobileDesktopBreakpoint) {
+      linksWrapperMaxWidth.value = 0
+    } else {
+      linksWrapperMaxWidth.value =
+        navbar.value!.offsetWidth -
+        navbarHorizontalPadding -
+        (navbarBrand.value?.offsetWidth || 0)
+    }
   }
-}
-updateDeviceStatus(DeviceType.MOBILE, handleLinksWrapWidth)
+)
 
 function getCssValue(el: HTMLElement | null, property: string): number {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'
diff --git a/ecosystem/theme-default/src/client/components/NavbarItems.vue b/ecosystem/theme-default/src/client/components/NavbarItems.vue
index 3c65989981..4d88c69199 100644
--- a/ecosystem/theme-default/src/client/components/NavbarItems.vue
+++ b/ecosystem/theme-default/src/client/components/NavbarItems.vue
@@ -11,12 +11,13 @@ import type {
   NavbarItem,
   ResolvedNavbarItem,
 } from '../../shared/index.js'
-import { useNavLink, useThemeLocaleData } from '../composables/index.js'
 import {
   DeviceType,
-  resolveRepoType,
-  updateDeviceStatus,
-} from '../utils/index.js'
+  useNavLink,
+  useThemeLocaleData,
+  useUpdateDeviceStatus,
+} from '../composables/index.js'
+import { resolveRepoType } from '../utils/index.js'
 
 /**
  * Get navbar config of select language dropdown
@@ -156,15 +157,17 @@ const navbarLinks = computed(() => [
   ...navbarRepo.value,
 ])
 
-// avoid overlapping of long title and long navbar links
-const handleMobile = (mobileDesktopBreakpoint: number): void => {
-  if (window.innerWidth < mobileDesktopBreakpoint) {
-    isMobile.value = true
-  } else {
-    isMobile.value = false
+useUpdateDeviceStatus(
+  DeviceType.MOBILE,
+  (mobileDesktopBreakpoint: number): void => {
+    // avoid overlapping of long title and long navbar links
+    if (window.innerWidth < mobileDesktopBreakpoint) {
+      isMobile.value = true
+    } else {
+      isMobile.value = false
+    }
   }
-}
-updateDeviceStatus(DeviceType.MOBILE, handleMobile)
+)
 </script>
 
 <template>
diff --git a/ecosystem/theme-default/src/client/composables/index.ts b/ecosystem/theme-default/src/client/composables/index.ts
index 7a119b12bd..568299036a 100644
--- a/ecosystem/theme-default/src/client/composables/index.ts
+++ b/ecosystem/theme-default/src/client/composables/index.ts
@@ -4,3 +4,4 @@ export * from './useResolveRouteWithRedirect.js'
 export * from './useScrollPromise.js'
 export * from './useSidebarItems.js'
 export * from './useThemeData.js'
+export * from './useUpdateDeviceStatus.js'
diff --git a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts b/ecosystem/theme-default/src/client/composables/useUpdateDeviceStatus.ts
similarity index 93%
rename from ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
rename to ecosystem/theme-default/src/client/composables/useUpdateDeviceStatus.ts
index 62afc2e562..12fbaff21e 100644
--- a/ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts
+++ b/ecosystem/theme-default/src/client/composables/useUpdateDeviceStatus.ts
@@ -12,13 +12,13 @@ const DeviceTypeMap = {
 /**
  * add listener to detect screen though device type
  */
-export const updateDeviceStatus = (
+export const useUpdateDeviceStatus = (
   deviceType: DeviceType,
   callback: (width: number) => void
 ): void => {
   const width = DeviceTypeMap[deviceType]
   if (!Number.isInteger(width)) {
-    if (__VUEPRESS_DEV__) throw new Error('device width must be a number type')
+    if (__VUEPRESS_DEV__) throw new Error('device width must be a integer')
     return
   }
 
diff --git a/ecosystem/theme-default/src/client/utils/index.ts b/ecosystem/theme-default/src/client/utils/index.ts
index 96c4834555..dde9a7c815 100644
--- a/ecosystem/theme-default/src/client/utils/index.ts
+++ b/ecosystem/theme-default/src/client/utils/index.ts
@@ -1,4 +1,3 @@
 export * from './isActiveSidebarItem.js'
 export * from './resolveEditLink.js'
 export * from './resolveRepoType.js'
-export * from './updateDeviceStatus.js'