1bd8f25cdb
本次提交对图纸工作台进行了全面的功能重构和交互体验升级，主要涵盖了数据结构优化、核心逻辑增强、以及全新的可视化交互功能。
### 主要更新内容:
#### 1. **核心应用逻辑 (app.js)**
- **数据结构优化**:
- 重构了初始化逻辑，现在每个图片被视为一个独立的 \drawing\ 对象，包含自身的坐标边界和关联图片，使数据模型更清晰。
- **状态管理**:
- 引入 \currentDrawingId\ 状态，用于精确追踪和控制当前显示的图纸。
- **核心功能增强**:
- **自动图纸切换**: 实现了 \getDrawingForItem\ 映射逻辑，当用户在结构树中选择不同层级的件号时，系统能自动切换到其关联的图纸。
- **件号重命名 (handleItemRename)**: 彻底重写了重命名逻辑，现在支持递归更新所有子孙件号的ID和层级关系，保证了复杂结构下数据的一致性。
- **件号更新 (handleItemUpdate)**: 增强了件号创建和更新的鲁棒性，在添加深层级子件号时，会自动创建不存在的父级装配件，简化了操作流程。
- **图片拖拽**: 新增 \updateImagePosition\ 处理器，允许用户在画布上直接拖动图片并更新其世界坐标。
#### 2. **数据编辑器 (components/DataEditor.js)**
- **UI/UX 改进**:
- 大幅扩展了可编辑字段，增加了中文名、英文名、规格、材料、比例和备注等详细属性。
- 界面现在能够智能区分零件和装配件，并对装配件的重量输入框进行只读处理，因为其重量由子件自动汇总计算。
- 为只读字段添加了明确的提示信息，优化了用户体验。
#### 3. **图纸查看器 (components/DrawingViewer.js)**
- **全新交互功能**:
- **画布平移与缩放**: 实现了完整的画布拖拽平移和鼠标滚轮缩放功能，操作更流畅。
- **表格与图片拖拽**: 用户现在可以直接在画布上拖动明细表 (\GraphicalTable\) 和图纸中的图片，实现自由布局。
- **点击创建件号**: 在画布空白处单击，会弹出输入框，允许用户在指定位置快速创建新的件号，并记录其在图纸上的标记位置 (\markerPosition\)。
- **UI 浮层与控件**:
- 在画布上增加了多个交互浮层，包括左上角的图纸-件号绑定工具、右上角的缩放按钮、以及两侧用于切换图纸的箭头按钮。
- 新增了动态输入框 (\inputBox\)，用于响应画布点击事件，提升了操作的直观性。
- **渲染与状态**:
- \GraphicalTable\ 和 \<image>\ 元素现在具备了拖拽所需的所有属性和事件处理。
- 内部状态管理重构，以支持新的视图变换 (\ iewTransform\) 和交互状态。
#### 4. **主页面 (index.html)**
- **项目依赖**:
- 将 React 的 CDN 依赖切换为本地 \ endor\ 目录下的文件，提高了应用的稳定性和加载速度。
- 移除了 Babel 依赖，因为项目已统一使用 \React.createElement\ API，无需 JSX 编译。
- **样式系统**:
- 全面拥抱 Tailwind CSS 的 \@layer\ 规则，对样式进行了分层（theme, base, components, utilities），使 CSS 结构更清晰、更易于维护。
- 定义了全局 CSS 变量，统一了颜色、尺寸等设计规范。
5.2 KiB
5.2 KiB
开发过程总结与技术参考
本文档总结了 "图纸工作台" 产品原型的开发过程，旨在为后续的开发和维护提供参考。
1. 初始需求
项目初期，用户提出了一个三栏布局的图纸编辑平台原型需求：
- 左侧 (层级结构): 展示和管理件号的层级关系。
- 中间 (图纸与表格): 展示固定的图纸背景，并叠加可拖拽的数据表格。表格内容根据当前选中的件号动态展示其子项信息。
- 右侧 (数据编辑): 提供表单，用于编辑选中件号的属性（名称、数量、重量等）。
核心交互逻辑:
- 数据联动: 子项数据的变更（如重量）需要自动汇总到所有父项。
- 层级管理: 支持通过输入件号来创建或修改层级关系。
- 图纸关联: 支持将件号与特定的图纸进行绑定。
- 操作: 提供数据校验保存和模拟导出 DXF 文件的功能。
2. 技术架构
- 前端框架: 采用 React (通过 CDN 引入) 进行组件化开发，未使用 JSX，直接使用
React.createElement。 - 状态管理: 所有应用级别的状态（如图纸、件号、表格位置等）都集中在主组件
App.js中进行统一管理，通过 props 和回调函数的形式传递给子组件。 - 组件划分:
App.js: 主应用组件，负责状态管理和核心逻辑。Header.js: 顶部栏，包含标题和操作按钮（保存、导出）。StructureTree.js: 左侧层级树视图。DrawingViewer.js: 中间图纸和表格预览区。DataEditor.js: 右侧数据编辑表单。
- 数据结构:
- items: 一个以件号ID为key的对象，存储所有件号的详细信息 (
id,name,parentId,children,drawingId等)。 - drawings: 一个以图纸ID为key的对象，存储图纸信息 (
id,name,url等)。 - tablePositions: 存储可拖拽表格相对于其图纸的位置。
- items: 一个以件号ID为key的对象，存储所有件号的详细信息 (
3. 功能实现与迭代
3.1. 基础功能搭建
按照初始需求，我们首先搭建了应用的静态界面和基础数据流。
- 实现了
StructureTree,DrawingViewer,DataEditor的基本渲染。 - 在
App.js中利用useEffect实现了父项重量根据子项自动汇总计算的逻辑。
3.2. 核心交互实现
- 表格拖拽: 在
DrawingViewer中实现了一个DraggableTable组件，通过原生mousedown,mousemove,mouseup事件处理拖拽逻辑，并更新表格位置状态。 - 动态创建件号: 最初，中间视图的输入框用于创建新的子件号。
3.3. 需求迭代与重构
在开发过程中，根据用户的反馈进行了几次重要的逻辑调整和重构。
迭代1: “创建”逻辑变更为“修改”
- 需求: 用户反馈中间视图的输入框应为修改当前件号，而非创建子件号。
- 实现:
- 在
app.js中创建了核心的handleItemRename函数。 - 该函数负责处理复杂的重命名和移动逻辑：
- 从旧父项的
children列表中移除。 - 根据新的ID解析出新的
parentId。 - 递归地更新所有子孙件号的ID和
parentId，以保持层级ID的一致性（例如，1-1重命名为3，其子1-1-1会自动变为3-1）。 - 将自身添加到新父项的
children列表中，如果新父项不存在则自动创建。
- 从旧父项的
- 在
迭代2: “总装图”根节点的演进
这是整个开发过程中最核心的重构。
- 初始需求: 在结构树顶部增加一个不可修改的“总装图”节点。
- 第一版实现 (虚拟容器): 为了解决顶级件号（如
1,2）的前缀问题，将“总装图”实现为一个UI上的虚拟节点，数据层面顶级件号的parentId为null。 - 问题: 用户指出**“总装图”本身也应该是一张独立的、可绑定的图纸**，是一个真实的节点。虚拟容器方案不符合此要求。
- 最终实现 (实体根节点):
- 在数据模型中重新引入一个ID为
__ROOT__的实体Item，作为“总装图”。 - 所有顶级件号的
parentId都明确指向__ROOT__。 - 重写
handleItemRename逻辑，规定任何不含-的件号（如3）的父级都自动归属于__ROOT__。这从根本上解决了顶级件号的归属问题，同时保持了ID的简洁性。 - UI上对
__ROOT__节点进行特殊处理，允许其名称可编辑，但ID不可修改。
- 在数据模型中重新引入一个ID为
迭代3: UI 优化
- 总装图编辑: 允许用户在右侧
DataEditor中编辑“总装图”的名称。 - 切换按钮: 增大了图纸区域左右切换箭头的尺寸，提升了可用性。
4. 最终功能概览
- 实体根节点: “总装图”是一个功能完整的根节点，可编辑名称、绑定图纸，但ID和层级位置不可变。
- 层级管理: 支持通过修改件号ID来自由地重命名和移动节点及其所有子孙节点。
- 数据联动: 重量自动汇总。
- 视图交互: 图纸可切换，表格可拖拽。
- 完整操作: 支持数据校验保存和模拟导出。