verce-vue-test 0.0.28 → 0.0.30

package/mini2.0-main/src/App.vue

@@ -1,20 +1,7 @@
-<script setup lang="ts">
-import { useAppStore } from '@/stores/app'
-
-const appStore = useAppStore()
-
-onMounted(async () => {
-  await appStore.initNativeDetection()
-
-  // 测试环境 + 原生设备：加载 vConsole 调试面板
-  if (import.meta.env.VITE_APP_ENV === 'test' && appStore.isNative) {
-    import('vconsole').then(({ default: VConsole }) => new VConsole())
-  }
-})
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <router-view v-if="appStore.ready" v-slot="{ Component }">
+  <router-view v-slot="{ Component }">
     <keep-alive include="Home">
       <component :is="Component" />
     </keep-alive>

package/mini2.0-main/src/core/mxApi/index.ts

@@ -161,17 +161,47 @@ export const showOptionMenu = (): void => MXWebui('showOptionMenu')
 export const setCustomHeaderMenu = (...args: unknown[]): void =>
   MXWebui('setCustomHeaderMenu', ...args)
 
+/** 超时兜底：原生回调未触发时自动执行 onError */
+function withCallbackTimeout<T extends (...args: any[]) => void>(
+  onSuccess: T,
+  onError: (reason: string) => void,
+  ms: number,
+  label: string,
+): T {
+  const timer = setTimeout(() => onError(`[MX] ${label} 超时(${ms}ms)`), ms)
+  return ((...args: unknown[]) => {
+    clearTimeout(timer)
+    onSuccess(...args)
+  }) as unknown as T
+}
+
 /** 获取当前登录用户信息 */
-export const getCurrentUser = (): Promise<MXUser> =>
-  new Promise((resolve) => {
-    MXCommon('getCurrentUser', resolve)
-  })
+export const getCurrentUser = (
+  onSuccess: (user: MXUser) => void,
+  onError?: (reason: string) => void,
+  timeout = 5000,
+): void => {
+  MXCommon('getCurrentUser', withCallbackTimeout(
+    onSuccess,
+    (reason) => { console.error(reason); onError?.(reason) },
+    timeout,
+    'getCurrentUser',
+  ))
+}
 
 /** 从原生客户端获取加密密钥 */
-export const getEncryptString = (): Promise<string> =>
-  new Promise((resolve) => {
-    MXCommon('getEncryptString', resolve)
-  })
+export const getEncryptString = (
+  onSuccess: (secret: string) => void,
+  onError?: (reason: string) => void,
+  timeout = 5000,
+): void => {
+  MXCommon('getEncryptString', withCallbackTimeout(
+    onSuccess,
+    (reason) => { console.error(reason); onError?.(reason) },
+    timeout,
+    'getEncryptString',
+  ))
+}
 
 /** 打开原生选人组件 */
 export const MXSelectUsers = (
@@ -187,9 +217,10 @@ export const MXSelectUsers = (
  * 原生 AJAX 请求
  *
  * 使用原生应用的 HTTP 客户端发起请求，绕过浏览器同源策略限制。
+ * ajax 本身通过 success/error 回调，保留 Promise 包装；回调未触发时 15s 超时 reject。
  */
-export const ajax = <T = unknown>(params: Omit<MXAjaxParams, 'success' | 'error'>): Promise<MXAjaxResponse<T>> =>
-  new Promise((resolve, reject) => {
+export const ajax = <T = unknown>(params: Omit<MXAjaxParams, 'success' | 'error'>): Promise<MXAjaxResponse<T>> => {
+  const request = new Promise<MXAjaxResponse<T>>((resolve, reject) => {
     const requestParams: MXAjaxParams = {
       ...params,
       url: `${import.meta.env.VITE_API_BASE_URL || ''}${params.url}`,
@@ -205,6 +236,13 @@ export const ajax = <T = unknown>(params: Omit<MXAjaxParams, 'success' | 'error'
     MXCommon('ajax', requestParams)
   })
 
+  const timeout = new Promise<MXAjaxResponse<T>>((_, reject) =>
+    setTimeout(() => reject(new Error(`[MX] ajax ${params.type} ${params.url} 超时`)), 15000),
+  )
+
+  return Promise.race([request, timeout])
+}
+
 /** 原生 GET 请求 */
 export const ajaxGet = <T = unknown>(url: string, query?: Record<string, unknown>): Promise<MXAjaxResponse<T>> => {
   const queryString = query

package/mini2.0-main/src/main.ts

@@ -5,6 +5,8 @@ import 'vant/lib/index.css'
 
 import App from './App.vue'
 import router from './router'
+import { useAppStore } from '@/stores/app'
+import { hideWebViewTitle } from '@/core/mxApi'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -14,4 +16,19 @@ pinia.use(piniaPluginPersistedstate)
 app.use(pinia)
 app.use(router)
 
+// 等待原生环境检测完成后再挂载，确保所有组件读到的 isNative 都是正确值
+const appStore = useAppStore()
+await appStore.initNativeDetection()
+
+// 测试环境 + 原生设备：加载 vConsole 调试面板
+if (import.meta.env.VITE_APP_ENV === 'test' && appStore.isNative) {
+  const { default: VConsole } = await import('vconsole')
+  new VConsole()
+}
+
+// 原生环境：隐藏原生标题栏
+if (appStore.isNative) {
+  hideWebViewTitle()
+}
+
 app.mount('#app')

package/mini2.0-main/src/stores/app.ts

@@ -5,12 +5,10 @@ import { whenNativeReady } from '@/core/mxApi'
  * 应用级状态 Store
  *
  * 存放全局共享的运行时状态，不持久化。
+ * initNativeDetection 在 main.ts 挂载前调用，组件读取时值已就绪。
  */
 export const useAppStore = defineStore('app', () => {
-  /** 原生环境检测是否已完成（App.vue onMounted 后变为 true） */
-  const ready = ref(false)
-
-  /** 是否在原生 APP WebView 环境中（由 App.vue 初始化时检测并写入） */
+  /** 是否在原生 APP WebView 环境中 */
   const isNative = ref(false)
 
   /**
@@ -18,12 +16,10 @@ export const useAppStore = defineStore('app', () => {
    *
    * 等待 deviceready 事件后判断 window.MXCommon 是否存在，
    * 浏览器环境下 3 秒超时后返回 false。
-   * 应在 App.vue onMounted 中调用，全局只需一次。
    */
   async function initNativeDetection() {
     isNative.value = await whenNativeReady()
-    ready.value = true
   }
 
-  return { ready, isNative, initNativeDetection }
+  return { isNative, initNativeDetection }
 })

package/mini2.0-main/src/stores/user.ts

@@ -13,7 +13,7 @@ export const useUserStore = defineStore(
     // -------------------------------- State --------------------------------
 
     /** 登录凭证，登录成功后由后端返回，后续请求通过请求头携带 */
-    const token = ref('7')
+    const token = ref('')
 
     // ------------------------------ Actions --------------------------------
 

package/mini2.0-main/src/views/login/index.vue

@@ -18,18 +18,23 @@ const form = ref({
 const loading = ref(false)
 
 // 原生环境：从客户端获取密钥，直接交换 token
-onMounted(async () => {
+onMounted(() => {
   if (!appStore.isNative) return
 
   loading.value = true
-  try {
-    const secret = await getEncryptString()
-    console.log(secret)
-  } catch {
-    // 错误已由 request.ts 拦截器统一处理
-  } finally {
-    loading.value = false
-  }
+  getEncryptString(
+    (secret) => {
+      loading.value = false
+      console.log(secret)
+      // TODO: 用 secret 自动换取 token 并跳转首页
+    },
+    (reason) => {
+      loading.value = false
+      console.error(reason)
+      showToast({ message: '获取设备凭证失败，请手动登录', duration: 3000 })
+      appStore.isNative = false
+    },
+  )
 })
 
 async function onSubmit() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "private": false,
   "type": "module",
   "scripts": {