68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import { useEffect, useState } from 'react'
|
|||
|
|
import { tokenManager } from '@/lib/auth/token'
|
|||
|
|
|
|||
|
|
export function MockProvider({ children }: { children: React.ReactNode }) {
|
|||
|
|
const [mockEnabled, setMockEnabled] = useState(false)
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
async function initMocking() {
|
|||
|
|
// 首先初始化设备ID（确保用户第一次访问就有设备ID）
|
|||
|
|
tokenManager.initializeDeviceId()
|
|||
|
|
|
|||
|
|
// 只在开发环境和浏览器环境中启用
|
|||
|
|
if (process.env.NODE_ENV !== 'development' || typeof window === 'undefined') {
|
|||
|
|
setMockEnabled(true)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否启用 mock
|
|||
|
|
const shouldMock = process.env.NEXT_PUBLIC_ENABLE_MOCK === 'true'
|
|||
|
|
console.log('🔧 Mock enabled:', shouldMock)
|
|||
|
|
|
|||
|
|
if (!shouldMock) {
|
|||
|
|
console.log('🚫 MSW 已禁用')
|
|||
|
|
setMockEnabled(true)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 动态导入 MSW
|
|||
|
|
const { worker } = await import('../mocks/browser')
|
|||
|
|
|
|||
|
|
// 启动 Service Worker
|
|||
|
|
await worker.start({
|
|||
|
|
onUnhandledRequest: 'bypass',
|
|||
|
|
serviceWorker: {
|
|||
|
|
url: '/mockServiceWorker.js'
|
|||
|
|
},
|
|||
|
|
// 添加选项以避免拦截页面导航
|
|||
|
|
quiet: false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
console.log('🎭 MSW Worker started successfully')
|
|||
|
|
setMockEnabled(true)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('❌ Failed to start MSW:', error)
|
|||
|
|
setMockEnabled(true) // 即使失败也继续渲染
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
initMocking()
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// 在 mock 初始化完成前显示加载状态
|
|||
|
|
if (!mockEnabled) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center min-h-screen">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
|
|||
|
|
<p className="text-gray-600">Initializing development environment...</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return <>{children}</>
|
|||
|
|
}
|