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="mb-2 text-sm text-gray-500">
-        <span className="cursor-pointer hover:text-blue-600" onClick={() => router.push('/products')}>产品列表</span>
-        <span className="mx-2">/</span>
-        <span>{currentProduct.name}</span>
-      </div>
+    <div className="relative min-h-full">
+      <div className="grain pointer-events-none absolute inset-0" />
+      <div className="relative mx-auto max-w-[1280px] px-12 py-12">
+        <button
+          onClick={() => router.push('/products')}
+          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">
-        <h1 className="text-2xl font-bold text-gray-900">{currentProduct.name}</h1>
-        <div className="flex gap-2">
-          <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>
-          <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>
+        <header className="mb-12 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)]">
+              ── Product
+            </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="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900">产品列表</h1>
-        <button
-          onClick={() => setShowForm(true)}
-          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
-        >
-          新建产品
-        </button>
+    <div className="relative min-h-full">
+      <div className="grain pointer-events-none absolute inset-0" />
+
+      <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} />
+              <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>
   );
 }