2026-05-07-18-42-53 优化可视化工具栏和构件ID联动

工程分析/经验记录.md

@@ -667,3 +667,21 @@ C. 解决问题方案
 D. 后续如何避免问题
 
 构件层级状态应作为统一结构在不同页面复用；任何新增构件字段都要检查初始化、单项更新、全局更新和默认 fallback 四条路径；逆向工作区的可视化控制应与项目库模型页保持一致，避免用户在两个页面学两套交互。
+
+## 2026-05-07-18-42-53 构件 ID 跨页面联动
+
+A. 具体问题
+
+项目库 3D 模型和逆向工作区可视化工具栏都能修改构件 ID，但两边原先分别维护本地状态，无法保证 ID、显示隐藏、颜色和透明度一致。
+
+B. 产生问题原因
+
+构件样式属于项目级配置，但旧实现只保存在 React 组件 state 中，页面切换或不同浏览器访问时不会自动共享。
+
+C. 解决问题方案
+
+在项目数据中新增 `moduleStyles` 字段，并新增 `PATCH /api/projects/:projectId/module-styles` 接口。项目库和逆向工作区都读写同一后端状态，服务端统一补齐默认值并将 `partId` 限制在 `1~255`。
+
+D. 后续如何避免问题
+
+凡是需要跨页面、跨浏览器一致的配置项，优先放入后端项目状态；前端可以保留本地 state 提升响应速度，但必须通过 API 持久化并从项目数据恢复。