feat: editor improvements and roadmap doc

editor/App.vue

@@ -11,6 +11,7 @@ const dirty = ref(false)
 const fileInputRef = ref<HTMLInputElement | null>(null)
 const loading = ref(true)
 const error = ref('')
+const showPreview = ref(false)
 
 const selectedScene = computed<SceneNode | null>(() => {
   if (!editor.selectedNodeId.value) return null
@@ -124,6 +125,9 @@ onMounted(() => {
         <button @click="importJSON" class="secondary">导入 JSON</button>
         <button @click="exportJSON" class="secondary">导出 JSON</button>
         <button @click="loadDemo" class="secondary">加载示例</button>
+        <button @click="showPreview = !showPreview" :class="{ secondary: true, active: showPreview }">
+          {{ showPreview ? '📐 图谱' : '🎬 预览' }}
+        </button>
         <span v-if="dirty" class="dirty-indicator">● 未保存</span>
       </div>
       <span class="toolbar-start">
@@ -142,18 +146,20 @@ onMounted(() => {
     <div v-if="error" class="error-bar">{{ error }}</div>
 
     <div class="editor-main">
-      <SceneGraph
-        v-if="!loading"
-        class="graph-area"
-        :scene-nodes="editor.sceneNodes.value"
-        :scene-edges="editor.sceneEdges.value"
-        :start-scene="editor.startSceneId.value"
-        :selected-node-id="editor.selectedNodeId.value"
-        @select-node="editor.selectedNodeId.value = $event"
-        @add-edge="onAddEdge"
-      />
-
-      <div v-else class="graph-area loading-hint">加载剧情数据…</div>
+      <div class="graph-area">
+        <SceneGraph
+          v-if="!loading && !showPreview"
+          :scene-nodes="editor.sceneNodes.value"
+          :scene-edges="editor.sceneEdges.value"
+          :start-scene="editor.startSceneId.value"
+          :selected-node-id="editor.selectedNodeId.value"
+          @select-node="editor.selectedNodeId.value = $event"
+          @add-edge="onAddEdge"
+          @test-scene="(id: string) => window.open('/index.html?scene=' + id, '_blank')"
+        />
+        <div v-else-if="loading" class="loading-hint">加载剧情数据…</div>
+        <PreviewPanel v-if="showPreview" :video-url="previewVideoUrl" />
+      </div>
 
       <NodeEditor
         :scene="selectedScene"
@@ -165,8 +171,6 @@ onMounted(() => {
         @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" />
@@ -193,6 +197,11 @@ html, body {
   width: 100%;
   height: 100%;
 }
+
+.graph-area .preview-panel {
+  width: 100%;
+  border-left: none;
+}
 </style>
 
 <style scoped>
@@ -245,6 +254,11 @@ html, body {
   background: rgba(100,200,255,0.06);
 }
 
+.toolbar-actions button.active {
+  background: rgba(100,200,255,0.18);
+  color: #fff;
+}
+
 .toolbar-start {
   margin-left: auto;
   font-size: 12px;

editor/components/SceneGraph.vue

@@ -19,11 +19,16 @@ const props = defineProps<{
 const emit = defineEmits<{
   selectNode: [id: string]
   addEdge: [source: string, target: string]
+  testScene: [id: string]
 }>()
 
 const nodes = ref<any[]>([])
 const edges = ref<any[]>([])
-const { onNodeClick, onConnect, fitView } = useVueFlow()
+const { onNodeClick, onConnect, onNodeContextMenu, fitView } = useVueFlow()
+const ctxMenuVisible = ref(false)
+const ctxMenuX = ref(0)
+const ctxMenuY = ref(0)
+const ctxMenuNodeId = ref('')
 
 function makeNodes() {
   const positions = computePositions(props.sceneNodes, props.sceneEdges, props.startScene)
@@ -108,6 +113,23 @@ watch(
 
 onNodeClick((ev) => emit('selectNode', ev.node.id))
 
+onNodeContextMenu((ev) => {
+  ev.event.preventDefault()
+  ctxMenuNodeId.value = ev.node.id
+  ctxMenuX.value = ev.event.clientX
+  ctxMenuY.value = ev.event.clientY
+  ctxMenuVisible.value = true
+})
+
+function testFromHere() {
+  emit('testScene', ctxMenuNodeId.value)
+  ctxMenuVisible.value = false
+}
+
+function closeMenu() {
+  ctxMenuVisible.value = false
+}
+
 onConnect((conn: Connection) => {
   if (conn.source && conn.target) emit('addEdge', conn.source, conn.target)
 })
@@ -125,6 +147,14 @@ onConnect((conn: Connection) => {
       <Background :gap="20" />
       <Controls />
     </VueFlow>
+
+    <Teleport to="body">
+      <div v-if="ctxMenuVisible" class="ctx-menu-overlay" @click="closeMenu">
+        <div class="ctx-menu" :style="{ left: ctxMenuX + 'px', top: ctxMenuY + 'px' }">
+          <button class="ctx-item" @click="testFromHere">🎬 从此场景开始测试</button>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -134,4 +164,39 @@ onConnect((conn: Connection) => {
   height: 100%;
   background: #0d0d1a;
 }
+
+.ctx-menu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.ctx-menu {
+  position: absolute;
+  background: #1a1a2e;
+  border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 6px;
+  padding: 4px;
+  min-width: 160px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+}
+
+.ctx-item {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  font-size: 13px;
+  color: #ccc;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.ctx-item:hover {
+  background: rgba(100,200,255,0.12);
+  color: #fff;
+}
 </style>