REVOXELSEG_DICOM/工程分析/实现方案-2026-05-07-18-11-12.md

实现方案 - 2026-05-07-18-11-12

修改目标

• 修复项目库构件层级眼睛按钮。
• 为构件层级增加可编辑 ID。
• 左侧导航新增 模型库。
• 逆向工作区将 分割 Mask 替换为 可视化工具栏，并加入模型显示、整体位姿保存/选择、构件层级。

涉及路径

• WebSite/src/types.ts
• WebSite/src/App.tsx
• WebSite/src/components/Sidebar.tsx
• WebSite/src/components/ProjectLibrary.tsx
• WebSite/src/components/ReverseWorkspace.tsx

技术路线

1. 左侧新增模型库

• 在 ViewType 中新增 MODELS。
• Sidebar 增加 模型库 导航项。
• App 中点击 模型库 时复用 ProjectLibrary，但通过 initialViewMode="model" 默认进入 3D 模型页。

2. 项目库构件层级眼睛修复与 ID

• ModuleStyle 增加 partId。
• 初始化构件层级时按文件顺序写入 partId=index+1。
• toggleModuleVisibility() 明确保留 partId/color/opacity，只切换 visible。
• 构件眼睛按钮阻止冒泡，避免父级点击干扰。
• 每个构件显示 ID 输入框，输入值限制为 1 到 255 的整数。

3. 逆向工作区可视化工具栏

• 将标题 分割 Mask 改为 可视化工具栏。
• 增加模型显示档位：标准、精细、超精细、实体。
• 增加整体位姿保存/选择：
  • 默认预设：默认、俯视、侧视。
  • 用户可保存当前位姿为 位姿N。
  • 选择后更新 modelPose。
• 增加构件层级：
  • 眼睛显示/隐藏。
  • 颜色。
  • 透明度。
  • ID 1 到 255。
• 将逆向工作区 Three.js 模型加载逻辑接入构件样式和显示档位。

数据流或交互流程

1. 用户进入 模型库 或项目库 3D 模型页。
2. 构件样式状态按 STL 文件初始化。
3. 用户点击眼睛按钮，前端更新对应构件 visible，Three.js 重新加载/渲染可见构件。
4. 用户修改 ID，前端 clamp 到 1 到 255 并显示。
5. 用户进入逆向工作区，工具栏显示模型显示、位姿预设、构件层级。
6. 用户保存或选择整体位姿，融合视角模型位姿更新。

兼容性与回滚方案

• 模型库 复用项目库，不新增后端路由。
• 构件 ID 仅在前端状态中使用，若后续需要持久化可再扩展后端项目状态。
• 若逆向工作区工具栏过长，可后续拆成 tabs 或折叠区。

预计文件变更

• types.ts：新增 ViewType。
• Sidebar.tsx：新增导航项。
• App.tsx：支持模型库视图和 ProjectLibrary 初始 tab。
• ProjectLibrary.tsx：构件 ID、眼睛修复、初始 viewMode 参数。
• ReverseWorkspace.tsx：可视化工具栏与模型样式/位姿预设。

人工审核状态

• 本次免二次确认，方案写入后直接执行。

执行结果

• 已新增左侧导航 模型库，默认进入项目库的 3D 模型页。
• 已为项目库构件层级增加 ID 输入，默认 1 到 N，输入限制为 1 到 255。
• 已修正项目库构件眼睛按钮切换时保留颜色、透明度、ID 状态。
• 已将逆向工作区 分割 Mask 改为 可视化工具栏。
• 已在可视化工具栏加入模型显示档位、整体位姿保存/选择、构件层级。
• 已将逆向工作区融合视角的 STL 加载接入构件显示、颜色、透明度和模型显示档位。