wanzi/ftb-project-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 切换为现代 SaaS Dashboard 风格（Linear/Vercel/Notion 风）

Browse Source 
- 调色板：zinc 中性色 + 冷静蓝色（#3b82f6）+ 卡片阴影 token
- Sidebar：紧凑 60 宽度，加入顶部搜索框，分组导航，圆角 8px
- 卡片：rounded-2xl + shadow-sm/md，留白节奏统一
- 表格：圆角卡片包裹，灰色表头小写大写字母 tracking
- 表单：h-9 输入框，圆角 8px，focus ring 用半透明蓝
- 按钮分级：实心蓝（主操作）/ 边框白底（次操作）/ 暗黑实心（对比强调）
- 状态徽章：ring-1 inset 内边框，色板更柔和

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
2026-06-08 12:46:02 +08:00
parent 0099b23a86
commit e0120c470c
9 changed files with 364 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
apps/web/app/products/page.tsx
View File

@@ -27,85 +27,67 @@ export default function ProductsPage() {
};
return (
<div className="relative min-h-full">
<div className="grain pointer-events-none absolute inset-0" />
<div className="flex h-full flex-col">
<header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-6">
<div className="flex items-center gap-2.5">
<h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">产品</h1>
<span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
{products.length}
</span>
</div>
<button
onClick={() => setShowForm(true)}
className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] transition-colors hover:bg-[var(--accent-hover)]"
>
<Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
新建产品
</button>
</header>
<div className="relative mx-auto max-w-[1280px] px-12 py-16">
<header className="mb-16 flex items-end justify-between border-b border-[var(--line)] pb-10">
<div className="flex-1">
<p className="font-mono text-[11px] uppercase tracking-[0.24em] text-[var(--ink-muted)]">
── 02 / Products
</p>
<h1 className="mt-4 font-display text-[64px] font-medium leading-[0.95] tracking-[-0.02em] text-[var(--ink)]">
产品<span className="italic text-[var(--accent)]">目录</span>
</h1>
<p className="mt-4 max-w-md text-[14px] leading-relaxed text-[var(--ink-soft)]">
组织内所有产品的索引。每个产品聚合需求池、发布版本与归属项目。
</p>
</div>
<div className="flex items-center gap-3">
<div className="relative">
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={1.75} />
<div className="flex-1 overflow-y-auto">
<div className="mx-auto max-w-[1400px] p-6">
<div className="mb-5 flex items-center gap-2">
<div className="relative max-w-xs flex-1">
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="搜索产品"
className="w-56 rounded-md border border-[var(--line)] bg-[var(--bg-elevated)] py-2 pl-9 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--ink)] focus:outline-none"
placeholder="搜索产品名称"
className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
/>
</div>
<button
onClick={() => setShowForm(true)}
className="flex items-center gap-2 rounded-md bg-[var(--ink)] px-4 py-2 text-[13px] font-medium text-[var(--bg)] transition-all hover:bg-[var(--accent)]"
>
<Plus className="h-4 w-4" strokeWidth={2} />
新建产品
</button>
</div>
</header>
<div className="mb-8 flex items-baseline gap-4">
<p className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
Showing
</p>
<p className="font-display text-[18px] font-semibold tabular-nums text-[var(--ink)]">
{String(filtered.length).padStart(2, '0')}
</p>
<span className="text-[12px] text-[var(--ink-muted)]">/ {String(products.length).padStart(2, '0')} 个产品</span>
{showForm && (
<div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
<h2 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">新建产品</h2>
<ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
</div>
)}
{loading ? (
<div className="py-20 text-center text-[13px] text-[var(--ink-muted)]">加载中…</div>
) : filtered.length === 0 ? (
<div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
<p className="text-[14px] font-medium text-[var(--ink-soft)]">
{search ? '没有找到匹配的产品' : '尚未创建任何产品'}
</p>
<p className="mt-1.5 text-[12.5px] text-[var(--ink-muted)]">
{search ? '尝试其他关键字' : '点击右上角"新建产品"开始'}
</p>
</div>
) : (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{filtered.map((product) => (
<ProductCard
key={product.id}
product={product as any}
onClick={(id) => router.push(`/products/${id}`)}
/>
))}
</div>
)}
</div>
{showForm && (
<div className="mb-10 animate-fade-up rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)] p-8">
<p className="mb-4 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">── 新建产品</p>
<ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
</div>
)}
{loading ? (
<div className="py-32 text-center">
<p className="font-mono text-xs uppercase tracking-[0.2em] text-[var(--ink-muted)]">Loading...</p>
</div>
) : filtered.length === 0 ? (
<div className="py-32 text-center">
<p className="font-display text-2xl text-[var(--ink-muted)]">
{search ? '没有匹配的产品' : '尚未创建任何产品'}
</p>
<p className="mt-2 text-[13px] text-[var(--ink-muted)]">
{search ? '试试其他关键字' : '点击右上角按钮，创建第一个产品'}
</p>
</div>
) : (
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
{filtered.map((product, idx) => (
<ProductCard
key={product.id}
product={product as any}
index={idx}
onClick={(id) => router.push(`/products/${id}`)}
/>
))}
</div>
)}
</div>
</div>
);