feat: 实现需求管理、加班记录、成员/角色管理模块

- 需求模块：完整 CRUD、状态流转（采纳/拒绝/关闭）、详情抽屉、产品→项目级联选择
- 加班记录：产品→项目→版本三级联动、月份筛选（MonthPicker）、CSV 导出
- 成员管理：左右布局（部门树+成员列表）、手机号脱敏、初始密码自动生成及规则设置
- 角色管理：卡片列表、系统角色保护、CRUD
- 通用组件：FilterSelect 下拉、MonthPicker 月份选择器、Pagination 分页
- 样式统一：状态标签加 border、日期输入现代化、筛选组件风格一致

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

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

@@ -7,6 +7,8 @@ import { useProductStore } from '@/stores/useProductStore';
 import { getProjectDetail, VersionWithContext } 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';
+import { CapsuleStages } from '@/components/version/CapsuleStages';
+import { MemberChips } from '@/components/version/MemberChips';
 
 /* ─── StatCard ─── */
 function StatCard({ value, label }: { value: number | string; label: string }) {
@@ -34,97 +36,6 @@ function ProgressBar({ role, percent, daysSpent }: { role: Role; percent: number
   );
 }
 
-/* ─── CapsuleStages (胶囊分段条) ─── */
-function CapsuleStages({ currentStage, progress }: {
-  currentStage?: Stage;
-  progress?: { role: Role; percent: number; daysSpent: number }[];
-}) {
-  const currentIdx = currentStage !== undefined
-    ? (currentStage === 'released' ? STAGES.length : STAGE_INDEX[currentStage])
-    : -1;
-  const progressMap = (progress ?? []).reduce<Record<Role, { percent: number; daysSpent: number }>>((acc, p) => {
-    acc[p.role] = { percent: p.percent, daysSpent: p.daysSpent };
-    return acc;
-  }, {} as Record<Role, { percent: number; daysSpent: number }>);
-
-  const stageRoleMap: Record<Stage, Role[]> = {
-    requirement: ['product'],
-    product_design: ['product'],
-    ui_design: ['ui'],
-    dev: ['frontend', 'backend'],
-    integration: ['frontend', 'backend'],
-    testing: ['testing'],
-    released: [],
-  };
-
-  function getStageInfo(stage: Stage) {
-    const roles = stageRoleMap[stage];
-    if (roles.length === 0) return { percent: 0, days: 0, hasData: false };
-    const items = roles.map((r) => progressMap[r]).filter(Boolean);
-    if (items.length === 0) return { percent: 0, days: 0, hasData: false };
-    const percent = Math.round(items.reduce((s, i) => s + i.percent, 0) / items.length);
-    const days = Math.max(...items.map((i) => i.daysSpent));
-    return { percent, days, hasData: true };
-  }
-
-  return (
-    <div className="flex rounded-lg border border-[var(--line)] overflow-hidden bg-[var(--bg-card)]">
-      {STAGES.map((stage, idx) => {
-        const isCompleted = idx < currentIdx;
-        const isCurrent = idx === currentIdx;
-        const info = getStageInfo(stage.key);
-
-        return (
-          <div
-            key={stage.key}
-            className={`flex-1 flex flex-col ${idx < STAGES.length - 1 ? 'border-r border-[var(--line-soft)]' : ''}`}
-          >
-            <div className="flex items-center justify-between px-2 py-1.5 min-h-[28px]">
-              <span className={`text-[10px] font-medium leading-tight ${isCurrent ? 'text-[var(--ink)]' : isCompleted ? 'text-[var(--ink-soft)]' : 'text-[var(--ink-muted)]'}`}>
-                {stage.label}
-              </span>
-              <span className={`text-[9px] leading-tight ${isCompleted ? 'text-emerald-600' : isCurrent ? 'text-blue-600 font-medium' : 'text-[var(--ink-muted)]'}`}>
-                {isCompleted ? (info.hasData ? `${info.days}天` : '-') : isCurrent ? (info.hasData ? `${info.percent}%` : '-') : ''}
-              </span>
-            </div>
-            <div className="h-[3px] w-full bg-zinc-50">
-              {isCompleted && <div className="h-full bg-zinc-700 w-full" />}
-              {isCurrent && info.hasData && (
-                <div className="h-full bg-blue-100 w-full">
-                  <div className="h-full bg-blue-500 transition-all" style={{ width: `${info.percent}%` }} />
-                </div>
-              )}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-/* ─── MemberChips (compact inline for version cards) ─── */
-function MemberChips({ members }: { members: { role: Role; name: string }[] }) {
-  if (!members || members.length === 0) return null;
-  const grouped = ROLES.reduce<Record<Role, string[]>>((acc, r) => {
-    acc[r.key] = members.filter((m) => m.role === r.key).map((m) => m.name);
-    return acc;
-  }, {} as Record<Role, string[]>);
-  return (
-    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]">
-      {ROLES.map((r) => {
-        const names = grouped[r.key];
-        if (!names || names.length === 0) return null;
-        return (
-          <span key={r.key} className="inline-flex items-center gap-1 text-[var(--ink-soft)]">
-            <span className="font-medium text-[var(--ink-muted)]">{r.label}</span>
-            {names.join('/')}
-          </span>
-        );
-      })}
-    </div>
-  );
-}
-
 /* ─── VersionCard ─── */
 function VersionCard({ version }: { version: VersionWithContext }) {
   const [expanded, setExpanded] = useState(false);
@@ -318,7 +229,7 @@ export default function ProjectDetailPage() {
     <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">
-          <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)]">
+          <button onClick={() => router.push('/projects')} className="flex items-center gap-1 rounded-md px-1.5 py-1 text-[12px] 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>

apps/web/app/projects/page.tsx

@@ -7,6 +7,7 @@ import { useProductStore } from '@/stores/useProductStore';
 import { flattenProjects, ProjectWithContext } from '@/lib/derive';
 import { VersionChip } from '@/components/version/VersionChip';
 import { VersionStatus } from '@/lib/version-status';
+import { Pagination, usePagination } from '@/components/Pagination';
 
 export default function ProjectsPage() {
   const router = useRouter();
@@ -29,6 +30,8 @@ export default function ProjectsPage() {
     });
   }, [allProjects, search, productFilter]);
 
+  const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filtered, 20);
+
   const productOptions = useMemo(
     () => overview.map((p) => ({ id: p.id, name: p.name })),
     [overview]
@@ -90,10 +93,13 @@ export default function ProjectsPage() {
         {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 className="overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
+              {paged.map((proj) => (
+                <ProjectRow key={proj.id} proj={proj} onClick={() => router.push(`/projects/${proj.id}`)} />
+              ))}
+            </div>
+            <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />
           </div>
         )}
       </div>