feat: editor improvements and roadmap doc

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>