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