mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 07:28:37 +08:00
Refactor usePWAState and useGlobalPWAState composables
Co-authored-by: jxxghp <jxxghp@163.com>
This commit is contained in:
@@ -1,15 +1,10 @@
|
|||||||
/**
|
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||||
* PWA状态管理的Vue组合式API
|
|
||||||
*/
|
|
||||||
|
|
||||||
import type { PWAState } from '@/utils/pwaStateManager'
|
import type { PWAState } from '@/utils/pwaStateManager'
|
||||||
|
|
||||||
export function usePWAState() {
|
export function usePWAState() {
|
||||||
const isStateRestored = ref(false)
|
const isStateRestored = ref(false)
|
||||||
const stateRestoreCount = ref(0)
|
const stateRestoreCount = ref(0)
|
||||||
const lastRestoredState = ref<PWAState | null>(null)
|
const lastRestoredState = ref<PWAState | null>(null)
|
||||||
|
|
||||||
// 检查是否在PWA模式下运行
|
|
||||||
const isPWAMode = ref(false)
|
const isPWAMode = ref(false)
|
||||||
|
|
||||||
// 检查PWA模式
|
// 检查PWA模式
|
||||||
@@ -30,18 +25,18 @@ export function usePWAState() {
|
|||||||
// 手动触发状态恢复检查
|
// 手动触发状态恢复检查
|
||||||
const checkStateRestore = async () => {
|
const checkStateRestore = async () => {
|
||||||
if (window.pwaStateController) {
|
if (window.pwaStateController) {
|
||||||
// 这里可以添加手动检查状态恢复的逻辑
|
|
||||||
console.log('检查状态恢复')
|
console.log('检查状态恢复')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听状态恢复事件
|
// 监听状态恢复事件
|
||||||
const handleStateRestored = (event: CustomEvent<{ state: PWAState }>) => {
|
const handleStateRestored = (event: Event) => {
|
||||||
|
const customEvent = event as CustomEvent<{ state: PWAState }>
|
||||||
isStateRestored.value = true
|
isStateRestored.value = true
|
||||||
stateRestoreCount.value++
|
stateRestoreCount.value++
|
||||||
lastRestoredState.value = event.detail.state
|
lastRestoredState.value = customEvent.detail.state
|
||||||
|
|
||||||
console.log('Vue组件收到状态恢复通知:', event.detail.state)
|
console.log('Vue组件收到状态恢复通知:', customEvent.detail.state)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置状态恢复标志
|
// 重置状态恢复标志
|
||||||
@@ -50,11 +45,6 @@ export function usePWAState() {
|
|||||||
lastRestoredState.value = null
|
lastRestoredState.value = null
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取状态管理器实例
|
|
||||||
const getStateController = () => {
|
|
||||||
return window.pwaStateController
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查状态管理器是否可用
|
// 检查状态管理器是否可用
|
||||||
const isStateManagerAvailable = () => {
|
const isStateManagerAvailable = () => {
|
||||||
return !!window.pwaStateController
|
return !!window.pwaStateController
|
||||||
@@ -75,7 +65,6 @@ export function usePWAState() {
|
|||||||
if (mediaQuery.addEventListener) {
|
if (mediaQuery.addEventListener) {
|
||||||
mediaQuery.addEventListener('change', handleDisplayModeChange)
|
mediaQuery.addEventListener('change', handleDisplayModeChange)
|
||||||
} else {
|
} else {
|
||||||
// 兼容旧版本
|
|
||||||
mediaQuery.addListener(handleDisplayModeChange)
|
mediaQuery.addListener(handleDisplayModeChange)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -83,7 +72,6 @@ export function usePWAState() {
|
|||||||
if (mediaQuery.removeEventListener) {
|
if (mediaQuery.removeEventListener) {
|
||||||
mediaQuery.removeEventListener('change', handleDisplayModeChange)
|
mediaQuery.removeEventListener('change', handleDisplayModeChange)
|
||||||
} else {
|
} else {
|
||||||
// 兼容旧版本
|
|
||||||
mediaQuery.removeListener(handleDisplayModeChange)
|
mediaQuery.removeListener(handleDisplayModeChange)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -104,15 +92,12 @@ export function usePWAState() {
|
|||||||
saveCurrentState,
|
saveCurrentState,
|
||||||
checkStateRestore,
|
checkStateRestore,
|
||||||
resetStateRestored,
|
resetStateRestored,
|
||||||
getStateController,
|
|
||||||
isStateManagerAvailable,
|
isStateManagerAvailable,
|
||||||
checkPWAMode
|
checkPWAMode
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
// 全局PWA状态管理器
|
||||||
* 全局PWA状态管理器
|
|
||||||
*/
|
|
||||||
export function useGlobalPWAState() {
|
export function useGlobalPWAState() {
|
||||||
// 检查是否在PWA环境中
|
// 检查是否在PWA环境中
|
||||||
const isPWAEnvironment = () => {
|
const isPWAEnvironment = () => {
|
||||||
@@ -121,35 +106,6 @@ export function useGlobalPWAState() {
|
|||||||
document.referrer.includes('android-app://')
|
document.referrer.includes('android-app://')
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化状态管理器(如果尚未初始化)
|
|
||||||
const initStateManager = async () => {
|
|
||||||
if (!window.pwaStateController && isPWAEnvironment()) {
|
|
||||||
const { PWAStateController } = await import('@/utils/pwaStateManager')
|
|
||||||
window.pwaStateController = new PWAStateController()
|
|
||||||
console.log('延迟初始化PWA状态管理器')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存应用状态
|
|
||||||
const saveAppState = async (customData?: any) => {
|
|
||||||
await initStateManager()
|
|
||||||
|
|
||||||
if (window.pwaStateController) {
|
|
||||||
// 如果有自定义数据,可以通过这种方式传递
|
|
||||||
if (customData) {
|
|
||||||
// 临时存储自定义数据
|
|
||||||
;(window as any).tempCustomState = customData
|
|
||||||
}
|
|
||||||
|
|
||||||
await window.pwaStateController.saveCurrentState()
|
|
||||||
|
|
||||||
// 清除临时数据
|
|
||||||
if (customData) {
|
|
||||||
delete (window as any).tempCustomState
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取存储的状态
|
// 获取存储的状态
|
||||||
const getStoredState = () => {
|
const getStoredState = () => {
|
||||||
return localStorage.getItem('mp-pwa-app-state')
|
return localStorage.getItem('mp-pwa-app-state')
|
||||||
@@ -159,12 +115,11 @@ export function useGlobalPWAState() {
|
|||||||
const clearStoredState = () => {
|
const clearStoredState = () => {
|
||||||
localStorage.removeItem('mp-pwa-app-state')
|
localStorage.removeItem('mp-pwa-app-state')
|
||||||
sessionStorage.removeItem('mp-pwa-session-state')
|
sessionStorage.removeItem('mp-pwa-session-state')
|
||||||
|
console.log('已清除PWA存储状态')
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isPWAEnvironment,
|
isPWAEnvironment,
|
||||||
initStateManager,
|
|
||||||
saveAppState,
|
|
||||||
getStoredState,
|
getStoredState,
|
||||||
clearStoredState
|
clearStoredState
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user