feat(dev-task): 开发任务模块 V1 完整实现

- 核心库：dev-task.ts（类型+状态机+进度计算）、task-worklog.ts（工时）、task-category.ts（字典）、work-item.ts（聚合契约）
- Store：useDevTaskStore（CRUD+状态流转）、useTaskWorklogStore（工时记录）、useTaskCategoryStore（字典管理）
- UI组件：DevTaskTab、DevTaskCreateModal、DevTaskDetailDrawer、DevTaskRow、WorklogPanel、StatusBadge、CategoryChip
- 集成：版本详情页"开发任务"Tab、"与我相关"工作台开发任务分组、任务类型管理页
- 设计文档：spec + 实施计划

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

apps/web/app/admin/categories/page.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Plus, Pencil, Trash2, Shield } from 'lucide-react';
+import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
+import { CATEGORY_GROUP_LABEL } from '@/lib/task-category';
+import type { CategoryGroup } from '@/lib/task-category';
+
+export default function CategoriesPage() {
+  const { categories, fetchCategories, addCategory, updateCategory, deleteCategory } = useTaskCategoryStore();
+  useEffect(() => { fetchCategories(); }, [fetchCategories]);
+
+  const [newName, setNewName] = useState('');
+  const [newGroup, setNewGroup] = useState<CategoryGroup>('development');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+
+  const groups: CategoryGroup[] = ['development', 'testing', 'implementation', 'other'];
+
+  const handleAdd = () => {
+    if (!newName.trim()) return;
+    addCategory(newName.trim(), newGroup);
+    setNewName('');
+  };
+
+  const handleSaveEdit = (id: string) => {
+    if (editName.trim()) updateCategory(id, { name: editName.trim() });
+    setEditingId(null);
+  };
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto space-y-6">
+      <h1 className="text-[16px] font-semibold text-[var(--ink)]">任务类型管理</h1>
+
+      <div className="flex gap-2">
+        <input value={newName} onChange={(e) => setNewName(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleAdd(); }} placeholder="新类型名称" className="flex-1 h-9 rounded-lg border border-[var(--line)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+        <select value={newGroup} onChange={(e) => setNewGroup(e.target.value as CategoryGroup)} className="h-9 rounded-lg border border-[var(--line)] px-3 text-[13px]">
+          {groups.map((g) => <option key={g} value={g}>{CATEGORY_GROUP_LABEL[g]}</option>)}
+        </select>
+        <button onClick={handleAdd} className="h-9 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]"><Plus className="h-3.5 w-3.5 inline mr-1" />添加</button>
+      </div>
+
+      {groups.map((g) => {
+        const items = categories.filter((c) => c.group === g);
+        if (items.length === 0) return null;
+        return (
+          <div key={g}>
+            <h2 className="text-[13px] font-medium text-[var(--ink-soft)] mb-2">{CATEGORY_GROUP_LABEL[g]}</h2>
+            <div className="rounded-lg border border-[var(--line)] divide-y divide-[var(--line)]">
+              {items.map((cat) => (
+                <div key={cat.id} className="flex items-center gap-3 px-4 py-2.5">
+                  {cat.color && <span className="h-3 w-3 rounded-full shrink-0" style={{ backgroundColor: cat.color }} />}
+                  {editingId === cat.id ? (
+                    <input value={editName} onChange={(e) => setEditName(e.target.value)} onBlur={() => handleSaveEdit(cat.id)} onKeyDown={(e) => { if (e.key === 'Enter') handleSaveEdit(cat.id); }} autoFocus className="flex-1 h-7 rounded border border-[var(--line)] px-2 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+                  ) : (
+                    <span className="flex-1 text-[13px] text-[var(--ink)]">{cat.name}</span>
+                  )}
+                  {cat.isSystem && <span title="系统预置"><Shield className="h-3 w-3 text-[var(--ink-muted)]" /></span>}
+                  {!cat.isSystem && (
+                    <>
+                      <button onClick={() => { setEditingId(cat.id); setEditName(cat.name); }} className="p-1 rounded hover:bg-[var(--bg-subtle)]"><Pencil className="h-3 w-3 text-[var(--ink-muted)]" /></button>
+                      <button onClick={() => deleteCategory(cat.id)} className="p-1 rounded hover:bg-red-50"><Trash2 className="h-3 w-3 text-[var(--ink-muted)] hover:text-red-500" /></button>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -17,6 +17,7 @@ import { REQ_STATUS_LABEL, REQ_STATUS_COLOR } from '@/lib/requirement';
 import { OVERTIME_REASON_LABEL } from '@/lib/overtime';
 import { VersionRequirementsTab } from '@/components/version/VersionRequirementsTab';
 import { PlanTab } from '@/components/version/PlanTab';
+import { DevTaskTab } from '@/components/dev-task/DevTaskTab';
 import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
 import { useAuthStore } from '@/stores/useAuthStore';
 
@@ -450,6 +451,16 @@ export default function VersionDetailPage() {
               />
             );
           })()
+        ) : activeTab === 'tasks' ? (
+          (() => {
+            const versionReqs = requirements.filter((r) => r.versionId === version.id);
+            return (
+              <DevTaskTab
+                versionId={version.id}
+                requirementIds={versionReqs.map((r) => r.id)}
+              />
+            );
+          })()
         ) : (
           <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-12 flex items-center justify-center">
             <span className="text-[13px] text-[var(--ink-muted)]">功能开发中，敬请期待</span>

apps/web/app/workspace/page.tsx

@@ -2,22 +2,27 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Search, FileText, Palette, Layout, ClipboardList, Check, ExternalLink, Link2, FileUp } from 'lucide-react';
+import { Search, FileText, Palette, Layout, ClipboardList, Check, ExternalLink, Link2, FileUp, Code2 } from 'lucide-react';
 import { useProductStore } from '@/stores/useProductStore';
 import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
+import { useDevTaskStore } from '@/stores/useDevTaskStore';
+import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useAuthStore } from '@/stores/useAuthStore';
 import { flattenVersions } from '@/lib/derive';
 import { calcPlanProgress, calcLinkedReqProgress } from '@/lib/version-plan';
+import { DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR, formatHours } from '@/lib/dev-task';
 import type { PlanTask, VersionPlan } from '@/lib/version-plan';
+import type { DevTask } from '@/lib/dev-task';
 
-type TabKey = 'all' | 'research' | 'product' | 'ui';
+type TabKey = 'all' | 'research' | 'product' | 'ui' | 'devTask';
 
 const TABS: { key: TabKey; label: string; icon: any }[] = [
   { key: 'all', label: '全部待办', icon: ClipboardList },
   { key: 'research', label: '调研', icon: Search },
   { key: 'product', label: '产品方案', icon: FileText },
   { key: 'ui', label: 'UI设计', icon: Palette },
+  { key: 'devTask', label: '开发任务', icon: Code2 },
 ];
 
 export default function WorkspacePage() {
@@ -25,6 +30,8 @@ export default function WorkspacePage() {
   const { overview, fetchOverview } = useProductStore();
   const { plans, fetchPlans, updatePlan, completePlan } = useVersionPlanStore();
   const { requirements, fetchRequirements } = useRequirementStore();
+  const { tasks: devTasks, fetchTasks } = useDevTaskStore();
+  const { categories, fetchCategories } = useTaskCategoryStore();
   const user = useAuthStore((s) => s.user);
   const [activeTab, setActiveTab] = useState<TabKey>('all');
   const [completingPlan, setCompletingPlan] = useState<VersionPlan | null>(null);
@@ -32,6 +39,8 @@ export default function WorkspacePage() {
   useEffect(() => { fetchOverview(); }, [fetchOverview]);
   useEffect(() => { fetchPlans(); }, [fetchPlans]);
   useEffect(() => { fetchRequirements(); }, [fetchRequirements]);
+  useEffect(() => { fetchTasks(); }, [fetchTasks]);
+  useEffect(() => { fetchCategories(); }, [fetchCategories]);
 
   const userName = user?.name ?? '';
   const allVersions = useMemo(() => flattenVersions(overview), [overview]);
@@ -42,14 +51,21 @@ export default function WorkspacePage() {
     [plans, userName]
   );
 
+  // 我负责的所有未完成开发任务
+  const myDevTasks = useMemo(() =>
+    devTasks.filter((t) => t.assigneeId === userName && t.status !== 'done'),
+    [devTasks, userName]
+  );
+
   const counts = {
-    all: myPlans.length,
+    all: myPlans.length + myDevTasks.length,
     research: myPlans.filter((p) => p.type === 'research').length,
     product: myPlans.filter((p) => p.type === 'product').length,
     ui: myPlans.filter((p) => p.type === 'ui').length,
+    devTask: myDevTasks.length,
   };
 
-  const filtered = activeTab === 'all' ? myPlans : myPlans.filter((p) => p.type === activeTab);
+  const filtered = activeTab === 'all' ? myPlans : activeTab === 'devTask' ? [] : myPlans.filter((p) => p.type === activeTab);
   const today = new Date().toISOString().slice(0, 10);
 
   const toggleTask = (plan: VersionPlan, task: PlanTask) => {
@@ -97,11 +113,44 @@ export default function WorkspacePage() {
           <h2 className="text-[14px] font-semibold text-[var(--ink)]">
             {TABS.find((t) => t.key === activeTab)?.label}
           </h2>
-          <span className="ml-2 text-[12px] text-[var(--ink-muted)]">{filtered.length} 项</span>
+          <span className="ml-2 text-[12px] text-[var(--ink-muted)]">{activeTab === 'devTask' ? myDevTasks.length : filtered.length} 项</span>
         </header>
 
         <div className="flex-1 overflow-y-auto p-5 bg-[var(--bg)] space-y-3">
-          {filtered.length === 0 ? (
+          {activeTab === 'devTask' ? (
+            myDevTasks.length === 0 ? (
+              <div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center">
+                <p className="text-[13px] text-[var(--ink-muted)]">暂无开发任务</p>
+              </div>
+            ) : (
+              myDevTasks.map((task) => {
+                const cat = categories.find((c) => c.id === task.categoryId);
+                const req = requirements.find((r) => r.id === task.requirementId);
+                return (
+                  <div key={task.id} className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        <span className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${DEV_TASK_STATUS_COLOR[task.status]}`}>
+                          {DEV_TASK_STATUS_LABEL[task.status]}
+                        </span>
+                        {task.isBlocked && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">阻塞</span>}
+                        <span className="text-[11px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
+                        <span className="text-[14px] font-medium text-[var(--ink)]">{task.title}</span>
+                      </div>
+                      <span className="text-[11px] text-[var(--ink-muted)]">{task.priority}</span>
+                    </div>
+                    <div className="flex items-center gap-4 text-[11px] text-[var(--ink-muted)]">
+                      {req && <span>{req.code} {req.title}</span>}
+                      {cat && <span className="px-1.5 py-0.5 rounded text-[10px]" style={{ backgroundColor: cat.color ? `${cat.color}15` : undefined, color: cat.color }}>{cat.name}</span>}
+                      <span>预计 {formatHours(task.estimateHours)}</span>
+                      {task.actualHours > 0 && <span>已投入 {task.actualHours}h</span>}
+                      {task.dueDate && <span>截止 {task.dueDate}</span>}
+                    </div>
+                  </div>
+                );
+              })
+            )
+          ) : filtered.length === 0 ? (
             <div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center">
               <p className="text-[13px] text-[var(--ink-muted)]">暂无待办事项</p>
             </div>

apps/web/components/dev-task/CategoryChip.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { TaskCategory } from '@/lib/task-category';
+
+export function CategoryChip({ category }: { category?: TaskCategory }) {
+  if (!category) return <span className="text-[11px] text-[var(--ink-muted)]">未分类</span>;
+  return (
+    <span
+      className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium"
+      style={{
+        backgroundColor: category.color ? `${category.color}15` : 'var(--bg-subtle)',
+        color: category.color || 'var(--ink-soft)',
+      }}
+    >
+      {category.name}
+    </span>
+  );
+}

apps/web/components/dev-task/DevTaskCreateModal.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { X } from 'lucide-react';
+import { useDevTaskStore } from '@/stores/useDevTaskStore';
+import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { useMemberStore } from '@/stores/useMemberStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import type { Priority } from '@/lib/derive';
+
+interface Props {
+  versionId: string;
+  requirementIds: string[];
+  onClose: () => void;
+  onCreated?: () => void;
+}
+
+export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreated }: Props) {
+  const { createTask, tasks } = useDevTaskStore();
+  const { categories } = useTaskCategoryStore();
+  const { requirements } = useRequirementStore();
+  const { members } = useMemberStore();
+  const user = useAuthStore((s) => s.user);
+
+  const versionReqs = useMemo(
+    () => requirements.filter((r) => requirementIds.includes(r.id)),
+    [requirements, requirementIds],
+  );
+  const versionTasks = useMemo(
+    () => tasks.filter((t) => requirementIds.includes(t.requirementId)),
+    [tasks, requirementIds],
+  );
+
+  const [title, setTitle] = useState('');
+  const [requirementId, setRequirementId] = useState(versionReqs[0]?.id || '');
+  const [categoryId, setCategoryId] = useState(categories[0]?.id || '');
+  const [assigneeId, setAssigneeId] = useState('');
+  const [priority, setPriority] = useState<Priority>('P2');
+  const [estimateHours, setEstimateHours] = useState<number>(8);
+  const [dueDate, setDueDate] = useState('');
+  const [predecessorIds, setPredecessorIds] = useState<string[]>([]);
+  const [description, setDescription] = useState('');
+
+  const selectedReq = versionReqs.find((r) => r.id === requirementId);
+  const effectivePriority = selectedReq?.priority || priority;
+  const canSubmit = title.trim() && requirementId && categoryId && assigneeId && estimateHours > 0;
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    createTask({
+      requirementId,
+      title: title.trim(),
+      description: description.trim() || undefined,
+      categoryId,
+      assigneeId,
+      reviewerId: undefined,
+      priority: effectivePriority,
+      estimateHours,
+      startDate: undefined,
+      dueDate: dueDate || undefined,
+      completedAt: undefined,
+      status: 'todo',
+      blockReason: undefined,
+      blockedById: undefined,
+      predecessorIds: predecessorIds.length > 0 ? predecessorIds : undefined,
+      riskLevel: undefined,
+      createdBy: user?.name || '系统',
+    });
+    onCreated?.();
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <div className="w-full max-w-lg rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-[14px] font-semibold text-[var(--ink)]">新建开发任务</h3>
+          <button onClick={onClose} className="rounded-md p-1 hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
+        </div>
+        <div className="space-y-3 max-h-[60vh] overflow-y-auto">
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">任务标题 *</label>
+            <input value={title} onChange={(e) => setTitle(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" placeholder="例如：排班界面开发" />
+          </div>
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">所属需求 *</label>
+            <select value={requirementId} onChange={(e) => { setRequirementId(e.target.value); const r = versionReqs.find((x) => x.id === e.target.value); if (r) setPriority(r.priority); }} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
+              {versionReqs.map((r) => <option key={r.id} value={r.id}>{r.code} {r.title}</option>)}
+            </select>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">任务类型 *</label>
+              <select value={categoryId} onChange={(e) => setCategoryId(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
+                {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">负责人 *</label>
+              <select value={assigneeId} onChange={(e) => setAssigneeId(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
+                <option value="">选择负责人</option>
+                {members.map((m) => <option key={m.id} value={m.name}>{m.name}</option>)}
+              </select>
+            </div>
+          </div>
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">优先级</label>
+              <select value={effectivePriority} onChange={(e) => setPriority(e.target.value as Priority)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
+                {(['P0','P1','P2','P3'] as Priority[]).map((p) => <option key={p} value={p}>{p}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">预计工时(h) *</label>
+              <input type="number" min={0.5} step={0.5} value={estimateHours} onChange={(e) => setEstimateHours(parseFloat(e.target.value) || 0)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+            </div>
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">截止日期</label>
+              <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+            </div>
+          </div>
+          {versionTasks.length > 0 && (
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">前置任务</label>
+              <div className="space-y-1 max-h-28 overflow-y-auto border border-[var(--line)] rounded-lg p-2">
+                {versionTasks.map((t) => (
+                  <label key={t.id} className="flex items-center gap-2 text-[12px] text-[var(--ink)]">
+                    <input type="checkbox" checked={predecessorIds.includes(t.id)} onChange={(e) => setPredecessorIds(e.target.checked ? [...predecessorIds, t.id] : predecessorIds.filter((x) => x !== t.id))} />
+                    <span className="text-[var(--ink-muted)] font-mono">{t.taskNo}</span> {t.title}
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">描述</label>
+            <textarea rows={3} value={description} onChange={(e) => setDescription(e.target.value)} className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 text-[13px] focus:border-[var(--accent)] focus:outline-none resize-none" placeholder="任务描述（可选）" />
+          </div>
+        </div>
+        <div className="flex justify-end gap-2 pt-4 border-t border-[var(--line)] mt-4">
+          <button onClick={onClose} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
+          <button onClick={handleSubmit} disabled={!canSubmit} className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] disabled:opacity-50">创建</button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/dev-task/DevTaskDetailDrawer.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import { X, AlertTriangle, Link2 } from 'lucide-react';
+import { StatusBadge } from './StatusBadge';
+import { CategoryChip } from './CategoryChip';
+import { WorklogPanel } from './WorklogPanel';
+import { useDevTaskStore } from '@/stores/useDevTaskStore';
+import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
+import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, formatHours } from '@/lib/dev-task';
+import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
+
+interface Props {
+  task: DevTask;
+  allTasks: DevTask[];
+  onClose: () => void;
+}
+
+export function DevTaskDetailDrawer({ task, allTasks, onClose }: Props) {
+  const { changeStatus, setBlocked } = useDevTaskStore();
+  const { categories } = useTaskCategoryStore();
+  const category = categories.find((c) => c.id === task.categoryId);
+
+  const [blockReason, setBlockReason] = useState(task.blockReason || '');
+  const [showBlockInput, setShowBlockInput] = useState(false);
+
+  const nextStatuses = ALLOWED_TRANSITIONS[task.status];
+  const predecessors = (task.predecessorIds || []).map((id) => allTasks.find((t) => t.id === id)).filter(Boolean) as DevTask[];
+
+  const handleTransition = (to: DevTaskStatus) => {
+    const result = changeStatus(task.id, to);
+    if (!result.ok) alert(result.message);
+  };
+
+  const handleBlock = () => {
+    if (!blockReason.trim()) return;
+    setBlocked(task.id, true, blockReason.trim());
+    setShowBlockInput(false);
+  };
+
+  const handleUnblock = () => {
+    setBlocked(task.id, false);
+    setBlockReason('');
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}>
+      <div className="w-full max-w-md h-full bg-[var(--bg-card)] border-l border-[var(--line)] shadow-[var(--shadow-lg)] flex flex-col" onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div className="flex items-center justify-between h-14 px-5 border-b border-[var(--line)] shrink-0">
+          <div className="flex items-center gap-2">
+            <span className="text-[12px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
+            <StatusBadge status={task.status} />
+            {task.isBlocked && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">阻塞</span>}
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4" /></button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-5 space-y-5">
+          <h2 className="text-[15px] font-semibold text-[var(--ink)]">{task.title}</h2>
+          {task.description && <p className="text-[12px] text-[var(--ink-soft)]">{task.description}</p>}
+
+          {/* 状态流转 */}
+          {nextStatuses.length > 0 && (
+            <div className="flex items-center gap-2">
+              <span className="text-[11px] text-[var(--ink-muted)]">流转到：</span>
+              {nextStatuses.map((s) => (
+                <button key={s} onClick={() => handleTransition(s)} className="h-7 px-3 rounded-md text-[11px] font-medium border border-[var(--line)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors">
+                  {DEV_TASK_STATUS_LABEL[s]}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* 阻塞管理 */}
+          <div className="rounded-lg border border-[var(--line)] p-3 space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-[12px] font-medium text-[var(--ink)]">阻塞状态</span>
+              {task.isBlocked ? (
+                <button onClick={handleUnblock} className="text-[11px] text-emerald-600 hover:underline">解除阻塞</button>
+              ) : (
+                <button onClick={() => setShowBlockInput(true)} className="text-[11px] text-red-500 hover:underline">标记阻塞</button>
+              )}
+            </div>
+            {task.isBlocked && (
+              <div className="flex items-start gap-1.5 text-[12px] text-red-600 bg-red-50 rounded px-2 py-1.5">
+                <AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+                <span>{task.blockReason}</span>
+              </div>
+            )}
+            {showBlockInput && !task.isBlocked && (
+              <div className="flex gap-2">
+                <input value={blockReason} onChange={(e) => setBlockReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleBlock(); }} placeholder="阻塞原因" className="flex-1 h-8 rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
+                <button onClick={handleBlock} className="h-8 px-3 rounded-md text-[11px] font-medium bg-red-500 text-white">确认</button>
+              </div>
+            )}
+          </div>
+
+          {/* 基本信息 */}
+          <div className="grid grid-cols-2 gap-3 text-[12px]">
+            <div><span className="text-[var(--ink-muted)]">类型：</span><CategoryChip category={category} /></div>
+            <div><span className="text-[var(--ink-muted)]">负责人：</span><span className="text-[var(--ink)]">{task.assigneeId}</span></div>
+            <div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)]">{task.priority}</span></div>
+            <div><span className="text-[var(--ink-muted)]">预计工时：</span><span className="text-[var(--ink)]">{formatHours(task.estimateHours)}</span></div>
+            {task.dueDate && <div><span className="text-[var(--ink-muted)]">截止日期：</span><span className="text-[var(--ink)]">{task.dueDate}</span></div>}
+            {task.completedAt && <div><span className="text-[var(--ink-muted)]">完成日期：</span><span className="text-[var(--ink)]">{task.completedAt}</span></div>}
+          </div>
+
+          {/* 前置任务 */}
+          {predecessors.length > 0 && (
+            <div className="space-y-1.5">
+              <span className="text-[12px] font-medium text-[var(--ink)]">前置任务</span>
+              {predecessors.map((p) => (
+                <div key={p.id} className="flex items-center gap-2 text-[12px] px-2 py-1 rounded bg-[var(--bg-subtle)]">
+                  <Link2 className="h-3 w-3 text-[var(--ink-muted)]" />
+                  <span className="font-mono text-[var(--ink-muted)]">{p.taskNo}</span>
+                  <span className="text-[var(--ink)]">{p.title}</span>
+                  <StatusBadge status={p.status} />
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* 工时记录 */}
+          <WorklogPanel taskId={task.id} />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/dev-task/DevTaskRow.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { AlertTriangle } from 'lucide-react';
+import { StatusBadge } from './StatusBadge';
+import { CategoryChip } from './CategoryChip';
+import { formatHours } from '@/lib/dev-task';
+import type { DevTask } from '@/lib/dev-task';
+import type { TaskCategory } from '@/lib/task-category';
+
+interface Props {
+  task: DevTask;
+  category?: TaskCategory;
+  onClick?: () => void;
+}
+
+const PRIORITY_DOT: Record<string, string> = {
+  P0: 'bg-red-500',
+  P1: 'bg-orange-400',
+  P2: 'bg-blue-400',
+  P3: 'bg-zinc-300',
+};
+
+export function DevTaskRow({ task, category, onClick }: Props) {
+  return (
+    <div
+      onClick={onClick}
+      className="flex items-center gap-3 px-4 py-2.5 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0"
+    >
+      <span className={`h-2 w-2 rounded-full shrink-0 ${PRIORITY_DOT[task.priority] || 'bg-zinc-300'}`} title={task.priority} />
+      <span className="text-[11px] font-mono text-[var(--ink-muted)] w-16 shrink-0">{task.taskNo}</span>
+      <div className="flex-1 min-w-0 flex items-center gap-1.5">
+        <span className="text-[13px] text-[var(--ink)] truncate">{task.title}</span>
+        {task.isBlocked && (
+          <span className="flex items-center gap-0.5 text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0" title={task.blockReason}>
+            <AlertTriangle className="h-2.5 w-2.5" />阻塞
+          </span>
+        )}
+      </div>
+      <CategoryChip category={category} />
+      <StatusBadge status={task.status} />
+      <span className="text-[11px] text-[var(--ink-muted)] w-20 text-right tabular-nums">
+        {task.actualHours > 0 ? `${task.actualHours}h/` : ''}{formatHours(task.estimateHours).split('（')[0]}
+      </span>
+      <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{task.assigneeId}</span>
+    </div>
+  );
+}

apps/web/components/dev-task/DevTaskTab.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { Plus, Code2 } from 'lucide-react';
+import { useDevTaskStore } from '@/stores/useDevTaskStore';
+import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
+import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { DevTaskRow } from './DevTaskRow';
+import { DevTaskCreateModal } from './DevTaskCreateModal';
+import { DevTaskDetailDrawer } from './DevTaskDetailDrawer';
+import { calcGroupProgress } from '@/lib/dev-task';
+import type { DevTask } from '@/lib/dev-task';
+
+interface Props {
+  versionId: string;
+  requirementIds: string[];
+}
+
+export function DevTaskTab({ versionId, requirementIds }: Props) {
+  const { tasks, fetchTasks } = useDevTaskStore();
+  const { categories, fetchCategories } = useTaskCategoryStore();
+  const { fetchWorklogs } = useTaskWorklogStore();
+  const { requirements } = useRequirementStore();
+
+  useEffect(() => { fetchTasks(); }, [fetchTasks]);
+  useEffect(() => { fetchCategories(); }, [fetchCategories]);
+  useEffect(() => { fetchWorklogs(); }, [fetchWorklogs]);
+
+  const versionTasks = useMemo(
+    () => tasks.filter((t) => requirementIds.includes(t.requirementId)),
+    [tasks, requirementIds],
+  );
+
+  const progress = calcGroupProgress(versionTasks);
+  const totalEstimate = versionTasks.reduce((s, t) => s + t.estimateHours, 0);
+  const totalActual = versionTasks.reduce((s, t) => s + t.actualHours, 0);
+  const blockedCount = versionTasks.filter((t) => t.isBlocked).length;
+
+  const [showCreate, setShowCreate] = useState(false);
+  const [selectedTask, setSelectedTask] = useState<DevTask | null>(null);
+
+  const groupedByReq = useMemo(() => {
+    const map = new Map<string, DevTask[]>();
+    for (const t of versionTasks) {
+      const list = map.get(t.requirementId) || [];
+      list.push(t);
+      map.set(t.requirementId, list);
+    }
+    return map;
+  }, [versionTasks]);
+
+  return (
+    <div className="space-y-4">
+      {/* 统计栏 */}
+      <div className="flex items-center gap-4 px-4 py-3 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)]">
+        <div className="flex items-center gap-2">
+          <Code2 className="h-4 w-4 text-[var(--accent)]" />
+          <span className="text-[13px] font-medium text-[var(--ink)]">开发进度 {progress}%</span>
+        </div>
+        <div className="h-2 flex-1 rounded-full bg-[var(--bg)] overflow-hidden">
+          <div className="h-full rounded-full bg-[var(--accent)] transition-all" style={{ width: `${progress}%` }} />
+        </div>
+        <span className="text-[11px] text-[var(--ink-muted)] tabular-nums">
+          {versionTasks.length} 任务 · 投入 {totalActual}h / 预计 {totalEstimate}h
+        </span>
+        {blockedCount > 0 && (
+          <span className="text-[11px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">{blockedCount} 阻塞</span>
+        )}
+        <button onClick={() => setShowCreate(true)} className="ml-auto flex items-center gap-1 h-7 px-3 rounded-md text-[11px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">
+          <Plus className="h-3 w-3" />新建任务
+        </button>
+      </div>
+
+      {/* 按需求分组列表 */}
+      {versionTasks.length === 0 ? (
+        <div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center">
+          <p className="text-[13px] text-[var(--ink-muted)]">暂无开发任务</p>
+          <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>
+        </div>
+      ) : (
+        Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
+          const req = requirements.find((r) => r.id === reqId);
+          const reqProgress = calcGroupProgress(reqTasks);
+          return (
+            <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
+              <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
+                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
+                <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
+                <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
+              </div>
+              {reqTasks.map((t) => (
+                <DevTaskRow key={t.id} task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTask(t)} />
+              ))}
+            </div>
+          );
+        })
+      )}
+
+      {showCreate && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} onClose={() => setShowCreate(false)} />}
+      {selectedTask && <DevTaskDetailDrawer task={selectedTask} allTasks={versionTasks} onClose={() => setSelectedTask(null)} />}
+    </div>
+  );
+}

apps/web/components/dev-task/StatusBadge.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR } from '@/lib/dev-task';
+import type { DevTaskStatus } from '@/lib/dev-task';
+
+export function StatusBadge({ status }: { status: DevTaskStatus }) {
+  return (
+    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${DEV_TASK_STATUS_COLOR[status]}`}>
+      {DEV_TASK_STATUS_LABEL[status]}
+    </span>
+  );
+}

apps/web/components/dev-task/WorklogPanel.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useState } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
+import { useDevTaskStore } from '@/stores/useDevTaskStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { getTaskWorklogs } from '@/lib/task-worklog';
+
+interface Props {
+  taskId: string;
+}
+
+export function WorklogPanel({ taskId }: Props) {
+  const { worklogs, addWorklog, deleteWorklog } = useTaskWorklogStore();
+  const { syncActualHours } = useDevTaskStore();
+  const user = useAuthStore((s) => s.user);
+
+  const taskLogs = getTaskWorklogs(worklogs, taskId);
+  const totalHours = taskLogs.reduce((sum, w) => sum + w.hours, 0);
+
+  const today = new Date().toISOString().slice(0, 10);
+  const [date, setDate] = useState(today);
+  const [hours, setHours] = useState<number>(1);
+  const [workContent, setWorkContent] = useState('');
+  const [adding, setAdding] = useState(false);
+
+  const handleAdd = () => {
+    if (!workContent.trim() || hours <= 0) return;
+    addWorklog({ taskId, userId: user?.name || '', date, hours, workContent: workContent.trim() });
+    const newTotal = totalHours + hours;
+    syncActualHours(taskId, newTotal);
+    setWorkContent('');
+    setHours(1);
+    setAdding(false);
+  };
+
+  const handleDelete = (id: string, logHours: number) => {
+    deleteWorklog(id);
+    syncActualHours(taskId, Math.max(0, totalHours - logHours));
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-[12px] font-medium text-[var(--ink)]">工时记录（累计 {totalHours}h）</span>
+        {!adding && (
+          <button onClick={() => setAdding(true)} className="flex items-center gap-1 text-[11px] text-[var(--accent)] hover:underline">
+            <Plus className="h-3 w-3" />登记工时
+          </button>
+        )}
+      </div>
+
+      {adding && (
+        <div className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-3 space-y-2">
+          <div className="grid grid-cols-2 gap-2">
+            <input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="h-8 rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
+            <input type="number" min={0.5} step={0.5} value={hours} onChange={(e) => setHours(parseFloat(e.target.value) || 0)} placeholder="小时" className="h-8 rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
+          </div>
+          <input value={workContent} onChange={(e) => setWorkContent(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleAdd(); }} placeholder="工作内容（必填）" className="h-8 w-full rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
+          <div className="flex justify-end gap-2">
+            <button onClick={() => setAdding(false)} className="h-7 px-2 text-[11px] text-[var(--ink-muted)] hover:text-[var(--ink)]">取消</button>
+            <button onClick={handleAdd} disabled={!workContent.trim() || hours <= 0} className="h-7 px-3 rounded-md text-[11px] font-medium bg-[var(--accent)] text-white disabled:opacity-50">确认</button>
+          </div>
+        </div>
+      )}
+
+      {taskLogs.length === 0 && !adding && (
+        <p className="text-[12px] text-[var(--ink-muted)] py-2">暂无工时记录</p>
+      )}
+
+      {taskLogs.map((log) => (
+        <div key={log.id} className="flex items-start gap-2 py-1.5 border-b border-[var(--line)] last:border-0">
+          <div className="flex-1">
+            <p className="text-[12px] text-[var(--ink)]">{log.workContent}</p>
+            <p className="text-[10px] text-[var(--ink-muted)]">{log.date} · {log.hours}h · {log.userId}</p>
+          </div>
+          <button onClick={() => handleDelete(log.id, log.hours)} className="p-1 rounded hover:bg-red-50">
+            <Trash2 className="h-3 w-3 text-[var(--ink-muted)] hover:text-red-500" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/web/lib/dev-task.ts

@@ -0,0 +1,93 @@
+import type { Priority } from './derive';
+
+export type DevTaskStatus = 'todo' | 'in_progress' | 'testing' | 'submitted' | 'done';
+
+export interface DevTask {
+  id: string;
+  taskNo: string;
+  requirementId: string;
+  title: string;
+  description?: string;
+  categoryId: string;
+  assigneeId: string;
+  reviewerId?: string;
+  priority: Priority;
+  estimateHours: number;
+  actualHours: number;
+  startDate?: string;
+  dueDate?: string;
+  completedAt?: string;
+  status: DevTaskStatus;
+  isBlocked: boolean;
+  blockReason?: string;
+  blockedById?: string;
+  predecessorIds?: string[];
+  riskLevel?: 'low' | 'medium' | 'high';
+  createdBy: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const DEV_TASK_STATUS_LABEL: Record<DevTaskStatus, string> = {
+  todo: '待开发',
+  in_progress: '开发中',
+  testing: '自测',
+  submitted: '提测',
+  done: '已完成',
+};
+
+export const DEV_TASK_STATUS_COLOR: Record<DevTaskStatus, string> = {
+  todo: 'bg-zinc-100 text-zinc-600',
+  in_progress: 'bg-blue-50 text-blue-600',
+  testing: 'bg-purple-50 text-purple-600',
+  submitted: 'bg-orange-50 text-orange-600',
+  done: 'bg-emerald-50 text-emerald-600',
+};
+
+export const STATUS_PROGRESS: Record<DevTaskStatus, number> = {
+  todo: 0,
+  in_progress: 50,
+  testing: 80,
+  submitted: 90,
+  done: 100,
+};
+
+export const ALLOWED_TRANSITIONS: Record<DevTaskStatus, DevTaskStatus[]> = {
+  todo: ['in_progress'],
+  in_progress: ['testing'],
+  testing: ['submitted', 'in_progress'],
+  submitted: ['done', 'in_progress'],
+  done: [],
+};
+
+export function canTransition(from: DevTaskStatus, to: DevTaskStatus): boolean {
+  return ALLOWED_TRANSITIONS[from].includes(to);
+}
+
+export function calcTaskProgress(task: DevTask): number {
+  return STATUS_PROGRESS[task.status];
+}
+
+export function calcGroupProgress(tasks: DevTask[]): number {
+  if (tasks.length === 0) return 0;
+  const totalEstimate = tasks.reduce((sum, t) => sum + t.estimateHours, 0);
+  if (totalEstimate === 0) return 0;
+  const weighted = tasks.reduce((sum, t) => sum + t.estimateHours * STATUS_PROGRESS[t.status], 0);
+  return Math.round(weighted / totalEstimate);
+}
+
+export function formatHours(hours: number): string {
+  if (hours < 8) return `${hours}h`;
+  const days = Math.floor(hours / 8);
+  const remainder = hours % 8;
+  if (remainder === 0) return `${hours}h（${days}人天）`;
+  return `${hours}h（≈${days}人天）`;
+}
+
+export function generateTaskNo(existingTasks: DevTask[]): string {
+  const maxNum = existingTasks.reduce((max, t) => {
+    const num = parseInt(t.taskNo.replace('DEV-', ''), 10);
+    return isNaN(num) ? max : Math.max(max, num);
+  }, 0);
+  return `DEV-${String(maxNum + 1).padStart(3, '0')}`;
+}

apps/web/lib/task-category.ts

@@ -0,0 +1,36 @@
+export type CategoryGroup = 'development' | 'testing' | 'implementation' | 'other';
+
+export interface TaskCategory {
+  id: string;
+  name: string;
+  group: CategoryGroup;
+  color?: string;
+  sortOrder: number;
+  isSystem: boolean;
+}
+
+export const CATEGORY_GROUP_LABEL: Record<CategoryGroup, string> = {
+  development: '开发',
+  testing: '测试',
+  implementation: '实施',
+  other: '其他',
+};
+
+export const PRESET_CATEGORIES: TaskCategory[] = [
+  { id: 'cat-1', name: '前端开发', group: 'development', color: '#3b82f6', sortOrder: 1, isSystem: true },
+  { id: 'cat-2', name: '后端开发', group: 'development', color: '#6366f1', sortOrder: 2, isSystem: true },
+  { id: 'cat-3', name: '数据库设计', group: 'development', color: '#8b5cf6', sortOrder: 3, isSystem: true },
+  { id: 'cat-4', name: '接口联调', group: 'development', color: '#0ea5e9', sortOrder: 4, isSystem: true },
+  { id: 'cat-5', name: '测试验证', group: 'testing', color: '#a855f7', sortOrder: 5, isSystem: true },
+  { id: 'cat-6', name: '缺陷修复', group: 'testing', color: '#ef4444', sortOrder: 6, isSystem: true },
+  { id: 'cat-7', name: '数据处理', group: 'implementation', color: '#f59e0b', sortOrder: 7, isSystem: true },
+  { id: 'cat-8', name: '实施支持', group: 'implementation', color: '#10b981', sortOrder: 8, isSystem: true },
+];
+
+export function getCategoryById(categories: TaskCategory[], id: string): TaskCategory | undefined {
+  return categories.find((c) => c.id === id);
+}
+
+export function getCategoriesByGroup(categories: TaskCategory[], group: CategoryGroup): TaskCategory[] {
+  return categories.filter((c) => c.group === group).sort((a, b) => a.sortOrder - b.sortOrder);
+}

apps/web/lib/task-worklog.ts

@@ -0,0 +1,33 @@
+export interface TaskWorklog {
+  id: string;
+  taskId: string;
+  userId: string;
+  date: string;
+  hours: number;
+  workContent: string;
+  createdAt: string;
+}
+
+export function calcActualHours(worklogs: TaskWorklog[], taskId: string): number {
+  return worklogs
+    .filter((w) => w.taskId === taskId)
+    .reduce((sum, w) => sum + w.hours, 0);
+}
+
+export function getTaskWorklogs(worklogs: TaskWorklog[], taskId: string): TaskWorklog[] {
+  return worklogs
+    .filter((w) => w.taskId === taskId)
+    .sort((a, b) => b.date.localeCompare(a.date));
+}
+
+export function getUserDailyWorklogs(worklogs: TaskWorklog[], userId: string, date: string): TaskWorklog[] {
+  return worklogs.filter((w) => w.userId === userId && w.date === date);
+}
+
+export function getUserDailySummary(worklogs: TaskWorklog[], userId: string, date: string): { total: number; items: { taskId: string; hours: number; workContent: string }[] } {
+  const items = getUserDailyWorklogs(worklogs, userId, date);
+  return {
+    total: items.reduce((sum, w) => sum + w.hours, 0),
+    items: items.map((w) => ({ taskId: w.taskId, hours: w.hours, workContent: w.workContent })),
+  };
+}

apps/web/lib/work-item.ts

@@ -0,0 +1,49 @@
+import type { DevTask } from './dev-task';
+import type { VersionPlan } from './version-plan';
+import type { Priority } from './derive';
+
+export type WorkItemEntityType = 'plan' | 'devTask' | 'testCase' | 'bug';
+
+export interface WorkItem {
+  entityType: WorkItemEntityType;
+  entityId: string;
+  title: string;
+  status: string;
+  isBlocked?: boolean;
+  assigneeId: string;
+  reviewerId?: string;
+  versionId: string;
+  versionName?: string;
+  priority?: Priority;
+  dueDate?: string;
+  categoryLabel?: string;
+}
+
+export function planToWorkItem(plan: VersionPlan): WorkItem {
+  return {
+    entityType: 'plan',
+    entityId: plan.id,
+    title: plan.title,
+    status: plan.status,
+    assigneeId: plan.owner,
+    versionId: plan.versionId,
+    dueDate: plan.endTime.slice(0, 10),
+    categoryLabel: plan.type === 'research' ? '调研' : plan.type === 'product' ? '产品方案' : 'UI设计',
+  };
+}
+
+export function devTaskToWorkItem(task: DevTask, versionId: string, categoryLabel?: string): WorkItem {
+  return {
+    entityType: 'devTask',
+    entityId: task.id,
+    title: task.title,
+    status: task.status,
+    isBlocked: task.isBlocked,
+    assigneeId: task.assigneeId,
+    reviewerId: task.reviewerId,
+    versionId,
+    priority: task.priority,
+    dueDate: task.dueDate,
+    categoryLabel,
+  };
+}

apps/web/stores/useDevTaskStore.ts

@@ -0,0 +1,109 @@
+'use client';
+import { create } from 'zustand';
+import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
+import { canTransition, generateTaskNo } from '@/lib/dev-task';
+
+const STORAGE_KEY = 'ftb_dev_tasks_v1';
+
+function saveLocal(items: DevTask[]) {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(items)); } catch {}
+}
+
+function loadLocal(): DevTask[] | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch {}
+  return null;
+}
+
+interface DevTaskState {
+  tasks: DevTask[];
+  fetchTasks: () => void;
+  createTask: (data: Omit<DevTask, 'id' | 'taskNo' | 'createdAt' | 'updatedAt' | 'actualHours' | 'isBlocked'>) => DevTask;
+  updateTask: (id: string, data: Partial<DevTask>) => void;
+  deleteTask: (id: string) => void;
+  changeStatus: (id: string, to: DevTaskStatus) => { ok: boolean; message?: string };
+  setBlocked: (id: string, blocked: boolean, reason?: string, blockedById?: string) => void;
+  syncActualHours: (taskId: string, hours: number) => void;
+  getByRequirement: (requirementId: string) => DevTask[];
+  getByVersionViaRequirements: (requirementIds: string[]) => DevTask[];
+  getByAssignee: (assigneeId: string) => DevTask[];
+}
+
+export const useDevTaskStore = create<DevTaskState>((set, get) => ({
+  tasks: [],
+
+  fetchTasks: () => {
+    const cached = loadLocal();
+    if (cached) set({ tasks: cached });
+  },
+
+  createTask: (data) => {
+    const list = get().tasks;
+    const now = new Date().toISOString();
+    const task: DevTask = {
+      ...data,
+      id: `task-${Date.now()}`,
+      taskNo: generateTaskNo(list),
+      actualHours: 0,
+      isBlocked: false,
+      createdAt: now,
+      updatedAt: now,
+    };
+    const updated = [...list, task];
+    set({ tasks: updated });
+    saveLocal(updated);
+    return task;
+  },
+
+  updateTask: (id, data) => {
+    const updated = get().tasks.map((t) =>
+      t.id === id ? { ...t, ...data, updatedAt: new Date().toISOString() } : t,
+    );
+    set({ tasks: updated });
+    saveLocal(updated);
+  },
+
+  deleteTask: (id) => {
+    const updated = get().tasks.filter((t) => t.id !== id);
+    set({ tasks: updated });
+    saveLocal(updated);
+  },
+
+  changeStatus: (id, to) => {
+    const task = get().tasks.find((t) => t.id === id);
+    if (!task) return { ok: false, message: '任务不存在' };
+    if (!canTransition(task.status, to)) {
+      return { ok: false, message: `不允许从「${task.status}」流转到「${to}」` };
+    }
+    const completedAt = to === 'done' ? new Date().toISOString().slice(0, 10) : task.completedAt;
+    get().updateTask(id, { status: to, completedAt });
+    return { ok: true };
+  },
+
+  setBlocked: (id, blocked, reason, blockedById) => {
+    get().updateTask(id, {
+      isBlocked: blocked,
+      blockReason: blocked ? reason : undefined,
+      blockedById: blocked ? blockedById : undefined,
+    });
+  },
+
+  syncActualHours: (taskId, hours) => {
+    get().updateTask(taskId, { actualHours: hours });
+  },
+
+  getByRequirement: (requirementId) => {
+    return get().tasks.filter((t) => t.requirementId === requirementId);
+  },
+
+  getByVersionViaRequirements: (requirementIds) => {
+    const idSet = new Set(requirementIds);
+    return get().tasks.filter((t) => idSet.has(t.requirementId));
+  },
+
+  getByAssignee: (assigneeId) => {
+    return get().tasks.filter((t) => t.assigneeId === assigneeId);
+  },
+}));

apps/web/stores/useTaskCategoryStore.ts

@@ -0,0 +1,65 @@
+'use client';
+import { create } from 'zustand';
+import type { TaskCategory, CategoryGroup } from '@/lib/task-category';
+import { PRESET_CATEGORIES } from '@/lib/task-category';
+
+const STORAGE_KEY = 'ftb_task_categories_v1';
+
+function saveLocal(items: TaskCategory[]) {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(items)); } catch {}
+}
+
+function loadLocal(): TaskCategory[] | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch {}
+  return null;
+}
+
+interface TaskCategoryState {
+  categories: TaskCategory[];
+  fetchCategories: () => void;
+  addCategory: (name: string, group: CategoryGroup, color?: string) => void;
+  updateCategory: (id: string, data: Partial<TaskCategory>) => void;
+  deleteCategory: (id: string) => boolean;
+}
+
+export const useTaskCategoryStore = create<TaskCategoryState>((set, get) => ({
+  categories: PRESET_CATEGORIES,
+
+  fetchCategories: () => {
+    const cached = loadLocal();
+    if (cached) set({ categories: cached });
+  },
+
+  addCategory: (name, group, color) => {
+    const list = get().categories;
+    const item: TaskCategory = {
+      id: `cat-${Date.now()}`,
+      name,
+      group,
+      color,
+      sortOrder: list.length + 1,
+      isSystem: false,
+    };
+    const updated = [...list, item];
+    set({ categories: updated });
+    saveLocal(updated);
+  },
+
+  updateCategory: (id, data) => {
+    const updated = get().categories.map((c) => (c.id === id ? { ...c, ...data } : c));
+    set({ categories: updated });
+    saveLocal(updated);
+  },
+
+  deleteCategory: (id) => {
+    const target = get().categories.find((c) => c.id === id);
+    if (!target || target.isSystem) return false;
+    const updated = get().categories.filter((c) => c.id !== id);
+    set({ categories: updated });
+    saveLocal(updated);
+    return true;
+  },
+}));

apps/web/stores/useTaskWorklogStore.ts

@@ -0,0 +1,57 @@
+'use client';
+import { create } from 'zustand';
+import type { TaskWorklog } from '@/lib/task-worklog';
+
+const STORAGE_KEY = 'ftb_task_worklogs_v1';
+
+function saveLocal(items: TaskWorklog[]) {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(items)); } catch {}
+}
+
+function loadLocal(): TaskWorklog[] | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch {}
+  return null;
+}
+
+interface TaskWorklogState {
+  worklogs: TaskWorklog[];
+  fetchWorklogs: () => void;
+  addWorklog: (data: Omit<TaskWorklog, 'id' | 'createdAt'>) => void;
+  deleteWorklog: (id: string) => void;
+  getActualHours: (taskId: string) => number;
+}
+
+export const useTaskWorklogStore = create<TaskWorklogState>((set, get) => ({
+  worklogs: [],
+
+  fetchWorklogs: () => {
+    const cached = loadLocal();
+    if (cached) set({ worklogs: cached });
+  },
+
+  addWorklog: (data) => {
+    const item: TaskWorklog = {
+      ...data,
+      id: `wl-${Date.now()}`,
+      createdAt: new Date().toISOString(),
+    };
+    const updated = [...get().worklogs, item];
+    set({ worklogs: updated });
+    saveLocal(updated);
+  },
+
+  deleteWorklog: (id) => {
+    const updated = get().worklogs.filter((w) => w.id !== id);
+    set({ worklogs: updated });
+    saveLocal(updated);
+  },
+
+  getActualHours: (taskId) => {
+    return get().worklogs
+      .filter((w) => w.taskId === taskId)
+      .reduce((sum, w) => sum + w.hours, 0);
+  },
+}));