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/app/globals.css

@@ -1,52 +1,47 @@
-@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');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;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;
+  /* Surfaces — zinc neutrals */
+  --bg: #fafafa;
+  --bg-card: #ffffff;
+  --bg-subtle: #f4f4f5;
+  --bg-hover: #f4f4f5;
+
+  /* Text */
+  --ink: #18181b;
+  --ink-soft: #52525b;
+  --ink-muted: #a1a1aa;
+
+  /* Borders */
+  --line: #e4e4e7;
+  --line-soft: #f4f4f5;
+
+  /* Brand — calm blue */
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --accent-soft: #eff6ff;
+  --accent-ring: rgba(59, 130, 246, 0.15);
+
+  /* Shadow */
+  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
+  --shadow-md: 0 4px 12px -2px rgba(24, 24, 27, 0.06), 0 2px 4px -1px rgba(24, 24, 27, 0.04);
 }
 
 html, body {
   background: var(--bg);
   color: var(--ink);
-  font-family: 'DM Sans', system-ui, sans-serif;
-  font-feature-settings: 'ss01', 'ss02', 'cv11';
+  font-family: 'Inter', system-ui, sans-serif;
+  font-feature-settings: 'cv11', 'ss01';
   -webkit-font-smoothing: antialiased;
-}
-
-.font-display {
-  font-family: 'Fraunces', Georgia, serif;
-  font-feature-settings: 'ss01';
+  font-size: 14px;
 }
 
 .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

@@ -11,9 +11,9 @@ 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' },
+  { key: 'requirements' as const, label: '需求池' },
+  { key: 'projects' as const, label: '项目' },
+  { key: 'versions' as const, label: '版本' },
 ];
 
 export default function ProductDetailPage() {
@@ -61,7 +61,7 @@ export default function ProductDetailPage() {
   };
 
   const handleDeleteProduct = async () => {
-    if (confirm('确定要删除此产品吗？此操作不可撤销。')) {
+    if (confirm('确定删除该产品？此操作不可撤销。')) {
       await deleteProduct(productId);
       router.push('/products');
     }
@@ -69,133 +69,128 @@ export default function ProductDetailPage() {
 
   if (!currentProduct) {
     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 className="flex h-full items-center justify-center text-[13px] text-[var(--ink-muted)]">
+        加载中…
       </div>
     );
   }
 
   return (
-    <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="flex h-full flex-col">
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-6">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => router.push('/products')}
+            className="flex h-7 items-center gap-1 rounded-md px-1.5 text-[12.5px] text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" strokeWidth={2} />
+            产品
+          </button>
+          <span className="text-[var(--ink-muted)]">/</span>
+          <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">
+            {currentProduct.name}
+          </h1>
+        </div>
+        <div className="flex gap-1.5">
+          <button
+            onClick={() => setEditingProduct(true)}
+            className="flex h-8 items-center gap-1 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2.5 text-[12.5px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
+          >
+            <Pencil className="h-3 w-3" strokeWidth={2} />
+            编辑
+          </button>
+          <button
+            onClick={handleDeleteProduct}
+            className="flex h-8 items-center gap-1 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2.5 text-[12.5px] text-[var(--ink-soft)] hover:border-red-200 hover:bg-red-50 hover:text-red-600"
+          >
+            <Trash2 className="h-3 w-3" strokeWidth={2} />
+            删除
+          </button>
+        </div>
+      </header>
 
-        <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="border-b border-[var(--line)] bg-[var(--bg-card)] px-6">
+        {currentProduct.description && (
+          <p className="line-clamp-2 py-3 text-[13px] text-[var(--ink-soft)]">{currentProduct.description}</p>
         )}
-
-        <div className="mb-8 flex gap-8 border-b border-[var(--line)]">
+        <div className="flex gap-1">
           {TABS.map((tab) => (
             <button
               key={tab.key}
               onClick={() => setActiveTab(tab.key)}
-              className={`relative flex items-baseline gap-2 pb-3 transition-colors ${
+              className={`relative h-9 px-3 text-[13px] transition-colors ${
                 activeTab === tab.key
-                  ? 'text-[var(--ink)]'
-                  : 'text-[var(--ink-muted)] hover:text-[var(--ink-soft)]'
+                  ? 'font-medium text-[var(--ink)]'
+                  : 'text-[var(--ink-soft)] hover:text-[var(--ink)]'
               }`}
             >
-              <span className="font-mono text-[10px] tabular-nums">{tab.index}</span>
-              <span className="text-[14px] font-medium tracking-tight">{tab.label}</span>
+              {tab.label}
               {activeTab === tab.key && (
-                <span className="absolute -bottom-px left-0 right-0 h-px bg-[var(--ink)]" />
+                <span className="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-[var(--accent)]" />
               )}
             </button>
           ))}
         </div>
+      </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>
-        )}
+      <div className="flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-[1400px] p-6">
+          {editingProduct && (
+            <div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
+              <h3 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">编辑产品</h3>
+              <ProductForm
+                initialData={{ name: currentProduct.name, description: currentProduct.description }}
+                onSubmit={async (data) => {
+                  await updateProduct(productId, data);
+                  setEditingProduct(false);
+                  await fetchProduct(productId);
+                }}
+                onCancel={() => setEditingProduct(false)}
+              />
+            </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 === 'requirements' && (
+            <>
+              {(showReqForm || editingReq) && (
+                <div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
+                  <h3 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">
+                    {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 === '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>
-        )}
+          {activeTab === 'projects' && (
+            <div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center text-[13px] text-[var(--ink-muted)]">
+              项目管理功能开发中
+            </div>
+          )}
+
+          {activeTab === 'versions' && (
+            <div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center text-[13px] text-[var(--ink-muted)]">
+              版本管理功能开发中
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

apps/web/app/products/page.tsx

@@ -27,85 +27,67 @@ export default function ProductsPage() {
   };
 
   return (
-    <div className="relative min-h-full">
-      <div className="grain pointer-events-none absolute inset-0" />
+    <div className="flex h-full flex-col">
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-6">
+        <div className="flex items-center gap-2.5">
+          <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">产品</h1>
+          <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
+            {products.length}
+          </span>
+        </div>
+        <button
+          onClick={() => setShowForm(true)}
+          className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] transition-colors hover:bg-[var(--accent-hover)]"
+        >
+          <Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
+          新建产品
+        </button>
+      </header>
 
-      <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} />
+      <div className="flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-[1400px] p-6">
+          <div className="mb-5 flex items-center gap-2">
+            <div className="relative max-w-xs flex-1">
+              <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
               <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"
+                placeholder="搜索产品名称"
+                className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
               />
             </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>
+          {showForm && (
+            <div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
+              <h2 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">新建产品</h2>
+              <ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
+            </div>
+          )}
+
+          {loading ? (
+            <div className="py-20 text-center text-[13px] text-[var(--ink-muted)]">加载中…</div>
+          ) : filtered.length === 0 ? (
+            <div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
+              <p className="text-[14px] font-medium text-[var(--ink-soft)]">
+                {search ? '没有找到匹配的产品' : '尚未创建任何产品'}
+              </p>
+              <p className="mt-1.5 text-[12.5px] text-[var(--ink-muted)]">
+                {search ? '尝试其他关键字' : '点击右上角"新建产品"开始'}
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {filtered.map((product) => (
+                <ProductCard
+                  key={product.id}
+                  product={product as any}
+                  onClick={(id) => router.push(`/products/${id}`)}
+                />
+              ))}
+            </div>
+          )}
         </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>
     </div>
   );

apps/web/components/layout/Sidebar.tsx

@@ -1,17 +1,24 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import { Inbox, Package, FolderKanban, Tag, Users, Sparkles } from 'lucide-react';
+import { Inbox, Package, FolderKanban, Tag, Users, LayoutGrid, Search } from 'lucide-react';
 
-const NAV_ITEMS = [
-  { label: '与我相关', path: '/workspace', icon: Inbox, index: '01' },
-  { label: '产品', path: '/products', icon: Package, index: '02' },
-  { label: '项目', path: '/projects', icon: FolderKanban, index: '03' },
-  { label: '版本', path: '/versions', icon: Tag, index: '04' },
-];
-
-const ADMIN_ITEMS = [
-  { label: '成员管理', path: '/admin/members', icon: Users },
+const NAV_GROUPS = [
+  {
+    label: '工作区',
+    items: [
+      { label: '与我相关', path: '/workspace', icon: Inbox },
+      { label: '产品', path: '/products', icon: Package },
+      { label: '项目', path: '/projects', icon: FolderKanban },
+      { label: '版本', path: '/versions', icon: Tag },
+    ],
+  },
+  {
+    label: '管理',
+    items: [
+      { label: '成员', path: '/admin/members', icon: Users },
+    ],
+  },
 ];
 
 export function Sidebar() {
@@ -22,93 +29,62 @@ export function Sidebar() {
     pathname === path || (path !== '/' && pathname.startsWith(path));
 
   return (
-    <aside
-      className="relative flex h-screen w-64 flex-col border-r border-[var(--line)] bg-[var(--bg-elevated)]"
-      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>
+    <aside className="flex h-screen w-60 flex-col border-r border-[var(--line)] bg-[var(--bg-card)]">
+      <div className="flex h-14 items-center gap-2 px-4">
+        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--accent)]">
+          <LayoutGrid className="h-4 w-4 text-white" strokeWidth={2.25} />
+        </div>
+        <span className="text-[14px] font-semibold tracking-tight text-[var(--ink)]">FTB</span>
+      </div>
+
+      <div className="px-3 pb-2">
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
+          <input
+            placeholder="搜索"
+            className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-subtle)] pl-8 pr-2 text-[12.5px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:bg-[var(--bg-card)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
+          />
         </div>
       </div>
 
-      <div className="px-6 pb-3">
-        <p className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          ── Workspace
-        </p>
-      </div>
-
-      <nav className="flex-1 px-3">
-        {NAV_ITEMS.map((item) => {
-          const Icon = item.icon;
-          const active = isActive(item.path);
-          return (
-            <button
-              key={item.path}
-              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 className="flex-1 px-2 pt-2">
+        {NAV_GROUPS.map((group) => (
+          <div key={group.label} className="mb-4">
+            <p className="mb-1 px-2 text-[11px] font-medium text-[var(--ink-muted)]">
+              {group.label}
+            </p>
+            {group.items.map((item) => {
+              const Icon = item.icon;
+              const active = isActive(item.path);
+              return (
+                <button
+                  key={item.path}
+                  onClick={() => router.push(item.path)}
+                  className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-[13px] transition-colors ${
+                    active
+                      ? 'bg-[var(--accent-soft)] font-medium text-[var(--accent-hover)]'
+                      : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]'
+                  }`}
+                >
+                  <Icon className="h-4 w-4 shrink-0" strokeWidth={1.75} />
+                  <span className="truncate">{item.label}</span>
+                </button>
+              );
+            })}
+          </div>
+        ))}
       </nav>
 
-      <div className="border-t border-[var(--line)] px-3 py-4">
-        <p className="mb-2 px-3 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          ── Admin
-        </p>
-        {ADMIN_ITEMS.map((item) => {
-          const Icon = item.icon;
-          const active = isActive(item.path);
-          return (
-            <button
-              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 ${
-                active
-                  ? 'bg-[var(--accent-soft)] text-[var(--accent)]'
-                  : '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)]">
+      <div className="border-t border-[var(--line)] p-2">
+        <button className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-[var(--bg-subtle)]">
+          <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--accent)] text-[11px] font-semibold text-white">
             A
           </div>
-          <div className="min-w-0">
+          <div className="min-w-0 flex-1">
             <p className="truncate text-[13px] font-medium text-[var(--ink)]">Admin</p>
-            <p className="truncate text-[11px] text-[var(--ink-muted)]">administrator</p>
+            <p className="truncate text-[11px] text-[var(--ink-muted)]">管理员</p>
           </div>
-        </div>
+        </button>
       </div>
     </aside>
   );

apps/web/components/product/ProductCard.tsx

@@ -12,55 +12,41 @@ interface ProductWithCount {
 
 interface Props {
   product: ProductWithCount;
-  index: number;
   onClick: (id: string) => void;
 }
 
-export function ProductCard({ product, index, onClick }: Props) {
+export function ProductCard({ product, onClick }: Props) {
   const reqCount = product._count?.requirements ?? 0;
   const projCount = product._count?.projects ?? 0;
 
   return (
-    <article
+    <div
       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)]"
+      className="group cursor-pointer rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-5 transition-all hover:border-[var(--ink-muted)] hover:shadow-[var(--shadow-md)]"
     >
-      <div className="flex items-start justify-between">
-        <span className="font-mono text-[10px] tabular-nums uppercase tracking-[0.18em] text-[var(--ink-muted)]">
-          № {String(index + 1).padStart(3, '0')}
-        </span>
-        <Package className="h-4 w-4 text-[var(--ink-muted)] transition-colors group-hover:text-[var(--accent)]" strokeWidth={1.75} />
-      </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 className="mb-4 flex items-start gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--accent-soft)]">
+          <Package className="h-[18px] w-[18px] text-[var(--accent-hover)]" strokeWidth={1.75} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate text-[14px] font-semibold text-[var(--ink)]">{product.name}</h3>
+          <p className="mt-1 line-clamp-2 text-[12.5px] leading-relaxed text-[var(--ink-muted)]">
+            {product.description || '暂无描述'}
+          </p>
         </div>
-        <span className="font-mono text-[11px] text-[var(--ink-muted)] opacity-0 transition-opacity group-hover:opacity-100">
-          →
-        </span>
       </div>
-    </article>
+
+      <div className="flex items-center gap-4 border-t border-[var(--line-soft)] pt-3">
+        <div className="flex items-baseline gap-1">
+          <span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{reqCount}</span>
+          <span className="text-[11px] text-[var(--ink-muted)]">需求</span>
+        </div>
+        <div className="h-3 w-px bg-[var(--line)]" />
+        <div className="flex items-baseline gap-1">
+          <span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{projCount}</span>
+          <span className="text-[11px] text-[var(--ink-muted)]">项目</span>
+        </div>
+      </div>
+    </div>
   );
 }

apps/web/components/product/ProductForm.tsx

@@ -19,21 +19,21 @@ export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-5">
+    <form onSubmit={handleSubmit} className="space-y-4">
       <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          产品名称
+        <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
+          产品名称<span className="ml-0.5 text-red-500">*</span>
         </label>
         <input
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
-          placeholder="例如：FTB 智能项目管理"
-          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"
+          placeholder="输入产品名称"
+          className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
         />
       </div>
       <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
+        <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
           描述
         </label>
         <textarea
@@ -41,22 +41,22 @@ export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
           onChange={(e) => setDescription(e.target.value)}
           rows={3}
           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"
+          className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] leading-relaxed text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
         />
       </div>
       <div className="flex justify-end gap-2 pt-2">
         <button
           type="button"
           onClick={onCancel}
-          className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]"
+          className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
         >
           取消
         </button>
         <button
           type="submit"
-          className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
+          className="h-8 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)]"
         >
-          {initialData ? '保存修改' : '创建产品'}
+          {initialData ? '保存' : '创建'}
         </button>
       </div>
     </form>

apps/web/components/product/RequirementForm.tsx

@@ -21,36 +21,27 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-5">
-      <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          需求标题
-        </label>
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <Field label="标题" required>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           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"
+          className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
         />
-      </div>
-      <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          描述
-        </label>
+      </Field>
+      <Field label="描述">
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={4}
           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"
+          className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] leading-relaxed text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
         />
-      </div>
-      <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          优先级
-        </label>
-        <div className="mt-2 flex gap-1.5">
+      </Field>
+      <Field label="优先级">
+        <div className="flex gap-1">
           {Object.entries(PRIORITY_LABEL).map(([value, label]) => {
             const v = Number(value);
             const active = priority === v;
@@ -59,10 +50,10 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
                 key={value}
                 type="button"
                 onClick={() => setPriority(v)}
-                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)]'
                 }`}
               >
                 {label}
@@ -70,22 +61,40 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
             );
           })}
         </div>
-      </div>
-      <div className="flex justify-end gap-2 pt-2">
-        <button
-          type="button"
-          onClick={onCancel}
-          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-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
-        >
-          {initialData ? '保存修改' : '创建需求'}
-        </button>
-      </div>
+      </Field>
+      <FormActions onCancel={onCancel} submitLabel={initialData ? '保存' : '创建'} />
     </form>
   );
 }
+
+function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
+        {label}
+        {required && <span className="ml-0.5 text-red-500">*</span>}
+      </label>
+      {children}
+    </div>
+  );
+}
+
+function FormActions({ onCancel, submitLabel }: { onCancel: () => void; submitLabel: string }) {
+  return (
+    <div className="flex justify-end gap-2 pt-2">
+      <button
+        type="button"
+        onClick={onCancel}
+        className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
+      >
+        取消
+      </button>
+      <button
+        type="submit"
+        className="h-8 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)]"
+      >
+        {submitLabel}
+      </button>
+    </div>
+  );
+}

apps/web/components/product/RequirementStatusBadge.tsx

@@ -7,41 +7,19 @@ 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',
-  },
+const STATUS_STYLES: Record<RequirementStatus, string> = {
+  [RequirementStatus.DRAFT]: 'bg-zinc-100 text-zinc-700 ring-zinc-200',
+  [RequirementStatus.REVIEWING]: 'bg-blue-50 text-blue-700 ring-blue-200',
+  [RequirementStatus.APPROVED]: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
+  [RequirementStatus.REJECTED]: 'bg-red-50 text-red-700 ring-red-200',
+  [RequirementStatus.DELIVERED]: 'bg-violet-50 text-violet-700 ring-violet-200',
 };
 
 export function RequirementStatusBadge({ status }: Props) {
-  const style = STATUS_STYLES[status];
   return (
     <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ${style.bg} ${style.text}`}
+      className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset ${STATUS_STYLES[status]}`}
     >
-      <span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
       {REQUIREMENT_STATUS_LABEL[status]}
     </span>
   );

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}