# 前端逐元素审计 状态说明: - 真实可用:接真实状态或后端接口,可以完成主要动作。 - 部分可用:能展示或完成一部分,但存在关键缺口。 - Mock / UI-only:只有展示或本地状态变化,没有真实业务效果。 - 接口不通:前端调用与后端接口不一致,按当前代码大概率失败。 ## App 与导航 | 元素 | 位置 | 状态 | 说明 | |------|------|------|------| | 登录拦截 | `App.tsx` | 真实可用 | 未登录显示 `Login`,登录后显示主界面 | | 模块切换 | `Sidebar.tsx` + `App.tsx` | 真实可用 | 切换 `dashboard/projects/workspace/ai/templates` | | Logo | `Sidebar.tsx` | 真实可用 | 使用 `/logo.png`,文件存在于 `public/logo.png` | | GPU 状态圆标 | `Sidebar.tsx` | 真实可用 | 通过 `GET /api/ai/models/status` 显示 GPU/CPU 和当前模型可用性 | ## 登录页 | 元素 | 状态 | 说明 | |------|------|------| | 用户名/密码输入 | 真实可用 | 默认填入 `admin / 123456` | | 安全登录按钮 | 真实可用 | 调用 `POST /api/auth/login` | | 错误提示 | 真实可用 | 捕获后端错误并显示 | | 安全审计说明文字 | Mock / UI-only | UI 文案,没有真实审计功能 | ## Dashboard 系统概况 | 元素 | 状态 | 说明 | |------|------|------| | WebSocket 连接状态 | 真实可用 | 前端通过 `src/lib/config.ts` 推导或读取 `VITE_WS_PROGRESS_URL`,后端有 `/ws/progress` | | 解析队列任务 | 真实可用 | 初始数据来自 `GET /api/dashboard/overview`,按 `processing_tasks` queued/running 任务生成 | | WebSocket 更新任务 | 真实可用 | Celery worker 更新 `processing_tasks` 后发布 Redis `seg:progress`,FastAPI 广播 progress/complete/error | | 项目、任务、标注、系统负载统计 | 真实可用 | 初始数据来自 `GET /api/dashboard/overview`,系统负载按主机 load average 估算 | | 近期实时流转记录 | 真实可用 | 初始数据来自任务、项目、标注和模板记录;WebSocket status/complete/error 会继续追加 | ## 项目库 ProjectLibrary | 元素 | 状态 | 说明 | |------|------|------| | 项目列表 | 真实可用 | 调用 `GET /api/projects` | | 项目卡片缩略图 | 真实可用 | 后端返回 MinIO 预签名 `thumbnail_url` 时显示 | | 点击项目进入工作区 | 真实可用 | 设置 `currentProject` 后切到 `workspace` | | 新建项目 | 真实可用 | 调用 `POST /api/projects` | | 导入视频文件 | 真实可用 | 创建项目、上传文件、触发拆帧、刷新项目列表 | | 解析 FPS 滑块 | 真实可用 | 值传入 `createProject({ parse_fps })` | | 导入 DICOM 序列 | 部分可用 | 可上传 `.dcm` 并触发解析;体验和错误反馈较粗 | | 项目状态徽标 | 真实可用 | 项目状态统一为 `pending/parsing/ready/error`,前端兼容归一化旧状态值 | | 更多按钮 | Mock / UI-only | 有图标,没有菜单或事件 | | alert 成功/失败提示 | 真实可用但粗糙 | 使用浏览器 `alert` | ## 工作区 VideoWorkspace | 元素 | 状态 | 说明 | |------|------|------| | 当前项目名 | 真实可用 | 读取 `currentProject.name` | | 自动加载项目帧 | 真实可用 | 调用 `GET /api/projects/{id}/frames` | | 无帧时触发解析 | 真实可用 | 如果 `video_path` 存在会调用 `parseMedia()` 创建异步任务,并轮询 `GET /api/tasks/{id}` 等待完成 | | SAM 模型状态徽标 | 真实可用 | 调用 `GET /api/ai/models/status`,显示当前选择的 SAM 2/SAM 3 是否可用 | | 已保存标注回显 | 真实可用 | 加载工作区帧后调用 `GET /api/ai/annotations` 并渲染已保存 mask | | “导出 JSON 标注集”按钮 | 真实可用 | 导出前会保存未归档 mask,然后调用 `exportCoco()` 下载 JSON | | “结构化归档保存”按钮 | 真实可用 | 未保存 mask 写入 `POST /api/ai/annotate`;dirty mask 写入 `PATCH /api/ai/annotations/{id}` | ## CanvasArea 画布 | 元素 | 状态 | 说明 | |------|------|------| | 当前帧底图显示 | 真实可用 | `useImage(frameUrl)` 加载当前帧 URL | | 滚轮缩放 | 真实可用 | 改变 Konva Stage scale | | 拖拽平移 | 真实可用 | activeTool 为 `move` 时 Stage draggable | | 光标坐标显示 | 真实可用 | 根据 pointer position 计算 | | 正向/反向选点 | 部分可用 | UI 能加点,并按当前帧 `frame.id` 调用 `/api/ai/predict`;需点击归档保存才持久化 | | 框选 | 部分可用 | UI 能画框,并把框坐标归一化后调用后端推理;需点击归档保存才持久化 | | AI 推理中提示 | 真实可用 | 请求期间会显示 | | Mask 渲染 | 部分可用 | 前端会把推理/已保存标注转成 Konva `pathData` 渲染 | | 应用分类 | 真实可用 | 将当前选择的模板分类应用到本帧 mask;已保存 mask 会标为 dirty,归档保存时更新后端 | | 清空遮罩 | 真实可用 | 工作区中会删除当前帧已保存标注并清空当前帧本地 mask | | 保存状态计数 | 真实可用 | 底部显示已保存、未保存、待更新数量 | | 当前图层树文字 | Mock / UI-only | 固定显示 `OBJECT_VEHICLE_01` | ## ToolsPalette 工具栏 | 元素 | 状态 | 说明 | |------|------|------| | 拖拽/选择 | 真实可用 | 控制 Canvas 是否可拖拽 | | 多边形/矩形/圆/点/线 | Mock / UI-only | 只切换 activeTool,没有对应绘制逻辑 | | 区域合并/去除 | Mock / UI-only | 只切换 activeTool,没有后端或前端算法 | | 正向选点/反向选点/框选 | 部分可用 | 会影响 Canvas 交互,并能触发已对齐的 AI 推理接口 | | 魔法棒 SAM 触发 | 部分可用 | 切到 AI 页面;不是直接执行推理 | | 撤销/重做 | Mock / UI-only | 按钮无事件 | ## FrameTimeline 时间轴 | 元素 | 状态 | 说明 | |------|------|------| | 帧缩略图 | 真实可用 | 使用 `frames[].url` | | 点击缩略图跳帧 | 真实可用 | 调用 `setCurrentFrame(idx)` | | 顶部 range 拖动 | 真实可用 | 改变当前帧 | | 播放/暂停 | 真实可用 | 当前代码按 `parse_fps/original_fps` 推进帧,最多 30fps | | 方向键切帧 | Mock / UI-only | Word 提到,但当前没有键盘监听 | ## OntologyInspector 本体面板 | 元素 | 状态 | 说明 | |------|------|------| | 模板选择 | 部分可用 | 读取全局 templates,可切换 activeTemplateId | | 分类树展示 | 真实可用 | 显示模板 classes 和本地 customClasses | | 添加自定义分类 | 部分可用 | 只存在组件本地状态,不保存到后端 | | 置信度条 | Mock / UI-only | 固定 `0.9412` | | 拓扑锚点数量 | Mock / UI-only | 固定 `12 节点` | | 重新提取骨架按钮 | Mock / UI-only | 无事件 | ## AISegmentation 独立 AI 页 | 元素 | 状态 | 说明 | |------|------|------| | 模型选择 SAM2/SAM3 | 真实可用 | 选择写入 Zustand,`predictMask()` 会把 `model` 传给后端 SAM registry | | 正向/反向点 | 部分可用 | 可在当前项目帧上加点,并可调用 AI 推理接口 | | 语义文本输入 | 部分可用 | 纯文本会以 `semantic` prompt 调用后端;选择 SAM 3 且运行环境满足官方依赖时走 SAM 3 文本语义推理,否则状态接口会标明不可用 | | 参数开关 | Mock / UI-only | `cropMode`、`autoDeleteBg` 只改本地状态 | | 执行高精度语义分割 | 部分可用 | 使用当前项目帧调用 `/api/ai/predict`;没有当前帧时按钮禁用 | | 上传替换底图 | Mock / UI-only | 按钮无事件 | | 清空全体锚点 | 部分可用 | 清空前端 points 和 masks | | 退档推送至工作区重组 | 部分可用 | 只切回工作区,共用 masks store,但没有保存/确认流程 | | 背景图 | 部分可用 | 优先显示当前项目帧;没有项目帧时仍回退到 Unsplash 演示图 | ## TemplateRegistry 模板库 | 元素 | 状态 | 说明 | |------|------|------| | 模板列表 | 真实可用 | 调用 `GET /api/templates` | | 新建方案 | 真实可用 | 调用 `POST /api/templates` | | 编辑模板 | 真实可用 | 调用 `PATCH /api/templates/{id}` | | 删除模板 | 真实可用 | 调用 `DELETE /api/templates/{id}` | | 添加/删除分类 | 真实可用 | 保存在模板 `mapping_rules.classes` | | 拖拽排序 | 真实可用 | 重算 zIndex,保存时写后端 | | JSON 批量导入 | 部分可用 | 前端解析 JSON 并加入编辑态,保存后才落库 | | 载入腹腔镜 35 分类 | 真实可用 | 前端内置数据;后端也 seed 默认模板 | | mapping rules | 部分可用 | 可存 `rules`,但无实际映射执行引擎 | ## 总体结论 当前前端真实可用的主链路是:登录、Dashboard 后端概览、项目列表、新建项目、上传视频/DICOM、拆帧、浏览帧、播放帧、工作区点/框 AI 推理、标注保存/回显、COCO 导出、模板 CRUD。 当前最主要的 Mock 或未打通链路是:撤销重做、手工几何绘制、GT 导入、mask 降维点区域、真正的文本语义分割和语义优先级融合。