# 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风格的界面设计
- ✅ 代码生成功能
- ✅ 本地存储支持