From 7c4e80afacf1738191a4ddd6424cb162e01c4fd0 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Sun, 16 Aug 2026 04:31:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF:=20=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=20+=20=E6=A8=A1=E5=9E=8B=E5=AE=9A?=
 =?UTF-8?q?=E4=BB=B7=E6=89=8B=E5=8A=A8=E6=B7=BB=E5=8A=A0=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 表格加 min-w 窄屏横向滚动; 弹窗/资料网格窄屏换列; 顶栏/头部防溢出
- 渠道页移动卡片化、其余页面头部换行、Toast 自适应宽
- 模型定价页顶部加快捷输入(模型名直接进创建弹窗), 接口导入不全可手动补

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/layout/ShellLayout.vue | 16 +++++-----
 web/src/components/ui/ToastHost.vue       |  2 +-
 web/src/views/LandingView.vue             | 10 +++---
 web/src/views/admin/ModelsView.vue        | 26 +++++++++++----
 web/src/views/admin/UsageView.vue         |  2 +-
 web/src/views/admin/UsersView.vue         | 12 +++----
 web/src/views/console/KeysView.vue        |  6 ++--
 web/src/views/console/SettingsView.vue    | 39 +++++++++++++++++++----
 web/src/views/console/UsageView.vue       |  2 +-
 9 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/web/src/components/layout/ShellLayout.vue b/web/src/components/layout/ShellLayout.vue
index 52a6d68..45d934a 100644
--- a/web/src/components/layout/ShellLayout.vue
+++ b/web/src/components/layout/ShellLayout.vue
@@ -117,24 +117,24 @@ async function logout() {
     </aside>
 
     <div class="flex min-h-[100dvh] flex-1 flex-col md:ml-56">
-      <header class="flex h-14 items-center justify-between border-b border-edge px-4 md:px-6">
-        <div class="flex items-center gap-2">
+      <header class="flex h-14 items-center justify-between gap-2 border-b border-edge px-4 md:px-6">
+        <div class="flex min-w-0 items-center gap-2">
           <button
-            class="rounded-md p-1.5 text-muted hover:bg-surface2 hover:text-ink md:hidden"
+            class="shrink-0 rounded-md p-1.5 text-muted hover:bg-surface2 hover:text-ink md:hidden"
             aria-label="打开菜单"
             @click="sidebarOpen = true"
           >
             <PhList :size="20" />
           </button>
-          <span class="font-mono text-xs text-muted">{{ auth.user?.username }}</span>
+          <span class="truncate font-mono text-xs text-muted">{{ auth.user?.username }}</span>
         </div>
-        <div class="flex items-center gap-3">
-          <span class="mono-num rounded-md border border-edge bg-surface px-2.5 py-1 text-xs text-accent">
-            余额 {{ balance }}
+        <div class="flex shrink-0 items-center gap-1.5 md:gap-3">
+          <span class="mono-num rounded-md border border-edge bg-surface px-2 py-1 text-xs text-accent sm:px-2.5">
+            <span class="hidden sm:inline">余额 </span>{{ balance }}
           </span>
           <ThemeToggle />
           <button
-            class="rounded-md px-2 py-1 text-xs text-muted transition hover:bg-surface2 hover:text-ink"
+            class="rounded-md px-1.5 py-1 text-xs text-muted transition hover:bg-surface2 hover:text-ink md:px-2"
             @click="logout"
           >
             退出
diff --git a/web/src/components/ui/ToastHost.vue b/web/src/components/ui/ToastHost.vue
index 4a09d3a..2183ac2 100644
--- a/web/src/components/ui/ToastHost.vue
+++ b/web/src/components/ui/ToastHost.vue
@@ -4,7 +4,7 @@ const toast = useToastStore()
 </script>
 
 <template>
-  <div class="fixed right-4 bottom-4 z-[80] flex w-80 flex-col gap-2" aria-live="polite">
+  <div class="fixed right-4 bottom-4 z-[80] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2" aria-live="polite">
     <TransitionGroup
       enter-active-class="transition-all duration-200"
       enter-from-class="translate-y-1 opacity-0"
diff --git a/web/src/views/LandingView.vue b/web/src/views/LandingView.vue
index 28711cd..934d79a 100644
--- a/web/src/views/LandingView.vue
+++ b/web/src/views/LandingView.vue
@@ -13,22 +13,22 @@ const auth = useAuthStore()
           <img src="/favicon.svg" alt="" class="size-5" />
           <span class="text-sm font-semibold tracking-tight">openteam</span>
         </div>
-        <nav class="flex items-center gap-2">
+        <nav class="flex items-center gap-1.5 sm:gap-2">
           <ThemeToggle />
           <router-link
             v-if="!auth.isAuthed"
             to="/login"
-            class="rounded-md px-3 py-1.5 text-sm text-muted transition hover:text-ink"
+            class="rounded-md px-2.5 py-1.5 text-sm text-muted transition hover:text-ink sm:px-3"
           >
             登录
           </router-link>
-          <router-link v-else to="/console/dashboard" class="rounded-md px-3 py-1.5 text-sm text-muted transition hover:text-ink">
+          <router-link v-else to="/console/dashboard" class="rounded-md px-2.5 py-1.5 text-sm text-muted transition hover:text-ink sm:px-3">
             控制台
           </router-link>
           <router-link
             v-if="!auth.isAuthed"
             to="/register"
-            class="rounded-md bg-accent px-3.5 py-1.5 text-sm font-medium text-accent-ink transition hover:bg-accent-strong"
+            class="rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-accent-ink transition hover:bg-accent-strong sm:px-3.5"
           >
             免费注册
           </router-link>
@@ -42,7 +42,7 @@ const auth = useAuthStore()
       <div class="mx-auto grid max-w-6xl items-center gap-10 px-4 pt-20 pb-16 lg:grid-cols-2 lg:pt-24">
         <div class="max-w-xl">
           <p class="mb-3 font-mono text-xs tracking-wide text-accent">LLM API 中转网关</p>
-          <h1 class="text-4xl leading-none font-semibold tracking-tight md:text-5xl">
+          <h1 class="text-3xl leading-tight font-semibold tracking-tight sm:text-4xl md:text-5xl">
             一个 Key，调用所有主流模型
           </h1>
           <p class="mt-5 max-w-md text-base leading-relaxed text-muted">
diff --git a/web/src/views/admin/ModelsView.vue b/web/src/views/admin/ModelsView.vue
index 262d0e4..9625575 100644
--- a/web/src/views/admin/ModelsView.vue
+++ b/web/src/views/admin/ModelsView.vue
@@ -15,6 +15,12 @@ const summary = ref<ModelSummary>({ total: 0, unpriced: 0, missing: [], denied_c
 const editOpen = ref(false)
 const editing = ref<Model | null>(null)
 const saving = ref(false)
+const quickName = ref('')
+
+function quickAdd() {
+  openCreate()
+  if (quickName.value) form.name = quickName.value.trim()
+}
 
 const bindOpen = ref(false)
 const bindModel = ref<Model | null>(null)
@@ -129,12 +135,20 @@ onMounted(load)
 
 <template>
   <div class="mx-auto max-w-6xl">
-    <div class="mb-6 flex items-center justify-between">
+    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
       <div>
         <h1 class="text-lg font-semibold">模型与定价</h1>
-        <p class="text-sm text-muted">价格按每百万 token (USD)，历史用量按当时价格入账</p>
+        <p class="text-sm text-muted">接口导入不全时可直接输入模型名添加，如 glm-4.7-flash</p>
+      </div>
+      <div class="flex w-full gap-2 sm:w-auto">
+        <input
+          v-model="quickName"
+          placeholder="模型名，如 glm-4.7-flash"
+          class="h-10 min-w-0 flex-1 rounded-md border border-edge2 bg-surface px-3 font-mono text-xs outline-none focus:border-accent sm:w-52 sm:flex-none"
+          @keyup.enter="quickAdd"
+        />
+        <Button class="shrink-0" @click="quickAdd">添加模型</Button>
       </div>
-      <Button @click="openCreate">添加模型</Button>
     </div>
 
     <!-- 一致性提示：渠道提供的未禁止模型应全部纳入定价 -->
@@ -151,14 +165,14 @@ onMounted(load)
 
     <div class="space-y-3">
       <div v-for="m in models" :key="m.id" class="card">
-        <div class="flex items-center justify-between px-4 py-3">
+        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3">
           <div class="flex flex-wrap items-center gap-2">
             <span class="font-mono text-sm text-ink">{{ m.name }}</span>
             <Badge :variant="m.enabled ? 'ok' : 'neutral'">{{ m.enabled ? '启用' : '停用' }}</Badge>
             <Badge v-if="m.denied" variant="err">已禁止</Badge>
             <Badge v-if="m.needs_pricing" variant="warn">未定价</Badge>
           </div>
-          <div class="flex items-center gap-3">
+          <div class="flex flex-wrap items-center gap-3">
             <span class="mono-num text-xs text-muted">入 {{ m.input_price }}</span>
             <span class="mono-num text-xs text-muted">出 {{ m.output_price }}</span>
             <span class="mono-num text-xs text-muted">缓存读 {{ m.cache_read_price }}</span>
@@ -197,7 +211,7 @@ onMounted(load)
       <div class="space-y-4">
         <Input v-model="form.name" label="模型名" placeholder="claude-sonnet-5" :disabled="!!editing" />
         <Input v-model="form.display_name" label="展示名" />
-        <div class="grid grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <Input v-model="form.input_price" label="输入价格 /1M" type="number" />
           <Input v-model="form.output_price" label="输出价格 /1M" type="number" />
           <Input v-model="form.cache_read_price" label="缓存读价格 /1M" type="number" />
diff --git a/web/src/views/admin/UsageView.vue b/web/src/views/admin/UsageView.vue
index 3074148..abf3cf3 100644
--- a/web/src/views/admin/UsageView.vue
+++ b/web/src/views/admin/UsageView.vue
@@ -60,7 +60,7 @@ onMounted(load)
 
     <div class="card">
       <div class="overflow-x-auto">
-        <table class="w-full text-sm">
+        <table class="w-full text-sm min-w-[760px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">
               <th scope="col" class="px-4 py-2.5 font-medium">用户</th>
diff --git a/web/src/views/admin/UsersView.vue b/web/src/views/admin/UsersView.vue
index c90ebe8..88ca0ed 100644
--- a/web/src/views/admin/UsersView.vue
+++ b/web/src/views/admin/UsersView.vue
@@ -123,25 +123,25 @@ onMounted(load)
 
 <template>
   <div class="mx-auto max-w-6xl">
-    <div class="mb-6 flex items-center justify-between">
+    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
       <div>
         <h1 class="text-lg font-semibold">用户</h1>
         <p class="text-sm text-muted">管理角色、状态与余额</p>
       </div>
-      <div class="flex gap-2">
+      <div class="flex w-full gap-2 sm:w-auto">
         <input
           v-model="q"
           placeholder="搜索用户名 / 邮箱"
-          class="h-10 w-56 rounded-md border border-edge2 bg-surface px-3 text-sm outline-none focus:border-accent"
+          class="h-10 min-w-0 flex-1 rounded-md border border-edge2 bg-surface px-3 text-sm outline-none focus:border-accent sm:w-56 sm:flex-none"
           @keyup.enter="search"
         />
-        <Button variant="ghost" @click="search">搜索</Button>
+        <Button variant="ghost" class="shrink-0" @click="search">搜索</Button>
       </div>
     </div>
 
     <div class="card">
       <div class="overflow-x-auto">
-        <table class="w-full text-sm">
+        <table class="w-full text-sm min-w-[720px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">
               <th scope="col" class="px-4 py-2.5 font-medium">ID</th>
@@ -225,7 +225,7 @@ onMounted(load)
           placeholder="逗号分隔"
           hint="黑名单优先"
         />
-        <div class="grid grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <label class="block">
             <span class="mb-1.5 block text-xs font-medium text-muted">角色</span>
             <select v-model="editForm.role" class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 text-sm text-ink outline-none focus:border-accent">
diff --git a/web/src/views/console/KeysView.vue b/web/src/views/console/KeysView.vue
index b7c32f1..f0230f3 100644
--- a/web/src/views/console/KeysView.vue
+++ b/web/src/views/console/KeysView.vue
@@ -150,7 +150,7 @@ onMounted(load)
 
     <div class="card">
       <div class="overflow-x-auto">
-        <table class="w-full text-sm">
+        <table class="w-full text-sm min-w-[520px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">
               <th scope="col" class="px-4 py-2.5 font-medium">名称</th>
@@ -202,7 +202,7 @@ onMounted(load)
             {{ advOpen ? '收起' : '展开' }}高级选项（配额 / 白名单）
           </button>
           <div v-if="advOpen" class="mt-3 space-y-4">
-            <div class="grid grid-cols-2 gap-3">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <Input v-model="createAdv.quota_tokens_per_day" label="每日 Token 上限" placeholder="如 100000" />
               <Input v-model="createAdv.quota_requests_per_day" label="每日请求上限" placeholder="如 1000" />
             </div>
@@ -220,7 +220,7 @@ onMounted(load)
     <Modal :open="editOpen" :title="`编辑密钥 · ${editing?.name}`" @close="editOpen = false">
       <div class="space-y-4">
         <Input v-model="editForm.name" label="名称" />
-        <div class="grid grid-cols-2 gap-3">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <Input v-model="editForm.quota_tokens_per_day" label="每日 Token 上限" placeholder="留空则不修改" />
           <Input v-model="editForm.quota_requests_per_day" label="每日请求上限" placeholder="留空则不修改" />
         </div>
diff --git a/web/src/views/console/SettingsView.vue b/web/src/views/console/SettingsView.vue
index 3807507..e0213bd 100644
--- a/web/src/views/console/SettingsView.vue
+++ b/web/src/views/console/SettingsView.vue
@@ -15,6 +15,22 @@ const toast = useToastStore()
 
 const passkeys = ref<{ id: number; name: string; created_at: string }[]>([])
 const binding = ref(false)
+const passkeyName = ref('')
+
+// 按 UA 推断设备名，方便多设备区分
+function detectPlatform(): string {
+  const ua = navigator.userAgent || ''
+  if (/iPhone|iPad|iPod/.test(ua)) return 'iPhone'
+  if (/Android/.test(ua)) return 'Android'
+  if (/Windows/.test(ua)) return 'Windows'
+  if (/Macintosh|Mac OS/.test(ua)) return 'Mac'
+  if (/Linux/.test(ua)) return 'Linux'
+  return 'Passkey'
+}
+
+function usePasskeyName(): string {
+  return passkeyName.value.trim() || detectPlatform()
+}
 
 async function loadPasskeys() {
   try {
@@ -36,10 +52,11 @@ async function bindPasskey() {
     const credential = await registerPasskey(data.data.creation)
     await http.post('/webauthn/register/complete', {
       challenge: data.data.challenge,
-      name: 'passkey',
+      name: usePasskeyName(),
       credential,
     })
     toast.ok('Passkey 已绑定')
+    passkeyName.value = ''
     await loadPasskeys()
   } catch (e) {
     toast.err(errMsg(e))
@@ -97,7 +114,7 @@ async function changePassword() {
 
     <div class="card p-5">
       <h2 class="mb-4 text-sm font-semibold">个人资料</h2>
-      <dl class="grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
+      <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4 text-sm">
         <div>
           <dt class="text-xs text-muted">用户名</dt>
           <dd class="mt-1 text-ink">{{ auth.user?.username }}</dd>
@@ -132,12 +149,20 @@ async function changePassword() {
     </div>
 
     <div class="card p-5">
-      <div class="mb-3 flex items-center justify-between">
+      <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
         <h2 class="text-sm font-semibold">Passkey 登录</h2>
-        <Button size="sm" :loading="binding" @click="bindPasskey">
-          <PhFingerprint :size="14" />
-          绑定 Passkey
-        </Button>
+        <div class="flex items-center gap-2">
+          <input
+            v-model="passkeyName"
+            placeholder="设备名，如 iPhone"
+            class="h-8 w-32 rounded-md border border-edge2 bg-surface px-2 text-xs outline-none focus:border-accent"
+            @keyup.enter="bindPasskey"
+          />
+          <Button size="sm" :loading="binding" @click="bindPasskey">
+            <PhFingerprint :size="14" />
+            绑定
+          </Button>
+        </div>
       </div>
       <p class="mb-3 text-xs text-muted">用生物识别或系统 PIN 免密登录。需要 HTTPS 或 localhost 环境。</p>
       <ul v-if="passkeys.length" class="divide-y divide-edge">
diff --git a/web/src/views/console/UsageView.vue b/web/src/views/console/UsageView.vue
index 1505583..7bfe26a 100644
--- a/web/src/views/console/UsageView.vue
+++ b/web/src/views/console/UsageView.vue
@@ -108,7 +108,7 @@ onMounted(load)
         />
       </div>
       <div class="overflow-x-auto">
-        <table class="w-full text-sm">
+        <table class="w-full text-sm min-w-[640px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">
               <th scope="col" class="px-4 py-2.5 font-medium">模型</th>