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

docs/EDITOR_ROADMAP.md

@@ -1,84 +1,30 @@
-# 编辑器 Roadmap — 与引擎功能同步
+# 编辑器 Roadmap
 
-P3 完成的编辑器支持基本的场景节点编辑。以下是与引擎 P4~P31 同步所需的编辑器功能迭代。
+编辑器核心定位：**图谱可视化 + 实时预览测试**。场景字段由创作者在 VS Code 中直接写 JSON，编辑器不做 GUI 表单。
 
 ---
 
-## 已完成（P3）
+## 已完成
 
 | 功能 | 完成 |
 |------|:--:|
 | 场景节点图（Vue Flow） | ✅ |
-| 场景属性编辑（videoUrl, choices, nextScene, onEnter） | ✅ |
-| QTE 参数编辑 | ✅ |
 | JSON 导入/导出 | ✅ |
 | 视频预览 | ✅ |
+| Pinia 状态管理（editorStore） | ✅ |
+| 纯函数数据层（GraphService） | ✅ |
+| 图谱/预览切换 | ✅ |
+| 节点右键测试（新标签页） | ✅ |
+| 节点拖拽位置记忆 | ✅ |
 
 ---
 
-## E1: 图片/视频热点编辑（对标 P4）
+## E10: 内嵌快速测试 ✅ 部分完成
 
-- [ ] NodeEditor 新增 `type` 切换（video / image）
-- [ ] `imageUrl` 字段
-- [ ] 热区列表编辑：id / label / targetScene / x / y / w / h
-- [ ] 时间轴参数：showAt / hideAt
-- [ ] conditions / effects 编辑
-- [ ] timeLimit 字段
-
-## E2: 循环等待参数（对标 P5）
-
-- [ ] loopStart / loopEnd 两个数字字段
-
-## E3: BGM 字段编辑（对标 P6）
-
-- [ ] bgmUrl / bgmVolume / bgmCrossFade
-- [ ] bgmDuckLevel / bgmDuckFade
-- [ ] videoMuted
-
-## E4: i18n Key 编辑（对标 P11/P31）
-
-- [ ] SceneNode: subtitleUrl → subtitles map（按语言编辑）
-- [ ] Choice: textKey / promptKey
-- [ ] Hotspot: labelKey
-- [ ] ChapterInfo: labelKey
-- [ ] AchievementDef: titleKey / descKey
-- [ ] EndingDef: labelKey
-- [ ] QTEDefinition: promptKey
-- [ ] BattleHUD / BattleResult: labelKey / titleKey
-
-## E5: Choice 增强（对标 P13）
-
-- [ ] prompt 字段编辑
-
-## E6: 顶级字段编辑（对标 P8/P14/P15/P20/P24）
-
-- [ ] chapters 列表编辑（id / label / startScene / thumbnail / defaultVariables）
-- [ ] achievements 列表编辑（id / title / description / icon / hidden / condition）
-- [ ] endings 列表编辑（id / label / sceneId / chapterId / thumbnail）
-- [ ] introVideo / menuVideo
-- [ ] streamingUrl map（三档画质 key-value）
-- [ ] assetBase 字段
-
-## E7: 条件路由编辑（对标 P25）
-
-- [ ] nextScene 类型切换（字符串 / 数组）
-- [ ] 数组模式：逐条编辑 conditions + targetScene
-
-## E8: 关键节点编辑（对标 P26）
-
-- [ ] keyMoment 字段（三态：自动 / 强制 true / 强制 false）
-
-## E9: 战斗系统编辑（对标 P31）
-
-- [ ] battleHUD 列表编辑：每项含 label / portrait / stats 数组
-- [ ] battleHUD stats 编辑：variable / label / max / style
-- [ ] battleResult 编辑：title / stats 数组
-
-## E10: 内嵌快速测试
-
-- [ ] 节点右键菜单 → "从此场景开始测试"
-- [ ] PreviewPanel 切换为 iframe 内嵌游戏播放器（加载 `/?scene=<id>`）
-- [ ] Engine 支持 `?scene=` URL 参数指定起始场景
+- [x] 节点右键菜单 → "从此场景开始测试"
+- [x] 新标签页打开游戏
+- [x] Engine 支持 `?startScene=` URL 参数
+- [ ] PreviewPanel 内嵌 iframe 游戏播放器（远期）
 
 ## E11: 场景列表 + 搜索
 
@@ -90,75 +36,33 @@ P3 完成的编辑器支持基本的场景节点编辑。以下是与引擎 P4~P
 
 - [ ] 导出/保存前实时检查
 - [ ] 引用完整性：targetScene 指向不存在的场景 ID
-- [ ] 死路检测：无 choices / 无 nextScene / 无 qte / 无 hotspots 的场景
+- [ ] 死路检测：无 choices / 无 nextScene / 无 qte / 无 hotspots
 - [ ] 变量引用：conditions 中的 variable 未在 `variables` 声明
 
 ## E13: 撤销/重做
 
 - [ ] 操作历史栈（add/delete/update/move node & edge）
 - [ ] Ctrl+Z 撤销 / Ctrl+Shift+Z 重做
-- [ ] `useGraphEditor` 中维护 `history[]` + `historyIndex`
 
-## E14: 面板可折叠 + 标签页
+## E16: NodeEditor → JSON 编辑器 ✅ 已完成
 
-- [ ] NodeEditor 和 PreviewPanel 加折叠/展开按钮
-- [ ] NodeEditor 按类别分标签页：基本（id/type/videoUrl）/ 音频（bgmUrl 等）/ 战斗（battleHUD/battleResult）/ 高级（loopStart/keyMoment）
-- [ ] 标签页间切换不丢失编辑状态
+- [x] 删除现有 GUI 表单，改为 `<textarea>` + 等宽字体 + 深色背景
+- [x] 初始值 `JSON.stringify(scene, null, 2)`
+- [x] `@blur` → JSON.parse → `store.updateScene(id, parsed)`
+- [x] 解析失败 → 红色边框 + 错误提示
 
----
-
-## 优先级建议
+**优先级建议：**
 
 | 优先级 | 编号 | 说明 |
 |:--:|------|------|
-| **P0** | E4 | i18n key 编辑——覆盖最广，P11/P31 都依赖 |
-| **P0** | E10 | 内嵌快速测试——最直接的创作者效率提升 |
-| **P1** | E1 | 热点编辑——P4 是核心交互功能 |
-| **P1** | E6 | 顶级字段——chapters/achievements/endings 创作者需求最大 |
-| **P1** | E12 | JSON 校验——防止导出后游戏崩溃 |
-| **P2** | E7/E8/E9 | 条件路由/关键节点/战斗——新增功能，但依赖前置 |
-| **P2** | E11 | 场景列表搜索——场景多了才有真实需求 |
-| **P2** | E14 | 面板标签页——属性字段达到 20+ 后优势明显 |
-| **P3** | E2/E3/E5 | 单字段编辑——BGM/loop/prompt，改动小 |
-| **P3** | E13 | 撤销/重做——重要但改动不小 |
-
----
-
-## E15: 编辑器架构重构 — 三层分离
-
-目标：为应对状态增多和功能复杂化，确保扩展性和可维护性。编辑器重构为三层分离架构，与引擎分层一致。
-
-**当前问题：** `App.vue` 310 行 god 组件 / `useGraphEditor.ts` 混合 JSON + Vue refs / 无 Pinia store
-
-**目标架构：**
-
-```
-editor/
-├── services/                GraphService.ts + AssetResolver.ts    # 纯函数数据层
-├── stores/                  editorStore.ts                       # Pinia 全局状态 + undo/redo
-├── composables/             useGraphEditor.ts                    # 编排层（→60行）
-├── components/              Toolbar / SceneGraphPanel / NodeEditorPanel / SceneList / StatusBar
-└── App.vue                  # 精简布局组合（→30行）
-```
-
-**实施步骤：**
-1. 创建 `editorStore.ts`（Pinia）
-2. 创建 `GraphService.ts`（纯函数剥离）
-3. 精简 `App.vue` + `useGraphEditor`
-4. 新增 `SceneList.vue` + `StatusBar.vue`
-
-### 优先级建议（更新）
-
-| 优先级 | 编号 | 说明 |
-|:--:|------|------|
-| **P0** | **E15** | 架构重构——所有后续功能的基础 ✅ 已完成 2026-06-13 |
-| **P0** | E4 | i18n key 编辑 |
+| **P0** | E16 | JSON 编辑器 ✅ 已完成 |
 | **P0** | E10 | 内嵌快速测试 |
-| **P1** | E1 | 热点编辑 |
-| **P1** | E6 | 顶级字段 |
 | **P1** | E12 | JSON 校验 |
-| **P2** | E7/E8/E9 | 条件路由/关键节点/战斗 |
-| **P2** | E11 | 场景列表搜索 |
-| **P2** | E14 | 面板标签页 |
-| **P3** | E2/E3/E5 | 单字段编辑 |
-| **P3** | E13 | 撤销/重做 |
+| **P1** | E11 | 场景列表搜索 |
+| **P2** | E13 | 撤销/重做 |
+
+---
+
+## 废弃项
+
+E1~E9、E14 废弃。编辑器不再做 NodeEditor GUI 表单，场景字段由创作者在 JSON 中直接编写。

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>