From 1a8b3fbaabb62c4157d5c95acbbe5e118f551a74 Mon Sep 17 00:00:00 2001
From: yuzhiran-dev <dev@yuzhiran.com>
Date: Mon, 18 May 2026 11:47:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20PC=20=E7=AB=AF=E5=85=A8=E7=AB=99?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=93=8D=E5=BA=94=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Critical:
- header.tsx: 手机菜单按钮 flex-row→flex-col, 修复 w-full 溢出
- compare/page.tsx: 参数面板 grid-cols-3→grid-cols-1 sm:grid-cols-3

High:
- sandbox/page.tsx: header 区 flex-wrap + 模型选择器 w-48→w-40 sm:w-48
- member/page.tsx: 功能对比行 grid 布局替代 flex, 防溢出
- workshop/page.tsx: 编辑区 flex-col sm:flex-row + 按钮组 flex-wrap

Medium:
- analytics/page.tsx: domain name truncate
- skills/[id]: CTA 按钮 w-full sm:w-auto
---
 frontend/src/app/learning/analytics/page.tsx |  2 +-
 frontend/src/app/my/member/page.tsx          | 10 ++++++----
 frontend/src/app/prompts/workshop/page.tsx   |  8 ++++----
 frontend/src/app/sandbox/compare/page.tsx    |  2 +-
 frontend/src/app/sandbox/page.tsx            |  4 ++--
 frontend/src/app/skills/[id]/client.tsx      |  2 +-
 frontend/src/components/layout/header.tsx    | 10 +++++-----
 7 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/learning/analytics/page.tsx b/frontend/src/app/learning/analytics/page.tsx
index b45bbaf..121e3f4 100644
--- a/frontend/src/app/learning/analytics/page.tsx
+++ b/frontend/src/app/learning/analytics/page.tsx
@@ -106,7 +106,7 @@ export default function LearningAnalyticsPage() {
               <div key={domain.id}>
                 <div className="flex items-center justify-between mb-1.5">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-foreground">{domain.name}</span>
+                    <span className="text-sm font-medium text-foreground truncate min-w-0">{domain.name}</span>
                     {domain.weak && (
                       <span className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded">待加强</span>
                     )}
diff --git a/frontend/src/app/my/member/page.tsx b/frontend/src/app/my/member/page.tsx
index 4c8f08b..c303df9 100644
--- a/frontend/src/app/my/member/page.tsx
+++ b/frontend/src/app/my/member/page.tsx
@@ -118,10 +118,12 @@ export default function MemberPage() {
               </div>
               <div className="space-y-2 flex-1 mb-6">
                 {(plan.id === 'FREE' ? FEATURE_LABELS : FEATURE_LABELS).map((f, fi) => (
-                  <div key={f} className="flex items-center gap-2 text-sm">
-                    <span className="text-green-600 text-xs">✓</span>
-                    <span className="text-muted-foreground">{t.member[f]}</span>
-                    <span className="ml-auto text-xs text-foreground font-medium">{t.member[plan.features[fi]]}</span>
+                  <div key={f} className="grid grid-cols-[1fr_auto] gap-x-2 text-sm">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className="text-green-600 text-xs shrink-0">✓</span>
+                      <span className="text-muted-foreground truncate">{t.member[f]}</span>
+                    </div>
+                    <span className="text-xs text-foreground font-medium text-right">{t.member[plan.features[fi]]}</span>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/app/prompts/workshop/page.tsx b/frontend/src/app/prompts/workshop/page.tsx
index 30064db..7637b6c 100644
--- a/frontend/src/app/prompts/workshop/page.tsx
+++ b/frontend/src/app/prompts/workshop/page.tsx
@@ -118,9 +118,9 @@ export default function PromptWorkshopPage() {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div className="space-y-4">
           <div className="bg-card rounded-2xl border border-border p-6">
-            <div className="flex items-center justify-between mb-4">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-4">
               <h3 className="font-semibold text-foreground">提示词编辑</h3>
-              <ModelSelector value={model} onChange={setModel} className="w-48" />
+              <ModelSelector value={model} onChange={setModel} className="w-full sm:w-48" />
             </div>
 
             <textarea
@@ -131,7 +131,7 @@ export default function PromptWorkshopPage() {
               className="w-full px-4 py-3 border border-border rounded-xl text-sm font-mono bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
             />
 
-            <div className="mt-4 flex gap-2">
+            <div className="mt-4 flex flex-wrap gap-2">
               <button
                 onClick={handleTest}
                 disabled={sending || !prompt.trim()}
@@ -151,7 +151,7 @@ export default function PromptWorkshopPage() {
               {isLoggedIn && prompt.trim() && (
                 <button
                   onClick={() => setShowSave(true)}
-                  className="px-4 py-2 border border-border rounded-lg text-sm text-brand-600 hover:bg-accent ml-auto"
+                  className="px-4 py-2 border border-border rounded-lg text-sm text-brand-600 hover:bg-accent"
                 >
                   保存到提示词库
                 </button>
diff --git a/frontend/src/app/sandbox/compare/page.tsx b/frontend/src/app/sandbox/compare/page.tsx
index ad361cf..5d23ba7 100644
--- a/frontend/src/app/sandbox/compare/page.tsx
+++ b/frontend/src/app/sandbox/compare/page.tsx
@@ -102,7 +102,7 @@ export default function ComparePage() {
           </button>
         </div>
         {showParams && (
-          <div className="mt-4 grid grid-cols-3 gap-4 p-4 bg-muted/30 rounded-xl border border-border">
+          <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4 p-4 bg-muted/30 rounded-xl border border-border">
             <div>
               <div className="flex items-center justify-between mb-1">
                 <label className="text-xs font-medium text-foreground">Temperature</label>
diff --git a/frontend/src/app/sandbox/page.tsx b/frontend/src/app/sandbox/page.tsx
index 83628bb..23f1855 100644
--- a/frontend/src/app/sandbox/page.tsx
+++ b/frontend/src/app/sandbox/page.tsx
@@ -289,8 +289,8 @@ function SandboxPage() {
             <p className="text-sm text-muted-foreground mt-0.5">{t.sandbox.subtitle}</p>
           </div>
         </div>
-        <div className="flex items-center gap-3">
-          <ModelSelector value={model} onChange={setModel} className="w-48" />
+        <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+          <ModelSelector value={model} onChange={setModel} className="w-40 sm:w-48" />
           {!isLoggedIn && (
             <Link href="/auth"
               className="px-4 py-1.5 text-sm font-medium text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50">
diff --git a/frontend/src/app/skills/[id]/client.tsx b/frontend/src/app/skills/[id]/client.tsx
index c508fc7..3954529 100644
--- a/frontend/src/app/skills/[id]/client.tsx
+++ b/frontend/src/app/skills/[id]/client.tsx
@@ -68,7 +68,7 @@ export default function SkillDetailPage() {
         </div>
 
         <Link href={`/sandbox?skill=${skill.id}`}
-          className="inline-flex px-5 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-medium hover:bg-brand-700 transition-colors">
+          className="w-full sm:w-auto inline-flex px-5 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-medium hover:bg-brand-700 transition-colors justify-center">
           {t.skills.apply}
         </Link>
       </div>
diff --git a/frontend/src/components/layout/header.tsx b/frontend/src/components/layout/header.tsx
index e3a4824..c6593c0 100644
--- a/frontend/src/components/layout/header.tsx
+++ b/frontend/src/components/layout/header.tsx
@@ -183,23 +183,23 @@ export function Header() {
                 {item.label}
               </Link>
             ))}
-            <div className="flex gap-3 mt-4">
+            <div className="flex flex-col gap-2 mt-4">
               {isLoggedIn ? (
                 <>
                   <Button className="w-full" size="sm" asChild>
-                    <Link href="/dashboard" className="flex-1" onClick={() => setMobileOpen(false)}>控制台</Link>
+                    <Link href="/dashboard" onClick={() => setMobileOpen(false)}>控制台</Link>
                   </Button>
-                  <Button variant="outline" size="sm" className="flex-1" onClick={() => { logout(); window.location.href = '/'; }}>
+                  <Button variant="outline" size="sm" className="w-full" onClick={() => { logout(); window.location.href = '/'; }}>
                     退出
                   </Button>
                 </>
               ) : (
                 <>
                   <Button variant="outline" className="w-full" size="sm" asChild>
-                    <Link href="/auth" className="flex-1" onClick={() => setMobileOpen(false)}>登录</Link>
+                    <Link href="/auth" onClick={() => setMobileOpen(false)}>登录</Link>
                   </Button>
                   <Button className="w-full" size="sm" asChild>
-                    <Link href="/auth?tab=register" className="flex-1" onClick={() => setMobileOpen(false)}>注册</Link>
+                    <Link href="/auth?tab=register" onClick={() => setMobileOpen(false)}>注册</Link>
                   </Button>
                 </>
               )}