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 变量，统一了颜色、尺寸等设计规范。
89 lines
5.2 KiB
Markdown
89 lines
5.2 KiB
Markdown
# 开发过程总结与技术参考
|
||
|
||
本文档总结了 "图纸工作台" 产品原型的开发过程，旨在为后续的开发和维护提供参考。
|
||
|
||
## 1. 初始需求
|
||
|
||
项目初期，用户提出了一个三栏布局的图纸编辑平台原型需求：
|
||
|
||
* **左侧 (层级结构):** 展示和管理件号的层级关系。
|
||
* **中间 (图纸与表格):** 展示固定的图纸背景，并叠加可拖拽的数据表格。表格内容根据当前选中的件号动态展示其子项信息。
|
||
* **右侧 (数据编辑):** 提供表单，用于编辑选中件号的属性（名称、数量、重量等）。
|
||
|
||
**核心交互逻辑:**
|
||
|
||
1. **数据联动:** 子项数据的变更（如重量）需要自动汇总到所有父项。
|
||
2. **层级管理:** 支持通过输入件号来创建或修改层级关系。
|
||
3. **图纸关联:** 支持将件号与特定的图纸进行绑定。
|
||
4. **操作:** 提供数据校验保存和模拟导出 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:** 存储可拖拽表格相对于其图纸的位置。
|
||
|
||
## 3. 功能实现与迭代
|
||
|
||
### 3.1. 基础功能搭建
|
||
|
||
按照初始需求，我们首先搭建了应用的静态界面和基础数据流。
|
||
|
||
* 实现了 `StructureTree`, `DrawingViewer`, `DataEditor` 的基本渲染。
|
||
* 在 `App.js` 中利用 `useEffect` 实现了父项重量根据子项自动汇总计算的逻辑。
|
||
|
||
### 3.2. 核心交互实现
|
||
|
||
* **表格拖拽:** 在 `DrawingViewer` 中实现了一个 `DraggableTable` 组件，通过原生 `mousedown`, `mousemove`, `mouseup` 事件处理拖拽逻辑，并更新表格位置状态。
|
||
* **动态创建件号:** 最初，中间视图的输入框用于创建新的子件号。
|
||
|
||
### 3.3. 需求迭代与重构
|
||
|
||
在开发过程中，根据用户的反馈进行了几次重要的逻辑调整和重构。
|
||
|
||
**迭代1: “创建”逻辑变更为“修改”**
|
||
|
||
* **需求:** 用户反馈中间视图的输入框应为**修改当前件号**，而非创建子件号。
|
||
* **实现:**
|
||
* 在 `app.js` 中创建了核心的 `handleItemRename` 函数。
|
||
* 该函数负责处理复杂的重命名和移动逻辑：
|
||
1. 从旧父项的 `children` 列表中移除。
|
||
2. 根据新的ID解析出新的 `parentId`。
|
||
3. **递归地更新所有子孙件号的ID和 `parentId`**，以保持层级ID的一致性（例如，`1-1` 重命名为 `3`，其子 `1-1-1` 会自动变为 `3-1`）。
|
||
4. 将自身添加到新父项的 `children` 列表中，如果新父项不存在则自动创建。
|
||
|
||
**迭代2: “总装图”根节点的演进**
|
||
|
||
这是整个开发过程中最核心的重构。
|
||
|
||
* **初始需求:** 在结构树顶部增加一个不可修改的“总装图”节点。
|
||
* **第一版实现 (虚拟容器):** 为了解决顶级件号（如 `1`, `2`）的前缀问题，将“总装图”实现为一个UI上的虚拟节点，数据层面顶级件号的 `parentId` 为 `null`。
|
||
* **问题:** 用户指出**“总装图”本身也应该是一张独立的、可绑定的图纸**，是一个真实的节点。虚拟容器方案不符合此要求。
|
||
* **最终实现 (实体根节点):**
|
||
1. 在数据模型中重新引入一个ID为 `__ROOT__` 的实体Item，作为“总装图”。
|
||
2. 所有顶级件号的 `parentId` 都明确指向 `__ROOT__`。
|
||
3. **重写 `handleItemRename` 逻辑**，规定任何不含 `-` 的件号（如 `3`）的父级都自动归属于 `__ROOT__`。这从根本上解决了顶级件号的归属问题，同时保持了ID的简洁性。
|
||
4. UI上对 `__ROOT__` 节点进行特殊处理，允许其名称可编辑，但ID不可修改。
|
||
|
||
**迭代3: UI 优化**
|
||
|
||
* **总装图编辑:** 允许用户在右侧 `DataEditor` 中编辑“总装图”的名称。
|
||
* **切换按钮:** 增大了图纸区域左右切换箭头的尺寸，提升了可用性。
|
||
|
||
## 4. 最终功能概览
|
||
|
||
* **实体根节点:** “总装图”是一个功能完整的根节点，可编辑名称、绑定图纸，但ID和层级位置不可变。
|
||
* **层级管理:** 支持通过修改件号ID来自由地重命名和移动节点及其所有子孙节点。
|
||
* **数据联动:** 重量自动汇总。
|
||
* **视图交互:** 图纸可切换，表格可拖拽。
|
||
* **完整操作:** 支持数据校验保存和模拟导出。
|