Tz2/scene-step-editor-web

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数据格式：

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