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/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="flex gap-2">
-          <button
-            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'}`}
-          >
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap gap-1.5">
+          <FilterChip active={!statusFilter} onClick={() => onFilterChange(null)}>
             全部
-          </button>
+          </FilterChip>
           {ALL_STATUSES.map((s) => (
-            <button
-              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'}`}
-            >
+            <FilterChip key={s} active={statusFilter === s} onClick={() => onFilterChange(s)}>
               {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">
-          <thead className="border-b text-xs text-gray-500">
-            <tr>
-              <th className="pb-3 font-medium">标题</th>
-              <th className="pb-3 font-medium">状态</th>
-              <th className="pb-3 font-medium">优先级</th>
-              <th className="pb-3 font-medium">创建者</th>
-              <th className="pb-3 font-medium">操作</th>
-            </tr>
-          </thead>
-          <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>
+        <div className="overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)]">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-[var(--line)] bg-[var(--bg)]">
+                <th className="w-12 py-3 pl-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">№</th>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">标题</th>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">状态</th>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">优先级</th>
+                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">创建者</th>
+                <th className="py-3 pr-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">操作</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {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>
+  );
+}