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

editor/components/PreviewPanel.vue

@@ -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>