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

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

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

apps/web/components/product/ProductCard.tsx

@@ -29,8 +29,8 @@ export function ProductCard({ product, onClick }: Props) {
           <Package className="h-[18px] w-[18px] text-[var(--accent-hover)]" strokeWidth={1.75} />
         </div>
         <div className="min-w-0 flex-1">
-          <h3 className="truncate text-[14px] font-semibold text-[var(--ink)]">{product.name}</h3>
-          <p className="mt-1 line-clamp-2 text-[12.5px] leading-relaxed text-[var(--ink-muted)]">
+          <h3 className="truncate text-[13px] font-semibold text-[var(--ink)]">{product.name}</h3>
+          <p className="mt-1 line-clamp-2 text-[12px] leading-relaxed text-[var(--ink-muted)]">
             {product.description || '暂无描述'}
           </p>
         </div>

apps/web/components/product/RequirementForm.tsx

@@ -50,7 +50,7 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
                 key={value}
                 type="button"
                 onClick={() => setPriority(v)}
-                className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
+                className={`h-7 rounded-md px-2.5 text-[12px] transition-colors ${
                   active
                     ? 'bg-[var(--accent)] text-white'
                     : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'

apps/web/components/product/RequirementStatusBadge.tsx

@@ -1,26 +1,16 @@
 'use client';
 
-import { RequirementStatus } from '@ftb/shared';
-import { REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
+import type { RequirementStatus } from '@/lib/requirement';
+import { REQ_STATUS_LABEL, REQ_STATUS_COLOR } from '@/lib/requirement';
 
 interface Props {
   status: RequirementStatus;
 }
 
-const STATUS_STYLES: Record<RequirementStatus, string> = {
-  [RequirementStatus.DRAFT]: 'bg-zinc-100 text-zinc-700 ring-zinc-200',
-  [RequirementStatus.REVIEWING]: 'bg-blue-50 text-blue-700 ring-blue-200',
-  [RequirementStatus.APPROVED]: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
-  [RequirementStatus.REJECTED]: 'bg-red-50 text-red-700 ring-red-200',
-  [RequirementStatus.DELIVERED]: 'bg-violet-50 text-violet-700 ring-violet-200',
-};
-
 export function RequirementStatusBadge({ status }: Props) {
   return (
-    <span
-      className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset ${STATUS_STYLES[status]}`}
-    >
-      {REQUIREMENT_STATUS_LABEL[status]}
+    <span className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ${REQ_STATUS_COLOR[status]}`}>
+      {REQ_STATUS_LABEL[status]}
     </span>
   );
 }

apps/web/components/product/RequirementTable.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { RequirementStatus } from '@ftb/shared';
+import type { RequirementStatus } from '@/lib/requirement';
+import { REQ_STATUS_LABEL } from '@/lib/requirement';
 import { Pencil, Trash2 } from 'lucide-react';
 import { RequirementStatusBadge } from './RequirementStatusBadge';
-import { PRIORITY_LABEL, REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
+import { PRIORITY_LABEL } from '@/lib/constants';
 
 interface RequirementItem {
   id: string;
@@ -25,7 +26,7 @@ interface Props {
   onCreate: () => void;
 }
 
-const ALL_STATUSES = Object.values(RequirementStatus);
+const ALL_STATUSES: RequirementStatus[] = ['pending_review', 'adopted', 'rejected', 'planned', 'developing', 'testing', 'released', 'closed'];
 
 export function RequirementTable({
   requirements,
@@ -44,7 +45,7 @@ export function RequirementTable({
           </FilterChip>
           {ALL_STATUSES.map((s) => (
             <FilterChip key={s} active={statusFilter === s} onClick={() => onFilterChange(s)}>
-              {REQUIREMENT_STATUS_LABEL[s]}
+              {REQ_STATUS_LABEL[s]}
             </FilterChip>
           ))}
         </div>
@@ -58,19 +59,19 @@ export function RequirementTable({
 
       {requirements.length === 0 ? (
         <div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-16 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>
+          <p className="text-[13px] font-medium text-[var(--ink-soft)]">暂无需求</p>
+          <p className="mt-1.5 text-[12px] 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-right text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">操作</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">标题</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">状态</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">优先级</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">创建者</th>
+                <th className="px-4 py-2.5 text-right text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">操作</th>
               </tr>
             </thead>
             <tbody>
@@ -124,7 +125,7 @@ function FilterChip({
   return (
     <button
       onClick={onClick}
-      className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
+      className={`h-7 rounded-md px-2.5 text-[12px] transition-colors ${
         active
           ? 'bg-[var(--accent)] text-white'
           : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'