diff --git a/docs/批量编辑功能使用说明.md b/docs/批量编辑功能使用说明.md new file mode 100644 index 0000000..e7851d3 --- /dev/null +++ b/docs/批量编辑功能使用说明.md @@ -0,0 +1,117 @@ +# 批量编辑功能使用说明 + +## 🎯 功能概述 + +批量编辑功能允许用户在场景编辑器中同时选中多个点位和路线,并批量修改它们的属性,大大提升了编辑效率。 + +## ✨ 主要功能 + +### 1. 批量选中 + +- **鼠标拖动选中**:在编辑模式下,可以通过鼠标拖动框选多个点位和路线 +- **实时计数**:工具栏会显示当前选中的元素数量 +- **清除选择**:一键清除所有选中状态 + +### 2. 批量编辑点位 + +- **点位类型**:支持修改点位类型 + - 普通点 + - 等待点 + - 避让点 + - 临时避让点 + - 库区点 + - 电梯点 + - 自动门点 + - 充电点 + - 停靠点 + - 动作点 + - 禁行点 + +### 3. 批量编辑路线 + +- **通行类型**: + - 无限制 + - 仅空载可通行 + - 仅载货可通行 + - 禁行 + +## 🚀 使用方法 + +### 步骤 1:启用编辑器 + +1. 打开场景编辑器页面 +2. 点击右上角的"启用编辑器"按钮 +3. 编辑器工具栏和批量编辑工具栏将出现在页面上 + +### 步骤 2:批量选中元素 + +1. 在画布上按住鼠标左键 +2. 拖动鼠标框选需要编辑的点位和路线 +3. 选中的元素会高亮显示 +4. 批量编辑工具栏会显示选中元素的数量 + +### 步骤 3:批量编辑 + +1. 点击"批量编辑"按钮打开编辑面板 +2. 根据需要选择要修改的属性: + - 如果选中了点位,可以修改点位类型 + - 如果选中了路线,可以修改路线类型、通行类型和方向 +3. 在预览区域查看即将应用的更改 +4. 点击"确定"应用更改,或点击"取消"放弃更改 + +### 步骤 4:清除选择 + +- 点击"清除选择"按钮可以取消所有选中状态 +- 或者直接点击画布空白区域也可以清除选择 + +## 🎨 界面说明 + +### 批量编辑工具栏 + +- 位置:页面顶部中央(仅在选中元素时显示) +- 功能:显示选中数量、打开批量编辑面板、清除选择 + +### 批量编辑面板 + +- **选中统计**:显示选中的点位和路线数量 +- **点位编辑区**:当选中点位时显示,用于修改点位类型 +- **路线编辑区**:当选中路线时显示,用于修改路线通行类型 +- **预览区域**:显示即将应用的更改,方便确认 + +## 💡 使用技巧 + +1. **混合选择**:可以同时选中点位和路线进行批量编辑 +2. **部分更新**:只修改需要更改的属性,其他属性保持不变 +3. **预览确认**:在应用更改前,预览区域会显示所有即将修改的内容 +4. **撤销支持**:所有批量编辑操作都支持撤销(Ctrl+Z) + +## 🔧 技术实现 + +- **响应式设计**:基于 Vue 3 Composition API +- **类型安全**:完整的 TypeScript 类型定义 +- **性能优化**:批量更新减少渲染次数,自动触发画布重绘 +- **用户体验**:实时预览和撤销支持,紧凑的弹框设计 + +## 📝 注意事项 + +1. 批量编辑功能仅在编辑模式下可用 +2. 选中的元素必须是点位(point)或路线(line)类型 +3. 区域(area)和机器人(robot)元素不支持批量编辑 +4. 所有更改都会记录在编辑历史中,支持撤销操作 + +## 🐛 故障排除 + +### 问题:批量编辑按钮不可用 + +- **原因**:没有选中任何元素 +- **解决**:先通过鼠标拖动选中需要编辑的点位或路线 + +### 问题:编辑面板中没有显示选项 + +- **原因**:选中的元素类型不支持该编辑选项 +- **解决**:确保选中的是点位或路线类型的元素 + +### 问题:更改没有生效 + +- **原因**:可能没有点击"确定"按钮 +- **解决**:在编辑面板中点击"确定"按钮应用更改 diff --git a/src/components/batch-edit-toolbar.vue b/src/components/batch-edit-toolbar.vue new file mode 100644 index 0000000..da444cc --- /dev/null +++ b/src/components/batch-edit-toolbar.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/src/components/modal/batch-edit-modal.vue b/src/components/modal/batch-edit-modal.vue new file mode 100644 index 0000000..2dda271 --- /dev/null +++ b/src/components/modal/batch-edit-modal.vue @@ -0,0 +1,366 @@ + + + + + diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue index 3cf3be4..c5b37b7 100644 --- a/src/pages/scene-editor.vue +++ b/src/pages/scene-editor.vue @@ -8,6 +8,7 @@ import { computed, watch } from 'vue'; import { ref } from 'vue'; import { onMounted, provide, shallowRef } from 'vue'; import { useI18n } from 'vue-i18n'; +import BatchEditToolbar from '@common/batch-edit-toolbar.vue'; const EDITOR_KEY = Symbol('editor-key'); @@ -98,7 +99,7 @@ const toPush = () => { const importScene = async () => { const file = await selectFile('.scene'); - if (!file?.size) return; + if (!file || !file.size) return; const json = await decodeTextFile(file); editor.value?.load(json, editable.value, undefined, true); // 第四个参数isImport=true }; @@ -218,6 +219,9 @@ const backToCards = () => { + + +