前端: 按 Web Interface Guidelines 全面重做

组件:
- Button: transition-all→明确属性列表, touch-action, aria-busy
- Input: name/spellcheck/inputmode/aria-invalid/aria-describedby, focus-visible ring,
  label 关联, 暴露 focus() 供错误定位, required 标记
- Modal: Escape 关闭 + focus trap + 焦点归还, overscroll-behavior: contain,
  aria-labelledby, body 滚动锁, touch-action
- 新增 Toast(aria-live polite) + pinia toast store

页面:
- ConsoleLayout: skip link, <main> 语义标签, aside/nav aria-label, aria-current,
  装饰 SVG aria-hidden, Intl 金额, translate=no 品牌/代码
- Dashboard: Intl.NumberFormat, 骨架屏 loading, aria-live 错误
- Keys: 字段级错误+焦点定位, toast 反馈(复制/吊销), name 属性
- Usage: select 加 label, 分页/筛选同步 URL(可深链), Intl 日期/金额, 表格 caption
- Login/Register: 字段级校验+错误定位, spellcheck=false, inputmode, autocomplete
- Landing: router-link 替换 href, aria-hidden, text-balance, scroll-mt
- index.html: theme-color + color-scheme

验证: playwright 22 项断言全过, WCAG AA 对比度 9 组全过, 零控制台错误

web/src/views/console/ConsoleLayout.vue

@@ -2,6 +2,7 @@
 import { useAuthStore } from '../../stores/auth'
 import { useRouter } from 'vue-router'
 import { computed } from 'vue'
+import Toast from '../../components/ui/Toast.vue'
 
 const auth = useAuthStore()
 const router = useRouter()
@@ -12,31 +13,43 @@ const nav = [
   { to: '/console/usage', label: '用量明细', icon: 'M4 20V10M10 20V4M16 20v-7M22 20H2' },
 ]
 
-const balanceFmt = computed(() =>
-  auth.user ? auth.user.balance.toFixed(4) : '—',
-)
+const balanceFmt = computed(() => {
+  if (!auth.user) return '—'
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 4 }).format(auth.user.balance)
+})
+
+async function logout() {
+  await auth.logout()
+  router.push('/')
+}
 </script>
 
 <template>
-  <div class="flex min-h-[100dvh] bg-ink-950">
+  <div class="min-h-[100dvh] bg-ink-950 text-paper-100">
+    <!-- 无障碍：跳过导航 -->
+    <a
+      href="#main-content"
+      class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[70] focus:rounded-md focus:bg-signal-400 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-ink-950"
+    >跳到主内容</a>
+
     <!-- 侧边栏 -->
-    <aside class="fixed inset-y-0 left-0 z-30 flex w-56 flex-col border-r border-ink-800 bg-ink-900/60">
+    <aside aria-label="主导航" class="fixed inset-y-0 left-0 z-30 flex w-56 flex-col border-r border-ink-800 bg-ink-900/60">
       <div class="flex h-16 items-center gap-2.5 border-b border-ink-800 px-5">
-        <span class="flex h-7 w-7 items-center justify-center rounded-md bg-signal-400">
+        <span class="flex h-7 w-7 items-center justify-center rounded-md bg-signal-400" aria-hidden="true">
           <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h3l2-5 3 10 2-5h2" stroke="#0c0d0f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </span>
-        <span class="text-[15px] font-semibold tracking-tight">openteam</span>
+        <span class="text-[15px] font-semibold tracking-tight" translate="no">openteam</span>
       </div>
 
-      <nav class="flex-1 space-y-0.5 px-3 py-4">
+      <nav class="flex-1 space-y-0.5 px-3 py-4" aria-label="控制台">
         <router-link
           v-for="item in nav"
           :key="item.to"
           :to="item.to"
-          class="flex items-center gap-3 rounded-md px-3 py-2 text-[13.5px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-paper-100"
+          class="flex items-center gap-3 rounded-md px-3 py-2 text-[13.5px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-paper-100 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none"
           active-class="bg-ink-800 text-signal-300! font-medium"
         >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path :d="item.icon" /></svg>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path :d="item.icon" /></svg>
           {{ item.label }}
         </router-link>
       </nav>
@@ -47,13 +60,13 @@ const balanceFmt = computed(() =>
             <p class="truncate text-[13px] font-medium text-paper-100">{{ auth.user?.username }}</p>
             <p class="text-xs text-paper-600">{{ auth.isAdmin ? 'admin' : 'user' }}</p>
           </div>
-          <span class="num text-[13px] font-medium text-mint-400">${{ balanceFmt }}</span>
+          <span class="num text-[13px] font-medium text-mint-400" translate="no">{{ balanceFmt }}</span>
         </div>
         <button
-          class="mt-2 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-ember-300 cursor-pointer"
-          @click="auth.logout().then(() => router.push('/'))"
+          class="mt-2 flex w-full touch-manipulation items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-ember-300 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none cursor-pointer"
+          @click="logout"
         >
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" /></svg>
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" /></svg>
           退出登录
         </button>
       </div>
@@ -61,9 +74,12 @@ const balanceFmt = computed(() =>
 
     <!-- 主区域 -->
     <div class="ml-56 flex-1">
-      <div class="mx-auto max-w-6xl px-8 py-8">
+      <main id="main-content" class="mx-auto max-w-6xl scroll-mt-4 px-8 py-8" tabindex="-1">
         <router-view />
-      </div>
+      </main>
     </div>
+
+    <!-- 全局通知 -->
+    <Toast />
   </div>
 </template>

web/src/views/console/DashboardView.vue

@@ -18,8 +18,17 @@ const balance = ref<BalanceInfo | null>(null)
 const stats = ref<UsagePoint[]>([])
 const recentLogs = ref<LogItem[]>([])
 const error = ref('')
+const loaded = ref(false)
 
-const todayCost = computed(() => balance.value?.today.cost ?? 0)
+const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+const usdPrecise = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 6, maximumFractionDigits: 6 })
+
+const balanceText = computed(() => (balance.value ? usd.format(balance.value.balance) : '—'))
+const spent30d = computed(() => usd.format(balance.value?.spent_last_30d ?? 0))
+const todayCostText = computed(() => usdPrecise.format(balance.value?.today.cost ?? 0))
+const modelsCount = computed(() => balance.value?.models_available ?? '—')
+const todayRequests = computed(() => balance.value?.today.requests ?? '—')
+const todayTokens = computed(() => balance.value?.today.tokens ?? 0)
 
 const chartOption = computed(() => ({
   grid: { left: 8, right: 8, top: 24, bottom: 0, containLabel: true },
@@ -64,10 +73,12 @@ onMounted(async () => {
     recentLogs.value = logs.items ?? []
   } catch (e: any) {
     error.value = e.message || '加载失败'
+  } finally {
+    loaded.value = true
   }
 })
 
-const fmtCost = (n: number) => (n >= 0.01 ? n.toFixed(4) : n.toExponential(2))
+const fmtCost = (n: number) => usd.format(n)
 </script>
 
 <template>
@@ -77,64 +88,80 @@ const fmtCost = (n: number) => (n >= 0.01 ? n.toFixed(4) : n.toExponential(2))
         <h1 class="text-xl font-semibold tracking-tight">仪表盘</h1>
         <p class="mt-1 text-[13px] text-paper-500">今日与近 30 日用量总览</p>
       </div>
-      <router-link to="/console/keys" class="rounded-md bg-signal-400 px-4 py-2 text-sm font-medium text-ink-950 transition-colors hover:bg-signal-300">新建密钥</router-link>
+      <router-link
+        to="/console/keys"
+        class="inline-flex h-10 touch-manipulation items-center rounded-md bg-signal-400 px-4 text-sm font-medium text-ink-950 transition-colors hover:bg-signal-300 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none"
+      >新建密钥</router-link>
     </div>
 
-    <p v-if="error" class="mt-4 rounded-md border border-ember-500/40 bg-ember-500/10 px-3 py-2 text-[13px] text-ember-300">{{ error }}</p>
+    <p v-if="error" class="mt-4 rounded-md border border-ember-500/40 bg-ember-500/10 px-3 py-2 text-[13px] text-ember-300" role="alert">{{ error }}</p>
 
     <!-- 指标行 -->
-    <div class="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
-      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
-        <p class="text-xs text-paper-500">余额</p>
-        <p class="num mt-1.5 text-2xl font-semibold text-mint-400">${{ balance?.balance.toFixed(4) ?? '—' }}</p>
-        <p class="num mt-1 text-[11px] text-paper-600">30 日消耗 ${{ fmtCost(balance?.spent_last_30d ?? 0) }}</p>
-      </div>
-      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
-        <p class="text-xs text-paper-500">今日请求</p>
-        <p class="num mt-1.5 text-2xl font-semibold">{{ balance?.today.requests ?? '—' }}</p>
-        <p class="num mt-1 text-[11px] text-paper-600">{{ balance?.today.tokens ?? 0 }} tokens</p>
-      </div>
-      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
-        <p class="text-xs text-paper-500">今日成本</p>
-        <p class="num mt-1.5 text-2xl font-semibold text-signal-300">${{ todayCost.toFixed(6) }}</p>
-        <p class="num mt-1 text-[11px] text-paper-600">按量计费 · USD</p>
-      </div>
-      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
-        <p class="text-xs text-paper-500">可用模型</p>
-        <p class="num mt-1.5 text-2xl font-semibold">{{ balance?.models_available ?? '—' }}</p>
-        <p class="mt-1 text-[11px] text-paper-600">GET /v1/models 查看</p>
-      </div>
-    </div>
+    <section aria-label="用量指标" class="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
+      <template v-if="!loaded">
+        <div v-for="i in 4" :key="i" class="rounded-lg border border-ink-700 bg-ink-900 p-4" aria-hidden="true">
+          <div class="h-3 w-14 animate-pulse rounded bg-ink-700" />
+          <div class="mt-3 h-7 w-24 animate-pulse rounded bg-ink-700" />
+          <div class="mt-2 h-3 w-20 animate-pulse rounded bg-ink-700" />
+        </div>
+      </template>
+      <template v-else>
+        <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+          <p class="text-xs text-paper-500">余额</p>
+          <p class="num mt-1.5 text-2xl font-semibold text-mint-400" translate="no">{{ balanceText }}</p>
+          <p class="num mt-1 text-[11px] text-paper-600">30 日消耗 <span translate="no">{{ spent30d }}</span></p>
+        </div>
+        <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+          <p class="text-xs text-paper-500">今日请求</p>
+          <p class="num mt-1.5 text-2xl font-semibold">{{ todayRequests }}</p>
+          <p class="num mt-1 text-[11px] text-paper-600">{{ todayTokens }} tokens</p>
+        </div>
+        <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+          <p class="text-xs text-paper-500">今日成本</p>
+          <p class="num mt-1.5 text-2xl font-semibold text-signal-300" translate="no">{{ todayCostText }}</p>
+          <p class="num mt-1 text-[11px] text-paper-600">按量计费 · USD</p>
+        </div>
+        <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+          <p class="text-xs text-paper-500">可用模型</p>
+          <p class="num mt-1.5 text-2xl font-semibold">{{ modelsCount }}</p>
+          <p class="mt-1 text-[11px] text-paper-600">GET /v1/models 查看</p>
+        </div>
+      </template>
+    </section>
 
     <!-- 图表 + 最近请求 -->
     <div class="mt-6 grid grid-cols-1 gap-3 lg:grid-cols-[1.4fr_1fr]">
       <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
         <div class="mb-2 flex items-center justify-between">
           <h2 class="text-sm font-medium text-paper-300">近 30 日请求</h2>
-          <span class="font-mono text-[11px] text-paper-600">usage/stats?group=day</span>
+          <span class="font-mono text-[11px] text-paper-600" translate="no">usage/stats?group=day</span>
         </div>
         <VChart v-if="stats.length" class="h-56" :option="chartOption" autoresize />
-        <div v-else class="flex h-56 items-center justify-center text-[13px] text-paper-600">暂无数据，发起第一次请求后这里会出现图表</div>
+        <div v-else-if="loaded" class="flex h-56 items-center justify-center text-[13px] text-paper-600">暂无数据，发起第一次请求后这里会出现图表</div>
+        <div v-else class="h-56 animate-pulse rounded bg-ink-800" aria-hidden="true" />
       </div>
 
       <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
         <div class="mb-2 flex items-center justify-between">
           <h2 class="text-sm font-medium text-paper-300">最近请求</h2>
-          <router-link to="/console/usage" class="text-xs text-signal-300 hover:text-signal-200">全部 →</router-link>
+          <router-link to="/console/usage" class="text-xs text-signal-300 transition-colors hover:text-signal-200">全部 →</router-link>
         </div>
         <div v-if="recentLogs.length" class="divide-y divide-ink-800">
           <div v-for="l in recentLogs" :key="l.id" class="flex items-center justify-between gap-3 py-2.5">
             <div class="min-w-0">
-              <p class="truncate font-mono text-[12.5px] text-paper-100">{{ l.model }}</p>
-              <p class="num mt-0.5 text-[11px] text-paper-600">{{ l.protocol }} · {{ l.input_tokens }}/{{ l.output_tokens }} tok · {{ l.latency_ms }}ms</p>
+              <p class="truncate font-mono text-[12.5px] text-paper-100" translate="no">{{ l.model }}</p>
+              <p class="num mt-0.5 text-[11px] text-paper-600" translate="no">{{ l.protocol }} · {{ l.input_tokens }}/{{ l.output_tokens }} tok · {{ l.latency_ms }}ms</p>
             </div>
             <div class="flex shrink-0 items-center gap-2">
-              <span class="num text-[12.5px] text-paper-300">${{ fmtCost(l.cost) }}</span>
+              <span class="num text-[12.5px] text-paper-300" translate="no">{{ fmtCost(l.cost) }}</span>
               <Badge :tone="l.status === 'success' ? 'success' : 'error'" />
             </div>
           </div>
         </div>
-        <div v-else class="flex h-48 items-center justify-center text-[13px] text-paper-600">还没有请求记录</div>
+        <div v-else-if="loaded" class="flex h-48 items-center justify-center text-[13px] text-paper-600">还没有请求记录</div>
+        <div v-else class="space-y-3 pt-2" aria-hidden="true">
+          <div v-for="i in 4" :key="i" class="h-8 animate-pulse rounded bg-ink-800" />
+        </div>
       </div>
     </div>
   </div>

web/src/views/console/KeysView.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import client, { unwrap } from '../../api/client'
 import Badge from '../../components/ui/Badge.vue'
 import Button from '../../components/ui/Button.vue'
 import Modal from '../../components/ui/Modal.vue'
 import Input from '../../components/ui/Input.vue'
+import { useToastStore } from '../../stores/toast'
 
 interface APIKey {
   id: number
@@ -17,6 +18,8 @@ interface APIKey {
   created_at: string
 }
 
+const toast = useToastStore()
+
 const keys = ref<APIKey[]>([])
 const loading = ref(false)
 const error = ref('')
@@ -27,6 +30,7 @@ const newName = ref('')
 const creating = ref(false)
 const createdKey = ref('')
 const createError = ref('')
+const nameInput = ref<{ focus: () => void } | null>(null)
 
 // 吊销
 const revokeTarget = ref<APIKey | null>(null)
@@ -48,6 +52,8 @@ async function create() {
   createError.value = ''
   if (!newName.value.trim()) {
     createError.value = '请填写密钥名称'
+    await nextTick()
+    nameInput.value?.focus()
     return
   }
   creating.value = true
@@ -68,10 +74,11 @@ async function revoke() {
   revoking.value = true
   try {
     await unwrap(client.delete(`/keys/${revokeTarget.value.id}`))
+    toast.success(`密钥 ${revokeTarget.value.key_prefix}… 已吊销`)
     revokeTarget.value = null
     await load()
   } catch (e: any) {
-    error.value = e.message || '吊销失败'
+    toast.error(e.message || '吊销失败')
   } finally {
     revoking.value = false
   }
@@ -83,16 +90,20 @@ async function copyKey(text: string) {
   } catch {
     const ta = document.createElement('textarea')
     ta.value = text
+    ta.style.position = 'fixed'
+    ta.style.opacity = '0'
     document.body.appendChild(ta)
     ta.select()
     document.execCommand('copy')
     ta.remove()
   }
+  toast.success('密钥已复制')
 }
 
 onMounted(load)
 
-const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleString('zh-CN', { hour12: false }) : '从未使用')
+const fmtDate = (s: string | null) =>
+  s ? new Intl.DateTimeFormat('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false }).format(new Date(s)) : '从未使用'
 </script>
 
 <template>
@@ -105,34 +116,35 @@ const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleString('zh-CN', {
       <Button @click="showCreate = true">新建密钥</Button>
     </div>
 
-    <p v-if="error" class="mt-4 rounded-md border border-ember-500/40 bg-ember-500/10 px-3 py-2 text-[13px] text-ember-300">{{ error }}</p>
+    <p v-if="error" class="mt-4 rounded-md border border-ember-500/40 bg-ember-500/10 px-3 py-2 text-[13px] text-ember-300" role="alert">{{ error }}</p>
 
     <div class="mt-6 overflow-hidden rounded-lg border border-ink-700">
       <table class="w-full text-left text-[13px]">
+        <caption class="sr-only">API 密钥列表</caption>
         <thead>
           <tr class="border-b border-ink-700 bg-ink-900 text-xs text-paper-500">
-            <th class="px-4 py-3 font-medium">名称</th>
-            <th class="px-4 py-3 font-medium">密钥前缀</th>
-            <th class="px-4 py-3 font-medium">每日限额</th>
-            <th class="px-4 py-3 font-medium">最近使用</th>
-            <th class="px-4 py-3 font-medium">状态</th>
-            <th class="px-4 py-3 text-right font-medium">操作</th>
+            <th scope="col" class="px-4 py-3 font-medium">名称</th>
+            <th scope="col" class="px-4 py-3 font-medium">密钥前缀</th>
+            <th scope="col" class="px-4 py-3 font-medium">每日限额</th>
+            <th scope="col" class="px-4 py-3 font-medium">最近使用</th>
+            <th scope="col" class="px-4 py-3 font-medium">状态</th>
+            <th scope="col" class="px-4 py-3 text-right font-medium">操作</th>
           </tr>
         </thead>
         <tbody class="divide-y divide-ink-800 bg-ink-900/50">
           <tr v-for="k in keys" :key="k.id" class="transition-colors hover:bg-ink-850">
             <td class="px-4 py-3 font-medium text-paper-100">{{ k.name }}</td>
-            <td class="px-4 py-3"><code class="font-mono text-[12.5px] text-signal-300">{{ k.key_prefix }}…</code></td>
-            <td class="num px-4 py-3 text-paper-500">
+            <td class="px-4 py-3"><code class="font-mono text-[12.5px] text-signal-300" translate="no">{{ k.key_prefix }}…</code></td>
+            <td class="num px-4 py-3 text-paper-500" translate="no">
               {{ k.quota_tokens_per_day ? `${(k.quota_tokens_per_day / 1000).toFixed(0)}k tok` : '—' }}
               / {{ k.quota_requests_per_day ? `${k.quota_requests_per_day} req` : '—' }}
             </td>
-            <td class="num px-4 py-3 text-paper-500">{{ fmtDate(k.last_used_at) }}</td>
+            <td class="num px-4 py-3 text-paper-500" translate="no">{{ fmtDate(k.last_used_at) }}</td>
             <td class="px-4 py-3"><Badge :tone="k.status" /></td>
             <td class="px-4 py-3 text-right">
               <button
                 v-if="k.status === 'active'"
-                class="text-xs text-ember-400 transition-colors hover:text-ember-300 cursor-pointer"
+                class="touch-manipulation text-xs text-ember-400 transition-colors hover:text-ember-300 focus-visible:ring-2 focus-visible:ring-ember-400/60 focus:outline-none cursor-pointer"
                 @click="revokeTarget = k"
               >吊销</button>
               <span v-else class="text-xs text-paper-600">已吊销</span>
@@ -140,7 +152,7 @@ const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleString('zh-CN', {
           </tr>
           <tr v-if="!keys.length">
             <td colspan="6" class="px-4 py-12 text-center text-[13px] text-paper-600">
-              还没有密钥 — 点击右上角「新建密钥」创建第一个
+              {{ loading ? '加载中…' : '还没有密钥 — 点击右上角「新建密钥」创建第一个' }}
             </td>
           </tr>
         </tbody>
@@ -150,21 +162,28 @@ const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleString('zh-CN', {
     <!-- 创建模态 -->
     <Modal :open="showCreate" title="新建 API 密钥" @close="showCreate = false">
       <template v-if="!createdKey">
-        <Input v-model="newName" label="密钥名称" placeholder="例如：本地开发" hint="用于在用量明细中区分来源" />
-        <p v-if="createError" class="mt-3 rounded-md border border-ember-500/40 bg-ember-500/10 px-3 py-2 text-[13px] text-ember-300">{{ createError }}</p>
+        <Input
+          ref="nameInput"
+          v-model="newName"
+          label="密钥名称"
+          name="key-name"
+          placeholder="例如：本地开发"
+          hint="用于在用量明细中区分来源"
+          :error="createError || undefined"
+          autocomplete="off"
+          :spellcheck="false"
+          @keydown.enter.prevent="create"
+        />
         <div class="mt-5 flex justify-end gap-2">
           <Button variant="ghost" @click="showCreate = false">取消</Button>
-          <Button :loading="creating" @click="create">创建</Button>
+          <Button :loading="creating" @click="create">创建密钥</Button>
         </div>
       </template>
       <template v-else>
         <p class="text-[13px] leading-relaxed text-paper-500">密钥已生成。出于安全考虑，<span class="text-paper-300">明文只会展示这一次</span>，请立即复制保存。</p>
         <div class="mt-3 flex items-center gap-2 rounded-md border border-mint-500/40 bg-mint-400/10 px-3 py-2.5">
-          <code class="flex-1 break-all font-mono text-[12.5px] text-mint-300">{{ createdKey }}</code>
-          <button
-            class="shrink-0 text-xs text-mint-300 transition-colors hover:text-mint-400 cursor-pointer"
-            @click="copyKey(createdKey)"
-          >复制</button>
+          <code class="min-w-0 flex-1 break-all font-mono text-[12.5px] text-mint-300" translate="no">{{ createdKey }}</code>
+          <Button variant="outline" size="sm" @click="copyKey(createdKey)">复制</Button>
         </div>
         <div class="mt-5 flex justify-end">
           <Button @click="showCreate = false; createdKey = ''">完成</Button>
@@ -175,7 +194,7 @@ const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleString('zh-CN', {
     <!-- 吊销确认 -->
     <Modal :open="!!revokeTarget" title="吊销密钥" @close="revokeTarget = null">
       <p class="text-[13px] leading-relaxed text-paper-500">
-        吊销后 <code class="font-mono text-paper-300">{{ revokeTarget?.key_prefix }}…</code> 将立即失效，使用它的请求会返回 401。此操作不可撤销。
+        吊销后 <code class="font-mono text-paper-300" translate="no">{{ revokeTarget?.key_prefix }}…</code> 将立即失效，使用它的请求会返回 401。此操作不可撤销。
       </p>
       <div class="mt-5 flex justify-end gap-2">
         <Button variant="ghost" @click="revokeTarget = null">取消</Button>

web/src/views/console/UsageView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import client, { unwrap } from '../../api/client'
 import Badge from '../../components/ui/Badge.vue'
 
@@ -17,15 +18,30 @@ interface LogItem {
   created_at: string
 }
 
+const route = useRoute()
+const router = useRouter()
+
 const logs = ref<LogItem[]>([])
 const total = ref(0)
-const page = ref(1)
+const page = ref(Number(route.query.page) || 1)
 const pageSize = 20
-const modelFilter = ref('')
+const modelFilter = ref((route.query.model as string) || '')
 const models = ref<string[]>([])
 const loading = ref(false)
 
 const pages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
+const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+const fmtDate = new Intl.DateTimeFormat('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })
+
+// 筛选/分页同步到 URL（可深链、可分享）
+watch([page, modelFilter], () => {
+  router.replace({
+    query: {
+      ...(modelFilter.value ? { model: modelFilter.value } : {}),
+      ...(page.value > 1 ? { page: String(page.value) } : {}),
+    },
+  })
+})
 
 async function load() {
   loading.value = true
@@ -33,14 +49,10 @@ async function load() {
     const data = await unwrap<{ items: LogItem[]; total: number }>(
       client.get('/usage/logs', { params: { page: page.value, page_size: pageSize, model: modelFilter.value || undefined } }),
     )
-    logs.value = data.items
+    logs.value = data.items ?? []
     total.value = data.total
-    if (!modelFilter.value) {
-      const m = await unwrap<{ items: string[] }>(client.get('/usage/logs', { params: { page_size: 1 } })).catch(() => ({ items: [] }))
-      void m
-    }
   } catch {
-    // ignore
+    // 加载失败静默，空态兜底
   } finally {
     loading.value = false
   }
@@ -58,8 +70,8 @@ onMounted(() => {
   loadModels()
 })
 
-const fmtCost = (n: number) => (n >= 0.01 ? n.toFixed(4) : n.toExponential(2))
-const fmtDate = (s: string) => new Date(s).toLocaleString('zh-CN', { hour12: false })
+const fmtCost = (n: number) => usd.format(n)
+const fmtDateStr = (s: string) => fmtDate.format(new Date(s))
 </script>
 
 <template>
@@ -69,39 +81,43 @@ const fmtDate = (s: string) => new Date(s).toLocaleString('zh-CN', { hour12: fal
         <h1 class="text-xl font-semibold tracking-tight">用量明细</h1>
         <p class="mt-1 text-[13px] text-paper-500">请求级记录 · 按当时价格入账</p>
       </div>
-      <select
-        v-model="modelFilter"
-        class="h-9 rounded-md border border-ink-600 bg-ink-900 px-3 text-[13px] text-paper-300 focus:border-signal-400 focus:outline-none"
-        @change="page = 1; load()"
-      >
-        <option value="">全部模型</option>
-        <option v-for="m in models" :key="m" :value="m">{{ m }}</option>
-      </select>
+      <label class="flex items-center gap-2">
+        <span class="text-xs text-paper-600">模型</span>
+        <select
+          v-model="modelFilter"
+          class="h-9 touch-manipulation rounded-md border border-ink-600 bg-ink-900 px-3 text-[13px] text-paper-300 transition-colors hover:border-ink-700 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none"
+          @change="page = 1; load()"
+        >
+          <option value="">全部模型</option>
+          <option v-for="m in models" :key="m" :value="m" translate="no">{{ m }}</option>
+        </select>
+      </label>
     </div>
 
     <div class="mt-6 overflow-hidden rounded-lg border border-ink-700">
       <table class="w-full text-left text-[13px]">
+        <caption class="sr-only">用量明细记录</caption>
         <thead>
           <tr class="border-b border-ink-700 bg-ink-900 text-xs text-paper-500">
-            <th class="px-4 py-3 font-medium">时间</th>
-            <th class="px-4 py-3 font-medium">模型</th>
-            <th class="px-4 py-3 font-medium">协议</th>
-            <th class="px-4 py-3 text-right font-medium">输入 tok</th>
-            <th class="px-4 py-3 text-right font-medium">输出 tok</th>
-            <th class="px-4 py-3 text-right font-medium">成本</th>
-            <th class="px-4 py-3 text-right font-medium">耗时</th>
-            <th class="px-4 py-3 font-medium">状态</th>
+            <th scope="col" class="px-4 py-3 font-medium">时间</th>
+            <th scope="col" class="px-4 py-3 font-medium">模型</th>
+            <th scope="col" class="px-4 py-3 font-medium">协议</th>
+            <th scope="col" class="px-4 py-3 text-right font-medium">输入 tok</th>
+            <th scope="col" class="px-4 py-3 text-right font-medium">输出 tok</th>
+            <th scope="col" class="px-4 py-3 text-right font-medium">成本</th>
+            <th scope="col" class="px-4 py-3 text-right font-medium">耗时</th>
+            <th scope="col" class="px-4 py-3 font-medium">状态</th>
           </tr>
         </thead>
         <tbody class="divide-y divide-ink-800 bg-ink-900/50">
           <tr v-for="l in logs" :key="l.id" class="transition-colors hover:bg-ink-850">
-            <td class="num px-4 py-3 text-paper-500">{{ fmtDate(l.created_at) }}</td>
-            <td class="px-4 py-3"><code class="font-mono text-[12.5px] text-paper-100">{{ l.model }}</code></td>
-            <td class="px-4 py-3 font-mono text-[12px] text-paper-500">{{ l.protocol }}</td>
-            <td class="num px-4 py-3 text-right text-paper-300">{{ l.input_tokens }}</td>
-            <td class="num px-4 py-3 text-right text-paper-300">{{ l.output_tokens }}</td>
-            <td class="num px-4 py-3 text-right text-signal-300">${{ fmtCost(l.cost) }}</td>
-            <td class="num px-4 py-3 text-right text-paper-500">{{ l.latency_ms }}ms</td>
+            <td class="num px-4 py-3 text-paper-500" translate="no">{{ fmtDateStr(l.created_at) }}</td>
+            <td class="px-4 py-3"><code class="font-mono text-[12.5px] text-paper-100" translate="no">{{ l.model }}</code></td>
+            <td class="px-4 py-3 font-mono text-[12px] text-paper-500" translate="no">{{ l.protocol }}</td>
+            <td class="num px-4 py-3 text-right text-paper-300" translate="no">{{ l.input_tokens }}</td>
+            <td class="num px-4 py-3 text-right text-paper-300" translate="no">{{ l.output_tokens }}</td>
+            <td class="num px-4 py-3 text-right text-signal-300" translate="no">{{ fmtCost(l.cost) }}</td>
+            <td class="num px-4 py-3 text-right text-paper-500" translate="no">{{ l.latency_ms }}ms</td>
             <td class="px-4 py-3"><Badge :tone="l.status === 'success' ? 'success' : 'error'" /></td>
           </tr>
           <tr v-if="!logs.length">
@@ -113,19 +129,21 @@ const fmtDate = (s: string) => new Date(s).toLocaleString('zh-CN', { hour12: fal
 
     <div class="mt-4 flex items-center justify-between">
       <p class="num text-xs text-paper-600">共 {{ total }} 条</p>
-      <div class="flex items-center gap-1.5">
+      <nav aria-label="分页" class="flex items-center gap-1.5">
         <button
-          class="rounded-md border border-ink-600 px-3 py-1.5 text-xs text-paper-300 transition-colors hover:border-signal-400 disabled:opacity-40 cursor-pointer disabled:cursor-default"
+          class="touch-manipulation rounded-md border border-ink-600 px-3 py-1.5 text-xs text-paper-300 transition-colors hover:border-signal-400 disabled:opacity-40 cursor-pointer disabled:cursor-default focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none"
           :disabled="page <= 1"
+          :aria-label="`上一页，当前第 ${page} 页`"
           @click="page--; load()"
         >上一页</button>
-        <span class="num px-2 text-xs text-paper-500">{{ page }} / {{ pages }}</span>
+        <span class="num px-2 text-xs text-paper-500" aria-current="page">第 {{ page }} / {{ pages }} 页</span>
         <button
-          class="rounded-md border border-ink-600 px-3 py-1.5 text-xs text-paper-300 transition-colors hover:border-signal-400 disabled:opacity-40 cursor-pointer disabled:cursor-default"
+          class="touch-manipulation rounded-md border border-ink-600 px-3 py-1.5 text-xs text-paper-300 transition-colors hover:border-signal-400 disabled:opacity-40 cursor-pointer disabled:cursor-default focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none"
           :disabled="page >= pages"
+          :aria-label="`下一页，当前第 ${page} 页`"
           @click="page++; load()"
         >下一页</button>
-      </div>
+      </nav>
     </div>
   </div>
 </template>