From cd5f8558aa9c2002deffd9be4a0e511803fabfa5 Mon Sep 17 00:00:00 2001
From: tbphp <tangb7420@gmail.com>
Date: Wed, 29 Jul 2026 17:52:31 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=B8=85=E7=90=86=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E8=BF=90=E8=A1=8C=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/client-context.ts                  | 2 +-
 web/src/features/home/HomeView.vue             | 2 +-
 web/src/features/import/NewGroupImport.test.ts | 5 ++++-
 web/src/features/monitor/LogDetailDrawer.vue   | 8 +++++++-
 web/src/i18n/context.ts                        | 2 +-
 web/src/test/mount-app.ts                      | 6 ++++--
 6 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/web/src/api/client-context.ts b/web/src/api/client-context.ts
index 4008d5c8..14e99e82 100644
--- a/web/src/api/client-context.ts
+++ b/web/src/api/client-context.ts
@@ -5,7 +5,7 @@ import type { ApiClient } from './client'
 export const apiClientKey: InjectionKey<ApiClient> = Symbol('api-client')
 
 export function useApiClient(): ApiClient {
-  const client = inject(apiClientKey)
+  const client = inject(apiClientKey, null)
   if (!client) throw new Error('API_CLIENT_NOT_PROVIDED')
   return client
 }
diff --git a/web/src/features/home/HomeView.vue b/web/src/features/home/HomeView.vue
index b46aaed8..cf035f89 100644
--- a/web/src/features/home/HomeView.vue
+++ b/web/src/features/home/HomeView.vue
@@ -107,7 +107,7 @@ const healthErrorMessage = computed(() =>
               <span>{{
                 t('home.revision', { revision: healthQuery.data.value.snapshot_revision })
               }}</span>
-              <i18n-t keypath="home.observedAt" tag="span">
+              <i18n-t keypath="home.observedAt" scope="global" tag="span">
                 <template #time>
                   <AppDateTime :instant="healthQuery.data.value.observed_at" :locale="locale" />
                 </template>
diff --git a/web/src/features/import/NewGroupImport.test.ts b/web/src/features/import/NewGroupImport.test.ts
index b1f03b71..16d0ce0a 100644
--- a/web/src/features/import/NewGroupImport.test.ts
+++ b/web/src/features/import/NewGroupImport.test.ts
@@ -1,6 +1,7 @@
 import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import { flushPromises, mount } from '@vue/test-utils'
-import { createMemoryHistory } from 'vue-router'
+import { computed } from 'vue'
+import { createMemoryHistory, matchedRouteKey } from 'vue-router'
 
 import type { ApiClient } from '@/api/client'
 import { apiClientKey } from '@/api/client-context'
@@ -53,6 +54,7 @@ async function mountImport(
   const router = createAppRouter({ hasCredential: () => true }, createMemoryHistory())
   await router.push('/import')
   await router.isReady()
+  const activeRouteRecord = computed(() => router.currentRoute.value.matched.at(-1))
   const importRecovery = recovery()
   const operationOwner = createImportOperationOwner()
   const wrapper = mount(NewGroupImport, {
@@ -69,6 +71,7 @@ async function mountImport(
         [importRecoveryKey as symbol]: importRecovery,
         [importOperationOwnerKey as symbol]: operationOwner,
         [unsavedChangesKey as symbol]: createUnsavedChangesController(),
+        [matchedRouteKey as symbol]: activeRouteRecord,
       },
     },
   })
diff --git a/web/src/features/monitor/LogDetailDrawer.vue b/web/src/features/monitor/LogDetailDrawer.vue
index 8c3b2bca..888c8638 100644
--- a/web/src/features/monitor/LogDetailDrawer.vue
+++ b/web/src/features/monitor/LogDetailDrawer.vue
@@ -104,6 +104,12 @@ function accessKeyLabel(log: RequestLogItemDto): string {
   return `#${log.access_key.id}`
 }
 
+function protocolLabel(log: RequestLogItemDto): string {
+  return log.protocol
+    ? t(`common.protocols.${log.protocol}`)
+    : t('monitor.logs.drawer.usage.unknown')
+}
+
 function usageStateLabel(log: RequestLogItemDto): string {
   return t(`monitor.logs.drawer.usage.state.${log.usage_state}`)
 }
@@ -189,7 +195,7 @@ function estimatedCost(log: RequestLogItemDto): string {
           </div>
           <div>
             <dt>{{ t('monitor.logs.drawer.protocol') }}</dt>
-            <dd>{{ t(`common.protocols.${log.protocol}`) }}</dd>
+            <dd>{{ protocolLabel(log) }}</dd>
           </div>
           <div>
             <dt>{{ t('monitor.logs.drawer.accessKey') }}</dt>
diff --git a/web/src/i18n/context.ts b/web/src/i18n/context.ts
index 145f1ced..62594a0c 100644
--- a/web/src/i18n/context.ts
+++ b/web/src/i18n/context.ts
@@ -5,7 +5,7 @@ import type { AppI18n } from './index'
 export const appI18nKey: InjectionKey<AppI18n> = Symbol('app-i18n')
 
 export function useAppI18n(): AppI18n {
-  const appI18n = inject(appI18nKey)
+  const appI18n = inject(appI18nKey, null)
   if (!appI18n) throw new Error('APP_I18N_NOT_PROVIDED')
   return appI18n
 }
diff --git a/web/src/test/mount-app.ts b/web/src/test/mount-app.ts
index 37a2044b..8bf95f19 100644
--- a/web/src/test/mount-app.ts
+++ b/web/src/test/mount-app.ts
@@ -1,7 +1,7 @@
 import { VueQueryPlugin, type QueryClient } from '@tanstack/vue-query'
 import { mount, type ComponentMountingOptions } from '@vue/test-utils'
-import type { Component } from 'vue'
-import { createMemoryHistory } from 'vue-router'
+import { computed, type Component } from 'vue'
+import { createMemoryHistory, matchedRouteKey } from 'vue-router'
 
 import type { ApiClient } from '@/api/client'
 import { apiClientKey } from '@/api/client-context'
@@ -35,6 +35,7 @@ export async function mountApp(
   const router = createAppRouter({ hasCredential: () => true }, createMemoryHistory())
   await router.push(options.path ?? '/')
   await router.isReady()
+  const activeRouteRecord = computed(() => router.currentRoute.value.matched.at(-1))
   const appI18n = createTestAppI18n(undefined, options.locale ?? 'zh-CN')
   const recovery =
     options.recovery ??
@@ -55,6 +56,7 @@ export async function mountApp(
         [importRecoveryKey as symbol]: recovery,
         [importOperationOwnerKey as symbol]: options.operationOwner ?? createImportOperationOwner(),
         [unsavedChangesKey as symbol]: createUnsavedChangesController(),
+        [matchedRouteKey as symbol]: activeRouteRecord,
       },
     },
   })