# 实现方案 - 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 加载接入构件显示、颜色、透明度和模型显示档位。