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>
|
||||
105
editor/components/PreviewPanel.vue
Normal file
105
editor/components/PreviewPanel.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
videoUrl: string | null
|
||||
}>()
|
||||
|
||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||
const playing = ref(false)
|
||||
const paused = ref(false)
|
||||
|
||||
watch(() => props.videoUrl, (url) => {
|
||||
if (!videoRef.value || !url) return
|
||||
videoRef.value.src = url
|
||||
playing.value = false
|
||||
paused.value = false
|
||||
})
|
||||
|
||||
function togglePlay() {
|
||||
if (!videoRef.value) return
|
||||
if (videoRef.value.paused) {
|
||||
videoRef.value.play().catch(() => {})
|
||||
playing.value = true
|
||||
} else {
|
||||
videoRef.value.pause()
|
||||
playing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="preview-panel">
|
||||
<div class="preview-header">预览</div>
|
||||
<div class="preview-video" v-if="videoUrl">
|
||||
<video ref="videoRef" preload="auto" />
|
||||
<div class="preview-controls">
|
||||
<button @click="togglePlay">{{ playing ? '暂停' : '播放' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-empty" v-else>
|
||||
<span>选择场景节点以预览视频</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.preview-panel {
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
background: #141428;
|
||||
border-left: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.preview-video {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preview-video video {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.preview-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview-controls button {
|
||||
padding: 6px 20px;
|
||||
font-size: 12px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
color: #ddd;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.preview-controls button:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.preview-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #444;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
93
editor/components/SceneGraph.vue
Normal file
93
editor/components/SceneGraph.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { watch, ref, onMounted } from 'vue'
|
||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import { Background } from '@vue-flow/background'
|
||||
import { Controls } from '@vue-flow/controls'
|
||||
import '@vue-flow/core/dist/style.css'
|
||||
import '@vue-flow/controls/dist/style.css'
|
||||
import '@vue-flow/core/dist/theme-default.css'
|
||||
import type { Node, Edge, Connection } from '@vue-flow/core'
|
||||
|
||||
const props = defineProps<{
|
||||
sceneNodes: { id: string; label: string }[]
|
||||
sceneEdges: { id: string; source: string; target: string; label?: string }[]
|
||||
startScene: string
|
||||
selectedNodeId: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
selectNode: [id: string]
|
||||
addNode: []
|
||||
addEdge: [source: string, target: string]
|
||||
}>()
|
||||
|
||||
const { nodes, edges, onNodeClick, onConnect, fitView } = useVueFlow()
|
||||
|
||||
function rebuild() {
|
||||
nodes.value = props.sceneNodes.map((n, i) => ({
|
||||
id: n.id,
|
||||
type: 'default',
|
||||
position: { x: (i % 4) * 220 + 50, y: Math.floor(i / 4) * 120 + 50 },
|
||||
data: { label: n.id === props.startScene ? `▶ ${n.label}` : n.label },
|
||||
style: n.id === props.startScene
|
||||
? 'background:#1b5e20; color:#fff; border-color:#388e3c'
|
||||
: n.id === props.selectedNodeId
|
||||
? 'background:#1565c0; color:#fff; border-color:#1976d2'
|
||||
: '',
|
||||
sourcePosition: 'right' as const,
|
||||
targetPosition: 'left' as const,
|
||||
connectable: true,
|
||||
}))
|
||||
|
||||
edges.value = props.sceneEdges.map((e) => ({
|
||||
id: e.id,
|
||||
source: e.source,
|
||||
target: e.target,
|
||||
label: e.label || '',
|
||||
animated: true,
|
||||
style: { stroke: '#4fc3f7' },
|
||||
labelStyle: { fill: '#aaa', fontWeight: 400, fontSize: 11 },
|
||||
labelBgStyle: { fill: 'rgba(0,0,0,0.7)' },
|
||||
}))
|
||||
}
|
||||
|
||||
watch(() => [props.sceneNodes, props.sceneEdges, props.startScene, props.selectedNodeId], () => {
|
||||
rebuild()
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
onNodeClick((event) => {
|
||||
emit('selectNode', event.node.id)
|
||||
})
|
||||
|
||||
onConnect((connection: Connection) => {
|
||||
if (connection.source && connection.target) {
|
||||
emit('addEdge', connection.source, connection.target)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => fitView({ padding: 0.2 }), 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="scene-graph">
|
||||
<VueFlow
|
||||
:nodes="nodes"
|
||||
:edges="edges"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="2"
|
||||
>
|
||||
<Background :gap="20" />
|
||||
<Controls />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scene-graph {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0d0d1a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user