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:
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user