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/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>
   );
 }