From 75c8ecd519cfbcc1148f9ea79a8a309a518991a0 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Mon, 19 Oct 2026 09:25:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=97=E8=A1=A8=E9=A1=B5=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E4=B8=8E=E8=A1=A8=E6=A0=BC=E7=9A=84=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E7=82=B9=E6=8A=AC=E5=88=B0=20lg=EF=BC=8C=E8=A1=A5=E4=B8=8A?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E7=9A=84=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

手机上"溢出屏幕"的两个真因（375 / 769 / 1100 三档实测）：

- 卡片↔表格切换卡在 md(768px)，而侧栏也在 768 出现，吃掉 224px 加 48px 内边距后
  内容区只剩 495px，渠道表自然宽 1097px —— 横屏手机、小平板、分屏（768~1023）
  整张表被塞进 495px 的盒子里横向滚。改为 lg(1024px) 起才用表格；769px 实测
  可见表格数为 0、docSW 等于视口宽。
- 用户管理页只有 720px 的表格、没有卡片回退，手机上只能横向滑整张表。
  补移动端卡片（用户名/邮箱、角色与状态、ID/余额/注册时间、编辑与调余额），
  表格改 hidden lg:block；1100px 实测 client=826 / scroll=826，铺满不滚。
- 顺带修掉上次改动留下的挤列问题：渠道表"近N小时"列被表格自动布局压到 95px
  （min-w 只约束整表、不保证单列），四个指标折成 4 行。该列加 min-w-[190px]、
  指标拆两行，并把 Key 并入名称行、启用并入健康行，8 列减到 6 列
  （colspan 同步 7→6），自然宽 1125 → 1053。

编辑渠道弹窗 375px 下无溢出元素。遗留：渠道表在 1024~1325 视口仍需容器内横向滚动
（6 列数据表的固有行为，不动整页），卡片列表在 640~1023 仍是单列。
---
 web/src/views/admin/ChannelsView.vue | 42 ++++++++++++-------------
 web/src/views/admin/UsageView.vue    |  4 +--
 web/src/views/admin/UsersView.vue    | 47 +++++++++++++++++++++++++++-
 web/src/views/console/KeysView.vue   |  4 +--
 web/src/views/console/UsageView.vue  |  4 +--
 5 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/web/src/views/admin/ChannelsView.vue b/web/src/views/admin/ChannelsView.vue
index f2f33d2..b2a8cf5 100644
--- a/web/src/views/admin/ChannelsView.vue
+++ b/web/src/views/admin/ChannelsView.vue
@@ -219,7 +219,7 @@ onMounted(load)
     </div>
 
     <!-- 移动端：卡片列表 -->
-    <div class="space-y-3 md:hidden">
+    <div class="space-y-3 lg:hidden">
       <div v-for="{ ch, st } in rows" :key="ch.id" class="card p-4" :class="ch.enabled ? 'bg-accent-soft' : ''">
         <div class="flex flex-wrap items-start justify-between gap-2">
           <div class="min-w-0">
@@ -291,30 +291,29 @@ onMounted(load)
       </p>
     </div>
 
-    <!-- 桌面端：表格 -->
-    <div class="card hidden md:block">
+    <!-- 桌面端：表格（lg 起才显示：md 断点下侧栏一出现内容区只剩 ~495px，表格会被挤成横向滚动） -->
+    <div class="card hidden lg:block">
       <div class="overflow-x-auto">
-        <table class="w-full text-sm min-w-[920px]">
+        <table class="w-full text-sm min-w-[860px]">
           <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>
+              <th scope="col" class="px-4 py-2.5 font-medium">名称 / Key</th>
               <th scope="col" class="px-4 py-2.5 font-medium">API 格式</th>
               <th scope="col" class="px-4 py-2.5 font-medium">Base URL</th>
-              <th scope="col" class="px-4 py-2.5 font-medium">Key</th>
-              <th scope="col" class="px-4 py-2.5 font-medium">健康</th>
-              <th scope="col" class="px-4 py-2.5 font-medium">启用</th>
-              <th scope="col" class="px-4 py-2.5 font-medium">近{{ statWindows.find((w) => w.v === statWindow)?.label }}</th>
+              <th scope="col" class="px-4 py-2.5 font-medium">健康 / 状态</th>
+              <th scope="col" class="min-w-[190px] px-4 py-2.5 font-medium">近{{ statWindows.find((w) => w.v === statWindow)?.label }}</th>
               <th scope="col" class="px-4 py-2.5" />
             </tr>
           </thead>
           <tbody>
             <template v-for="{ ch, st } in rows" :key="ch.id">
             <tr class="table-row" :style="ch.enabled ? { borderLeft: '2px solid var(--color-accent)' } : {}">
-              <td class="px-4 py-2.5">
-                <button class="inline-flex items-center gap-1.5 text-ink transition hover:text-accent" @click="toggleDrawer(ch)">
+              <td class="max-w-[240px] px-4 py-2.5">
+                <button class="flex items-center gap-1.5 text-left text-ink transition hover:text-accent" @click="toggleDrawer(ch)">
                   <span class="truncate">{{ ch.name }}</span>
                   <PhCaretDown :size="12" class="shrink-0 text-muted transition-transform" :class="expandedId === ch.id ? 'rotate-180' : ''" />
                 </button>
+                <p class="mt-0.5 truncate font-mono text-[11px] text-muted">{{ ch.api_key_masked || '****' }}</p>
               </td>
               <td class="px-4 py-2.5">
                 <div class="flex flex-col gap-0.5">
@@ -325,26 +324,27 @@ onMounted(load)
                   >{{ protocolShort(f) }}</code>
                 </div>
               </td>
-              <td class="max-w-[220px] truncate px-4 py-2.5 font-mono text-xs text-muted">{{ ch.base_url }}</td>
-              <td class="px-4 py-2.5 font-mono text-xs text-muted">{{ ch.api_key_masked || '****' }}</td>
+              <td class="max-w-[200px] truncate px-4 py-2.5 font-mono text-xs text-muted">{{ ch.base_url }}</td>
               <td class="px-4 py-2.5">
-                <Badge :variant="ch.health_status === 'healthy' ? 'ok' : ch.health_status === 'cooldown' ? 'err' : 'warn'">
-                  {{ ch.health_status }}
-                </Badge>
+                <div class="flex flex-wrap items-center gap-1">
+                  <Badge :variant="ch.health_status === 'healthy' ? 'ok' : ch.health_status === 'cooldown' ? 'err' : 'warn'">
+                    {{ ch.health_status }}
+                  </Badge>
+                  <Badge :variant="ch.enabled ? 'neutral' : 'err'">{{ ch.enabled ? '启用' : '停用' }}</Badge>
+                </div>
                 <div
                   v-if="runtimeHint(ch)"
                   class="mt-1 font-mono text-[11px]"
                   :class="ch.cooldown_seconds > 0 ? 'text-err' : 'text-warn'"
                 >{{ runtimeHint(ch) }}</div>
               </td>
-              <td class="px-4 py-2.5 text-xs text-muted">{{ ch.enabled ? '是' : '否' }}</td>
               <td class="px-4 py-2.5">
                 <div v-if="st" class="flex flex-col gap-0.5 text-[11px] leading-4 text-muted">
                   <span class="mono-num">
                     {{ st.requests }} 次 ·
-                    <span :class="st.err_rate > 0.05 ? 'text-err' : ''">成功 {{ successRate(st) }}</span> ·
-                    P95 {{ fmtMs(st.p95_ms, st.success > 0) }} · {{ fmtCost(st.cost) }}
+                    <span :class="st.err_rate > 0.05 ? 'text-err' : ''">成功 {{ successRate(st) }}</span>
                   </span>
+                  <span class="mono-num">P95 {{ fmtMs(st.p95_ms, st.success > 0) }} · {{ fmtCost(st.cost) }}</span>
                   <span v-if="st.top_errors.length" class="font-mono text-[10px] text-err">
                     {{ st.top_errors.map((e) => `${e.code}×${e.count}`).join(' ') }}
                   </span>
@@ -378,13 +378,13 @@ onMounted(load)
               </td>
             </tr>
             <tr v-if="expandedId === ch.id" class="bg-surface/40">
-              <td colspan="7" class="px-4 py-3">
+              <td colspan="6" class="px-4 py-3">
                 <ChannelModelsDrawer :channel="ch" />
               </td>
             </tr>
             </template>
             <tr v-if="channels.length === 0">
-              <td colspan="7" class="px-4 py-10 text-center text-sm text-muted">还没有渠道，点击「添加渠道」</td>
+              <td colspan="6" class="px-4 py-10 text-center text-sm text-muted">还没有渠道，点击「添加渠道」</td>
             </tr>
           </tbody>
         </table>
diff --git a/web/src/views/admin/UsageView.vue b/web/src/views/admin/UsageView.vue
index 24f8574..47f077b 100644
--- a/web/src/views/admin/UsageView.vue
+++ b/web/src/views/admin/UsageView.vue
@@ -135,7 +135,7 @@ onMounted(load)
 
     <div class="card">
       <!-- 移动端：卡片列表 -->
-      <div class="space-y-3 p-3 md:hidden">
+      <div class="space-y-3 p-3 lg:hidden">
         <div v-for="l in logs" :key="l.id" class="card p-3">
           <div class="flex items-start justify-between gap-2">
             <div class="min-w-0">
@@ -159,7 +159,7 @@ onMounted(load)
       </div>
 
       <!-- 桌面端：表格 -->
-      <div class="hidden overflow-x-auto md:block">
+      <div class="hidden overflow-x-auto lg:block">
         <table class="w-full text-sm min-w-[760px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">
diff --git a/web/src/views/admin/UsersView.vue b/web/src/views/admin/UsersView.vue
index 88ca0ed..2ca73fb 100644
--- a/web/src/views/admin/UsersView.vue
+++ b/web/src/views/admin/UsersView.vue
@@ -140,7 +140,52 @@ onMounted(load)
     </div>
 
     <div class="card">
-      <div class="overflow-x-auto">
+      <!-- 移动端：卡片列表（这页原本只有表格，手机上得横向滑动整个 720px 表格） -->
+      <div class="space-y-3 p-3 lg:hidden">
+        <div v-for="u in users" :key="u.id" class="card p-3">
+          <div class="flex items-start justify-between gap-2">
+            <div class="min-w-0">
+              <p class="truncate text-sm font-medium text-ink">
+                {{ u.username }}
+                <span v-if="u.id === auth.user?.id" class="text-[11px] text-muted">(我)</span>
+              </p>
+              <p class="truncate font-mono text-xs text-muted">{{ u.email }}</p>
+            </div>
+            <div class="flex shrink-0 flex-col items-end gap-1">
+              <Badge :variant="u.role === 'admin' ? 'accent' : 'neutral'">{{ u.role }}</Badge>
+              <Badge :variant="u.status === 'active' ? 'ok' : 'warn'">{{ u.status }}</Badge>
+            </div>
+          </div>
+          <div class="mt-2.5 space-y-1.5 text-xs">
+            <p class="flex items-baseline justify-between gap-3">
+              <span class="shrink-0 text-muted">ID</span>
+              <span class="mono-num text-ink">{{ u.id }}</span>
+            </p>
+            <p class="flex items-baseline justify-between gap-3">
+              <span class="shrink-0 text-muted">余额</span>
+              <span class="mono-num text-accent">{{ fmtMoney(u.balance) }}</span>
+            </p>
+            <p class="flex items-baseline justify-between gap-3">
+              <span class="shrink-0 text-muted">注册时间</span>
+              <span class="mono-num truncate text-ink">{{ fmtTime(u.created_at) }}</span>
+            </p>
+          </div>
+          <div class="mt-2.5 flex gap-2 border-t border-edge pt-2.5">
+            <Button size="sm" variant="ghost" class="flex-1" @click="openEdit(u)">
+              <PhNotePencil :size="13" weight="bold" />
+              编辑
+            </Button>
+            <Button size="sm" variant="ghost" class="flex-1" @click="openBalance(u)">
+              <PhCoins :size="13" />
+              调余额
+            </Button>
+          </div>
+        </div>
+        <p v-if="users.length === 0" class="px-4 py-8 text-center text-sm text-muted">无用户</p>
+      </div>
+
+      <!-- 桌面端：表格 -->
+      <div class="hidden overflow-x-auto lg:block">
         <table class="w-full text-sm min-w-[720px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">
diff --git a/web/src/views/console/KeysView.vue b/web/src/views/console/KeysView.vue
index 93083d2..7054e36 100644
--- a/web/src/views/console/KeysView.vue
+++ b/web/src/views/console/KeysView.vue
@@ -157,7 +157,7 @@ onMounted(load)
 
     <div class="card">
       <!-- 移动端：卡片列表 -->
-      <div class="space-y-3 p-3 md:hidden">
+      <div class="space-y-3 p-3 lg:hidden">
         <div v-for="k in keys" :key="k.id" class="card p-3">
           <div class="flex items-center justify-between gap-2">
             <div class="min-w-0">
@@ -196,7 +196,7 @@ onMounted(load)
       </div>
 
       <!-- 桌面端：表格 -->
-      <div class="hidden overflow-x-auto md:block">
+      <div class="hidden overflow-x-auto lg:block">
         <table class="w-full text-sm min-w-[680px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">
diff --git a/web/src/views/console/UsageView.vue b/web/src/views/console/UsageView.vue
index ce624e0..645d028 100644
--- a/web/src/views/console/UsageView.vue
+++ b/web/src/views/console/UsageView.vue
@@ -109,7 +109,7 @@ onMounted(load)
       </div>
 
       <!-- 移动端：卡片列表 -->
-      <div class="space-y-3 p-3 md:hidden">
+      <div class="space-y-3 p-3 lg:hidden">
         <div v-for="l in logs" :key="l.id" class="card p-3">
           <div class="flex items-start justify-between gap-2">
             <div class="min-w-0">
@@ -131,7 +131,7 @@ onMounted(load)
       </div>
 
       <!-- 桌面端：表格 -->
-      <div class="hidden overflow-x-auto md:block">
+      <div class="hidden overflow-x-auto lg:block">
         <table class="w-full text-sm min-w-[640px]">
           <thead>
             <tr class="border-b border-edge text-left text-xs text-muted">