From 27a2591904d81c55a9e71fb26e4d3e2c30b0811e Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Fri, 8 Aug 2025 18:12:40 +0800
Subject: [PATCH] refactor: per-request mobile detection

---
 frontend_nuxt/components/Dropdown.vue         |  3 +-
 frontend_nuxt/components/HeaderComponent.vue  |  4 +-
 .../components/NotificationContainer.vue      |  3 +-
 frontend_nuxt/components/SearchDropdown.vue   |  3 +-
 frontend_nuxt/pages/index.vue                 |  3 +-
 frontend_nuxt/pages/posts/[id]/index.vue      |  3 +-
 frontend_nuxt/utils/screen.js                 | 69 ++++++++++---------
 7 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/frontend_nuxt/components/Dropdown.vue b/frontend_nuxt/components/Dropdown.vue
index 61d2040ef..8d26805ff 100644
--- a/frontend_nuxt/components/Dropdown.vue
+++ b/frontend_nuxt/components/Dropdown.vue
@@ -147,7 +147,7 @@
 
 <script>
 import { ref, computed, watch, onMounted } from "vue"
-import { isMobile } from "~/utils/screen"
+import { useIsMobile } from "~/utils/screen"
 
 
 export default {
@@ -176,6 +176,7 @@ export default {
     const loaded = ref(false)
     const loading = ref(false)
     const wrapper = ref(null)
+    const isMobile = useIsMobile()
 
     const toggle = () => {
       open.value = !open.value
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 3127929a6..575cce73e 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -50,7 +50,7 @@ import { watch, nextTick } from 'vue'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
-import { isMobile } from '~/utils/screen'
+import { useIsMobile } from '~/utils/screen'
 import { ClientOnly } from '#components'
 
 export default {
@@ -71,7 +71,7 @@ export default {
   },
   setup() {
     const isLogin = computed(() => authState.loggedIn)
-    const isMobile = computed(() => isMobile.value)
+    const isMobile = useIsMobile()
     const unreadCount = computed(() => notificationState.unreadCount)
     const router = useRouter()
 
diff --git a/frontend_nuxt/components/NotificationContainer.vue b/frontend_nuxt/components/NotificationContainer.vue
index 2bb645986..d9f25af4e 100644
--- a/frontend_nuxt/components/NotificationContainer.vue
+++ b/frontend_nuxt/components/NotificationContainer.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { isMobile } from '../utils/screen'
+import { useIsMobile } from '../utils/screen'
 export default {
   name: 'NotificationContainer',
   props: {
@@ -21,6 +21,7 @@ export default {
     markRead: { type: Function, required: true }
   },
   setup() {
+    const isMobile = useIsMobile()
     return {
       isMobile
     }
diff --git a/frontend_nuxt/components/SearchDropdown.vue b/frontend_nuxt/components/SearchDropdown.vue
index 362401507..5defe97af 100644
--- a/frontend_nuxt/components/SearchDropdown.vue
+++ b/frontend_nuxt/components/SearchDropdown.vue
@@ -24,7 +24,7 @@
 
 <script>
 import { ref, watch } from 'vue'
-import { isMobile } from '~/utils/screen'
+import { useIsMobile } from '~/utils/screen'
 import { useRouter } from 'vue-router'
 import Dropdown from '~/components/Dropdown.vue'
 import { API_BASE_URL } from '~/main'
@@ -40,6 +40,7 @@ export default {
     const selected = ref(null)
     const results = ref([])
     const dropdown = ref(null)
+    const isMobile = useIsMobile()
 
     const toggle = () => {
       dropdown.value.toggle()
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index 86a0c1052..ad8700260 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -120,7 +120,7 @@ import TagSelect from '~/components/TagSelect.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
-import { isMobile } from '~/utils/screen'
+import { useIsMobile } from '~/utils/screen'
 
 export default {
   name: 'HomePageView',
@@ -166,6 +166,7 @@ export default {
     const pageSize = 10
     const allLoaded = useState('index-allLoaded', () => false)
     const initialized = useState('index-initialized', () => false)
+    const isMobile = useIsMobile()
 
     const loadOptions = async () => {
       if (selectedCategory.value && !isNaN(selectedCategory.value)) {
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 93d2db5b7..78803c38c 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -120,7 +120,7 @@ import { API_BASE_URL, toast } from '../../../main'
 import { getToken, authState } from '../../../utils/auth'
 import TimeManager from '../../../utils/time'
 import { useRouter } from 'vue-router'
-import { isMobile } from '../../../utils/screen'
+import { useIsMobile } from '../../../utils/screen'
 import Dropdown from '../../../components/Dropdown.vue'
 
 export default {
@@ -149,6 +149,7 @@ export default {
     const subscribed = ref(false)
     const commentSort = ref('NEWEST')
     const isFetchingComments = ref(false)
+    const isMobile = useIsMobile()
 
     // record default metadata from the main document (client only)
     const defaultTitle = process.client ? document.title : ''
diff --git a/frontend_nuxt/utils/screen.js b/frontend_nuxt/utils/screen.js
index 6b792105f..f74afd03e 100644
--- a/frontend_nuxt/utils/screen.js
+++ b/frontend_nuxt/utils/screen.js
@@ -1,45 +1,46 @@
-import { ref, computed } from 'vue'
+import { ref, computed, onUnmounted } from 'vue'
 import { useRequestHeaders } from 'nuxt/app'
 
-const width = ref(0)
-const isClient = ref(false)
+export const useIsMobile = () => {
+  const width = ref(0)
+  const isClient = ref(false)
 
-// 检测移动设备的用户代理字符串
-const isMobileUserAgent = () => {
-  let userAgent = ''
+  const isMobileUserAgent = () => {
+    let userAgent = ''
 
-  if (typeof navigator !== 'undefined') {
-    userAgent = navigator.userAgent.toLowerCase()
-  } else {
-    // 服务端：从请求头获取用户代理字符串
-    const headers = useRequestHeaders(['user-agent'])
-    userAgent = (headers['user-agent'] || '').toLowerCase()
+    if (typeof navigator !== 'undefined') {
+      userAgent = navigator.userAgent.toLowerCase()
+    } else {
+      const headers = useRequestHeaders(['user-agent'])
+      userAgent = (headers['user-agent'] || '').toLowerCase()
+    }
+
+    const mobileKeywords = [
+      'android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone',
+      'mobile', 'tablet', 'opera mini', 'iemobile'
+    ]
+
+    return mobileKeywords.some(keyword => userAgent.includes(keyword))
   }
 
-  const mobileKeywords = [
-    'android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone',
-    'mobile', 'tablet', 'opera mini', 'iemobile'
-  ]
+  if (typeof window !== 'undefined') {
+    isClient.value = true
+    const updateWidth = () => {
+      width.value = window.innerWidth
+    }
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+    onUnmounted(() => {
+      window.removeEventListener('resize', updateWidth)
+    })
+  }
 
-  return mobileKeywords.some(keyword => userAgent.includes(keyword))
-}
+  return computed(() => {
+    if (isClient.value) {
+      return width.value > 0 ? width.value <= 768 : isMobileUserAgent()
+    }
 
-// 客户端初始化
-if (typeof window !== 'undefined') {
-  isClient.value = true
-  width.value = window.innerWidth
-  window.addEventListener('resize', () => {
-    width.value = window.innerWidth
+    return isMobileUserAgent()
   })
 }
 
-// 服务端和客户端的移动设备检测
-export const isMobile = computed(() => {
-  if (isClient.value) {
-    // 客户端：优先使用窗口宽度，如果窗口宽度不可用则使用用户代理
-    return width.value > 0 ? width.value <= 768 : isMobileUserAgent()
-  }
-
-  // 服务端：使用请求头中的用户代理字符串
-  return isMobileUserAgent()
-})