@roki-h5/create-roki-app 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roki-h5/create-roki-app",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Roki H5 项目脚手架",
   "type": "module",
   "license": "MIT",

package/templates/h5/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@roki-h5/scaffold-template",
   "private": true,
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "scripts": {
     "dev": "vite --mode development",
@@ -17,6 +17,7 @@
     "axios": "^1.7.9",
     "event-source-polyfill": "^1.0.31",
     "pinia": "^2.3.0",
+    "vconsole": "^3.15.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

package/templates/h5/src/App.vue

@@ -5,15 +5,19 @@ import { getAppData } from '@/utils/appInfo'
 import { BUILD_TIME, VERSION } from '@/utils/buildInfo'
 import { useDeviceShadow } from '@/utils/useDeviceShadow'
 import { useGlobalSse } from '@/utils/useGlobalSse'
+import { setupMobileDebugConsole } from '@/utils/vconsole'
 
 const appStore = useAppStore()
 
-useDeviceShadow()
-useGlobalSse()
+const { start: startDeviceShadow } = useDeviceShadow({ lazy: true })
+const { start: startGlobalSse } = useGlobalSse({ lazy: true })
 
 onBeforeMount(async () => {
+  await setupMobileDebugConsole()
   await getAppData()
   void appStore.loadWelcomeMessage()
+  startDeviceShadow()
+  startGlobalSse()
 })
 
 function logBuildInfo() {

package/templates/h5/src/utils/appInfo.ts

@@ -52,6 +52,17 @@ export function patchAppStoreFromInfo(rawInfo: unknown) {
       void appStore.loadWelcomeMessage()
     }
 
+    console.log('[appInfo] 设备信息', {
+      deviceId,
+      deviceName,
+      deviceType,
+      deviceCategory,
+      familyId,
+      userId,
+      terminal,
+      accessToken,
+    })
+
     return info
   } catch (e) {
     console.warn('[appInfo] 设备信息解析失败', e)
@@ -68,17 +79,15 @@ export async function getAppData() {
     typeof window.nativeInterface.getDeviceInfo === 'function'
   ) {
     info = await Promise.resolve(window.nativeInterface.getDeviceInfo())
-    if (import.meta.env.DEV) {
-      console.log('[appInfo] 安卓/鸿蒙数据获取成功', info)
-    }
+    console.log('[appInfo] 安卓/鸿蒙数据获取成功', info)
   } else if (window.getDeviceInfo) {
     const raw = window.getDeviceInfo
     info = await Promise.resolve(
       typeof raw === 'function' ? raw() : raw,
     )
-    if (import.meta.env.DEV) {
-      console.log('[appInfo] iOS 数据获取成功', info)
-    }
+    console.log('[appInfo] iOS 数据获取成功', info)
+  } else {
+    console.warn('[appInfo] 未检测到原生桥，无法获取设备信息')
   }
 
   if (!info) return null

package/templates/h5/src/utils/useDeviceShadow.ts

@@ -4,13 +4,19 @@ import { useAppStore } from '@/stores/app'
 import { useMachineStateStore } from '@/stores/machineState'
 import { fetchAndStoreDeviceShadow, resetDeviceShadowCache } from '@/utils/deviceShadow'
 
+interface UseDeviceShadowOptions {
+  /** 为 true 时不在 setup 阶段立即拉取，需手动调用 start */
+  lazy?: boolean
+}
+
 /** 应用启动时拉取一次 shadow，子页面直接读 store */
-export function useDeviceShadow() {
+export function useDeviceShadow(options: UseDeviceShadowOptions = {}) {
+  const { lazy = false } = options
   const appStore = useAppStore()
   const machineStateStore = useMachineStateStore()
   const { deviceId } = storeToRefs(appStore)
 
-  watch(
+  const stop = watch(
     deviceId,
     (newId, oldId) => {
       if (newId !== oldId) {
@@ -24,6 +30,14 @@ export function useDeviceShadow() {
 
       void fetchAndStoreDeviceShadow(newId)
     },
-    { immediate: true },
+    { immediate: !lazy },
   )
+
+  const start = () => {
+    const id = deviceId.value
+    if (!id) return
+    void fetchAndStoreDeviceShadow(id)
+  }
+
+  return { start, stop }
 }

package/templates/h5/src/utils/useGlobalSse.ts

@@ -44,7 +44,8 @@ function throttle<T extends (...args: never[]) => void>(fn: T, wait: number) {
  * 应用级 SSE：建立长连接并同步设备在线/开关机/工作状态。
  * shadow 全量属性仅在 App 启动时拉取一次；此处通过 SSE 增量更新 store。
  */
-export function useGlobalSse() {
+export function useGlobalSse(options: { lazy?: boolean } = {}) {
+  const { lazy = false } = options
   const router = useRouter()
   const appStore = useAppStore()
   const machineStateStore = useMachineStateStore()
@@ -185,7 +186,7 @@ export function useGlobalSse() {
     () => {
       initSseConnection()
     },
-    { immediate: true },
+    { immediate: !lazy },
   )
 
   watch(sseClient, (client) => {
@@ -193,4 +194,10 @@ export function useGlobalSse() {
       bindGlobalListeners()
     }
   })
+
+  const start = () => {
+    initSseConnection()
+  }
+
+  return { start }
 }

package/templates/h5/src/utils/vconsole.ts

@@ -0,0 +1,22 @@
+import { appEnv } from '@config/env'
+
+let setupPromise: Promise<void> | null = null
+
+/** 测试环境挂载 vConsole；须在业务请求与 console 输出之前 await */
+export function setupMobileDebugConsole(): Promise<void> {
+  if (setupPromise) return setupPromise
+
+  setupPromise = (async () => {
+    if (appEnv !== 'test') return
+
+    const { default: VConsole } = await import('vconsole')
+    new VConsole()
+
+    // 等待 vConsole 完成 console 劫持后再继续业务逻辑
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve())
+    })
+  })()
+
+  return setupPromise
+}