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;