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

- 调色板：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>

apps/web/components/product/RequirementTable.tsx

@@ -37,8 +37,8 @@ export function RequirementTable({
 }: Props) {
   return (
     <div>
-      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
-        <div className="flex flex-wrap gap-1.5">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap gap-1">
           <FilterChip active={!statusFilter} onClick={() => onFilterChange(null)}>
             全部
           </FilterChip>
@@ -50,59 +50,52 @@ export function RequirementTable({
         </div>
         <button
           onClick={onCreate}
-          className="rounded-md bg-[var(--ink)] px-4 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
+          className="flex h-8 items-center gap-1 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] transition-colors hover:bg-[var(--accent-hover)]"
         >
           + 新建需求
         </button>
       </div>
 
       {requirements.length === 0 ? (
-        <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 className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-16 text-center">
+          <p className="text-[14px] font-medium text-[var(--ink-soft)]">暂无需求</p>
+          <p className="mt-1.5 text-[12.5px] text-[var(--ink-muted)]">点击"新建需求"添加</p>
         </div>
       ) : (
-        <div className="overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)]">
-          <table className="w-full text-left">
+        <div className="overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
+          <table className="w-full text-left text-[13px]">
             <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 className="border-b border-[var(--line)] bg-[var(--bg-subtle)]">
+                <th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">标题</th>
+                <th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">状态</th>
+                <th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">优先级</th>
+                <th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">创建者</th>
+                <th className="px-4 py-2.5 text-right text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">操作</th>
               </tr>
             </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')}
+              {requirements.map((req) => (
+                <tr key={req.id} className="border-b border-[var(--line-soft)] last:border-0 hover:bg-[var(--bg-subtle)]">
+                  <td className="max-w-md truncate px-4 py-3 font-medium text-[var(--ink)]" title={req.title}>
+                    {req.title}
                   </td>
-                  <td className="py-4 pr-6 font-medium text-[var(--ink)]">{req.title}</td>
-                  <td className="py-4">
+                  <td className="px-4 py-3">
                     <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">
+                  <td className="px-4 py-3 text-[var(--ink-soft)]">{PRIORITY_LABEL[req.priority] || '无'}</td>
+                  <td className="px-4 py-3 text-[var(--ink-soft)]">{req.creator?.name || '—'}</td>
+                  <td className="px-4 py-3 text-right">
+                    <div className="inline-flex gap-1">
                       <button
                         onClick={() => onEdit(req)}
-                        className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg)] hover:text-[var(--ink)]"
+                        className="rounded-md p-1.5 text-[var(--ink-muted)] transition-colors hover:bg-[var(--bg-hover)] 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)]"
+                        className="rounded-md p-1.5 text-[var(--ink-muted)] transition-colors hover:bg-red-50 hover:text-red-600"
                         title="删除"
                       >
                         <Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
@@ -131,10 +124,10 @@ function FilterChip({
   return (
     <button
       onClick={onClick}
-      className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${
+      className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
         active
-          ? 'bg-[var(--ink)] text-[var(--bg)]'
-          : 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]'
+          ? 'bg-[var(--ink)] text-white'
+          : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'
       }`}
     >
       {children}