Pre_Seg_Server/doc/03-frontend-element-audit.md

前端逐元素审计

状态说明：

• 真实可用：接真实状态或后端接口，可以完成主要动作。
• 部分可用：能展示或完成一部分，但存在关键缺口。
• 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/success/failed/cancelled 任务生成；统计卡片中的处理中任务数只计算 queued/running
任务取消	真实可用	queued/running 任务显示取消按钮，调用 POST /api/tasks/{task_id}/cancel
任务重试	真实可用	failed/cancelled 任务显示重试按钮，调用 POST /api/tasks/{task_id}/retry 创建新任务
失败详情	真实可用	任务详情按钮调用 GET /api/tasks/{task_id}，弹窗展示 error、payload、result、Celery ID 和时间
WebSocket 更新任务	真实可用	Celery worker 更新 processing_tasks 后发布 Redis seg:progress，FastAPI 广播 progress/complete/error/cancelled
项目、任务、标注、系统负载统计	真实可用	初始数据来自 GET /api/dashboard/overview，系统负载按主机 load average 估算
近期实时流转记录	真实可用	初始数据来自任务、项目、标注和模板记录；WebSocket status/complete/error 会继续追加

项目库 ProjectLibrary

元素	状态	说明
项目列表	真实可用	调用 GET /api/projects
项目卡片缩略图	真实可用	后端返回 MinIO 预签名 thumbnail_url 时显示
点击项目进入工作区	真实可用	设置 currentProject 后切到 workspace
新建项目	真实可用	调用 POST /api/projects
导入视频文件	真实可用	创建项目、上传源视频、刷新项目列表；不会自动拆帧
生成帧按钮	真实可用	仅对已导入源视频且尚无帧、非 parsing 状态的项目显示，调用 parseMedia(projectId, { parseFps })
生成帧 FPS 滑块	真实可用	值传入 /api/media/parse?parse_fps=...，决定后台拆帧目标 FPS
导入 DICOM 序列	部分可用	可上传 .dcm 并触发解析；体验和错误反馈较粗
项目状态徽标	真实可用	项目状态统一为 pending/parsing/ready/error，前端兼容归一化旧状态值
删除项目按钮	真实可用	点击垃圾桶按钮会确认删除，调用 DELETE /api/projects/{id}，成功后从项目库移除；若删除的是当前项目，会清空工作区当前项目、帧、mask 和选区
alert 成功/失败提示	真实可用但粗糙	使用浏览器 alert

工作区 VideoWorkspace

元素	状态	说明
当前项目名	真实可用	读取 currentProject.name
自动加载项目帧	真实可用	调用 GET /api/projects/{id}/frames
无帧项目提示	真实可用	如果 video_path 存在但无帧，只提示回到项目库生成帧，不自动创建拆帧任务
SAM 模型状态徽标	真实可用	调用 GET /api/ai/models/status，显示当前启用的 SAM 2 与 GPU 状态
已保存标注回显	真实可用	加载工作区帧后调用 GET /api/ai/annotations 并渲染已保存 mask；回显时保留当前项目帧里尚未保存的 AI/手工 draft mask，避免从 AI 页推送的候选被覆盖
“导出 JSON 标注集”按钮	真实可用	导出前会保存未归档 mask，然后调用 exportCoco() 下载 JSON
“导出 PNG Mask ZIP”按钮	真实可用	导出前会保存未归档 mask，然后调用 GET /api/export/{project_id}/masks 下载 ZIP；后端同时包含单标注 mask、每帧语义融合 mask 和 semantic_classes.json
“导入 GT Mask”按钮	真实可用	选择图片后调用 POST /api/ai/import-gt-mask，后端按非零像素值和连通域生成 polygon 标注与距离变换 seed point，再回显到工作区
参考帧/起止帧/自动传播	真实可用	当前打开帧即参考帧，前端会使用该帧全部 mask 作为 seed；用户设置传播起始帧和传播结束帧后，单个“自动传播”按钮会按 seed mask 和前/后方向顺序调用 POST /api/ai/propagate，当前启用 SAM 2 video predictor，完成后刷新已保存标注
“结构化归档保存”按钮	真实可用	未保存 mask 写入 POST /api/ai/annotate；dirty mask 写入 PATCH /api/ai/annotations/{id}；保存成功后会重新拉取后端标注，并用 saved annotation 替换本次提交的 draft mask，避免仍显示未保存

CanvasArea 画布

元素	状态	说明
当前帧底图显示	真实可用	useImage(frameUrl) 加载当前帧 URL
滚轮缩放	真实可用	改变 Konva Stage scale
拖拽平移	真实可用	activeTool 为 move 时 Stage draggable
光标坐标显示	真实可用	根据 pointer position 计算
正向/反向选点	真实可用	UI 能加点，并按当前帧 frame.id 调用 /api/ai/predict；结果需点击归档保存才持久化
框选	真实可用	UI 能画框，并把框坐标归一化后调用后端推理；结果需点击归档保存才持久化
AI 推理中提示	真实可用	请求期间会显示
手工多边形/矩形/圆/点/线	真实可用	多边形点击取点后可按 Enter 完成，也可在三点后点击首节点闭合；矩形/圆/线拖拽生成 polygon；点工具生成小区域；绘制工具可在已有 mask 上继续落点；均写入 Mask.segmentation，可归档保存
画布上下文提示	真实可用	切换到多边形、矩形、圆、线、点、正/反向选点、框选、区域合并/去除、调整多边形等隐性操作工具时，画布左上角显示当前工具的完成/取消/选择顺序提示
Mask 渲染	真实可用	前端会把推理、手工绘制、GT 导入和已保存标注转成 Konva pathData 渲染
Polygon 逐点编辑 / 删除	真实可用	点击 mask 后显示 polygon 顶点；按住顶点即可直接拖动并实时重算 pathData/segmentation/bbox/area，不需要先单击选中顶点，已保存 mask 标为 dirty；选中顶点后 Delete/Backspace 可删点但保留至少三点；选中 mask 但未选中顶点时 Delete/Backspace 删除整个 mask，已保存 mask 会同步调用后端删除
GT seed point 回显/编辑	真实可用	已保存标注的 points 会显示为黄色 seed 点；拖动后标记为 dirty，归档保存会更新后端
应用分类	真实可用	Canvas 右下角按钮可将当前选择的模板分类应用到本帧 mask；右侧语义分类树点击分类时会优先改当前已选 mask，并把已选 mask 移到前端渲染最上层方便继续编辑；已保存 mask 会标为 dirty，归档保存时更新后端
清空遮罩	真实可用	工作区中会删除当前帧已保存标注并清空当前帧本地 mask
保存状态计数	真实可用	底部显示已保存、未保存、待更新数量
当前图层信息	真实可用	根据当前选中 mask 显示真实标签/后端 annotation id；未保存 mask 显示“未保存”，未选中时显示“未选择”

ToolsPalette 工具栏

元素	状态	说明
拖拽/选择	真实可用	控制 Canvas 是否可拖拽
调整多边形	真实可用	选中 polygon mask 后显示顶点和边中点；支持按住顶点直接拖动、点击边中点插点、双击边界按位置插点
多边形/矩形/圆/点/线	真实可用	切换 activeTool 后由 CanvasArea 生成可保存的 polygon mask
区域合并/去除	真实可用	选择工具后点击多个 mask，右下角显示已选数量和操作按钮；合并/去除模式会隐藏 polygon 编辑手柄，避免手柄抢占多选点击；布尔选择态中第一个选中的主区域用黄色实线轮廓，后续参与合并/扣除的区域用红色虚线轮廓，避免主区域和扣除区域看起来像随机阴影差异；使用 polygon-clipping 做 union / difference；合并会保留主 mask 并移除被合并 mask，去除会从主 mask 扣除后续选中 mask；内含扣除会保留 hole ring 并用 even-odd 规则渲染
正向选点/反向选点/框选	部分可用	会影响 Canvas 交互，并能触发已对齐的 AI 推理接口；点击工作区内已有 SAM 提示点会优先删除该提示点并重新推理，不会冒泡成新增提示点或 mask 选择
魔法棒 SAM 触发	部分可用	切到 AI 页面；不是直接执行推理
撤销/重做	真实可用	绑定 Zustand maskHistory/maskFuture，支持工具栏按钮、AI 页按钮和 Canvas Ctrl+Z/Ctrl+Y

FrameTimeline 时间轴

元素	状态	说明
帧缩略图	真实可用	使用 frames[].url
点击缩略图跳帧	真实可用	调用 setCurrentFrame(idx)
顶部 range 拖动	真实可用	改变当前帧
具体时间显示	真实可用	根据项目 parse_fps/original_fps 显示当前时间和总时长，格式为 mm:ss.cc
自动传播帧进度条标记	真实可用	根据已保存标注回显的 mask_data.source / propagated_from_frame_id 识别自动传播生成的帧，并在顶部进度条对应帧区段覆盖浅蓝色；当前帧位置由播放进度条末端、时间提示和缩略图高亮表达
播放/暂停	真实可用	当前代码按 parse_fps/original_fps 推进帧，最多 30fps
方向键切帧	真实可用	全局监听左右方向键切到上一帧/下一帧；焦点在 input、textarea、select 或 contentEditable 内时不会拦截

OntologyInspector 本体面板

元素	状态	说明
模板选择	部分可用	读取全局 templates，可切换 activeTemplateId
分类树展示 / 换标签	真实可用	显示当前模板 classes；点击分类会设为后续新 mask 的 activeClass，如果 Canvas 已选 mask，则同步更新已选 mask 的标签、颜色和 class 元数据，并把已选 mask 移到前端渲染最上层
添加自定义分类	真实可用	需要先选择模板；新增分类通过 PATCH /api/templates/{id} 写入后端模板 mapping_rules.classes，并同步全局模板 store
后端模型置信度	真实可用	选中 mask 后调用 POST /api/ai/analyze-mask，优先显示后端返回的模型分数；手工/导入 mask 无模型分数时显示“无模型分数”
后端拓扑锚点数量	真实可用	选中 mask 后调用 POST /api/ai/analyze-mask，由后端根据 seed points 或 polygon 顶点采样返回锚点数量
重新提取拓扑锚点按钮	真实可用	调用 POST /api/ai/analyze-mask 并带 extract_skeleton=true，刷新后端几何锚点统计

AISegmentation 独立 AI 页

元素	状态	说明
SAM 2.1 变体选择 / 模型状态	真实可用	AI 页可选 tiny/small/base+/large，调用 GET /api/ai/models/status?selected_model=<variant> 展示所选变体和 GPU 状态；只有本地存在 checkpoint 的变体显示可用
正向/反向点	真实可用	可在当前项目帧上加点并调用 AI 推理接口；AI 页中点击已有候选 mask 时也会继续添加当前正/反向提示点，点击已有提示点会删除该点；SAM 2.1 框选后会携带原始框和累计正/反点细化同一个候选 mask
边界框选	真实可用	AI 页选择工具后可在画布拖拽蓝色虚线框；执行分割时会随 /api/ai/predict 发送 box，框选后继续添加正/反点会发送 interactive prompt
AI 画布上下文提示	真实可用	选择正向点、反向点、边界框选或视口控制时，画布左上角提示点击/拖拽、删除提示点和执行推理的操作方式
SAM 3 入口	当前禁用	因当前系统不提供文本提示，前端不再显示 SAM 3 模型选择、文本输入或 SAM 3 框选入口；后端 model=sam3 返回不支持
语义文本输入	当前禁用	AI 页不再提供文本语义输入；后端收到 semantic prompt 会返回 400
参数开关	真实可用	UI 展示为“局部专注模式（自动裁剪无锚区域）”和“严格除杂模式（自动清理干涉点）”，只是为了让用户更容易理解，不重命名内部字段；cropMode 会随 /api/ai/predict 发送 crop_to_prompt，后端对点/框 prompt 裁剪推理区域并回映射 polygon；autoDeleteBg 会发送 auto_filter_background 和 min_score，后端过滤低分结果和覆盖负向点的结果
遮罩清晰度	真实可用	调节 AI 页候选 mask 的预览透明度，只影响本页显示，不改变 mask 几何、分类或保存数据
执行高精度语义分割	真实可用	使用当前项目帧和所选 SAM 2.1 变体调用 /api/ai/predict；SAM 2.1 需要点/框提示且只采用最高分候选；AI 页只渲染本页最新候选，不显示工作区已有 mask，重复执行会替换上一次 AI 页候选而不是叠加；生成结果写入全局 masks 并自动选中，右侧分类树可立即换标签
推送至工作区编辑	真实可用	切回工作区并把工具切到“调整多边形”，保留 AI 页选中的未保存 mask；工作区回显后端标注时不会覆盖这类 draft mask
撤销/重做	真实可用	绑定全局 mask 历史栈
删除最近锚点	真实可用	删除 AI 页最近一次放置的正/反向提示点，不影响已生成候选 mask 或工作区 mask
删除选中候选	真实可用	删除 AI 页当前选中的本页候选 mask；不会删除工作区已有 mask，Delete/Backspace 也遵循同一范围
清空全体锚点	真实可用	清空 AI 页提示点和本页生成的候选 mask，不删除工作区已有 mask
背景图 / 空状态	真实可用	优先显示当前项目帧；没有项目帧时显示空状态提示，不再回退到外部演示图片

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 推理、视频片段传播、GT mask 导入、标注保存/回显、COCO 导出、PNG mask ZIP 导出、模板 CRUD。

当前最主要的 Mock 或未打通链路是：真正的文本语义分割已因无文本提示入口而暂时禁用；复杂洞结构编辑、骨架/HDBSCAN 级别的 mask 降维增强、任务历史筛选、项目更多菜单和 mapping rules 运行时映射执行引擎仍未落地。登录页“安全审计说明文字”仍只是 UI 文案。