feat: 打通全栈标注闭环、异步拆帧与模型状态

后端能力：

- 新增 Celery app、worker task、ProcessingTask 模型、/api/tasks 查询接口和 media_task_runner，将 /api/media/parse 改为创建后台任务并由 worker 执行 FFmpeg/OpenCV/pydicom 拆帧。

- 新增 Redis 进度事件模块和 FastAPI Redis pub/sub 订阅，将 worker 任务进度广播到 /ws/progress；Dashboard 后端概览接口改为聚合 projects/frames/annotations/templates/processing_tasks。

- 统一项目状态为 pending/parsing/ready/error，新增共享 status 常量，并让前端兼容归一化旧状态值。

- 扩展 AI 后端：新增 SAM registry、SAM2 真实运行状态、SAM3 状态检测与文本语义推理适配入口，以及 /api/ai/models/status GPU/模型状态接口。

- 补齐标注保存/更新/删除、COCO/PNG mask 导出相关后端契约和模板 mapping_rules 打包/解包行为。

前端能力：

- 新增运行时 API/WS 地址推导配置，前端 API 封装对齐 FastAPI 路由、字段映射、任务轮询、标注归档、导出下载和 AI 预测响应转换。

- Dashboard 改为读取 /api/dashboard/overview，并订阅 WebSocket progress/complete/error/status 更新解析队列和实时流转记录。

- 项目库导入视频/DICOM 后创建项目、上传媒体、触发异步解析并刷新真实项目列表。

- 工作区加载真实帧、无帧时触发解析任务、回显已保存标注、保存未归档 mask、更新 dirty mask、清空当前帧后端标注、导出 COCO JSON。

- Canvas 支持当前帧点/框提示调用后端 AI、渲染推理/已保存 mask、应用模板分类并维护保存状态计数；时间轴按项目 fps 播放。

- AI 页面新增 SAM2/SAM3 模型选择，预测请求携带 model；侧边栏和工作区新增真实 GPU/SAM 状态徽标。

- 模板库和本体面板接入真实模板 CRUD、分类编辑、拖拽排序、JSON 导入、默认腹腔镜分类和本地自定义分类选择。

测试与文档：

- 新增 Vitest 配置、前端测试 setup、API/config/websocket/store/组件测试，覆盖登录、项目库、Dashboard、Canvas、工作区、模型状态、时间轴、本体和模板库。

- 新增 pytest 后端测试夹具和 auth/projects/templates/media/AI/export/dashboard/tasks/progress 测试，使用 SQLite、fake MinIO、fake SAM registry 和 Redis monkeypatch 隔离外部服务。

- 新增 doc/ 文档结构，冻结当前需求、设计、接口契约、测试计划、前端逐元素审计、实现地图和后续实施计划，并同步更新 README 与 AGENTS。

验证：

- conda run -n seg_server pytest backend/tests：27 passed。

- npm run test:run：54 passed。

- npm run lint、npm run build、compileall、git diff --check 均通过；Vite 仅提示大 chunk 警告。

src/components/CanvasArea.tsx

@@ -3,14 +3,15 @@ import { Stage, Layer, Image as KonvaImage, Circle, Rect, Path, Group } from 're
 import useImage from 'use-image';
 import { useStore } from '../store/useStore';
 import { predictMask } from '../lib/api';
-import { cn } from '../lib/utils';
+import type { Frame } from '../store/useStore';
 
 interface CanvasAreaProps {
   activeTool: string;
-  frameUrl: string;
+  frame: Frame | null;
+  onClearMasks?: () => void;
 }
 
-export function CanvasArea({ activeTool, frameUrl }: CanvasAreaProps) {
+export function CanvasArea({ activeTool, frame, onClearMasks }: CanvasAreaProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [stageSize, setStageSize] = useState({ width: 800, height: 600 });
   const [scale, setScale] = useState(1);
@@ -24,13 +25,20 @@ export function CanvasArea({ activeTool, frameUrl }: CanvasAreaProps) {
   const masks = useStore((state) => state.masks);
   const addMask = useStore((state) => state.addMask);
   const clearMasks = useStore((state) => state.clearMasks);
+  const setMasks = useStore((state) => state.setMasks);
   const storeActiveTool = useStore((state) => state.activeTool);
-  const setActiveTool = useStore((state) => state.setActiveTool);
+  const aiModel = useStore((state) => state.aiModel);
+  const activeTemplateId = useStore((state) => state.activeTemplateId);
+  const activeClass = useStore((state) => state.activeClass);
 
   const effectiveTool = activeTool || storeActiveTool;
 
   // Load the actual frame image
-  const [image] = useImage(frameUrl || '');
+  const [image] = useImage(frame?.url || '');
+  const frameMasks = masks.filter((mask) => mask.frameId === frame?.id);
+  const savedMaskCount = frameMasks.filter((mask) => mask.saveStatus === 'saved' || mask.saved).length;
+  const draftMaskCount = frameMasks.filter((mask) => !mask.annotationId).length;
+  const dirtyMaskCount = frameMasks.filter((mask) => mask.saveStatus === 'dirty').length;
 
   useEffect(() => {
     const handleResize = () => {
@@ -85,21 +93,44 @@ export function CanvasArea({ activeTool, frameUrl }: CanvasAreaProps) {
   };
 
   const runInference = useCallback(async (promptPoints?: typeof points, promptBox?: { x1: number, y1: number, x2: number, y2: number }) => {
+    if (!frame?.id) {
+      console.warn('Inference skipped: no active frame');
+      return;
+    }
+
+    const imageWidth = frame.width || image?.naturalWidth || image?.width || 0;
+    const imageHeight = frame.height || image?.naturalHeight || image?.height || 0;
+    if (imageWidth <= 0 || imageHeight <= 0) {
+      console.warn('Inference skipped: active frame dimensions are unavailable');
+      return;
+    }
+
     setIsInferencing(true);
     try {
       const result = await predictMask({
-        imageUrl: frameUrl || '',
+        imageId: frame.id,
+        imageWidth,
+        imageHeight,
+        model: aiModel,
         points: promptPoints?.map((p) => ({ x: p.x, y: p.y, type: p.type })),
         box: promptBox,
       });
 
       result.masks.forEach((m) => {
+        const label = activeClass?.name || m.label;
+        const color = activeClass?.color || m.color;
         addMask({
           id: m.id,
-          frameId: 'frame-1',
+          frameId: frame.id,
+          templateId: activeTemplateId || undefined,
+          classId: activeClass?.id,
+          className: activeClass?.name,
+          classZIndex: activeClass?.zIndex,
+          saveStatus: 'draft',
+          saved: false,
           pathData: m.pathData,
-          label: m.label,
-          color: m.color,
+          label,
+          color,
           segmentation: m.segmentation,
           bbox: m.bbox,
           area: m.area,
@@ -110,7 +141,33 @@ export function CanvasArea({ activeTool, frameUrl }: CanvasAreaProps) {
     } finally {
       setIsInferencing(false);
     }
-  }, [addMask]);
+  }, [activeClass, activeTemplateId, addMask, aiModel, frame?.height, frame?.id, frame?.width, image?.height, image?.naturalHeight, image?.naturalWidth, image?.width]);
+
+  const handleApplyActiveClass = () => {
+    if (!frame?.id || !activeClass) return;
+    setMasks(masks.map((mask) => {
+      if (mask.frameId !== frame.id) return mask;
+      return {
+        ...mask,
+        templateId: activeTemplateId || mask.templateId,
+        classId: activeClass.id,
+        className: activeClass.name,
+        classZIndex: activeClass.zIndex,
+        label: activeClass.name,
+        color: activeClass.color,
+        saveStatus: mask.annotationId ? 'dirty' : 'draft',
+        saved: Boolean(mask.annotationId) ? false : mask.saved,
+      };
+    }));
+  };
+
+  const handleClearMasks = () => {
+    if (onClearMasks) {
+      onClearMasks();
+      return;
+    }
+    clearMasks();
+  };
 
   const handleStageMouseDown = (e: any) => {
     if (effectiveTool === 'box_select') {
@@ -199,7 +256,7 @@ export function CanvasArea({ activeTool, frameUrl }: CanvasAreaProps) {
             )}
             
             {/* AI Returned Masks */}
-            {masks.map((mask) => (
+            {frameMasks.map((mask) => (
               <Group key={mask.id} opacity={0.5}>
                 <Path
                   data={mask.pathData}
@@ -248,16 +305,29 @@ export function CanvasArea({ activeTool, frameUrl }: CanvasAreaProps) {
           <span>光标: {cursorPos.x.toFixed(2)}, {cursorPos.y.toFixed(2)}</span>
           <span>当前图层树: OBJECT_VEHICLE_01</span>
           <span>缩放比: {(scale * 100).toFixed(0)}%</span>
-          <span>遮罩数: {masks.length}</span>
+          <span>遮罩数: {frameMasks.length}</span>
+          <span>已保存: {savedMaskCount}</span>
+          <span>未保存: {draftMaskCount}</span>
+          <span>待更新: {dirtyMaskCount}</span>
        </div>
 
-       {masks.length > 0 && (
-         <button
-           onClick={clearMasks}
-           className="absolute bottom-4 right-4 text-xs bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 px-3 py-1.5 rounded transition-colors"
-         >
-           清空遮罩
-         </button>
+       {frameMasks.length > 0 && (
+         <div className="absolute bottom-4 right-4 flex gap-2">
+           {activeClass && (
+             <button
+               onClick={handleApplyActiveClass}
+               className="text-xs bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-300 border border-cyan-500/20 px-3 py-1.5 rounded transition-colors"
+             >
+               应用分类
+             </button>
+           )}
+           <button
+             onClick={handleClearMasks}
+             className="text-xs bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 px-3 py-1.5 rounded transition-colors"
+           >
+             清空遮罩
+           </button>
+         </div>
        )}
     </div>
   );