feat: P3 - visual scenario editor with Vue Flow
- editor/: stand-alone Vite multi-page app for visual scenario editing - editor/components/SceneGraph.vue: Vue Flow graph with scene nodes, branch/default/QTE edges - editor/components/NodeEditor.vue: right panel editing video/subtitle paths, choices, QTE params - editor/components/PreviewPanel.vue: embedded video player previewing selected scene - editor/composables/useGraphEditor.ts: bidirectional graph<->JSON sync - editor/App.vue: toolbar (new scene, import/export JSON, load demo, start scene selector) - @vue-flow/core|background|controls: graph visualization dependencies - vite.config.ts: multi-page build (main + editor) - ROADMAP: mark P3 as completed
This commit is contained in:
385
editor/components/NodeEditor.vue
Normal file
385
editor/components/NodeEditor.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import type { SceneNode, Choice } from '@engine/types'
|
||||
|
||||
const props = defineProps<{
|
||||
scene: SceneNode | null
|
||||
sceneList: { id: string; label: string }[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
update: [id: string, partial: Partial<SceneNode>]
|
||||
addChoice: [sourceId: string]
|
||||
updateChoice: [sourceId: string, index: number, partial: Partial<Choice>]
|
||||
deleteChoice: [sourceId: string, index: number]
|
||||
deleteScene: [id: string]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const localVideo = ref('')
|
||||
const localSubtitle = ref('')
|
||||
const localNextScene = ref('')
|
||||
const editingQTE = ref(false)
|
||||
const localQteTime = ref(1)
|
||||
const localQtePrompt = ref('')
|
||||
const localQteKeys = ref('')
|
||||
const localQteLimit = ref(3)
|
||||
const localQteSuccess = ref('')
|
||||
const localQteFail = ref('')
|
||||
|
||||
watch(() => props.scene, (s) => {
|
||||
if (!s) return
|
||||
localVideo.value = s.videoUrl || ''
|
||||
localSubtitle.value = s.subtitleUrl || ''
|
||||
localNextScene.value = s.nextScene || ''
|
||||
if (s.qte) {
|
||||
editingQTE.value = true
|
||||
localQteTime.value = s.qte.triggerTime
|
||||
localQtePrompt.value = s.qte.prompt
|
||||
localQteKeys.value = s.qte.keys.join(', ')
|
||||
localQteLimit.value = s.qte.timeLimit
|
||||
localQteSuccess.value = s.qte.successScene
|
||||
localQteFail.value = s.qte.failScene
|
||||
} else {
|
||||
editingQTE.value = false
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
function saveVideo() {
|
||||
if (!props.scene) return
|
||||
emit('update', props.scene.id, { videoUrl: localVideo.value })
|
||||
}
|
||||
|
||||
function saveSubtitle() {
|
||||
if (!props.scene) return
|
||||
emit('update', props.scene.id, { subtitleUrl: localSubtitle.value })
|
||||
}
|
||||
|
||||
function saveNextScene() {
|
||||
if (!props.scene) return
|
||||
emit('update', props.scene.id, { nextScene: localNextScene.value })
|
||||
}
|
||||
|
||||
function saveQTE() {
|
||||
if (!props.scene) return
|
||||
emit('update', props.scene.id, {
|
||||
qte: editingQTE.value ? {
|
||||
triggerTime: localQteTime.value,
|
||||
prompt: localQtePrompt.value,
|
||||
keys: localQteKeys.value.split(',').map((k) => k.trim()).filter(Boolean),
|
||||
timeLimit: localQteLimit.value,
|
||||
successScene: localQteSuccess.value,
|
||||
failScene: localQteFail.value,
|
||||
} : undefined,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="node-editor" v-if="scene">
|
||||
<div class="editor-header">
|
||||
<h3>{{ scene.id }}</h3>
|
||||
<div class="header-actions">
|
||||
<button class="icon-btn danger" @click="emit('deleteScene', scene.id)" title="删除场景">🗑</button>
|
||||
<button class="icon-btn" @click="emit('close')" title="关闭">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<div class="field-group">
|
||||
<label>视频路径</label>
|
||||
<div class="field-row">
|
||||
<input v-model="localVideo" @blur="saveVideo" placeholder="/videos/scene.mp4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>字幕路径</label>
|
||||
<div class="field-row">
|
||||
<input v-model="localSubtitle" @blur="saveSubtitle" placeholder="/subtitles/scene.vtt" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>默认下一场景 (nextScene)</label>
|
||||
<select v-model="localNextScene" @change="saveNextScene">
|
||||
<option value="">-- 无 --</option>
|
||||
<option v-for="s in sceneList.filter(s => s.id !== scene.id)" :key="s.id" :value="s.id">
|
||||
{{ s.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="qte-toggle">
|
||||
<input type="checkbox" v-model="editingQTE" @change="saveQTE" />
|
||||
QTE 快速反应事件
|
||||
</label>
|
||||
<div v-if="editingQTE" class="qte-fields">
|
||||
<div class="qte-row">
|
||||
<span>触发时间 (秒)</span>
|
||||
<input type="number" v-model.number="localQteTime" @change="saveQTE" min="0" step="0.5" />
|
||||
</div>
|
||||
<div class="qte-row">
|
||||
<span>提示文字</span>
|
||||
<input v-model="localQtePrompt" @blur="saveQTE" placeholder="按下空格键！" />
|
||||
</div>
|
||||
<div class="qte-row">
|
||||
<span>按键 (逗号分隔)</span>
|
||||
<input v-model="localQteKeys" @blur="saveQTE" placeholder="Space, ArrowUp" />
|
||||
</div>
|
||||
<div class="qte-row">
|
||||
<span>限时 (秒)</span>
|
||||
<input type="number" v-model.number="localQteLimit" @change="saveQTE" min="1" step="0.5" />
|
||||
</div>
|
||||
<div class="qte-row">
|
||||
<span>成功场景</span>
|
||||
<select v-model="localQteSuccess" @change="saveQTE">
|
||||
<option value="">-- 选择 --</option>
|
||||
<option v-for="s in sceneList.filter(s => s.id !== scene.id)" :key="s.id" :value="s.id">
|
||||
{{ s.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="qte-row">
|
||||
<span>失败场景</span>
|
||||
<select v-model="localQteFail" @change="saveQTE">
|
||||
<option value="">-- 选择 --</option>
|
||||
<option v-for="s in sceneList.filter(s => s.id !== scene.id)" :key="s.id" :value="s.id">
|
||||
{{ s.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group choices-section">
|
||||
<label>选项列表</label>
|
||||
<button class="add-btn" @click="emit('addChoice', scene.id)">+ 添加选项</button>
|
||||
|
||||
<div
|
||||
v-for="(choice, index) in (scene.choices || [])"
|
||||
:key="index"
|
||||
class="choice-item"
|
||||
>
|
||||
<div class="choice-header">
|
||||
<span>选项 {{ index + 1 }}</span>
|
||||
<button class="icon-btn danger small" @click="emit('deleteChoice', scene.id, index)">×</button>
|
||||
</div>
|
||||
<input
|
||||
:value="choice.text"
|
||||
@blur="emit('updateChoice', scene.id, index, { text: ($event.target as HTMLInputElement).value })"
|
||||
placeholder="选项文字"
|
||||
/>
|
||||
<select
|
||||
:value="choice.targetScene"
|
||||
@change="emit('updateChoice', scene.id, index, { targetScene: ($event.target as HTMLSelectElement).value })"
|
||||
>
|
||||
<option value="">-- 目标场景 --</option>
|
||||
<option v-for="s in sceneList.filter(s => s.id !== scene.id)" :key="s.id" :value="s.id">
|
||||
{{ s.label }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="choice-extra">
|
||||
<label class="inline-label">限时(秒, 0=不限)</label>
|
||||
<input
|
||||
type="number"
|
||||
:value="choice.timeLimit ?? 0"
|
||||
@change="emit('updateChoice', scene.id, index, { timeLimit: +($event.target as HTMLInputElement).value })"
|
||||
min="0" step="1"
|
||||
class="time-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node-editor empty-state" v-else>
|
||||
<p>点击左侧画布中的节点来编辑</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.node-editor {
|
||||
width: 340px;
|
||||
height: 100%;
|
||||
background: #141428;
|
||||
border-left: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.editor-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: none;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
color: #888;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-btn:hover { color: #ddd; border-color: rgba(255,255,255,0.25); }
|
||||
.icon-btn.danger:hover { color: #e74c3c; border-color: #e74c3c; }
|
||||
.icon-btn.small { width: 22px; height: 22px; font-size: 11px; }
|
||||
|
||||
.editor-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-group label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
color: #ddd;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
border-color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.qte-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qte-toggle input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.qte-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.qte-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.qte-row span {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.qte-row input, .qte-row select {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.choices-section {
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: #8cf;
|
||||
background: rgba(100,200,255,0.08);
|
||||
border: 1px solid rgba(100,200,255,0.2);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.add-btn:hover { background: rgba(100,200,255,0.15); }
|
||||
|
||||
.choice-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.choice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.choice-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inline-label {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.time-input {
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user