161 lines
4.1 KiB
Markdown
161 lines
4.1 KiB
Markdown
# Scene Step 编辑器 - 网页版
|
||
|
||
这是Unity Scene Step 编辑器的网页版本，完全复制了原Unity编辑器的功能和样式。
|
||
|
||
## 功能特性
|
||
|
||
### 核心功能
|
||
- ✅ 流程文件管理（创建、选择、保存）
|
||
- ✅ 步骤管理（添加、删除、折叠/展开）
|
||
- ✅ 动作管理（添加、删除、重排序）
|
||
- ✅ 三种动作类型支持：
|
||
- **默认类型**：目标对象配置
|
||
- **判断题类型**：题目和正确答案配置
|
||
- **多选题类型**：选项和正确答案配置
|
||
- ✅ 目标对象管理（添加、删除、重排序）
|
||
- ✅ 代码生成（生成ProcessEvents C#代码）
|
||
- ✅ 数据验证和清理
|
||
- ✅ 本地存储支持
|
||
|
||
### 界面特性
|
||
- 🎨 完全复制Unity编辑器的视觉风格
|
||
- 📱 响应式设计
|
||
- 🔄 折叠/展开功能
|
||
- 🎯 直观的操作按钮
|
||
- 📋 模态框交互
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
scene-step-editor-web/
|
||
├── index.html # 主页面
|
||
├── styles.css # Unity风格样式
|
||
├── script.js # 主要功能逻辑
|
||
├── data-models.js # 数据模型定义
|
||
├── file-manager.js # 文件管理功能
|
||
├── code-generator.js # 代码生成功能
|
||
└── README.md # 说明文档
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 1. 打开编辑器
|
||
直接在浏览器中打开 `index.html` 文件即可开始使用。
|
||
|
||
### 2. 基本操作
|
||
|
||
#### 流程管理
|
||
- **选择流程**：使用顶部下拉菜单选择现有流程文件
|
||
- **新增流程**：点击"新增流程"按钮创建新的流程文件
|
||
- **保存流程**：点击绿色"保存"按钮保存当前配置
|
||
|
||
#### 步骤管理
|
||
- **添加步骤**：点击"+"按钮添加新步骤
|
||
- **删除步骤**：点击"-"按钮删除步骤
|
||
- **折叠/展开**：点击步骤标题切换显示状态
|
||
- **编辑描述**：在展开的步骤中修改描述字段
|
||
|
||
#### 动作管理
|
||
- **添加动作**：在步骤内点击"+"按钮添加新动作
|
||
- **删除动作**：点击"-"按钮删除动作
|
||
- **重排序**：使用"↑"和"↓"按钮调整动作顺序
|
||
- **动作类型**：选择默认、判断题或多选题类型
|
||
|
||
#### 动作类型配置
|
||
|
||
**默认类型动作**：
|
||
- 配置目标对象列表
|
||
- 设置是否按顺序点击
|
||
- 为每个目标对象设置名称、类型和分数
|
||
|
||
**判断题类型动作**：
|
||
- 添加判断题目
|
||
- 设置题目内容和正确答案
|
||
- 配置题目分数
|
||
|
||
**多选题类型动作**：
|
||
- 添加多选题目
|
||
- 配置选项列表
|
||
- 标记正确答案（可多选）
|
||
- 设置题目分数
|
||
|
||
### 3. 代码生成
|
||
点击"生成 ProcessEvents 代码"按钮，系统会：
|
||
1. 验证当前流程数据的完整性
|
||
2. 生成对应的C#代码
|
||
3. 在弹窗中显示生成的代码
|
||
4. 提供复制功能
|
||
|
||
### 4. 数据存储
|
||
- 数据自动保存到浏览器的localStorage
|
||
- 刷新页面后数据会自动恢复
|
||
- 支持多个流程文件的管理
|
||
|
||
## 数据格式
|
||
|
||
编辑器使用与Unity版本完全相同的JSON数据格式：
|
||
|
||
```json
|
||
[
|
||
{
|
||
"StepDescription": "步骤描述",
|
||
"Actions": [
|
||
{
|
||
"ActionType": 0,
|
||
"Title": "动作标题",
|
||
"Description": "动作描述",
|
||
"Score": 10.0,
|
||
"RequireCorrectCompletion": true,
|
||
"TargetObjects": [
|
||
{
|
||
"ObjectName": "目标对象名称",
|
||
"Type": 1,
|
||
"Score": 5.0
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"IsCompleted": false,
|
||
"StepNumber": 0
|
||
}
|
||
]
|
||
```
|
||
|
||
## 兼容性
|
||
|
||
- ✅ Chrome 60+
|
||
- ✅ Firefox 55+
|
||
- ✅ Safari 12+
|
||
- ✅ Edge 79+
|
||
|
||
## 技术特点
|
||
|
||
- 纯前端实现，无需服务器
|
||
- 使用原生JavaScript，无外部依赖
|
||
- 完全模块化的代码结构
|
||
- 与Unity版本100%数据兼容
|
||
|
||
## 开发说明
|
||
|
||
### 主要类
|
||
- `SceneStepEditor`: 主编辑器类
|
||
- `FileManager`: 文件管理器
|
||
- `CodeGenerator`: 代码生成器
|
||
- `DataUtils`: 数据工具类
|
||
|
||
### 数据模型
|
||
- `ProcessStep`: 流程步骤
|
||
- `ProcessStepDescription`: 动作描述
|
||
- `TargetObjectConfig`: 目标对象配置
|
||
- `JudgmentQuestionConfig`: 判断题配置
|
||
- `MultipleChoiceConfig`: 多选题配置
|
||
|
||
## 更新日志
|
||
|
||
### v1.0.0 (2024-12-19)
|
||
- 🎉 初始版本发布
|
||
- ✅ 完整实现Unity编辑器的所有功能
|
||
- ✅ Unity风格的界面设计
|
||
- ✅ 代码生成功能
|
||
- ✅ 本地存储支持
|