From faf38e2fd32b93468fc9a99b372d2433ad78ec03 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Fri, 28 Aug 2026 20:12:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E4=BB=AA=E8=A1=A8=E7=9B=98=E6=A8=AA=E5=90=91=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

375px 视口下页面被撑到 763px：快速开始卡片的 curl 示例 <pre>
固有宽度沿 flex/grid 链层层撑破祖先（子项默认 min-width:auto
不可收缩，overflow-x-auto 形同虚设）。

- ShellLayout：flex-1 容器与 main 加 min-w-0 切断宽度传播（所有页面受益）
- DashboardView：快速开始卡片各块加 min-w-0，pre 的边框/背景
  移入 overflow-hidden 容器、自身横滚

Playwright 实测 375px 视口滚动宽度 763 → 375，与视口齐平
---
 web/src/components/layout/ShellLayout.vue |  4 ++--
 web/src/views/console/DashboardView.vue   | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/layout/ShellLayout.vue b/web/src/components/layout/ShellLayout.vue
index 45d934a..fbd5217 100644
--- a/web/src/components/layout/ShellLayout.vue
+++ b/web/src/components/layout/ShellLayout.vue
@@ -116,7 +116,7 @@ async function logout() {
       </div>
     </aside>
 
-    <div class="flex min-h-[100dvh] flex-1 flex-col md:ml-56">
+    <div class="flex min-h-[100dvh] min-w-0 flex-1 flex-col md:ml-56">
       <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
@@ -142,7 +142,7 @@ async function logout() {
         </div>
       </header>
 
-      <main class="flex-1 px-4 py-6 md:px-6">
+      <main class="min-w-0 flex-1 px-4 py-6 md:px-6">
         <router-view />
       </main>
     </div>
diff --git a/web/src/views/console/DashboardView.vue b/web/src/views/console/DashboardView.vue
index 6142b74..767b1bc 100644
--- a/web/src/views/console/DashboardView.vue
+++ b/web/src/views/console/DashboardView.vue
@@ -145,14 +145,14 @@ onMounted(load)
     </div>
 
     <!-- 快速开始 -->
-    <div class="card p-5">
+    <div class="card min-w-0 p-5">
       <div class="mb-4">
         <h2 class="text-sm font-semibold">快速开始</h2>
         <p class="text-xs text-muted">通过兼容端点接入，OpenAI / Anthropic 协议自动转换</p>
       </div>
 
       <div class="space-y-4">
-        <div>
+        <div class="min-w-0">
           <p class="mb-1.5 text-[11px] font-medium text-muted">Base URL</p>
           <div class="flex items-center gap-2">
             <code class="min-w-0 flex-1 overflow-x-auto rounded-md border border-edge bg-surface px-3 py-2 font-mono text-xs whitespace-nowrap text-ink">{{ baseURL }}</code>
@@ -162,7 +162,7 @@ onMounted(load)
           </div>
         </div>
 
-        <div>
+        <div class="min-w-0">
           <p class="mb-1.5 text-[11px] font-medium text-muted">兼容</p>
           <div class="flex flex-wrap gap-1.5">
             <Badge variant="neutral">messages</Badge>
@@ -171,10 +171,10 @@ onMounted(load)
           </div>
         </div>
 
-        <div>
+        <div class="min-w-0">
           <p class="mb-1.5 text-[11px] font-medium text-muted">curl 示例</p>
-          <div class="relative">
-            <pre class="overflow-x-auto rounded-md border border-edge bg-surface px-3 py-2.5 pr-20 font-mono text-[11px] leading-relaxed text-ink">{{ curlCmd }}</pre>
+          <div class="min-w-0 overflow-hidden rounded-md border border-edge bg-surface">
+            <pre class="overflow-x-auto px-3 py-2.5 pr-20 font-mono text-[11px] leading-relaxed text-ink">{{ curlCmd }}</pre>
             <Button size="sm" variant="ghost" class="absolute top-2 right-2" @click="copy(curlCmd, 'curl')">
               {{ copied === 'curl' ? '已复制' : '复制' }}
             </Button>