style: 重做整体视觉系统（编辑设计 × 建筑精度）

- Fraunces 衬线 display + DM Sans body + JetBrains Mono 数字标签
- 暖米白主题（#f7f4ee）+ 蓝色强调色（#2563eb）
- 引入 lucide-react 图标库替代 emoji
- Sidebar 加入编号索引、Logo、用户区域、杂志风分组标题
- 产品列表页加入大号 display 标题、搜索、卡片悬浮动画
- 产品详情页面包屑、tab 编号、需求表格重做
- 状态徽章改为色点 + 文字，"已拒绝"用红色避免与"评审中"冲突
- 全局加入 grain 噪点纹理、入场交错动画

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/globals.css

@@ -1,3 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --bg: #f7f4ee;
+  --bg-elevated: #fbf9f4;
+  --ink: #1a1814;
+  --ink-soft: #4a4640;
+  --ink-muted: #8a847a;
+  --line: #e6e0d4;
+  --line-soft: #efeae0;
+  --accent: #2563eb;
+  --accent-soft: #dbeafe;
+}
+
+html, body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: 'DM Sans', system-ui, sans-serif;
+  font-feature-settings: 'ss01', 'ss02', 'cv11';
+  -webkit-font-smoothing: antialiased;
+}
+
+.font-display {
+  font-family: 'Fraunces', Georgia, serif;
+  font-feature-settings: 'ss01';
+}
+
+.font-mono {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.grain::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-up {
+  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
+}

apps/web/app/products/[id]/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
+import { ChevronLeft, Pencil, Trash2 } from 'lucide-react';
 import { RequirementStatus } from '@ftb/shared';
 import { useProductStore } from '@/stores/useProductStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
@@ -9,13 +10,28 @@ import { RequirementTable } from '@/components/product/RequirementTable';
 import { RequirementForm } from '@/components/product/RequirementForm';
 import { ProductForm } from '@/components/product/ProductForm';
 
+const TABS = [
+  { key: 'requirements' as const, label: '需求池', index: '01' },
+  { key: 'projects' as const, label: '项目', index: '02' },
+  { key: 'versions' as const, label: '版本', index: '03' },
+];
+
 export default function ProductDetailPage() {
   const params = useParams();
   const router = useRouter();
   const productId = params.id as string;
 
   const { currentProduct, fetchProduct, updateProduct, deleteProduct } = useProductStore();
-  const { requirements, statusFilter, fetchRequirements, createRequirement, updateRequirement, updateStatus, deleteRequirement, setStatusFilter } = useRequirementStore();
+  const {
+    requirements,
+    statusFilter,
+    fetchRequirements,
+    createRequirement,
+    updateRequirement,
+    updateStatus,
+    deleteRequirement,
+    setStatusFilter,
+  } = useRequirementStore();
 
   const [showReqForm, setShowReqForm] = useState(false);
   const [editingReq, setEditingReq] = useState<any>(null);
@@ -45,89 +61,142 @@ export default function ProductDetailPage() {
   };
 
   const handleDeleteProduct = async () => {
-    if (confirm('确定要删除此产品吗？')) {
+    if (confirm('确定要删除此产品吗？此操作不可撤销。')) {
       await deleteProduct(productId);
       router.push('/products');
     }
   };
 
   if (!currentProduct) {
-    return <div className="py-12 text-center text-gray-400">加载中...</div>;
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="font-mono text-xs uppercase tracking-[0.2em] text-[var(--ink-muted)]">Loading...</p>
+      </div>
+    );
   }
 
   return (
-    <div className="mx-auto max-w-6xl px-6 py-8">
+    <div className="relative min-h-full">
-      <div className="mb-2 text-sm text-gray-500">
+      <div className="grain pointer-events-none absolute inset-0" />
-        <span className="cursor-pointer hover:text-blue-600" onClick={() => router.push('/products')}>产品列表</span>
+      <div className="relative mx-auto max-w-[1280px] px-12 py-12">
-        <span className="mx-2">/</span>
+        <button
-        <span>{currentProduct.name}</span>
+          onClick={() => router.push('/products')}
-      </div>
+          className="mb-8 flex items-center gap-1.5 text-[12px] text-[var(--ink-muted)] transition-colors hover:text-[var(--ink)]"
+        >
+          <ChevronLeft className="h-3.5 w-3.5" strokeWidth={2} />
+          <span>返回产品列表</span>
+        </button>
 
-      <div className="mb-6 flex items-center justify-between">
+        <header className="mb-12 flex items-end justify-between border-b border-[var(--line)] pb-10">
-        <h1 className="text-2xl font-bold text-gray-900">{currentProduct.name}</h1>
+          <div className="flex-1">
-        <div className="flex gap-2">
+            <p className="font-mono text-[11px] uppercase tracking-[0.24em] text-[var(--ink-muted)]">
-          <button onClick={() => setEditingProduct(true)} className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">编辑</button>
+              ── Product
-          <button onClick={handleDeleteProduct} className="rounded-md border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50">删除</button>
+            </p>
+            <h1 className="mt-4 font-display text-[56px] font-medium leading-[1] tracking-[-0.02em] text-[var(--ink)]">
+              {currentProduct.name}
+            </h1>
+            {currentProduct.description && (
+              <p className="mt-4 max-w-2xl text-[14px] leading-relaxed text-[var(--ink-soft)]">
+                {currentProduct.description}
+              </p>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setEditingProduct(true)}
+              className="flex items-center gap-1.5 rounded-md border border-[var(--line)] bg-[var(--bg-elevated)] px-3 py-1.5 text-[13px] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]"
+            >
+              <Pencil className="h-3.5 w-3.5" strokeWidth={1.75} />
+              编辑
+            </button>
+            <button
+              onClick={handleDeleteProduct}
+              className="flex items-center gap-1.5 rounded-md border border-[var(--line)] bg-[var(--bg-elevated)] px-3 py-1.5 text-[13px] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
+            >
+              <Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
+              删除
+            </button>
+          </div>
+        </header>
+
+        {editingProduct && (
+          <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
+              initialData={{ name: currentProduct.name, description: currentProduct.description }}
+              onSubmit={async (data) => {
+                await updateProduct(productId, data);
+                setEditingProduct(false);
+                await fetchProduct(productId);
+              }}
+              onCancel={() => setEditingProduct(false)}
+            />
+          </div>
+        )}
+
+        <div className="mb-8 flex gap-8 border-b border-[var(--line)]">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`relative flex items-baseline gap-2 pb-3 transition-colors ${
+                activeTab === tab.key
+                  ? 'text-[var(--ink)]'
+                  : 'text-[var(--ink-muted)] hover:text-[var(--ink-soft)]'
+              }`}
+            >
+              <span className="font-mono text-[10px] tabular-nums">{tab.index}</span>
+              <span className="text-[14px] font-medium tracking-tight">{tab.label}</span>
+              {activeTab === tab.key && (
+                <span className="absolute -bottom-px left-0 right-0 h-px bg-[var(--ink)]" />
+              )}
+            </button>
+          ))}
         </div>
+
+        {activeTab === 'requirements' && (
+          <div className="animate-fade-up">
+            {(showReqForm || editingReq) && (
+              <div className="mb-8 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)]">
+                  ── {editingReq ? '编辑需求' : '新建需求'}
+                </p>
+                <RequirementForm
+                  initialData={editingReq || undefined}
+                  onSubmit={editingReq ? handleUpdateReq : handleCreateReq}
+                  onCancel={() => {
+                    setShowReqForm(false);
+                    setEditingReq(null);
+                  }}
+                />
+              </div>
+            )}
+            <RequirementTable
+              requirements={requirements as any}
+              statusFilter={statusFilter}
+              onFilterChange={handleFilterChange}
+              onEdit={(req) => setEditingReq(req)}
+              onStatusChange={(id, status) => updateStatus(productId, id, status)}
+              onDelete={(id) => deleteRequirement(productId, id)}
+              onCreate={() => setShowReqForm(true)}
+            />
+          </div>
+        )}
+
+        {activeTab === 'projects' && (
+          <div className="animate-fade-up py-24 text-center">
+            <p className="font-display text-2xl text-[var(--ink-muted)]">项目管理</p>
+            <p className="mt-2 text-[13px] text-[var(--ink-muted)]">即将到来 · Coming Soon</p>
+          </div>
+        )}
+
+        {activeTab === 'versions' && (
+          <div className="animate-fade-up py-24 text-center">
+            <p className="font-display text-2xl text-[var(--ink-muted)]">版本管理</p>
+            <p className="mt-2 text-[13px] text-[var(--ink-muted)]">即将到来 · Coming Soon</p>
+          </div>
+        )}
       </div>
-
-      {currentProduct.description && (
-        <p className="mb-6 text-gray-600">{currentProduct.description}</p>
-      )}
-
-      {editingProduct && (
-        <div className="mb-6 rounded-lg border border-gray-200 p-6">
-          <ProductForm
-            initialData={{ name: currentProduct.name, description: currentProduct.description }}
-            onSubmit={async (data) => { await updateProduct(productId, data); setEditingProduct(false); await fetchProduct(productId); }}
-            onCancel={() => setEditingProduct(false)}
-          />
-        </div>
-      )}
-
-      <div className="mb-4 flex gap-4 border-b">
-        {(['requirements', 'projects', 'versions'] as const).map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            className={`pb-2 text-sm ${activeTab === tab ? 'border-b-2 border-blue-600 font-medium text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
-          >
-            {{ requirements: '需求池', projects: '项目', versions: '版本' }[tab]}
-          </button>
-        ))}
-      </div>
-
-      {activeTab === 'requirements' && (
-        <>
-          {(showReqForm || editingReq) && (
-            <div className="mb-4 rounded-lg border border-gray-200 p-6">
-              <h3 className="mb-4 text-lg font-medium">{editingReq ? '编辑需求' : '新建需求'}</h3>
-              <RequirementForm
-                initialData={editingReq || undefined}
-                onSubmit={editingReq ? handleUpdateReq : handleCreateReq}
-                onCancel={() => { setShowReqForm(false); setEditingReq(null); }}
-              />
-            </div>
-          )}
-          <RequirementTable
-            requirements={requirements as any}
-            statusFilter={statusFilter}
-            onFilterChange={handleFilterChange}
-            onEdit={(req) => setEditingReq(req)}
-            onStatusChange={(id, status) => updateStatus(productId, id, status)}
-            onDelete={(id) => deleteRequirement(productId, id)}
-            onCreate={() => setShowReqForm(true)}
-          />
-        </>
-      )}
-
-      {activeTab === 'projects' && (
-        <div className="py-12 text-center text-gray-400">项目管理（后续迭代实现）</div>
-      )}
-
-      {activeTab === 'versions' && (
-        <div className="py-12 text-center text-gray-400">版本管理（后续迭代实现）</div>
-      )}
     </div>
   );
 }

apps/web/app/products/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { Plus, Search } from 'lucide-react';
 import { useProductStore } from '@/stores/useProductStore';
 import { ProductCard } from '@/components/product/ProductCard';
 import { ProductForm } from '@/components/product/ProductForm';
@@ -10,50 +11,102 @@ export default function ProductsPage() {
   const router = useRouter();
   const { products, loading, fetchProducts, createProduct } = useProductStore();
   const [showForm, setShowForm] = useState(false);
+  const [search, setSearch] = useState('');
 
   useEffect(() => {
     fetchProducts();
   }, [fetchProducts]);
 
+  const filtered = products.filter((p) =>
+    p.name.toLowerCase().includes(search.toLowerCase()),
+  );
+
   const handleCreate = async (data: { name: string; description: string }) => {
     await createProduct(data);
     setShowForm(false);
   };
 
   return (
-    <div className="mx-auto max-w-6xl px-6 py-8">
+    <div className="relative min-h-full">
-      <div className="mb-6 flex items-center justify-between">
+      <div className="grain pointer-events-none absolute inset-0" />
-        <h1 className="text-2xl font-bold text-gray-900">产品列表</h1>
+
-        <button
+      <div className="relative mx-auto max-w-[1280px] px-12 py-16">
-          onClick={() => setShowForm(true)}
+        <header className="mb-16 flex items-end justify-between border-b border-[var(--line)] pb-10">
-          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+          <div className="flex-1">
-        >
+            <p className="font-mono text-[11px] uppercase tracking-[0.24em] text-[var(--ink-muted)]">
-          新建产品
+              ── 02 / Products
-        </button>
+            </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} />
+              <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"
+              />
+            </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>
+        </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>
-
-      {showForm && (
-        <div className="mb-6 rounded-lg border border-gray-200 p-6">
-          <h2 className="mb-4 text-lg font-medium">新建产品</h2>
-          <ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
-        </div>
-      )}
-
-      {loading ? (
-        <div className="py-12 text-center text-gray-400">加载中...</div>
-      ) : products.length === 0 ? (
-        <div className="py-12 text-center text-gray-400">暂无产品，点击上方按钮创建</div>
-      ) : (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {products.map((product) => (
-            <ProductCard
-              key={product.id}
-              product={product}
-              onClick={(id) => router.push(`/products/${id}`)}
-            />
-          ))}
-        </div>
-      )}
     </div>
   );
 }

apps/web/components/layout/Sidebar.tsx

@@ -1,63 +1,114 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
+import { Inbox, Package, FolderKanban, Tag, Users, Sparkles } from 'lucide-react';
 
 const NAV_ITEMS = [
-  { label: '与我相关', path: '/workspace', icon: '📋' },
+  { label: '与我相关', path: '/workspace', icon: Inbox, index: '01' },
-  { label: '产品', path: '/products', icon: '📦' },
+  { label: '产品', path: '/products', icon: Package, index: '02' },
-  { label: '项目', path: '/projects', icon: '📁' },
+  { label: '项目', path: '/projects', icon: FolderKanban, index: '03' },
-  { label: '版本', path: '/versions', icon: '🏷️' },
+  { label: '版本', path: '/versions', icon: Tag, index: '04' },
 ];
 
 const ADMIN_ITEMS = [
-  { label: '成员管理', path: '/admin/members', icon: '👥' },
+  { label: '成员管理', path: '/admin/members', icon: Users },
 ];
 
 export function Sidebar() {
   const pathname = usePathname();
   const router = useRouter();
 
-  const isActive = (path: string) => pathname.startsWith(path);
+  const isActive = (path: string) =>
+    pathname === path || (path !== '/' && pathname.startsWith(path));
 
   return (
-    <aside className="flex h-screen w-56 flex-col border-r border-gray-200 bg-white">
+    <aside
-      <div className="flex h-14 items-center px-4">
+      className="relative flex h-screen w-64 flex-col border-r border-[var(--line)] bg-[var(--bg-elevated)]"
-        <h1 className="text-lg font-bold text-gray-900">FTB 项目管理</h1>
+      style={{ background: 'var(--bg-elevated)' }}
+    >
+      <div className="flex h-20 items-end px-6 pb-4">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-[var(--ink)]">
+            <Sparkles className="h-4 w-4 text-[var(--bg)]" strokeWidth={2.5} />
+          </div>
+          <div>
+            <p className="font-display text-base font-semibold leading-none tracking-tight text-[var(--ink)]">
+              FTB
+            </p>
+            <p className="mt-0.5 text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">
+              Project Studio
+            </p>
+          </div>
+        </div>
       </div>
 
-      <nav className="flex-1 space-y-1 px-2 py-4">
+      <div className="px-6 pb-3">
-        {NAV_ITEMS.map((item) => (
+        <p className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          <button
+          ── Workspace
-            key={item.path}
+        </p>
-            onClick={() => router.push(item.path)}
+      </div>
-            className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors ${
+
-              isActive(item.path)
+      <nav className="flex-1 px-3">
-                ? 'bg-blue-50 font-medium text-blue-700'
+        {NAV_ITEMS.map((item) => {
-                : 'text-gray-700 hover:bg-gray-100'
+          const Icon = item.icon;
-            }`}
+          const active = isActive(item.path);
-          >
+          return (
-            <span>{item.icon}</span>
+            <button
-            <span>{item.label}</span>
+              key={item.path}
-          </button>
+              onClick={() => router.push(item.path)}
-        ))}
+              className={`group relative flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-all ${
+                active
+                  ? 'bg-[var(--accent-soft)] text-[var(--accent)]'
+                  : 'text-[var(--ink-soft)] hover:bg-[var(--line-soft)] hover:text-[var(--ink)]'
+              }`}
+            >
+              <span className={`font-mono text-[10px] tabular-nums ${active ? 'text-[var(--accent)]' : 'text-[var(--ink-muted)]'}`}>
+                {item.index}
+              </span>
+              <Icon className="h-[18px] w-[18px]" strokeWidth={1.75} />
+              <span className="text-[14px] font-medium tracking-tight">{item.label}</span>
+              {active && (
+                <span className="ml-auto h-1 w-1 rounded-full bg-[var(--accent)]" />
+              )}
+            </button>
+          );
+        })}
       </nav>
 
-      <div className="border-t border-gray-200 px-2 py-4">
+      <div className="border-t border-[var(--line)] px-3 py-4">
-        <p className="mb-2 px-3 text-xs font-medium text-gray-400">管理</p>
+        <p className="mb-2 px-3 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-        {ADMIN_ITEMS.map((item) => (
+          ── Admin
-          <button
+        </p>
-            key={item.path}
+        {ADMIN_ITEMS.map((item) => {
-            onClick={() => router.push(item.path)}
+          const Icon = item.icon;
-            className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors ${
+          const active = isActive(item.path);
-              isActive(item.path)
+          return (
-                ? 'bg-blue-50 font-medium text-blue-700'
+            <button
-                : 'text-gray-700 hover:bg-gray-100'
+              key={item.path}
-            }`}
+              onClick={() => router.push(item.path)}
-          >
+              className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition-all ${
-            <span>{item.icon}</span>
+                active
-            <span>{item.label}</span>
+                  ? 'bg-[var(--accent-soft)] text-[var(--accent)]'
-          </button>
+                  : 'text-[var(--ink-soft)] hover:bg-[var(--line-soft)] hover:text-[var(--ink)]'
-        ))}
+              }`}
+            >
+              <Icon className="h-[18px] w-[18px]" strokeWidth={1.75} />
+              <span className="text-[14px] font-medium tracking-tight">{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="border-t border-[var(--line)] px-6 py-4">
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ink)] font-display text-xs font-semibold text-[var(--bg)]">
+            A
+          </div>
+          <div className="min-w-0">
+            <p className="truncate text-[13px] font-medium text-[var(--ink)]">Admin</p>
+            <p className="truncate text-[11px] text-[var(--ink-muted)]">administrator</p>
+          </div>
+        </div>
       </div>
     </aside>
   );

apps/web/components/product/ProductCard.tsx

@@ -1,30 +1,66 @@
 'use client';
 
-import { Product } from '@ftb/shared';
+import { Package } from 'lucide-react';
 
-interface ProductWithCount extends Product {
+interface ProductWithCount {
+  id: string;
+  name: string;
+  description: string;
+  createdAt: string | Date;
   _count?: { requirements: number; projects: number };
 }
 
 interface Props {
   product: ProductWithCount;
+  index: number;
   onClick: (id: string) => void;
 }
 
-export function ProductCard({ product, onClick }: Props) {
+export function ProductCard({ product, index, onClick }: Props) {
+  const reqCount = product._count?.requirements ?? 0;
+  const projCount = product._count?.projects ?? 0;
+
   return (
-    <div
+    <article
-      className="cursor-pointer rounded-lg border border-gray-200 p-5 transition-shadow hover:shadow-md"
       onClick={() => onClick(product.id)}
+      style={{ animationDelay: `${index * 60}ms` }}
+      className="group animate-fade-up relative cursor-pointer overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)] p-6 transition-all duration-300 hover:-translate-y-0.5 hover:border-[var(--ink)] hover:shadow-[0_12px_32px_-12px_rgba(26,24,20,0.18)]"
     >
-      <h3 className="text-lg font-semibold text-gray-900">{product.name}</h3>
+      <div className="flex items-start justify-between">
-      {product.description && (
+        <span className="font-mono text-[10px] tabular-nums uppercase tracking-[0.18em] text-[var(--ink-muted)]">
-        <p className="mt-1 text-sm text-gray-500 line-clamp-2">{product.description}</p>
+          № {String(index + 1).padStart(3, '0')}
-      )}
+        </span>
-      <div className="mt-4 flex gap-4 text-xs text-gray-400">
+        <Package className="h-4 w-4 text-[var(--ink-muted)] transition-colors group-hover:text-[var(--accent)]" strokeWidth={1.75} />
-        <span>{product._count?.requirements ?? 0} 需求</span>
-        <span>{product._count?.projects ?? 0} 项目</span>
       </div>
-    </div>
+
+      <h3 className="mt-6 font-display text-[26px] font-medium leading-[1.15] tracking-tight text-[var(--ink)]">
+        {product.name}
+      </h3>
+
+      {product.description ? (
+        <p className="mt-2 line-clamp-2 text-[13px] leading-relaxed text-[var(--ink-soft)]">
+          {product.description}
+        </p>
+      ) : (
+        <p className="mt-2 text-[13px] italic text-[var(--ink-muted)]">暂无描述</p>
+      )}
+
+      <div className="mt-8 flex items-end justify-between border-t border-[var(--line-soft)] pt-4">
+        <div className="flex gap-6">
+          <div>
+            <p className="font-display text-2xl font-semibold tabular-nums text-[var(--ink)]">{reqCount}</p>
+            <p className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">需求</p>
+          </div>
+          <div className="h-10 w-px bg-[var(--line-soft)]" />
+          <div>
+            <p className="font-display text-2xl font-semibold tabular-nums text-[var(--ink)]">{projCount}</p>
+            <p className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">项目</p>
+          </div>
+        </div>
+        <span className="font-mono text-[11px] text-[var(--ink-muted)] opacity-0 transition-opacity group-hover:opacity-100">
+          →
+        </span>
+      </div>
+    </article>
   );
 }

apps/web/components/product/ProductForm.tsx

@@ -19,42 +19,44 @@ export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-5">
       <div>
-        <label className="block text-sm font-medium text-gray-700">
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          产品名称 <span className="text-red-500">*</span>
+          产品名称
         </label>
         <input
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="例如：FTB 智能项目管理"
-          placeholder="输入产品名称"
+          className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-2xl text-[var(--ink)] placeholder:font-display placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
         />
       </div>
       <div>
-        <label className="block text-sm font-medium text-gray-700">描述</label>
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
+          描述
+        </label>
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={3}
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="一句话讲清楚这个产品做什么"
-          placeholder="输入产品描述"
+          className="mt-2 block w-full resize-none border-0 border-b border-[var(--line)] bg-transparent pb-2 text-[14px] leading-relaxed text-[var(--ink-soft)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
         />
       </div>
-      <div className="flex justify-end gap-3">
+      <div className="flex justify-end gap-2 pt-2">
         <button
           type="button"
           onClick={onCancel}
-          className="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+          className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]"
         >
           取消
         </button>
         <button
           type="submit"
-          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+          className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
         >
-          {initialData ? '保存' : '创建'}
+          {initialData ? '保存修改' : '创建产品'}
         </button>
       </div>
     </form>

apps/web/components/product/RequirementForm.tsx

@@ -21,54 +21,69 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-5">
       <div>
-        <label className="block text-sm font-medium text-gray-700">
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          需求标题 <span className="text-red-500">*</span>
+          需求标题
         </label>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="一句话描述需求"
-          placeholder="输入需求标题"
+          className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-xl text-[var(--ink)] placeholder:font-display placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
         />
       </div>
       <div>
-        <label className="block text-sm font-medium text-gray-700">描述</label>
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
+          描述
+        </label>
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={4}
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="详细说明需求背景、目标、验收标准"
-          placeholder="输入需求描述"
+          className="mt-2 block w-full resize-none border-0 border-b border-[var(--line)] bg-transparent pb-2 text-[14px] leading-relaxed text-[var(--ink-soft)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
         />
       </div>
       <div>
-        <label className="block text-sm font-medium text-gray-700">优先级</label>
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-        <select
+          优先级
-          value={priority}
+        </label>
-          onChange={(e) => setPriority(Number(e.target.value))}
+        <div className="mt-2 flex gap-1.5">
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          {Object.entries(PRIORITY_LABEL).map(([value, label]) => {
-        >
+            const v = Number(value);
-          {Object.entries(PRIORITY_LABEL).map(([value, label]) => (
+            const active = priority === v;
-            <option key={value} value={value}>{label}</option>
+            return (
-          ))}
+              <button
-        </select>
+                key={value}
+                type="button"
+                onClick={() => setPriority(v)}
+                className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${
+                  active
+                    ? 'bg-[var(--ink)] text-[var(--bg)]'
+                    : 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]'
+                }`}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
       </div>
-      <div className="flex justify-end gap-3">
+      <div className="flex justify-end gap-2 pt-2">
         <button
           type="button"
           onClick={onCancel}
-          className="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+          className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]"
         >
           取消
         </button>
         <button
           type="submit"
-          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+          className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
         >
-          {initialData ? '保存' : '创建'}
+          {initialData ? '保存修改' : '创建需求'}
         </button>
       </div>
     </form>

apps/web/components/product/RequirementStatusBadge.tsx

@@ -1,15 +1,47 @@
 'use client';
 
 import { RequirementStatus } from '@ftb/shared';
-import { REQUIREMENT_STATUS_LABEL, REQUIREMENT_STATUS_COLOR } from '@/lib/constants';
+import { REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
 
 interface Props {
   status: RequirementStatus;
 }
 
+const STATUS_STYLES: Record<RequirementStatus, { bg: string; text: string; dot: string }> = {
+  [RequirementStatus.DRAFT]: {
+    bg: 'bg-[var(--line-soft)]',
+    text: 'text-[var(--ink-soft)]',
+    dot: 'bg-[var(--ink-muted)]',
+  },
+  [RequirementStatus.REVIEWING]: {
+    bg: 'bg-blue-50',
+    text: 'text-blue-700',
+    dot: 'bg-blue-500',
+  },
+  [RequirementStatus.APPROVED]: {
+    bg: 'bg-emerald-50',
+    text: 'text-emerald-700',
+    dot: 'bg-emerald-500',
+  },
+  [RequirementStatus.REJECTED]: {
+    bg: 'bg-red-50',
+    text: 'text-red-700',
+    dot: 'bg-red-500',
+  },
+  [RequirementStatus.DELIVERED]: {
+    bg: 'bg-purple-50',
+    text: 'text-purple-700',
+    dot: 'bg-purple-500',
+  },
+};
+
 export function RequirementStatusBadge({ status }: Props) {
+  const style = STATUS_STYLES[status];
   return (
-    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${REQUIREMENT_STATUS_COLOR[status]}`}>
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ${style.bg} ${style.text}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
       {REQUIREMENT_STATUS_LABEL[status]}
     </span>
   );

apps/web/components/product/RequirementTable.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { RequirementStatus } from '@ftb/shared';
+import { Pencil, Trash2 } from 'lucide-react';
 import { RequirementStatusBadge } from './RequirementStatusBadge';
 import { PRIORITY_LABEL, REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
 
@@ -31,71 +32,112 @@ export function RequirementTable({
   statusFilter,
   onFilterChange,
   onEdit,
-  onStatusChange,
   onDelete,
   onCreate,
 }: Props) {
   return (
     <div>
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-1.5">
-          <button
+          <FilterChip active={!statusFilter} onClick={() => onFilterChange(null)}>
-            onClick={() => onFilterChange(null)}
-            className={`rounded-full px-3 py-1 text-xs ${!statusFilter ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
-          >
             全部
-          </button>
+          </FilterChip>
           {ALL_STATUSES.map((s) => (
-            <button
+            <FilterChip key={s} active={statusFilter === s} onClick={() => onFilterChange(s)}>
-              key={s}
-              onClick={() => onFilterChange(s)}
-              className={`rounded-full px-3 py-1 text-xs ${statusFilter === s ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
-            >
               {REQUIREMENT_STATUS_LABEL[s]}
-            </button>
+            </FilterChip>
           ))}
         </div>
         <button
           onClick={onCreate}
-          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+          className="rounded-md bg-[var(--ink)] px-4 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
         >
-          新建需求
+          + 新建需求
         </button>
       </div>
 
       {requirements.length === 0 ? (
-        <div className="py-12 text-center text-gray-400">暂无需求</div>
+        <div className="rounded-xl border border-dashed border-[var(--line)] py-20 text-center">
+          <p className="font-display text-lg text-[var(--ink-muted)]">暂无需求</p>
+          <p className="mt-1 text-[12px] text-[var(--ink-muted)]">点击"新建需求"开始记录</p>
+        </div>
       ) : (
-        <table className="w-full text-left text-sm">
+        <div className="overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)]">
-          <thead className="border-b text-xs text-gray-500">
+          <table className="w-full text-left">
-            <tr>
+            <thead>
-              <th className="pb-3 font-medium">标题</th>
+              <tr className="border-b border-[var(--line)] bg-[var(--bg)]">
-              <th className="pb-3 font-medium">状态</th>
+                <th className="w-12 py-3 pl-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">№</th>
-              <th className="pb-3 font-medium">优先级</th>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">标题</th>
-              <th className="pb-3 font-medium">创建者</th>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">状态</th>
-              <th className="pb-3 font-medium">操作</th>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">优先级</th>
-            </tr>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">创建者</th>
-          </thead>
+                <th className="py-3 pr-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">操作</th>
-          <tbody className="divide-y">
-            {requirements.map((req) => (
-              <tr key={req.id} className="hover:bg-gray-50">
-                <td className="py-3 font-medium text-gray-900">{req.title}</td>
-                <td className="py-3">
-                  <RequirementStatusBadge status={req.status} />
-                </td>
-                <td className="py-3 text-gray-600">{PRIORITY_LABEL[req.priority] || '无'}</td>
-                <td className="py-3 text-gray-600">{req.creator?.name || '-'}</td>
-                <td className="py-3">
-                  <div className="flex gap-2">
-                    <button onClick={() => onEdit(req)} className="text-blue-600 hover:underline">编辑</button>
-                    <button onClick={() => onDelete(req.id)} className="text-red-500 hover:underline">删除</button>
-                  </div>
-                </td>
               </tr>
-            ))}
+            </thead>
-          </tbody>
+            <tbody>
-        </table>
+              {requirements.map((req, idx) => (
+                <tr
+                  key={req.id}
+                  className="border-b border-[var(--line-soft)] transition-colors last:border-0 hover:bg-[var(--line-soft)]"
+                >
+                  <td className="py-4 pl-6 font-mono text-[11px] tabular-nums text-[var(--ink-muted)]">
+                    {String(idx + 1).padStart(2, '0')}
+                  </td>
+                  <td className="py-4 pr-6 font-medium text-[var(--ink)]">{req.title}</td>
+                  <td className="py-4">
+                    <RequirementStatusBadge status={req.status} />
+                  </td>
+                  <td className="py-4 text-[13px] text-[var(--ink-soft)]">
+                    {PRIORITY_LABEL[req.priority] || '无'}
+                  </td>
+                  <td className="py-4 text-[13px] text-[var(--ink-soft)]">{req.creator?.name || '—'}</td>
+                  <td className="py-4 pr-6">
+                    <div className="flex gap-1">
+                      <button
+                        onClick={() => onEdit(req)}
+                        className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg)] hover:text-[var(--ink)]"
+                        title="编辑"
+                      >
+                        <Pencil className="h-3.5 w-3.5" strokeWidth={1.75} />
+                      </button>
+                      <button
+                        onClick={() => onDelete(req.id)}
+                        className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg)] hover:text-[var(--accent)]"
+                        title="删除"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       )}
     </div>
   );
 }
+
+function FilterChip({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${
+        active
+          ? 'bg-[var(--ink)] text-[var(--bg)]'
+          : 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]'
+      }`}
+    >
+      {children}
+    </button>
+  );
+}

apps/web/package.json

@@ -10,11 +10,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@ftb/shared": "workspace:*",
+    "lucide-react": "^1.17.0",
     "next": "^14.2.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "zustand": "^4.5.0",
+    "zustand": "^4.5.0"
-    "@ftb/shared": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",