278 lines
9.8 KiB
HTML
278 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Scene Step 编辑器 - 功能演示</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.demo-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
.demo-section {
|
||
margin-bottom: 30px;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
}
|
||
.demo-section h3 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
}
|
||
.demo-button {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
.demo-button:hover {
|
||
background-color: #45a049;
|
||
}
|
||
.feature-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
.feature-item {
|
||
padding: 15px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 5px;
|
||
border-left: 4px solid #4CAF50;
|
||
}
|
||
.feature-item h4 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
}
|
||
.feature-item ul {
|
||
margin: 10px 0;
|
||
padding-left: 20px;
|
||
}
|
||
.editor-frame {
|
||
width: 100%;
|
||
height: 700px;
|
||
border: 2px solid #ddd;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
}
|
||
.status {
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
border-radius: 4px;
|
||
background-color: #e7f3ff;
|
||
border-left: 4px solid #2196F3;
|
||
}
|
||
.instructions {
|
||
background-color: #fff3cd;
|
||
border-left: 4px solid #ffc107;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
.instructions h4 {
|
||
margin-top: 0;
|
||
color: #856404;
|
||
}
|
||
.instructions ol {
|
||
margin: 10px 0;
|
||
padding-left: 20px;
|
||
}
|
||
.instructions li {
|
||
margin: 5px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-container">
|
||
<h1>Scene Step 编辑器 - 完整功能演示</h1>
|
||
|
||
<div class="status">
|
||
<strong>✅ 状态：</strong>所有功能已完成并可正常使用！包括默认动作、判断题和多选题的完整配置功能。
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h4>🎯 快速上手指南</h4>
|
||
<ol>
|
||
<li><strong>添加步骤</strong>：点击绿色"+"按钮添加新步骤</li>
|
||
<li><strong>添加动作</strong>：在步骤中点击"+"按钮添加动作</li>
|
||
<li><strong>选择动作类型</strong>：
|
||
<ul>
|
||
<li><strong>默认</strong>：配置目标对象，支持按顺序点击</li>
|
||
<li><strong>判断题</strong>：配置题目内容和正确答案</li>
|
||
<li><strong>多选题</strong>：配置题目、选项和正确答案（可多选）</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>保存配置</strong>：点击绿色"保存"按钮</li>
|
||
<li><strong>生成代码</strong>：点击橙色"生成代码"按钮获取C#代码</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h3>🚀 实时编辑器</h3>
|
||
<p>下面是完整功能的Scene Step编辑器，支持所有三种动作类型：</p>
|
||
<iframe src="index-fixed.html" class="editor-frame"></iframe>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h3>✨ 核心功能特性</h3>
|
||
<div class="feature-list">
|
||
<div class="feature-item">
|
||
<h4>📁 文件管理</h4>
|
||
<ul>
|
||
<li>创建新流程文件</li>
|
||
<li>选择和切换流程</li>
|
||
<li>自动保存到本地存储</li>
|
||
<li>数据验证和错误提示</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>📋 步骤管理</h4>
|
||
<ul>
|
||
<li>添加、删除步骤</li>
|
||
<li>折叠/展开步骤内容</li>
|
||
<li>编辑步骤描述</li>
|
||
<li>步骤编号自动管理</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>⚡ 默认动作类型</h4>
|
||
<ul>
|
||
<li>配置目标对象列表</li>
|
||
<li>设置对象名称和类型</li>
|
||
<li>配置对象分数</li>
|
||
<li>支持按顺序点击选项</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>❓ 判断题类型</h4>
|
||
<ul>
|
||
<li>添加多个判断题</li>
|
||
<li>设置题目内容</li>
|
||
<li>配置正确答案</li>
|
||
<li>设置题目分数</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>☑️ 多选题类型</h4>
|
||
<ul>
|
||
<li>添加多个多选题</li>
|
||
<li>配置选项列表</li>
|
||
<li>标记正确答案（可多选）</li>
|
||
<li>动态添加/删除选项</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>🔧 代码生成</h4>
|
||
<ul>
|
||
<li>生成完整C#代码</li>
|
||
<li>支持所有动作类型</li>
|
||
<li>正确的事件注册格式</li>
|
||
<li>一键复制到剪贴板</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h3>🎨 界面特性</h3>
|
||
<div class="feature-list">
|
||
<div class="feature-item">
|
||
<h4>Unity风格设计</h4>
|
||
<ul>
|
||
<li>完全复制Unity编辑器外观</li>
|
||
<li>深色主题配色方案</li>
|
||
<li>一致的按钮和控件样式</li>
|
||
<li>专业的分隔线和布局</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>交互体验</h4>
|
||
<ul>
|
||
<li>折叠/展开动画效果</li>
|
||
<li>模态框确认对话框</li>
|
||
<li>实时数据验证</li>
|
||
<li>友好的错误提示</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>响应式设计</h4>
|
||
<ul>
|
||
<li>适配不同屏幕尺寸</li>
|
||
<li>滚动容器支持</li>
|
||
<li>灵活的布局系统</li>
|
||
<li>触摸设备友好</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>兼容性</h4>
|
||
<ul>
|
||
<li>支持所有现代浏览器</li>
|
||
<li>IE9+兼容性</li>
|
||
<li>无外部依赖</li>
|
||
<li>纯JavaScript实现</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h3>📊 技术规格</h3>
|
||
<div class="feature-list">
|
||
<div class="feature-item">
|
||
<h4>数据格式</h4>
|
||
<ul>
|
||
<li>与Unity版本100%兼容</li>
|
||
<li>JSON格式存储</li>
|
||
<li>完整的数据验证</li>
|
||
<li>自动数据清理</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>代码质量</h4>
|
||
<ul>
|
||
<li>模块化架构设计</li>
|
||
<li>清晰的代码结构</li>
|
||
<li>完整的错误处理</li>
|
||
<li>详细的代码注释</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h3>🔗 相关文件</h3>
|
||
<p>编辑器包含以下核心文件：</p>
|
||
<ul>
|
||
<li><strong>index-fixed.html</strong> - 主编辑器页面</li>
|
||
<li><strong>script-fixed.js</strong> - 主要功能逻辑（900+行）</li>
|
||
<li><strong>data-models.js</strong> - 数据模型定义</li>
|
||
<li><strong>file-manager.js</strong> - 文件管理功能</li>
|
||
<li><strong>code-generator.js</strong> - 代码生成功能</li>
|
||
<li><strong>styles.css</strong> - Unity风格样式</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|