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