chore: editor NodeEditor, App.vue, and roadmap updates

editor/App.vue

@@ -129,10 +129,6 @@ onMounted(() => loadDemo())
       <NodeEditor
         :scene="store.selectedScene"
         :scene-list="editor.sceneList.value"
-        @update="store.updateScene"
-        @add-choice="store.addChoice"
-        @update-choice="store.updateChoice"
-        @delete-choice="store.deleteChoice"
         @delete-scene="delNode"
         @close="store.selectedNodeId = null"
       />

editor/components/NodeEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { SceneNode, Choice } from '@engine/types'
+import { ref, watch } from 'vue'
+import type { SceneNode } from '@engine/types'
+import { useEditorStore } from '../stores/editorStore'
 
 const props = defineProps<{
   scene: SceneNode | null
@@ -8,70 +9,33 @@ const props = defineProps<{
 }>()
 
 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('')
+const store = useEditorStore()
+const jsonText = ref('')
+const errorMsg = ref('')
+const saved = ref(false)
 
 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
-  }
+  if (!s) { jsonText.value = ''; errorMsg.value = ''; return }
+  jsonText.value = JSON.stringify(s, null, 2)
+  errorMsg.value = ''
+  saved.value = false
 }, { immediate: true })
 
-function saveVideo() {
+function onBlur() {
   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,
-  })
+  errorMsg.value = ''
+  try {
+    const parsed = JSON.parse(jsonText.value)
+    store.updateScene(props.scene.id, parsed)
+    saved.value = true
+    setTimeout(() => { saved.value = false }, 2000)
+  } catch (e: any) {
+    errorMsg.value = e.message
+  }
 }
 </script>
 
@@ -80,119 +44,21 @@ function saveQTE() {
     <div class="editor-header">
       <h3>{{ scene.id }}</h3>
       <div class="header-actions">
+        <span v-if="saved" class="saved-hint">已保存</span>
+        <span v-if="errorMsg" class="error-hint">JSON 错误: {{ errorMsg }}</span>
         <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>
+    <textarea
+      class="json-area"
+      :class="{ error: errorMsg }"
+      :value="jsonText"
+      @input="jsonText = ($event.target as HTMLTextAreaElement).value"
+      @blur="onBlur"
+      spellcheck="false"
+    ></textarea>
   </div>
 
   <div class="node-editor empty-state" v-else>
@@ -224,6 +90,7 @@ function saveQTE() {
   justify-content: space-between;
   padding: 14px 16px;
   border-bottom: 1px solid rgba(255,255,255,0.06);
+  flex-shrink: 0;
 }
 
 .editor-header h3 {
@@ -234,7 +101,23 @@ function saveQTE() {
 
 .header-actions {
   display: flex;
+  align-items: center;
   gap: 6px;
+  min-width: 0;
+}
+
+.saved-hint {
+  font-size: 11px;
+  color: #4caf50;
+}
+
+.error-hint {
+  font-size: 11px;
+  color: #e74c3c;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .icon-btn {
@@ -246,140 +129,27 @@ function saveQTE() {
   border-radius: 4px;
   cursor: pointer;
   font-size: 13px;
+  flex-shrink: 0;
 }
 
 .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 {
+.json-area {
   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;
+  padding: 14px 16px;
+  background: #0a0a1a;
+  color: #ccc;
+  border: none;
   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-family: 'Menlo', 'Monaco', 'Courier New', monospace;
   font-size: 12px;
-  color: #777;
-  white-space: nowrap;
-  min-width: 80px;
+  line-height: 1.5;
+  resize: none;
+  tab-size: 2;
 }
 
-.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;
+.json-area.error {
+  border-left: 3px solid #e74c3c;
 }
 </style>