245 lines
9.5 KiB
HTML
245 lines
9.5 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;
|
||
}
|
||
.test-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
.test-section {
|
||
margin-bottom: 30px;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
}
|
||
.test-section h3 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
}
|
||
.test-button {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
.test-button:hover {
|
||
background-color: #45a049;
|
||
}
|
||
.test-result {
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
background-color: #f9f9f9;
|
||
}
|
||
.success {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
.error {
|
||
background-color: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
iframe {
|
||
width: 100%;
|
||
height: 600px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="test-container">
|
||
<h1>Scene Step 编辑器测试页面</h1>
|
||
|
||
<div class="test-section">
|
||
<h3>编辑器预览</h3>
|
||
<p>下面是Scene Step编辑器的实际运行效果：</p>
|
||
<iframe src="index.html"></iframe>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>功能测试</h3>
|
||
<p>点击下面的按钮测试各项功能：</p>
|
||
|
||
<button class="test-button" onclick="testDataModels()">测试数据模型</button>
|
||
<button class="test-button" onclick="testFileManager()">测试文件管理</button>
|
||
<button class="test-button" onclick="testCodeGenerator()">测试代码生成</button>
|
||
<button class="test-button" onclick="testValidation()">测试数据验证</button>
|
||
|
||
<div id="testResults" class="test-result" style="display: none;">
|
||
<h4>测试结果：</h4>
|
||
<div id="testOutput"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>使用说明</h3>
|
||
<ol>
|
||
<li><strong>创建流程</strong>：点击"新增流程"按钮创建新的流程文件</li>
|
||
<li><strong>添加步骤</strong>：点击"+"按钮添加新步骤</li>
|
||
<li><strong>配置动作</strong>：在步骤中添加动作，选择动作类型（默认/判断题/多选题）</li>
|
||
<li><strong>设置目标对象</strong>：为默认类型动作配置目标对象</li>
|
||
<li><strong>配置题目</strong>：为判断题和多选题类型配置题目和答案</li>
|
||
<li><strong>保存配置</strong>：点击绿色保存按钮保存当前配置</li>
|
||
<li><strong>生成代码</strong>：点击"生成 ProcessEvents 代码"按钮生成C#代码</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>特性说明</h3>
|
||
<ul>
|
||
<li>✅ 完全复制Unity编辑器的功能和样式</li>
|
||
<li>✅ 支持三种动作类型：默认、判断题、多选题</li>
|
||
<li>✅ 折叠/展开功能</li>
|
||
<li>✅ 拖拽排序（通过上下移动按钮）</li>
|
||
<li>✅ 数据验证和错误提示</li>
|
||
<li>✅ 本地存储支持</li>
|
||
<li>✅ 代码生成功能</li>
|
||
<li>✅ 响应式设计</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function showTestResult(message, isSuccess = true) {
|
||
const resultsDiv = document.getElementById('testResults');
|
||
const outputDiv = document.getElementById('testOutput');
|
||
|
||
resultsDiv.style.display = 'block';
|
||
outputDiv.innerHTML = message;
|
||
outputDiv.className = isSuccess ? 'success' : 'error';
|
||
}
|
||
|
||
function testDataModels() {
|
||
try {
|
||
// 测试数据模型创建
|
||
const step = new ProcessStep();
|
||
const action = new ProcessStepDescription();
|
||
const target = new TargetObjectConfig();
|
||
const judgment = new JudgmentQuestionConfig();
|
||
const multipleChoice = new MultipleChoiceConfig();
|
||
|
||
// 测试枚举
|
||
const actionType = ProcessActionType.DEFAULT;
|
||
const targetType = ProcessTargetType.MODEL;
|
||
|
||
showTestResult('✅ 数据模型测试通过！所有类和枚举都正确定义。');
|
||
} catch (error) {
|
||
showTestResult('❌ 数据模型测试失败：' + error.message, false);
|
||
}
|
||
}
|
||
|
||
function testFileManager() {
|
||
try {
|
||
const fileManager = new FileManager();
|
||
|
||
// 测试文件创建
|
||
const result = fileManager.createNewProcessFile('测试流程');
|
||
if (!result.success) {
|
||
throw new Error('创建文件失败');
|
||
}
|
||
|
||
// 测试文件保存
|
||
const testSteps = [DataUtils.createNewStep()];
|
||
const saveResult = fileManager.saveProcessFile('测试流程.json', testSteps);
|
||
if (!saveResult.success) {
|
||
throw new Error('保存文件失败');
|
||
}
|
||
|
||
// 测试文件加载
|
||
const loadedSteps = fileManager.loadProcessFile('测试流程.json');
|
||
if (!Array.isArray(loadedSteps)) {
|
||
throw new Error('加载文件失败');
|
||
}
|
||
|
||
showTestResult('✅ 文件管理测试通过！文件创建、保存、加载功能正常。');
|
||
} catch (error) {
|
||
showTestResult('❌ 文件管理测试失败：' + error.message, false);
|
||
}
|
||
}
|
||
|
||
function testCodeGenerator() {
|
||
try {
|
||
const codeGenerator = new CodeGenerator();
|
||
|
||
// 创建测试数据
|
||
const step = DataUtils.createNewStep();
|
||
step.StepDescription = '测试步骤';
|
||
|
||
const action = DataUtils.createNewAction();
|
||
action.Title = '测试动作';
|
||
action.ActionType = ProcessActionType.DEFAULT;
|
||
|
||
const target = DataUtils.createNewTargetObject();
|
||
target.ObjectName = '测试对象';
|
||
action.TargetObjects.push(target);
|
||
|
||
step.Actions.push(action);
|
||
|
||
// 测试代码生成
|
||
const code = codeGenerator.generateProcessEventsCode('测试流程.json', [step]);
|
||
|
||
if (!code || !code.includes('TestProcessEvents')) {
|
||
throw new Error('代码生成结果不正确');
|
||
}
|
||
|
||
showTestResult('✅ 代码生成测试通过！生成的代码格式正确。<br><br>生成的代码片段：<br><pre>' +
|
||
code.substring(0, 200) + '...</pre>');
|
||
} catch (error) {
|
||
showTestResult('❌ 代码生成测试失败：' + error.message, false);
|
||
}
|
||
}
|
||
|
||
function testValidation() {
|
||
try {
|
||
// 测试有效数据
|
||
const validStep = DataUtils.createNewStep();
|
||
validStep.StepDescription = '有效步骤';
|
||
|
||
const validAction = DataUtils.createNewAction();
|
||
validAction.Title = '有效动作';
|
||
validAction.TargetObjects.push(DataUtils.createNewTargetObject());
|
||
validAction.TargetObjects[0].ObjectName = '有效对象';
|
||
|
||
validStep.Actions.push(validAction);
|
||
|
||
const validResult = DataUtils.validateStep(validStep);
|
||
if (!validResult.valid) {
|
||
throw new Error('有效数据验证失败：' + validResult.message);
|
||
}
|
||
|
||
// 测试无效数据
|
||
const invalidStep = DataUtils.createNewStep();
|
||
invalidStep.StepDescription = ''; // 空描述应该无效
|
||
|
||
const invalidResult = DataUtils.validateStep(invalidStep);
|
||
if (invalidResult.valid) {
|
||
throw new Error('无效数据验证应该失败但却通过了');
|
||
}
|
||
|
||
showTestResult('✅ 数据验证测试通过！验证逻辑正确工作。');
|
||
} catch (error) {
|
||
showTestResult('❌ 数据验证测试失败：' + error.message, false);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|