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:
331
editor/App.vue
Normal file
331
editor/App.vue
Normal file
@@ -0,0 +1,331 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import type { GameData, SceneNode } from '@engine/types'
|
||||
import { useGraphEditor } from './composables/useGraphEditor'
|
||||
import SceneGraph from './components/SceneGraph.vue'
|
||||
import NodeEditor from './components/NodeEditor.vue'
|
||||
import PreviewPanel from './components/PreviewPanel.vue'
|
||||
|
||||
const editor = useGraphEditor()
|
||||
const dirty = ref(false)
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const sceneNodes = computed(() => {
|
||||
return Object.values(editor.gameData.value.scenes).map((s) => ({
|
||||
id: s.id,
|
||||
label: s.id,
|
||||
}))
|
||||
})
|
||||
|
||||
const sceneEdges = computed(() => {
|
||||
const edges: { id: string; source: string; target: string; label?: string }[] = []
|
||||
for (const [id, scene] of Object.entries(editor.gameData.value.scenes)) {
|
||||
if (scene.choices) {
|
||||
let ci = 0
|
||||
for (const c of scene.choices) {
|
||||
if (c.targetScene) {
|
||||
edges.push({
|
||||
id: `${id}_choice_${ci}`,
|
||||
source: id,
|
||||
target: c.targetScene,
|
||||
label: c.text.slice(0, 10),
|
||||
})
|
||||
}
|
||||
ci++
|
||||
}
|
||||
}
|
||||
if (scene.nextScene) {
|
||||
edges.push({
|
||||
id: `${id}_next`,
|
||||
source: id,
|
||||
target: scene.nextScene,
|
||||
label: '→ 默认',
|
||||
})
|
||||
}
|
||||
if (scene.qte) {
|
||||
if (scene.qte.successScene) {
|
||||
edges.push({
|
||||
id: `${id}_qte_s`,
|
||||
source: id,
|
||||
target: scene.qte.successScene,
|
||||
label: 'QTE成功',
|
||||
})
|
||||
}
|
||||
if (scene.qte.failScene) {
|
||||
edges.push({
|
||||
id: `${id}_qte_f`,
|
||||
source: id,
|
||||
target: scene.qte.failScene,
|
||||
label: 'QTE失败',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
return edges
|
||||
})
|
||||
|
||||
const selectedScene = computed<SceneNode | null>(() => {
|
||||
if (!editor.selectedNodeId.value) return null
|
||||
return editor.gameData.value.scenes[editor.selectedNodeId.value] ?? null
|
||||
})
|
||||
|
||||
const sceneList = computed(() => editor.sceneList.value)
|
||||
|
||||
const previewVideoUrl = computed(() => {
|
||||
if (!selectedScene.value?.videoUrl) return null
|
||||
const url = selectedScene.value.videoUrl
|
||||
if (url.startsWith('/')) return url
|
||||
return '/' + url
|
||||
})
|
||||
|
||||
function newNode() {
|
||||
const id = editor.addScene()
|
||||
editor.selectedNodeId.value = id
|
||||
dirty.value = true
|
||||
}
|
||||
|
||||
function delNode(id: string) {
|
||||
editor.deleteScene(id)
|
||||
dirty.value = true
|
||||
}
|
||||
|
||||
function onUpdateScene(id: string, partial: any) {
|
||||
editor.updateScene(id, partial)
|
||||
dirty.value = true
|
||||
}
|
||||
|
||||
function onAddChoice(sourceId: string) {
|
||||
editor.addChoice(sourceId)
|
||||
dirty.value = true
|
||||
}
|
||||
|
||||
function onUpdateChoice(sourceId: string, index: number, partial: any) {
|
||||
editor.updateChoice(sourceId, index, partial)
|
||||
dirty.value = true
|
||||
}
|
||||
|
||||
function onDeleteChoice(sourceId: string, index: number) {
|
||||
editor.deleteChoice(sourceId, index)
|
||||
dirty.value = true
|
||||
}
|
||||
|
||||
function onAddEdge(source: string, target: string) {
|
||||
const scene = editor.gameData.value.scenes[source]
|
||||
if (!scene) return
|
||||
if (!scene.choices) scene.choices = []
|
||||
scene.choices.push({
|
||||
text: `${source} → ${target}`,
|
||||
targetScene: target,
|
||||
})
|
||||
editor.gameData.value.scenes = { ...editor.gameData.value.scenes }
|
||||
dirty.value = true
|
||||
}
|
||||
|
||||
async function exportJSON() {
|
||||
const data = editor.exportJSON()
|
||||
const json = JSON.stringify(data, null, 2)
|
||||
const blob = new Blob([json], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'scenes.json'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
dirty.value = false
|
||||
}
|
||||
|
||||
function importJSON() {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
async function onFileSelected(e: Event) {
|
||||
const file = (e.target as HTMLInputElement).files?.[0]
|
||||
if (!file) return
|
||||
const text = await file.text()
|
||||
try {
|
||||
const data = JSON.parse(text) as GameData
|
||||
editor.loadJSON(data)
|
||||
dirty.value = false
|
||||
} catch (err) {
|
||||
alert('JSON 解析失败：' + (err as Error).message)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDemo() {
|
||||
const resp = await fetch('/scenes/demo.json')
|
||||
const data = await resp.json()
|
||||
editor.loadJSON(data)
|
||||
dirty.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadDemo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editor-layout">
|
||||
<div class="toolbar">
|
||||
<span class="toolbar-title">剧情编辑器</span>
|
||||
<div class="toolbar-actions">
|
||||
<button @click="newNode">+ 新场景</button>
|
||||
<button @click="importJSON" class="secondary">导入 JSON</button>
|
||||
<button @click="exportJSON" class="secondary">导出 JSON</button>
|
||||
<button @click="loadDemo" class="secondary">加载示例</button>
|
||||
<span v-if="dirty" class="dirty-indicator">● 未保存</span>
|
||||
</div>
|
||||
<span class="toolbar-start">
|
||||
起始场景:
|
||||
<select
|
||||
:value="editor.startSceneId.value"
|
||||
@change="editor.startSceneId.value = ($event.target as HTMLSelectElement).value; dirty = true"
|
||||
class="start-select"
|
||||
>
|
||||
<option value="">-- 选择 --</option>
|
||||
<option v-for="n in sceneNodes" :key="n.id" :value="n.id">{{ n.label }}</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="editor-main">
|
||||
<SceneGraph
|
||||
class="graph-area"
|
||||
:scene-nodes="sceneNodes"
|
||||
:scene-edges="sceneEdges"
|
||||
:start-scene="editor.startSceneId.value"
|
||||
:selected-node-id="editor.selectedNodeId.value"
|
||||
@select-node="editor.selectedNodeId.value = $event"
|
||||
@add-edge="onAddEdge"
|
||||
/>
|
||||
|
||||
<NodeEditor
|
||||
:scene="selectedScene"
|
||||
:scene-list="sceneList"
|
||||
@update="onUpdateScene"
|
||||
@add-choice="onAddChoice"
|
||||
@update-choice="onUpdateChoice"
|
||||
@delete-choice="onDeleteChoice"
|
||||
@delete-scene="delNode"
|
||||
@close="editor.selectedNodeId.value = null"
|
||||
/>
|
||||
|
||||
<PreviewPanel :video-url="previewVideoUrl" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept=".json"
|
||||
style="display:none"
|
||||
@change="onFileSelected"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #0a0a16;
|
||||
color: #ccc;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
#editor-app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.editor-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
background: #111122;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #ddd;
|
||||
letter-spacing: 1px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-actions button {
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
color: #ddd;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.toolbar-actions button:hover {
|
||||
background: rgba(255,255,255,0.14);
|
||||
}
|
||||
|
||||
.toolbar-actions button.secondary {
|
||||
color: #8cf;
|
||||
border-color: rgba(100,200,255,0.2);
|
||||
background: rgba(100,200,255,0.06);
|
||||
}
|
||||
|
||||
.toolbar-start {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.start-select {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 3px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.dirty-indicator {
|
||||
font-size: 11px;
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.editor-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-area {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
121
editor/composables/useGraphEditor.ts
Normal file
121
editor/composables/useGraphEditor.ts
Normal file
@@ -0,0 +1,121 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import type { GameData, SceneNode, Choice } from '@engine/types'
|
||||
|
||||
export interface EditorNode {
|
||||
id: string
|
||||
label: string
|
||||
videoUrl: string
|
||||
subtitleUrl: string
|
||||
choices: Choice[]
|
||||
nextScene: string
|
||||
onEnter: any[]
|
||||
qte: any | null
|
||||
}
|
||||
|
||||
export function useGraphEditor() {
|
||||
const gameData = ref<GameData>({ scenes: {}, startScene: '', variables: {} })
|
||||
const selectedNodeId = ref<string | null>(null)
|
||||
const startSceneId = ref('')
|
||||
|
||||
const selectedNode = computed(() => {
|
||||
if (!selectedNodeId.value) return null
|
||||
return gameData.value.scenes[selectedNodeId.value] ?? null
|
||||
})
|
||||
|
||||
const sceneList = computed(() => {
|
||||
return Object.values(gameData.value.scenes).map((s) => ({
|
||||
id: s.id,
|
||||
label: s.id,
|
||||
}))
|
||||
})
|
||||
|
||||
function loadJSON(json: GameData) {
|
||||
gameData.value = JSON.parse(JSON.stringify(json))
|
||||
startSceneId.value = json.startScene
|
||||
}
|
||||
|
||||
function exportJSON(): GameData {
|
||||
return JSON.parse(JSON.stringify({ ...gameData.value, startScene: startSceneId.value }))
|
||||
}
|
||||
|
||||
function generateId(): string {
|
||||
let i = Object.keys(gameData.value.scenes).length + 1
|
||||
while (gameData.value.scenes[`scene_${i}`]) i++
|
||||
return `scene_${i}`
|
||||
}
|
||||
|
||||
function addScene(): string {
|
||||
const id = generateId()
|
||||
gameData.value.scenes[id] = {
|
||||
id,
|
||||
videoUrl: '',
|
||||
choices: [],
|
||||
nextScene: '',
|
||||
subtitleUrl: '',
|
||||
onEnter: [],
|
||||
}
|
||||
return id
|
||||
}
|
||||
|
||||
function deleteScene(id: string) {
|
||||
if (startSceneId.value === id) return
|
||||
delete gameData.value.scenes[id]
|
||||
for (const s of Object.values(gameData.value.scenes)) {
|
||||
s.choices = (s.choices || []).filter((c) => c.targetScene !== id)
|
||||
if (s.nextScene === id) s.nextScene = ''
|
||||
}
|
||||
if (selectedNodeId.value === id) selectedNodeId.value = null
|
||||
}
|
||||
|
||||
function updateScene(id: string, partial: Partial<EditorNode>) {
|
||||
const scene = gameData.value.scenes[id]
|
||||
if (!scene) return
|
||||
Object.assign(scene, partial)
|
||||
gameData.value.scenes = { ...gameData.value.scenes }
|
||||
}
|
||||
|
||||
function addChoice(sourceId: string) {
|
||||
const scene = gameData.value.scenes[sourceId]
|
||||
if (!scene) return
|
||||
if (!scene.choices) scene.choices = []
|
||||
scene.choices.push({
|
||||
text: '新选项',
|
||||
targetScene: '',
|
||||
})
|
||||
gameData.value.scenes = { ...gameData.value.scenes }
|
||||
}
|
||||
|
||||
function updateChoice(sourceId: string, index: number, partial: Partial<Choice>) {
|
||||
const scene = gameData.value.scenes[sourceId]
|
||||
if (!scene?.choices) return
|
||||
Object.assign(scene.choices[index], partial)
|
||||
gameData.value.scenes = { ...gameData.value.scenes }
|
||||
}
|
||||
|
||||
function deleteChoice(sourceId: string, index: number) {
|
||||
const scene = gameData.value.scenes[sourceId]
|
||||
if (!scene?.choices) return
|
||||
scene.choices.splice(index, 1)
|
||||
gameData.value.scenes = { ...gameData.value.scenes }
|
||||
}
|
||||
|
||||
function newSceneData(): EditorNode {
|
||||
return {
|
||||
id: '',
|
||||
label: '',
|
||||
videoUrl: '',
|
||||
subtitleUrl: '',
|
||||
choices: [],
|
||||
nextScene: '',
|
||||
onEnter: [],
|
||||
qte: null,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
gameData, selectedNodeId, selectedNode, sceneList, startSceneId,
|
||||
loadJSON, exportJSON, addScene, deleteScene, updateScene,
|
||||
addChoice, updateChoice, deleteChoice,
|
||||
newSceneData, generateId,
|
||||
}
|
||||
}
|
||||
12
editor/index.html
Normal file
12
editor/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>剧情编辑器 — 交互式电影游戏</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor-app"></div>
|
||||
<script type="module" src="/editor/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
7
editor/main.ts
Normal file
7
editor/main.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import EditorApp from './App.vue'
|
||||
|
||||
const app = createApp(EditorApp)
|
||||
app.use(createPinia())
|
||||
app.mount('#editor-app')
|
||||
Reference in New Issue
Block a user