From 6bd61ae5228b918c474465f6c59c9b9dd222c1c0 Mon Sep 17 00:00:00 2001
From: cocos02 <cocos02@163.com>
Date: Tue, 16 Jun 2026 17:06:25 +0800
Subject: [PATCH] feat: collapsible NodeEditor panel with right-edge bar

---
 editor/App.vue                   |   2 +-
 editor/components/NodeEditor.vue | 116 ++++++++++++++++++++++++-------
 editor/stores/editorStore.ts     |   3 +-
 3 files changed, 93 insertions(+), 28 deletions(-)

diff --git a/editor/App.vue b/editor/App.vue
index 423f87d..6c21f69 100644
--- a/editor/App.vue
+++ b/editor/App.vue
@@ -165,7 +165,7 @@ html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a16; c
 .toolbar-actions button.secondary { color: #8cf; border-color: rgba(100,200,255,0.2); background: rgba(100,200,255,0.06); }
 .toolbar-actions button.active { background: rgba(100,200,255,0.18); color: #fff; }
 .error-bar { padding: 8px 16px; background: #4a1a1a; color: #f88; font-size: 13px; flex-shrink: 0; }
-.editor-main { flex: 1; display: flex; overflow: hidden; }
+.editor-main { flex: 1; display: flex; overflow: hidden; position: relative; }
 .graph-area { flex: 1; }
 .loading-hint { display: flex; align-items: center; justify-content: center; height: 100%; color: #555; font-size: 14px; }
 </style>
diff --git a/editor/components/NodeEditor.vue b/editor/components/NodeEditor.vue
index 5f9ef24..5009bf2 100644
--- a/editor/components/NodeEditor.vue
+++ b/editor/components/NodeEditor.vue
@@ -54,49 +54,103 @@ function onBlur() {
 </script>
 
 <template>
-  <div class="node-editor" v-if="scene || jsonText">
-    <div class="editor-header">
-      <h3>{{ scene ? scene.id : '全局配置' }}<span v-if="!scene && store.aiChanges?.globalFields?.length" class="global-diff-tag" :title="store.aiChanges.globalFields.join(', ')">● 已修改 {{ store.aiChanges.globalFields.length }} 字段</span></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" @click="store.showAIPanel = true" title="AI 助手">🤖</button>
-        <button v-if="scene" class="icon-btn danger" @click="emit('deleteScene', scene.id)" title="删除场景">🗑</button>
-        <button v-if="scene" class="icon-btn" @click="emit('close')" title="关闭">✕</button>
+  <div class="node-editor">
+    <Transition name="slide-right">
+      <div v-if="!store.nodeEditorCollapsed" class="ne-expanded">
+        <div class="editor-header">
+          <h3>{{ scene ? scene.id : '全局配置' }}<span v-if="!scene && store.aiChanges?.globalFields?.length" class="global-diff-tag" :title="store.aiChanges.globalFields.join(', ')">● 已修改 {{ store.aiChanges.globalFields.length }} 字段</span></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" @click="store.showAIPanel = true" title="AI 助手">🤖</button>
+            <button class="icon-btn" @click="store.nodeEditorCollapsed = true" title="折叠">▶</button>
+            <button v-if="scene" class="icon-btn danger" @click="emit('deleteScene', scene.id)" title="删除场景">🗑</button>
+            <button v-if="scene" class="icon-btn" @click="emit('close')" title="关闭">✕</button>
+          </div>
+        </div>
+
+        <textarea
+          class="json-area"
+          :class="{ error: errorMsg }"
+          :value="jsonText"
+          @input="jsonText = ($event.target as HTMLTextAreaElement).value"
+          @blur="onBlur"
+          spellcheck="false"
+        ></textarea>
       </div>
+    </Transition>
+
+    <div v-if="store.nodeEditorCollapsed" class="ne-collapsed-bar" @click="store.nodeEditorCollapsed = false">
+      <span class="ne-bar-arrow">◀</span>
+      <span class="ne-bar-label">{{ scene?.id || '全局' }}</span>
     </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-if="Object.keys(store.gameData.scenes).length === 0">
-    <p>加载或新建场景后开始编辑</p>
   </div>
 </template>
 
 <style scoped>
 .node-editor {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+}
+
+.ne-expanded {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
   width: 340px;
-  height: 100%;
   background: #141428;
   border-left: 1px solid rgba(255,255,255,0.08);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  pointer-events: auto;
 }
 
-.empty-state {
+.ne-collapsed-bar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 36px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 0;
+  gap: 6px;
+  background: #161633;
+  border-left: 1px solid rgba(100,200,255,0.1);
+  cursor: pointer;
+  user-select: none;
+  pointer-events: auto;
+  transition: background 0.15s;
+}
+.ne-collapsed-bar:hover {
+  background: #1a1a3a;
+}
+
+.ne-bar-arrow {
+  font-size: 11px;
+  color: #555;
+  flex-shrink: 0;
+}
+.ne-collapsed-bar:hover .ne-bar-arrow {
+  color: #8cf;
+}
+
+.ne-bar-label {
+  writing-mode: vertical-rl;
+  font-size: 12px;
+  color: #8cf;
+  font-weight: 500;
+  letter-spacing: 2px;
+  flex: 1;
+  display: flex;
   align-items: center;
   justify-content: center;
-  color: #555;
-  font-size: 14px;
 }
 
 .editor-header {
@@ -180,4 +234,14 @@ function onBlur() {
   border-radius: 3px;
   cursor: default;
 }
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: max-width 0.25s ease, opacity 0.2s ease;
+}
+.slide-right-enter-from,
+.slide-right-leave-to {
+  max-width: 0;
+  opacity: 0;
+}
 </style>
diff --git a/editor/stores/editorStore.ts b/editor/stores/editorStore.ts
index 19331b6..c72f9c1 100644
--- a/editor/stores/editorStore.ts
+++ b/editor/stores/editorStore.ts
@@ -27,6 +27,7 @@ export const useEditorStore = defineStore('editor', () => {
   const deepseekKey = ref(localStorage.getItem('deepseek_key') || '')
   const showAIPanel = ref(true)
   const aiCollapsed = ref(true)
+  const nodeEditorCollapsed = ref(true)
   const aiSessionId = ref('')
   const aiChanges = ref<AIDiff | null>(null)
   const versions = ref<EditorVersion[]>([])
@@ -235,7 +236,7 @@ export const useEditorStore = defineStore('editor', () => {
 
   return {
     gameData, selectedNodeId, selectedScene, startSceneId, dirty, sourcePath,
-    deepseekKey, showAIPanel, aiSessionId, aiCollapsed, aiChanges, versions,
+    deepseekKey, showAIPanel, aiSessionId, aiCollapsed, nodeEditorCollapsed, aiChanges, versions,
     markDirty, loadJSON, exportJSON, addScene, deleteScene,
     updateScene, addChoice, updateChoice, deleteChoice, generateId,
     setSourcePath, setDeepseekKey, setAISessionId, clearAISession, autoSave, reloadFromDisk,