feat: 实现产品/项目/版本三大模块完整功能

- 产品列表：拖拽排序持久化、编辑弹窗、删除校验（活跃版本需迁移）
- 项目列表：新建项目表单（产品选择+重名校验）、产品筛选、版本归属修复
- 版本列表：新建版本表单（迭代类型自动生成版本号）、状态/项目筛选、倒序排列
- 项目详情页：概览统计、人员墙（参与次数）、版本时间线（阶段流水线+进度条）
- 全局优化：筛选栏统一为header下方固定行、按钮颜色改为主题蓝、API探测300ms、store缓存
- 数据持久化到localStorage，支持离线开发

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/globals.css

@@ -21,10 +21,10 @@
   --line-soft: #f4f4f5;
 
   /* Brand — calm blue */
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
   --accent-soft: #eff6ff;
-  --accent-ring: rgba(59, 130, 246, 0.15);
+  --accent-ring: rgba(37, 99, 235, 0.18);
 
   /* Shadow */
   --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);

apps/web/app/products/page.tsx

@@ -1,94 +1,530 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Plus, Search } from 'lucide-react';
+import { useState, useEffect, useMemo } from 'react';
+import {
+  Plus,
+  Search,
+  GripVertical,
+  ChevronRight,
+  Pencil,
+  Trash2,
+  X,
+  AlertTriangle,
+  Package,
+} from 'lucide-react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useProductStore } from '@/stores/useProductStore';
-import { ProductCard } from '@/components/product/ProductCard';
 import { ProductForm } from '@/components/product/ProductForm';
+import { VersionChip } from '@/components/version/VersionChip';
+import type { VersionStatus } from '@/lib/version-status';
 
-export default function ProductsPage() {
-  const router = useRouter();
-  const { products, loading, fetchProducts, createProduct } = useProductStore();
-  const [showForm, setShowForm] = useState(false);
-  const [search, setSearch] = useState('');
+type ProductOverview = {
+  id: string;
+  name: string;
+  description: string;
+  projects: { id: string; name: string; description: string; createdAt: string }[];
+  versions: {
+    id: string;
+    name: string;
+    status?: string;
+    releaseDate: string | null;
+    createdAt: string;
+  }[];
+  _count?: { requirements: number; projects: number; versions?: number };
+};
 
-  useEffect(() => {
-    fetchProducts();
-  }, [fetchProducts]);
+/* ─── Sortable Product Row ─── */
+function SortableProductRow({
+  product,
+  expanded,
+  onToggle,
+  onEdit,
+  onDelete,
+}: {
+  product: ProductOverview;
+  expanded: boolean;
+  onToggle: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: product.id });
 
-  const filtered = products.filter((p) =>
-    p.name.toLowerCase().includes(search.toLowerCase()),
-  );
-
-  const handleCreate = async (data: { name: string; description: string }) => {
-    await createProduct(data);
-    setShowForm(false);
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
   };
 
+  const activeVersions = product.versions.filter(
+    (v) => v.status === 'developing' || v.status === 'planned'
+  );
+  const releasedCount = product.versions.filter((v) => v.status === 'released').length;
+
   return (
-    <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>
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="border-b border-[var(--line-soft)] last:border-b-0"
+    >
+      <div className="flex items-center gap-2 px-4 py-3 group">
         <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)]"
+          {...attributes}
+          {...listeners}
+          className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] opacity-0 group-hover:opacity-100 transition-opacity"
+          aria-label="拖拽排序"
         >
-          <Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
-          新建产品
+          <GripVertical className="w-4 h-4" />
         </button>
-      </header>
 
-      <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="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>
-          </div>
-
-          {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>
+        <div
+          className="flex-1 flex items-center gap-2 cursor-pointer min-w-0"
+          onClick={onToggle}
+        >
+          <ChevronRight
+            className={`w-4 h-4 text-[var(--ink-muted)] transition-transform duration-150 ${
+              expanded ? 'rotate-90' : ''
+            }`}
+          />
+          <span className="text-[13px] font-medium truncate">{product.name}</span>
+          {product.description && (
+            <span className="text-[12px] text-[var(--ink-muted)] truncate hidden sm:inline">
+              {product.description}
+            </span>
           )}
+        </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 className="flex items-center gap-1">
+          <button
+            onClick={onEdit}
+            className="p-1.5 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)] opacity-0 group-hover:opacity-100 transition-all"
+            aria-label="编辑"
+          >
+            <Pencil className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={onDelete}
+            className="p-1.5 rounded-md hover:bg-red-50 text-[var(--ink-muted)] hover:text-red-600 opacity-0 group-hover:opacity-100 transition-all"
+            aria-label="删除"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-3 text-[11px] text-[var(--ink-muted)] ml-2 pl-2 border-l border-[var(--line-soft)]">
+          <span className="hidden md:inline">{product._count?.projects ?? product.projects.length} 项目</span>
+          <span className="hidden md:inline">{product._count?.versions ?? product.versions.length} 版本</span>
+          {product._count?.requirements != null && (
+            <span className="hidden md:inline">{product._count.requirements} 需求</span>
+          )}
+        </div>
+      </div>
+
+      {expanded && (
+        <div className="bg-[var(--bg-subtle)] border-t border-[var(--line-soft)]">
+          {product.projects.length === 0 ? (
+            <div className="px-12 py-6 text-[12px] text-[var(--ink-muted)] text-center">
+              暂无项目
             </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 className="px-12 py-2">
+              {product.projects.map((proj) => {
+                const projVersions = product.versions.filter((v) =>
+                  v.name.toLowerCase().startsWith(proj.name.toLowerCase())
+                );
+                const projActive = projVersions.filter(
+                  (v) => v.status === 'developing' || v.status === 'planned'
+                );
+                const projReleased = projVersions.filter((v) => v.status === 'released').length;
+                return (
+                  <div
+                    key={proj.id}
+                    className="flex items-center gap-3 py-2 border-b border-[var(--line-soft)] last:border-b-0"
+                  >
+                    <span className="text-[12px] font-medium text-[var(--ink-soft)] min-w-0 flex-shrink-0">
+                      {proj.name}
+                    </span>
+                    {proj.description && (
+                      <span className="text-[11px] text-[var(--ink-muted)] truncate hidden lg:inline">
+                        {proj.description}
+                      </span>
+                    )}
+                    <div className="flex-1 flex items-center gap-1.5 flex-wrap justify-end">
+                      {projActive.map((v) => (
+                        <VersionChip
+                          key={v.id}
+                          name={v.name}
+                          status={(v.status as VersionStatus) ?? 'developing'}
+                        />
+                      ))}
+                      {projReleased > 0 && (
+                        <span className="text-[11px] text-[var(--ink-muted)] px-1.5">
+                          已发布 {projReleased}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
           )}
         </div>
+      )}
+    </div>
+  );
+}
+
+/* ─── Edit Product Modal ─── */
+function EditProductModal({
+  product,
+  onClose,
+  onSubmit,
+}: {
+  product: ProductOverview;
+  onClose: () => void;
+  onSubmit: (data: { name: string; description: string }) => void | Promise<void>;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] shadow-[var(--shadow-md)] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--line)]">
+          <h3 className="text-[14px] font-semibold">编辑产品</h3>
+          <button
+            onClick={onClose}
+            className="p-1 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)]"
+            aria-label="关闭"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="p-5">
+          <ProductForm
+            initialData={{ name: product.name, description: product.description }}
+            onSubmit={onSubmit}
+            onCancel={onClose}
+          />
+        </div>
       </div>
     </div>
   );
 }
+
+/* ─── Migrate Dialog ─── */
+function MigrateDialog({
+  source,
+  others,
+  onClose,
+  onConfirm,
+}: {
+  source: ProductOverview;
+  others: ProductOverview[];
+  onClose: () => void;
+  onConfirm: (targetId: string) => void | Promise<void>;
+}) {
+  const [targetId, setTargetId] = useState('');
+  const activeVersions = source.versions.filter(
+    (v) => v.status === 'developing' || v.status === 'planned'
+  );
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] shadow-[var(--shadow-md)] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--line)]">
+          <h3 className="text-[14px] font-semibold">删除产品</h3>
+          <button
+            onClick={onClose}
+            className="p-1 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)]"
+            aria-label="关闭"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="p-5 space-y-4">
+          <div className="flex items-start gap-3 p-3 rounded-xl bg-amber-50 border border-amber-200">
+            <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
+            <div className="text-[13px] text-amber-800">
+              <p className="font-medium mb-1">
+                该产品下还有 {activeVersions.length} 个未发布版本
+              </p>
+              <ul className="space-y-0.5 text-[12px]">
+                {activeVersions.map((v) => (
+                  <li key={v.id}>· {v.name}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1.5 font-medium">
+              迁移至
+            </label>
+            <select
+              value={targetId}
+              onChange={(e) => setTargetId(e.target.value)}
+              className="w-full h-9 px-3 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] text-[13px] focus:outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent-ring)]"
+            >
+              <option value="">选择目标产品...</option>
+              {others.map((p) => (
+                <option key={p.id} value={p.id}>{p.name}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex items-center justify-end gap-2 pt-1">
+            <button
+              onClick={onClose}
+              className="h-8 px-3 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] hover:bg-[var(--bg-hover)] text-[13px] text-[var(--ink-soft)] transition-colors"
+            >
+              取消
+            </button>
+            <button
+              onClick={() => targetId && onConfirm(targetId)}
+              disabled={!targetId || others.length === 0}
+              className="h-8 px-3 rounded-lg bg-red-600 hover:bg-red-700 disabled:bg-zinc-300 disabled:cursor-not-allowed text-white text-[13px] font-medium transition-colors"
+            >
+              迁移并删除
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Main Page ─── */
+export default function ProductsPage() {
+  const {
+    overview,
+    loading,
+    fetchOverview,
+    createProduct,
+    updateProduct,
+    deleteProduct,
+    reorderProducts,
+    migrateAndDeleteProduct,
+  } = useProductStore();
+
+  const [search, setSearch] = useState('');
+  const [showCreate, setShowCreate] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [editing, setEditing] = useState<ProductOverview | null>(null);
+  const [migrateTarget, setMigrateTarget] = useState<ProductOverview | null>(null);
+  const [hasInitialized, setHasInitialized] = useState(false);
+
+  useEffect(() => {
+    fetchOverview();
+  }, [fetchOverview]);
+
+  useEffect(() => {
+    if (!hasInitialized && overview.length > 0) {
+      setExpanded(new Set([overview[0].id]));
+      setHasInitialized(true);
+    }
+  }, [overview, hasInitialized]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return overview;
+    const q = search.toLowerCase();
+    return overview.filter(
+      (p) =>
+        p.name.toLowerCase().includes(q) ||
+        (p.description ?? '').toLowerCase().includes(q)
+    );
+  }, [overview, search]);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = overview.findIndex((p) => p.id === active.id);
+    const newIndex = overview.findIndex((p) => p.id === over.id);
+    if (oldIndex < 0 || newIndex < 0) return;
+    const next = [...overview];
+    const [moved] = next.splice(oldIndex, 1);
+    next.splice(newIndex, 0, moved);
+    reorderProducts(next.map((p) => p.id));
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpanded((prev) => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      return n;
+    });
+  };
+
+  const handleDelete = (product: ProductOverview) => {
+    const active = product.versions.filter(
+      (v) => v.status === 'developing' || v.status === 'planned'
+    );
+    if (active.length === 0) {
+      if (confirm(`确认删除产品「${product.name}」？此操作不可撤销。`)) {
+        deleteProduct(product.id);
+      }
+    } else {
+      setMigrateTarget(product);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col bg-[var(--bg)] text-[var(--ink)]">
+      {/* Header */}
+      <div className="h-14 shrink-0 flex items-center justify-between px-5 border-b border-[var(--line)] bg-[var(--bg-card)]">
+        <div className="flex items-center gap-2.5">
+          <h1 className="text-[15px] font-semibold tracking-tight">产品</h1>
+          <span className="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-[var(--bg-subtle)] text-[var(--ink-soft)] text-[11px] font-medium">
+            {overview.length}
+          </span>
+        </div>
+        <button
+          onClick={() => setShowCreate((v) => !v)}
+          className="inline-flex items-center gap-1.5 h-8 px-3 rounded-lg bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white text-[13px] font-medium shadow-[var(--shadow-sm)] transition-colors"
+        >
+          <Plus className="w-4 h-4" />
+          新建产品
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex shrink-0 items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--ink-muted)]" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="搜索产品..."
+            className="w-full h-8 pl-9 pr-3 rounded-lg border border-[var(--line)] bg-[var(--bg)] text-[13px] placeholder:text-[var(--ink-muted)] focus:outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent-ring)] transition-colors"
+          />
+        </div>
+        <div className="ml-auto flex items-center gap-3 text-[12px] text-[var(--ink-muted)]">
+          <span className="inline-flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-[#2563eb]" />开发中
+          </span>
+          <span className="inline-flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-orange-500" />规划中
+          </span>
+          <span className="inline-flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-zinc-400" />已发布
+          </span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto bg-[var(--bg)] px-5 py-4">
+
+        {/* Inline Create Form */}
+        {showCreate && (
+          <div className="mb-3 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-4 shadow-[var(--shadow-sm)]">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-[13px] font-semibold">新建产品</h3>
+              <button
+                onClick={() => setShowCreate(false)}
+                className="p-1 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)]"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <ProductForm
+              onSubmit={async (data) => {
+                await createProduct(data);
+                setShowCreate(false);
+              }}
+              onCancel={() => setShowCreate(false)}
+            />
+          </div>
+        )}
+
+        {/* Product List */}
+        <div className="rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden shadow-[var(--shadow-sm)]">
+          {loading && overview.length === 0 ? (
+            <div className="py-16 text-center text-[13px] text-[var(--ink-muted)]">加载中...</div>
+          ) : filtered.length === 0 ? (
+            <div className="py-16 text-center text-[13px] text-[var(--ink-muted)]">
+              <Package className="w-10 h-10 mx-auto mb-2 opacity-40" />
+              暂无产品
+            </div>
+          ) : (
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={filtered.map((p) => p.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                {filtered.map((product) => (
+                  <SortableProductRow
+                    key={product.id}
+                    product={product}
+                    expanded={expanded.has(product.id)}
+                    onToggle={() => toggleExpand(product.id)}
+                    onEdit={() => setEditing(product)}
+                    onDelete={() => handleDelete(product)}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
+          )}
+        </div>
+      </div>
+
+      {/* Edit Modal */}
+      {editing && (
+        <EditProductModal
+          product={editing}
+          onClose={() => setEditing(null)}
+          onSubmit={async (data) => {
+            await updateProduct(editing.id, data);
+            setEditing(null);
+          }}
+        />
+      )}
+
+      {/* Migrate Dialog */}
+      {migrateTarget && (
+        <MigrateDialog
+          source={migrateTarget}
+          others={overview.filter((p) => p.id !== migrateTarget.id)}
+          onClose={() => setMigrateTarget(null)}
+          onConfirm={async (targetId) => {
+            await migrateAndDeleteProduct(migrateTarget.id, targetId);
+            setMigrateTarget(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}

apps/web/app/projects/[id]/page.tsx

@@ -0,0 +1,362 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { ChevronLeft, Package, Calendar, Clock, Users, Tag } from 'lucide-react';
+import { useProductStore } from '@/stores/useProductStore';
+import { getProjectDetail } from '@/lib/derive';
+import { Stage, Role, STAGES, ROLES, STAGE_INDEX, ROLE_LABEL } from '@/lib/stage';
+import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_BG } from '@/lib/version-status';
+
+interface VersionWithContext {
+  id: string; name: string; status: VersionStatus;
+  releaseDate: string | null; createdAt: string;
+  productId: string; productName: string; projectName: string;
+  currentStage?: Stage;
+  startDate?: string | null;
+  expectedReleaseDate?: string | null;
+  members?: { role: Role; name: string }[];
+  progress?: { role: Role; percent: number; daysSpent: number }[];
+}
+
+/* ─── StatCard ─── */
+function StatCard({ value, label }: { value: number | string; label: string }) {
+  return (
+    <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
+      <div className="text-2xl font-bold text-[var(--ink)]">{value}</div>
+      <div className="text-xs text-[var(--ink-muted)] mt-1">{label}</div>
+    </div>
+  );
+}
+
+/* ─── ProgressBar ─── */
+function ProgressBar({ role, percent, daysSpent }: { role: Role; percent: number; daysSpent: number }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="w-12 text-xs text-[var(--ink-soft)] shrink-0">{ROLE_LABEL[role]}</span>
+      <div className="flex-1 h-2 rounded-full bg-zinc-100 overflow-hidden">
+        <div
+          className="h-full rounded-full bg-blue-500 transition-all"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      <span className="text-xs text-[var(--ink-muted)] w-8 text-right">{percent}%</span>
+      <span className="text-xs text-[var(--ink-muted)] w-10 text-right">
+        {daysSpent === 0 ? '-' : `${daysSpent}天`}
+      </span>
+    </div>
+  );
+}
+
+/* ─── StagePipeline ─── */
+function StagePipeline({ currentStage }: { currentStage?: Stage }) {
+  const currentIdx = currentStage !== undefined ? STAGE_INDEX[currentStage] : -1;
+
+  const stageLabel: Record<Stage, string> = {
+    requirement: '需求',
+    product_design: '产品设计',
+    ui_design: 'UI设计',
+    dev: '开发',
+    integration: '联调',
+    testing: '测试',
+    released: '已发布',
+  };
+
+  return (
+    <div className="flex items-center w-full py-2">
+      {STAGES.map((stage, idx) => {
+        const isCompleted = idx < currentIdx;
+        const isCurrent = idx === currentIdx;
+        const isFuture = idx > currentIdx;
+
+        return (
+          <div key={stage.key} className="flex items-center flex-1 last:flex-none">
+            <div className="flex flex-col items-center gap-1">
+              {isCurrent ? (
+                <div className="relative flex items-center justify-center">
+                  <div className="absolute h-4 w-4 rounded-full bg-blue-500/30 animate-pulse" />
+                  <div className="relative h-3 w-3 rounded-full bg-blue-500 ring-2 ring-blue-200" />
+                </div>
+              ) : isCompleted ? (
+                <div className="h-2.5 w-2.5 rounded-full bg-blue-500" />
+              ) : (
+                <div className="h-2.5 w-2.5 rounded-full bg-zinc-200" />
+              )}
+              <span
+                className={`text-[10px] whitespace-nowrap ${
+                  isCurrent
+                    ? 'text-blue-600 font-medium'
+                    : isCompleted
+                    ? 'text-[var(--ink-soft)]'
+                    : 'text-[var(--ink-muted)]'
+                }`}
+              >
+                {stage.label}
+              </span>
+            </div>
+            {idx < STAGES.length - 1 && (
+              <div
+                className={`h-0.5 flex-1 mx-1 mb-4 ${
+                  isCompleted ? 'bg-blue-500' : 'bg-zinc-200'
+                }`}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/* ─── VersionCard ─── */
+function VersionCard({ version }: { version: VersionWithContext }) {
+  const statusBg = VERSION_STATUS_BG[version.status];
+  const statusLabel = VERSION_STATUS_LABEL[version.status];
+
+  // Mode: planned
+  if (version.status === 'planned') {
+    return (
+      <div className="rounded-xl border border-dashed border-[var(--line)] p-4">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-[var(--ink)]">{version.name}</span>
+          <span className={`text-xs px-2 py-0.5 rounded-full ${statusBg}`}>
+            {statusLabel}
+          </span>
+          <span className="text-xs text-[var(--ink-muted)] ml-2">暂无详情</span>
+        </div>
+      </div>
+    );
+  }
+
+  const totalDays = (version.progress ?? []).reduce((sum, p) => sum + p.daysSpent, 0);
+
+  // Mode: released
+  if (version.status === 'released') {
+    return (
+      <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="font-semibold text-[var(--ink)]">{version.name}</span>
+          <span className={`text-xs px-2 py-0.5 rounded-full ${statusBg}`}>
+            {statusLabel}
+          </span>
+        </div>
+        <div className="text-xs text-[var(--ink-muted)] mb-2 flex items-center gap-1">
+          <Calendar className="h-3 w-3" />
+          <span>
+            {version.startDate ?? '-'} → {version.releaseDate ?? '-'} 发布  总 {totalDays} 天
+          </span>
+        </div>
+        {version.members && version.members.length > 0 && (
+          <div className="text-xs text-[var(--ink-soft)]">
+            {version.members
+              .map((m) => `${ROLE_LABEL[m.role]} ${m.name}`)
+              .join(' · ')}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Mode: developing
+  return (
+    <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-5 shadow-sm">
+      <div className="flex items-center gap-2 mb-3">
+        <span className="font-semibold text-[var(--ink)]">{version.name}</span>
+        <span className={`text-xs px-2 py-0.5 rounded-full ${statusBg}`}>
+          {statusLabel}
+        </span>
+      </div>
+
+      <div className="mb-4">
+        <StagePipeline currentStage={version.currentStage} />
+      </div>
+
+      <div className="flex items-center justify-between text-xs text-[var(--ink-muted)] mb-3 pb-3 border-b border-[var(--line-soft)]">
+        <div className="flex items-center gap-1">
+          <Calendar className="h-3 w-3" />
+          <span>
+            {version.startDate ?? '-'} 开始 → 预计 {version.expectedReleaseDate ?? '-'}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Clock className="h-3 w-3" />
+          <span>已耗时 {totalDays} 天</span>
+        </div>
+      </div>
+
+      {version.members && version.members.length > 0 && (
+        <div className="text-xs text-[var(--ink-soft)] mb-4">
+          {version.members
+            .map((m) => `${ROLE_LABEL[m.role]} ${m.name}`)
+            .join(' · ')}
+        </div>
+      )}
+
+      {version.progress && version.progress.length > 0 && (
+        <div className="space-y-2">
+          {version.progress.map((p) => (
+            <ProgressBar
+              key={p.role}
+              role={p.role}
+              percent={p.percent}
+              daysSpent={p.daysSpent}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ─── Main Page Component ─── */
+export default function ProjectDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const projectId = params.id as string;
+  const { overview, fetchOverview } = useProductStore();
+
+  useEffect(() => {
+    fetchOverview();
+  }, [fetchOverview]);
+
+  const project = useMemo(
+    () => getProjectDetail(overview, projectId),
+    [overview, projectId]
+  );
+
+  const sortedVersions = useMemo(() => {
+    if (!project) return [];
+    return [...project.versions].sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  }, [project]);
+
+  const stats = useMemo(() => {
+    if (!project) return { total: 0, developing: 0, released: 0, totalDays: 0 };
+    const total = project.versions.length;
+    const developing = project.versions.filter((v) => v.status === 'developing').length;
+    const released = project.versions.filter((v) => v.status === 'released').length;
+    const totalDays = project.versions.reduce((sum, v) => {
+      return sum + (v.progress ?? []).reduce((s, p) => s + p.daysSpent, 0);
+    }, 0);
+    return { total, developing, released, totalDays };
+  }, [project]);
+
+  // Team members aggregation
+  const teamByRole = useMemo(() => {
+    if (!project) return {};
+    const map: Record<Role, Record<string, number>> = {} as any;
+    ROLES.forEach((r) => (map[r.key] = {}));
+    project.versions.forEach((v) => {
+      (v.members ?? []).forEach((m) => {
+        if (!map[m.role]) map[m.role] = {};
+        map[m.role][m.name] = (map[m.role][m.name] || 0) + 1;
+      });
+    });
+    return map;
+  }, [project]);
+
+  if (!project) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3">
+        <p className="text-sm text-[var(--ink-muted)]">项目不存在</p>
+        <button
+          onClick={() => router.push('/projects')}
+          className="text-xs text-[var(--accent)] hover:underline"
+        >
+          返回项目列表
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
+        <div className="flex items-center">
+          <button
+            onClick={() => router.push('/projects')}
+            className="flex items-center gap-1 rounded-md px-1.5 py-1 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="ml-2 text-[var(--ink-muted)]">/</span>
+          <span className="ml-2 text-[15px] font-semibold text-[var(--ink)]">
+            {project.name}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-2.5 py-1 text-xs text-[var(--ink-soft)]">
+          <Package className="h-3 w-3" />
+          <span>{project.productName}</span>
+        </div>
+      </header>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-5 bg-[var(--bg)]">
+        <div className="max-w-4xl mx-auto space-y-6">
+          {/* Overview Stats Row */}
+          <div className="grid grid-cols-4 gap-4">
+            <StatCard value={stats.total} label="总版本数" />
+            <StatCard value={stats.developing} label="进行中" />
+            <StatCard value={stats.released} label="已发布" />
+            <StatCard value={stats.totalDays} label="总耗时(天)" />
+          </div>
+
+          {/* Team Members Section */}
+          <section>
+            <div className="flex items-center gap-2 mb-3">
+              <Users className="h-4 w-4 text-[var(--ink-soft)]" />
+              <h2 className="text-sm font-semibold text-[var(--ink)]">项目人员</h2>
+            </div>
+            <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-5 space-y-3">
+              {ROLES.map((role) => {
+                const peopleMap = (teamByRole as any)[role.key] || {};
+                const people = Object.entries(peopleMap).sort((a, b) => (b[1] as number) - (a[1] as number));
+                return (
+                  <div key={role.key} className="flex items-start gap-3">
+                    <span className="w-12 text-xs text-[var(--ink-soft)] shrink-0 pt-1">
+                      {role.label}
+                    </span>
+                    <div className="flex flex-wrap gap-1.5 flex-1">
+                      {people.length === 0 ? (
+                        <span className="text-xs text-[var(--ink-muted)]">-</span>
+                      ) : (
+                        people.map(([name, count]) => (
+                          <span
+                            key={name}
+                            className="rounded-full bg-[var(--bg-subtle)] px-2 py-0.5 text-xs text-[var(--ink-soft)]"
+                          >
+                            {name}({count as number}次)
+                          </span>
+                        ))
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+
+          {/* Version Timeline Section */}
+          <section>
+            <div className="flex items-center gap-2 mb-3">
+              <Tag className="h-4 w-4 text-[var(--ink-soft)]" />
+              <h2 className="text-sm font-semibold text-[var(--ink)]">版本记录</h2>
+            </div>
+            <div className="space-y-3">
+              {sortedVersions.length === 0 ? (
+                <div className="rounded-xl border border-dashed border-[var(--line)] p-6 text-center text-xs text-[var(--ink-muted)]">
+                  暂无版本
+                </div>
+              ) : (
+                sortedVersions.map((v) => <VersionCard key={v.id} version={v} />)
+              )}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/projects/page.tsx

@@ -0,0 +1,386 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Search, FolderKanban, Package, ChevronDown, Plus, X } from 'lucide-react';
+import { useProductStore } from '@/stores/useProductStore';
+import { flattenProjects, ProjectWithContext } from '@/lib/derive';
+import { VersionChip } from '@/components/version/VersionChip';
+import { VersionStatus } from '@/lib/version-status';
+
+export default function ProjectsPage() {
+  const router = useRouter();
+  const { overview, fetchOverview, createProject } = useProductStore();
+  const [search, setSearch] = useState('');
+  const [productFilter, setProductFilter] = useState<string>('all');
+  const [showForm, setShowForm] = useState(false);
+
+  useEffect(() => {
+    fetchOverview();
+  }, [fetchOverview]);
+
+  const allProjects = useMemo(() => flattenProjects(overview), [overview]);
+
+  const filtered = useMemo(() => {
+    return allProjects.filter((p) => {
+      if (productFilter !== 'all' && p.productId !== productFilter) return false;
+      if (search && !p.name.toLowerCase().includes(search.toLowerCase())) return false;
+      return true;
+    });
+  }, [allProjects, search, productFilter]);
+
+  const productOptions = useMemo(
+    () => overview.map((p) => ({ id: p.id, name: p.name })),
+    [overview]
+  );
+
+  const activeProductName =
+    productFilter === 'all'
+      ? '全部产品'
+      : productOptions.find((p) => p.id === productFilter)?.name || '全部产品';
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
+        <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)]">
+            {allProjects.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)] hover:bg-[var(--accent-hover)]"
+        >
+          <Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
+          新建项目
+        </button>
+      </header>
+
+      {/* Filters */}
+      <div className="flex shrink-0 items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
+        <div className="relative flex-1 max-w-sm">
+          <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)]" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="搜索项目名称…"
+            className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] 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>
+
+        <ProductDropdown
+          value={productFilter}
+          options={productOptions}
+          onChange={setProductFilter}
+          activeName={activeProductName}
+        />
+
+        <div className="ml-auto flex items-center gap-3 text-[11px] text-[var(--ink-muted)]">
+          <LegendDot color="bg-blue-500" label="开发中" />
+          <LegendDot color="bg-orange-500" label="规划中" />
+          <LegendDot color="bg-gray-400" label="已发布" />
+        </div>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-y-auto bg-[var(--bg)] p-5">
+        {filtered.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <div className="overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
+            {filtered.map((proj) => (
+              <ProjectRow key={proj.id} proj={proj} onClick={() => router.push(`/projects/${proj.id}`)} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showForm && (
+        <CreateProjectModal
+          products={productOptions}
+          overview={overview}
+          onClose={() => setShowForm(false)}
+          onSubmit={async (productId, name, description) => {
+            await createProject(productId, { name, description });
+            setShowForm(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+/* ─── ProjectRow ─────────────────────────────────────────────────── */
+
+function ProjectRow({
+  proj,
+  onClick,
+}: {
+  proj: ProjectWithContext;
+  onClick: () => void;
+}) {
+  const activeVersions = proj.versions.filter((v) => v.status !== 'released');
+  const releasedCount = proj.versions.filter((v) => v.status === 'released').length;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full flex items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--bg-hover)] border-b border-[var(--line-soft)] last:border-b-0"
+    >
+      <FolderKanban size={20} className="shrink-0 text-[var(--ink-muted)]" />
+      <span className="font-medium text-[var(--ink)] min-w-[120px] shrink-0">
+        {proj.name}
+      </span>
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-[var(--bg-subtle)] text-xs text-[var(--ink-soft)] shrink-0">
+        <Package size={12} />
+        {proj.productName}
+      </span>
+      <span className="flex-1 text-sm text-[var(--ink-muted)] truncate">
+        {proj.description}
+      </span>
+      <div className="flex items-center gap-1.5 shrink-0">
+        {activeVersions.map((v) => (
+          <VersionChip key={v.id} name={v.name} status={v.status} />
+        ))}
+        {releasedCount > 0 && (
+          <span className="text-xs text-[var(--ink-muted)] ml-1">
+            +{releasedCount} 已发布
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}
+
+/* ─── ProductDropdown ────────────────────────────────────────────── */
+
+function ProductDropdown({
+  value,
+  options,
+  onChange,
+  activeName,
+}: {
+  value: string;
+  options: { id: string; name: string }[];
+  onChange: (v: string) => void;
+  activeName: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className={`flex h-8 items-center gap-1.5 rounded-lg border px-3 text-[13px] font-medium transition-colors ${
+          value !== 'all'
+            ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]'
+            : 'border-[var(--line)] bg-[var(--bg)] text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'
+        }`}
+      >
+        {activeName}
+        <ChevronDown size={14} />
+      </button>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 top-full z-20 mt-1 min-w-[160px] overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-card)] py-1 shadow-[var(--shadow-md)]">
+            <DropdownItem
+              active={value === 'all'}
+              onClick={() => { onChange('all'); setOpen(false); }}
+              label="全部产品"
+            />
+            {options.map((opt) => (
+              <DropdownItem
+                key={opt.id}
+                active={value === opt.id}
+                onClick={() => { onChange(opt.id); setOpen(false); }}
+                label={opt.name}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function DropdownItem({
+  active,
+  onClick,
+  label,
+}: {
+  active: boolean;
+  onClick: () => void;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`block w-full px-3 py-1.5 text-left text-[13px] transition-colors ${
+        active
+          ? 'bg-[var(--accent-soft)] text-[var(--accent)] font-medium'
+          : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+/* ─── LegendDot ──────────────────────────────────────────────────── */
+
+function LegendDot({ color, label }: { color: string; label: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <span className={`inline-block h-1.5 w-1.5 rounded-full ${color}`} />
+      {label}
+    </span>
+  );
+}
+
+/* ─── EmptyState ─────────────────────────────────────────────────── */
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
+      <FolderKanban size={32} className="text-[var(--ink-muted)] mb-3" />
+      <p className="text-sm font-medium text-[var(--ink-soft)]">暂无匹配项目</p>
+      <p className="mt-1 text-xs text-[var(--ink-muted)]">尝试调整搜索条件或筛选器</p>
+    </div>
+  );
+}
+
+/* ─── CreateProjectModal ─────────────────────────────────────────── */
+
+function CreateProjectModal({
+  products,
+  overview,
+  onClose,
+  onSubmit,
+}: {
+  products: { id: string; name: string }[];
+  overview: any[];
+  onClose: () => void;
+  onSubmit: (productId: string, name: string, description: string) => Promise<void>;
+}) {
+  const [productId, setProductId] = useState('');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [duplicateError, setDuplicateError] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!productId || !name.trim()) return;
+
+    const product = overview.find((p: any) => p.id === productId);
+    if (product) {
+      const exists = product.projects?.some(
+        (proj: any) => proj.name === name.trim()
+      );
+      if (exists) {
+        setDuplicateError(true);
+        return;
+      }
+    }
+
+    setSubmitting(true);
+    try {
+      await onSubmit(productId, name.trim(), description.trim());
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] p-6 shadow-[var(--shadow-md)]">
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-base font-semibold text-[var(--ink)]">新建项目</h2>
+          <button type="button" onClick={onClose} className="text-[var(--ink-muted)] hover:text-[var(--ink)]">
+            <X size={18} />
+          </button>
+        </div>
+        <div className="space-y-4">
+          {/* Product select */}
+          <div>
+            <label className="block text-[12px] font-medium text-[var(--ink-soft)] mb-1.5">
+              产品 <span className="text-red-500">*</span>
+            </label>
+            <div className="relative">
+              <select
+                value={productId}
+                onChange={(e) => setProductId(e.target.value)}
+                className="h-9 w-full appearance-none rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 pr-8 text-[13px] text-[var(--ink)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
+              >
+                <option value="">请选择产品</option>
+                {products.map((p) => (
+                  <option key={p.id} value={p.id}>{p.name}</option>
+                ))}
+              </select>
+              <ChevronDown size={14} className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-[var(--ink-muted)]" />
+            </div>
+          </div>
+
+          {/* Name */}
+          <div>
+            <label className="block text-[12px] font-medium text-[var(--ink-soft)] mb-1.5">
+              项目名称 <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => { setName(e.target.value); setDuplicateError(false); }}
+              placeholder="请输入项目名称"
+              className={`h-9 w-full rounded-lg border bg-[var(--bg)] px-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:outline-none focus:ring-2 ${
+                duplicateError
+                  ? 'border-red-500 focus:border-red-500 focus:ring-red-100'
+                  : 'border-[var(--line)] focus:border-[var(--accent)] focus:ring-[var(--accent-ring)]'
+              }`}
+            />
+            {duplicateError && (
+              <p className="mt-1 text-[11px] text-red-500">该产品下已存在同名项目</p>
+            )}
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-[12px] font-medium text-[var(--ink-soft)] mb-1.5">
+              描述
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="项目描述（可选）"
+              rows={3}
+              className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 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>
+
+        <div className="mt-6 flex items-center justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-medium text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={submitting || !productId || !name.trim()}
+            className="h-8 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {submitting ? '提交中…' : '创建'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/versions/page.tsx

@@ -0,0 +1,359 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Search, Tag, Plus, X, ChevronDown } from 'lucide-react';
+import { useProductStore } from '@/stores/useProductStore';
+import { flattenVersions, flattenProjects } from '@/lib/derive';
+import type { VersionWithContext } from '@/lib/derive';
+import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_DOT } from '@/lib/version-status';
+
+const STATUS_TABS: { key: VersionStatus | 'all'; label: string }[] = [
+  { key: 'all', label: '全部' },
+  { key: 'developing', label: '开发中' },
+  { key: 'planned', label: '规划中' },
+  { key: 'released', label: '已发布' },
+];
+
+function parseVersionNumber(name: string): number[] {
+  const match = name.match(/V([\d.]+)$/i);
+  if (!match) return [0];
+  return match[1].split('.').map(Number);
+}
+
+function compareVersionsDesc(a: string, b: string): number {
+  const va = parseVersionNumber(a);
+  const vb = parseVersionNumber(b);
+  const len = Math.max(va.length, vb.length);
+  for (let i = 0; i < len; i++) {
+    const na = va[i] ?? 0;
+    const nb = vb[i] ?? 0;
+    if (nb !== na) return nb - na;
+  }
+  return 0;
+}
+
+function sortVersions(versions: VersionWithContext[]): VersionWithContext[] {
+  return [...versions].sort((a, b) => {
+    const projCmp = a.projectName.localeCompare(b.projectName, 'zh-CN');
+    if (projCmp !== 0) return projCmp;
+    return compareVersionsDesc(a.name, b.name);
+  });
+}
+
+export default function VersionsPage() {
+  const { overview, fetchOverview, createVersion } = useProductStore();
+  const [search, setSearch] = useState('');
+  const [statusTab, setStatusTab] = useState<VersionStatus | 'all'>('all');
+  const [projectFilter, setProjectFilter] = useState('all');
+  const [projectDropdownOpen, setProjectDropdownOpen] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => { fetchOverview(); }, [fetchOverview]);
+
+  const allVersions = useMemo(() => flattenVersions(overview), [overview]);
+  const allProjects = useMemo(() => flattenProjects(overview), [overview]);
+
+  const filtered = useMemo(() => {
+    const list = allVersions.filter((v) => {
+      if (statusTab !== 'all' && v.status !== statusTab) return false;
+      if (projectFilter !== 'all' && v.projectName !== projectFilter) return false;
+      if (search && !v.name.toLowerCase().includes(search.toLowerCase())) return false;
+      return true;
+    });
+    return sortVersions(list);
+  }, [allVersions, search, statusTab, projectFilter]);
+
+  return (
+    <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-5">
+        <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)]">{allVersions.length}</span>
+        </div>
+        <button onClick={() => setShowModal(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)] hover:bg-[var(--accent-hover)] transition-colors">
+          <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+          新建版本
+        </button>
+      </header>
+
+      {/* Filters */}
+      <div className="flex shrink-0 items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
+        <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 value={search} onChange={(e) => setSearch(e.target.value)} placeholder="搜索版本号" className="h-8 w-64 rounded-lg border border-[var(--line)] bg-[var(--bg)] 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>
+        <div className="flex gap-1">
+          {STATUS_TABS.map((tab) => (
+            <button key={tab.key} onClick={() => setStatusTab(tab.key)} className={`h-8 rounded-lg px-3 text-[12.5px] transition-colors ${statusTab === tab.key ? 'bg-[var(--accent)] text-white' : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)]'}`}>
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="relative">
+          <button onClick={() => setProjectDropdownOpen(!projectDropdownOpen)} className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[12.5px] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors">
+            {projectFilter === 'all' ? '全部项目' : projectFilter}
+            <ChevronDown className="h-3 w-3" strokeWidth={2} />
+          </button>
+          {projectDropdownOpen && (
+            <div className="absolute left-0 top-full z-10 mt-1 min-w-[140px] rounded-lg border border-[var(--line)] bg-[var(--bg-card)] py-1 shadow-[var(--shadow-md)]">
+              <button onClick={() => { setProjectFilter('all'); setProjectDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12.5px] transition-colors ${projectFilter === 'all' ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
+                全部项目
+              </button>
+              {allProjects.map((p) => (
+                <button key={p.id} onClick={() => { setProjectFilter(p.name); setProjectDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12.5px] transition-colors ${projectFilter === p.name ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
+                  {p.name}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="ml-auto flex items-center gap-3 text-[11.5px] text-[var(--ink-muted)]">
+          <span className="flex items-center gap-1.5"><span className="inline-block h-1.5 w-1.5 rounded-full bg-blue-500" />开发中</span>
+          <span className="flex items-center gap-1.5"><span className="inline-block h-1.5 w-1.5 rounded-full bg-orange-500" />规划中</span>
+          <span className="flex items-center gap-1.5"><span className="inline-block h-1.5 w-1.5 rounded-full bg-zinc-300" />已发布</span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto bg-[var(--bg)]">
+        <div className="px-5 py-4">
+          {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)]">没有找到匹配的版本</p>
+              <p className="mt-1.5 text-[12.5px] text-[var(--ink-muted)]">尝试调整筛选条件</p>
+            </div>
+          ) : (
+            <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-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-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">创建时间</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filtered.map((v) => <VersionRow key={v.id} version={v} />)}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showModal && <NewVersionModal overview={overview} onClose={() => setShowModal(false)} onCreate={createVersion} />}
+    </div>
+  );
+}
+
+function VersionRow({ version }: { version: VersionWithContext }) {
+  const dotCls = VERSION_STATUS_DOT[version.status];
+  return (
+    <tr className="border-b border-[var(--line-soft)] last:border-0 transition-colors hover:bg-[var(--bg-subtle)]">
+      <td className="px-4 py-3 font-medium text-[var(--ink)]">
+        <div className="flex items-center gap-2">
+          <Tag className="h-3.5 w-3.5 text-[var(--ink-muted)]" strokeWidth={1.75} />
+          {version.name}
+        </div>
+      </td>
+      <td className="px-4 py-3">
+        <span className="inline-flex items-center gap-1.5 text-[12px] text-[var(--ink-soft)]">
+          <span className={`h-1.5 w-1.5 rounded-full ${dotCls}`} />
+          {VERSION_STATUS_LABEL[version.status]}
+        </span>
+      </td>
+      <td className="px-4 py-3 text-[var(--ink-soft)]">{version.projectName}</td>
+      <td className="px-4 py-3 text-[var(--ink-muted)]">{version.productName}</td>
+      <td className="px-4 py-3 text-[var(--ink-muted)] tabular-nums">{new Date(version.createdAt).toLocaleDateString('zh-CN')}</td>
+    </tr>
+  );
+}
+
+type IterationType = 'major' | 'minor' | 'patch';
+
+interface NewVersionModalProps {
+  overview: any[];
+  onClose: () => void;
+  onCreate: (productId: string, data: { name: string; status: VersionStatus }) => void;
+}
+
+function getNextVersion(existingVersions: any[], projectName: string, type: IterationType): string {
+  const projectVersions = existingVersions
+    .filter((v: any) => v.name.startsWith(projectName + 'V'))
+    .map((v: any) => {
+      const match = v.name.match(/V([\d.]+)$/i);
+      return match ? match[1].split('.').map(Number) : null;
+    })
+    .filter(Boolean) as number[][];
+
+  if (projectVersions.length === 0) {
+    if (type === 'major') return '1.0';
+    if (type === 'minor') return '0.1';
+    return '0.0.1';
+  }
+
+  // Find the max version
+  projectVersions.sort((a, b) => {
+    const len = Math.max(a.length, b.length);
+    for (let i = 0; i < len; i++) {
+      const diff = (b[i] ?? 0) - (a[i] ?? 0);
+      if (diff !== 0) return diff;
+    }
+    return 0;
+  });
+  const latest = projectVersions[0];
+
+  if (type === 'major') {
+    return `${(latest[0] ?? 0) + 1}.0`;
+  } else if (type === 'minor') {
+    return `${latest[0] ?? 0}.${(latest[1] ?? 0) + 1}`;
+  } else {
+    const major = latest[0] ?? 0;
+    const minor = latest[1] ?? 0;
+    const patch = latest[2] ?? 0;
+    return `${major}.${minor}.${patch + 1}`;
+  }
+}
+
+function NewVersionModal({ overview, onClose, onCreate }: NewVersionModalProps) {
+  const [productId, setProductId] = useState('');
+  const [projectId, setProjectId] = useState('');
+  const [projectName, setProjectName] = useState('');
+  const [iterationType, setIterationType] = useState<IterationType | ''>('');
+  const [versionNumber, setVersionNumber] = useState('');
+  const [status, setStatus] = useState<VersionStatus>('planned');
+  const [submitting, setSubmitting] = useState(false);
+
+  const selectedProduct = overview.find((p: any) => p.id === productId);
+  const projects = selectedProduct?.projects ?? [];
+  const existingVersions = selectedProduct?.versions ?? [];
+
+  // When product changes, reset project
+  const handleProductChange = (pid: string) => {
+    setProductId(pid);
+    setProjectId('');
+    setProjectName('');
+    setIterationType('');
+    setVersionNumber('');
+  };
+
+  // When project changes
+  const handleProjectChange = (projId: string) => {
+    const proj = projects.find((p: any) => p.id === projId);
+    setProjectId(projId);
+    setProjectName(proj?.name ?? '');
+    setIterationType('');
+    setVersionNumber('');
+  };
+
+  // When iteration type changes, auto-generate version number
+  const handleIterationChange = (type: IterationType) => {
+    setIterationType(type);
+    if (projectName) {
+      const next = getNextVersion(existingVersions, projectName, type);
+      setVersionNumber(next);
+    }
+  };
+
+  const handleVersionInput = (val: string) => {
+    // Only allow digits and dots
+    const cleaned = val.replace(/[^\d.]/g, '');
+    setVersionNumber(cleaned);
+  };
+
+  const canSubmit = productId && projectId && versionNumber && !submitting;
+
+  const handleSubmit = async () => {
+    if (!canSubmit) return;
+    setSubmitting(true);
+    try {
+      await onCreate(productId, { name: `${projectName}V${versionNumber}`, status });
+      onClose();
+    } catch (e) {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-[15px] font-semibold text-[var(--ink)]">新建版本</h2>
+          <button onClick={onClose} className="rounded-lg p-1 text-[var(--ink-muted)] hover:bg-[var(--bg-hover)] transition-colors">
+            <X className="h-4 w-4" strokeWidth={2} />
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          {/* 产品选择 */}
+          <div>
+            <label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">产品选择<span className="text-red-500">*</span></label>
+            <select value={productId} onChange={(e) => handleProductChange(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]">
+              <option value="">请选择产品</option>
+              {overview.map((p: any) => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+          </div>
+
+          {/* 项目选择 */}
+          <div>
+            <label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">项目选择<span className="text-red-500">*</span></label>
+            <select value={projectId} onChange={(e) => handleProjectChange(e.target.value)} disabled={!productId} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] disabled:opacity-50 focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]">
+              <option value="">请选择项目</option>
+              {projects.map((p: any) => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+          </div>
+
+          {/* 迭代类型 */}
+          <div>
+            <label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">迭代类型<span className="text-red-500">*</span></label>
+            <div className="grid grid-cols-3 gap-2">
+              {([
+                { key: 'major' as const, label: '大版本', hint: 'X.0' },
+                { key: 'minor' as const, label: '中版本', hint: '1.X' },
+                { key: 'patch' as const, label: '小版本', hint: '1.2.X' },
+              ]).map((opt) => (
+                <button key={opt.key} onClick={() => handleIterationChange(opt.key)} disabled={!projectId} className={`flex flex-col items-center gap-0.5 rounded-lg border px-3 py-2 transition-colors disabled:opacity-50 ${iterationType === opt.key ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]' : 'border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)]'}`}>
+                  <span className="text-[12.5px] font-medium">{opt.label}</span>
+                  <span className="text-[10.5px] text-[var(--ink-muted)] tabular-nums">{opt.hint}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 版本号 */}
+          <div>
+            <label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">版本号</label>
+            <input value={versionNumber} onChange={(e) => handleVersionInput(e.target.value)} placeholder="1.0" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] tabular-nums text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]" />
+            {projectName && versionNumber && (
+              <p className="mt-1.5 text-[11.5px] text-[var(--ink-muted)]">将创建：<span className="font-medium text-[var(--ink-soft)]">{projectName}V{versionNumber}</span></p>
+            )}
+          </div>
+
+          {/* 状态 */}
+          <div>
+            <label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">状态</label>
+            <div className="flex gap-2">
+              {([
+                { key: 'planned' as VersionStatus, label: '规划中' },
+                { key: 'developing' as VersionStatus, label: '开发中' },
+              ]).map((opt) => (
+                <button key={opt.key} onClick={() => setStatus(opt.key)} className={`flex-1 h-9 rounded-lg border px-3 text-[12.5px] transition-colors ${status === opt.key ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]' : 'border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)]'}`}>
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-end gap-2">
+          <button onClick={onClose} className="h-9 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-4 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-hover)] transition-colors">取消</button>
+          <button onClick={handleSubmit} disabled={!canSubmit} className="h-9 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+            {submitting ? '提交中…' : '创建'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}