feat(uiMode): 添加UI模式手动切换功能

src/composables/usePWA.ts

@@ -12,6 +12,16 @@ const globalPwaStatus = ref<{
 const globalLoading = ref(false)
 let initPromise: Promise<void> | null = null
 
+// UI模式设置
+export type UIMode = 'auto' | 'desktop' | 'app'
+const uiMode = ref<UIMode>((localStorage.getItem('ui-mode') as UIMode) || 'auto')
+
+// 设置UI模式
+function setUIMode(mode: UIMode) {
+  uiMode.value = mode
+  localStorage.setItem('ui-mode', mode)
+}
+
 // 全局初始化函数
 async function initializePWAGlobally() {
   if (initPromise) return initPromise
@@ -50,6 +60,8 @@ export function usePWA() {
   })
 
   const appMode = computed(() => {
+    if (uiMode.value === 'app') return true
+    if (uiMode.value === 'desktop') return false
     return pwaMode.value && display.mdAndDown.value
   })
 
@@ -70,6 +82,8 @@ export function usePWA() {
     pwaMode,
     appMode,
     pwaStatus,
+    uiMode,
+    setUIMode,
     loading: globalLoading,
     initializePWA: initializePWAGlobally,
   }

src/composables/usePullDownGesture.ts

@@ -236,16 +236,15 @@ export function usePullDownGesture(options: PullDownOptions = {}) {
     }
   }
 
-  // PWA状态确定后，一次性决定是否添加事件监听器
+  // 监听 appMode 变化动态添加/移除事件监听器
   onMounted(() => {
-    // 等待PWA检测完成后添加事件监听器
-    const stopWatcher = watch(
+    watch(
       appMode,
       newValue => {
         if (newValue) {
           addEventListeners()
-          // PWA状态确定后停止监听
-          stopWatcher()
+        } else {
+          removeEventListeners()
         }
       },
       { immediate: true },

src/layouts/components/UserProfile.vue

@@ -16,6 +16,7 @@ import { saveLocalTheme } from '@/@core/utils/theme'
 import type { ThemeSwitcherTheme } from '@layouts/types'
 import { useConfirm } from '@/composables/useConfirm'
 import { themeManager } from '@/utils/themeManager'
+import { usePWA, type UIMode } from '@/composables/usePWA'
 
 // 认证 Store
 const authStore = useAuthStore()
@@ -27,6 +28,8 @@ const globalSettingsStore = useGlobalSettingsStore()
 const { t } = useI18n()
 // 显示器
 const display = useDisplay()
+// PWA
+const { uiMode, setUIMode } = usePWA()
 
 // 提示框
 const $toast = useToast()
@@ -40,6 +43,9 @@ const siteAuthDialog = ref(false)
 // 自定义CSS弹窗
 const cssDialog = ref(false)
 
+// UI模式菜单是否显示
+const showUIModeMenu = ref(false)
+
 // 主题菜单是否显示
 const showThemeMenu = ref(false)
 
@@ -233,6 +239,39 @@ const isAdvancedMode = computed(() => {
   return globalSettingsStore.get('ADVANCED_MODE') !== false
 })
 
+// UI模式相关
+const uiModes = computed(() => [
+  {
+    name: 'auto',
+    title: t('theme.autoUI'),
+    icon: 'mdi-devices',
+  },
+  {
+    name: 'desktop',
+    title: t('pwa.platforms.desktop'),
+    icon: 'mdi-monitor',
+  },
+  {
+    name: 'app',
+    title: t('pwa.platforms.mobile'),
+    icon: 'mdi-cellphone',
+  },
+])
+
+// 切换UI模式
+function changeUIMode(mode: UIMode) {
+  setUIMode(mode)
+  showUIModeMenu.value = false
+  // 刷新页面以应用更改
+  window.location.reload()
+}
+
+// 获取当前UI模式图标
+const getUIModeIcon = computed(() => {
+  const mode = uiModes.value.find(m => m.name === uiMode.value)
+  return mode?.icon || 'mdi-devices'
+})
+
 // 主题相关功能
 const { name: themeName, global: globalTheme } = useTheme()
 const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
@@ -546,6 +585,41 @@ onUnmounted(() => {
             <VListItemTitle>{{ t('user.siteAuth') }}</VListItemTitle>
           </VListItem>
 
+          <!-- 👉 UI模式设置 - 使用嵌套菜单 -->
+          <VMenu location="end" offset-x min-width="200" v-model="showUIModeMenu" :close-on-content-click="true">
+            <template v-slot:activator="{ props: menuProps }">
+              <VListItem v-bind="menuProps" class="mb-1 rounded-lg" hover>
+                <template #prepend>
+                  <VIcon :icon="getUIModeIcon" />
+                </template>
+                <VListItemTitle>{{ t('common.uiMode') }}</VListItemTitle>
+                <VListItemSubtitle>
+                  {{ uiModes.find(m => m.name === uiMode)?.title || t('theme.autoUI') }}
+                </VListItemSubtitle>
+                <template #append>
+                  <VIcon icon="mdi-chevron-right" size="small" />
+                </template>
+              </VListItem>
+            </template>
+            <VList>
+              <VListItem
+                v-for="mode in uiModes"
+                :key="mode.name"
+                @click="changeUIMode(mode.name as UIMode)"
+                :active="uiMode === mode.name"
+                class="mb-1"
+              >
+                <template #prepend>
+                  <VIcon :icon="mode.icon" />
+                </template>
+                <VListItemTitle>{{ mode.title }}</VListItemTitle>
+                <template #append v-if="uiMode === mode.name">
+                  <VIcon icon="mdi-check" color="primary" size="small" />
+                </template>
+              </VListItem>
+            </VList>
+          </VMenu>
+
           <!-- 👉 主题设置 - 使用嵌套菜单 -->
           <VMenu location="end" offset-x min-width="200" v-model="showThemeMenu" :close-on-content-click="true">
             <template v-slot:activator="{ props: menuProps }">
@@ -553,9 +627,10 @@ onUnmounted(() => {
                 <template #prepend>
                   <VIcon :icon="getThemeIcon" />
                 </template>
-                <VListItemTitle>
-                  {{ themes.find(t => t.name === currentThemeName)?.title || t('common.theme') }}
-                </VListItemTitle>
+                <VListItemTitle>{{ t('common.theme') }}</VListItemTitle>
+                <VListItemSubtitle>
+                  {{ themes.find(t => t.name === currentThemeName)?.title || t('theme.auto') }}
+                </VListItemSubtitle>
                 <template #append>
                   <VIcon icon="mdi-chevron-right" size="small" />
                 </template>

src/locales/en-US.ts

@@ -30,6 +30,7 @@ export default {
     saving: 'Saving',
     reset: 'Reset',
     theme: 'Theme',
+    uiMode: 'UI Layout',
     language: 'Language',
     pleaseWait: 'Please wait...',
     viewDetails: 'View Details',
@@ -131,6 +132,7 @@ export default {
     light: 'Light',
     dark: 'Dark',
     auto: 'Follow System',
+    autoUI: 'Auto Layout',
     transparent: 'Transparent',
     purple: 'Purple',
     custom: 'Custom Style',

src/locales/zh-CN.ts

@@ -30,6 +30,7 @@ export default {
     saving: '保存中',
     reset: '重置',
     theme: '主题',
+    uiMode: '界面布局',
     language: '语言',
     pleaseWait: '请稍候...',
     viewDetails: '查看详情',
@@ -131,6 +132,7 @@ export default {
     light: '浅色',
     dark: '深色',
     auto: '跟随系统',
+    autoUI: '自动布局',
     transparent: '透明',
     purple: '幻紫',
     custom: '附加样式',

src/locales/zh-TW.ts

@@ -30,6 +30,7 @@ export default {
     saving: '保存中',
     reset: '重置',
     theme: '主題',
+    uiMode: '界面佈局',
     language: '語言',
     pleaseWait: '請稍候...',
     viewDetails: '查看詳情',
@@ -131,6 +132,7 @@ export default {
     light: '淺色',
     dark: '深色',
     auto: '跟隨系統',
+    autoUI: '自動佈局',
     transparent: '透明',
     purple: '幻紫',
     custom: '附加樣式',