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

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

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

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