fix: PC 端全站移动端响应式修复

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
This commit is contained in:
yuzhiran-dev
2026-05-18 11:47:50 +08:00
parent 8665032da4
commit 1a8b3fbaab
7 changed files with 20 additions and 18 deletions
+1 -1
View File
@@ -106,7 +106,7 @@ export default function LearningAnalyticsPage() {
<div key={domain.id}> <div key={domain.id}>
<div className="flex items-center justify-between mb-1.5"> <div className="flex items-center justify-between mb-1.5">
<div className="flex items-center gap-2"> <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 && ( {domain.weak && (
<span className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded"></span> <span className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded"></span>
)} )}
+6 -4
View File
@@ -118,10 +118,12 @@ export default function MemberPage() {
</div> </div>
<div className="space-y-2 flex-1 mb-6"> <div className="space-y-2 flex-1 mb-6">
{(plan.id === 'FREE' ? FEATURE_LABELS : FEATURE_LABELS).map((f, fi) => ( {(plan.id === 'FREE' ? FEATURE_LABELS : FEATURE_LABELS).map((f, fi) => (
<div key={f} className="flex items-center gap-2 text-sm"> <div key={f} className="grid grid-cols-[1fr_auto] gap-x-2 text-sm">
<span className="text-green-600 text-xs"></span> <div className="flex items-center gap-2 min-w-0">
<span className="text-muted-foreground">{t.member[f]}</span> <span className="text-green-600 text-xs shrink-0"></span>
<span className="ml-auto text-xs text-foreground font-medium">{t.member[plan.features[fi]]}</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>
))} ))}
</div> </div>
+4 -4
View File
@@ -118,9 +118,9 @@ export default function PromptWorkshopPage() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-card rounded-2xl border border-border p-6"> <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> <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> </div>
<textarea <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" 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 <button
onClick={handleTest} onClick={handleTest}
disabled={sending || !prompt.trim()} disabled={sending || !prompt.trim()}
@@ -151,7 +151,7 @@ export default function PromptWorkshopPage() {
{isLoggedIn && prompt.trim() && ( {isLoggedIn && prompt.trim() && (
<button <button
onClick={() => setShowSave(true)} 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> </button>
+1 -1
View File
@@ -102,7 +102,7 @@ export default function ComparePage() {
</button> </button>
</div> </div>
{showParams && ( {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>
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<label className="text-xs font-medium text-foreground">Temperature</label> <label className="text-xs font-medium text-foreground">Temperature</label>
+2 -2
View File
@@ -289,8 +289,8 @@ function SandboxPage() {
<p className="text-sm text-muted-foreground mt-0.5">{t.sandbox.subtitle}</p> <p className="text-sm text-muted-foreground mt-0.5">{t.sandbox.subtitle}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-2 sm:gap-3">
<ModelSelector value={model} onChange={setModel} className="w-48" /> <ModelSelector value={model} onChange={setModel} className="w-40 sm:w-48" />
{!isLoggedIn && ( {!isLoggedIn && (
<Link href="/auth" <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"> className="px-4 py-1.5 text-sm font-medium text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50">
+1 -1
View File
@@ -68,7 +68,7 @@ export default function SkillDetailPage() {
</div> </div>
<Link href={`/sandbox?skill=${skill.id}`} <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} {t.skills.apply}
</Link> </Link>
</div> </div>
+5 -5
View File
@@ -183,23 +183,23 @@ export function Header() {
{item.label} {item.label}
</Link> </Link>
))} ))}
<div className="flex gap-3 mt-4"> <div className="flex flex-col gap-2 mt-4">
{isLoggedIn ? ( {isLoggedIn ? (
<> <>
<Button className="w-full" size="sm" asChild> <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>
<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>
</> </>
) : ( ) : (
<> <>
<Button variant="outline" className="w-full" size="sm" asChild> <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>
<Button className="w-full" size="sm" asChild> <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> </Button>
</> </>
)} )}