feat: collapsible AI panel with overlay layout

editor/App.vue

@@ -143,9 +143,10 @@ onMounted(() => restoreOrLoad())
         @delete-scene="delNode"
         @close="store.selectedNodeId = null"
       />
-      <AIPanel v-if="store.showAIPanel" />
     </div>
 
+    <AIPanel v-if="store.showAIPanel" />
+
     <input ref="fileInputRef" type="file" accept=".json" style="display:none" @change="onFileSelected" />
   </div>
 </template>
@@ -158,7 +159,7 @@ html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a16; c
 </style>
 
 <style scoped>
-.editor-layout { width: 100%; height: 100%; display: flex; flex-direction: column; }
+.editor-layout { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
 .toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #111122; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
 .toolbar-title { font-size: 15px; font-weight: 600; color: #ddd; letter-spacing: 1px; margin-right: 16px; }
 .toolbar-actions { display: flex; gap: 8px; }

editor/components/AIPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, nextTick, onMounted } from 'vue'
+import { ref, computed, nextTick, onMounted } from 'vue'
 import { useEditorStore } from '../stores/editorStore'
 import { sendAIRequest } from '../composables/useAI'
 
@@ -12,6 +12,13 @@ const chatRef = ref<HTMLDivElement | null>(null)
 
 const mode = ref<'json' | 'code'>('json')
 
+const lastMsg = computed(() => {
+  const m = messages.value[messages.value.length - 1]
+  if (!m) return ''
+  const text = m.role === 'user' ? m.content : m.content.substring(0, 60)
+  return text.length > 60 ? text + '...' : text
+})
+
 function toggleMode() {
   mode.value = mode.value === 'json' ? 'code' : 'json'
 }
@@ -81,96 +88,142 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="ai-panel">
-    <div class="ai-header">
-      <span class="ai-title">AI 助手</span>
-      <div class="ai-header-actions">
-        <button class="ai-mode-btn" @click="toggleMode" :title="mode === 'json' ? '切换到代码模式' : '切换到 JSON 模式'">
-          {{ mode === 'json' ? '📋 JSON' : '💻 代码' }}
-        </button>
-        <button class="ai-new-btn" @click="newSession" title="新建对话">+</button>
-        <button class="ai-close-btn" @click="store.showAIPanel = false">✕</button>
-      </div>
-    </div>
+  <div class="ai-panel" v-if="store.showAIPanel">
+    <Transition name="slide-up">
+      <div v-if="!store.aiCollapsed" class="ai-expanded">
+        <div class="ai-exp-header">
+          <span class="ai-exp-title">AI 助手</span>
+          <div class="ai-exp-actions">
+            <button class="ai-mode-btn" @click="toggleMode" :title="mode === 'json' ? '切换到代码模式' : '切换到 JSON 模式'">
+              {{ mode === 'json' ? '📋 JSON' : '💻 代码' }}
+            </button>
+            <button class="ai-new-btn" @click="newSession" title="新建对话">+</button>
+            <button v-if="store.aiChanges" class="ai-clear-btn" @click="store.clearAIMarkers()">清除高亮</button>
+            <select v-if="store.versions.length > 0" class="ai-version-select" @change="store.restoreVersion(($event.target as HTMLSelectElement).selectedIndex)">
+              <option disabled selected>版本</option>
+              <option v-for="v in store.versions" :key="v.timestamp">
+                {{ new Date(v.timestamp).toLocaleString('zh-CN') }} {{ v.label }}
+              </option>
+            </select>
+            <button class="ai-collapse-btn" @click="store.aiCollapsed = true">▼ 折叠</button>
+          </div>
+        </div>
 
-    <div v-if="store.versions.length > 0 || store.aiChanges" class="ai-toolbar">
-      <select v-if="store.versions.length > 0" class="ai-version-select" @change="store.restoreVersion(($event.target as HTMLSelectElement).selectedIndex)">
-        <option disabled selected>历史版本</option>
-        <option v-for="v in store.versions" :key="v.timestamp">
-          {{ new Date(v.timestamp).toLocaleString('zh-CN') }} {{ v.label }}
-        </option>
-      </select>
-      <button v-if="store.aiChanges" class="ai-clear-btn" @click="store.clearAIMarkers()">清除高亮</button>
-    </div>
+        <div class="ai-chat" ref="chatRef">
+          <div v-if="!store.deepseekKey" class="ai-key-setup">
+            <span class="key-label">DeepSeek API Key</span>
+            <input
+              class="key-input"
+              type="password"
+              placeholder="sk-..."
+              :value="store.deepseekKey"
+              @input="store.setDeepseekKey(($event.target as HTMLInputElement).value)"
+            />
+            <div class="key-hint">Key 保存在浏览器本地，不会上传到编辑器服务器</div>
+          </div>
+          <div v-if="messages.length === 0 && store.deepseekKey" class="ai-empty">
+            输入你的需求，AI 将根据引擎规范修改配置
+          </div>
+          <div v-for="(m, i) in messages" :key="i" class="ai-msg" :class="m.role">
+            <span class="ai-role">{{ m.role === 'user' ? '👤' : '🤖' }}</span>
+            <span class="ai-content">{{ m.content }}</span>
+          </div>
+          <div v-if="loading" class="ai-msg assistant">
+            <span class="ai-role">🤖</span>
+            <span class="ai-content loading-dots">正在生成<span class="dots">...</span></span>
+          </div>
+          <div v-if="errorMsg" class="ai-error">{{ errorMsg }}</div>
+        </div>
 
-    <div class="ai-chat" ref="chatRef">
-      <div v-if="!store.deepseekKey" class="ai-key-setup">
-        <span class="key-label">DeepSeek API Key</span>
-        <input
-          class="key-input"
-          type="password"
-          placeholder="sk-..."
-          :value="store.deepseekKey"
-          @input="store.setDeepseekKey(($event.target as HTMLInputElement).value)"
-        />
-        <div class="key-hint">Key 保存在浏览器本地，不会上传到编辑器服务器</div>
+        <div class="ai-input-area">
+          <input
+            v-model="inputText"
+            class="ai-input"
+            placeholder="输入你的需求..."
+            :disabled="loading"
+            @keydown="onKeydown"
+          />
+          <button class="ai-send-btn" @click="send" :disabled="loading">发送</button>
+        </div>
       </div>
-      <div v-if="messages.length === 0 && store.deepseekKey" class="ai-empty">
-        输入你的需求，AI 将根据引擎规范修改配置
-      </div>
-      <div v-for="(m, i) in messages" :key="i" class="ai-msg" :class="m.role">
-        <span class="ai-role">{{ m.role === 'user' ? '👤' : '🤖' }}</span>
-        <span class="ai-content">{{ m.content }}</span>
-      </div>
-      <div v-if="loading" class="ai-msg assistant">
-        <span class="ai-role">🤖</span>
-        <span class="ai-content loading-dots">正在生成<span class="dots">...</span></span>
-      </div>
-      <div v-if="errorMsg" class="ai-error">{{ errorMsg }}</div>
-    </div>
+    </Transition>
 
-    <div class="ai-input-area">
-      <input
-        v-model="inputText"
-        class="ai-input"
-        placeholder="输入你的需求..."
-        :disabled="loading"
-        @keydown="onKeydown"
-      />
-      <button class="ai-send-btn" @click="send" :disabled="loading">发送</button>
+    <div class="ai-collapsed-bar" @click="store.aiCollapsed = false">
+      <span class="ai-bar-icon">🤖</span>
+      <span class="ai-bar-title">AI 助手</span>
+      <span class="ai-bar-divider">·</span>
+      <span class="ai-bar-msg">{{ messages.length > 0 ? lastMsg : '点击开始对话' }}</span>
+      <span class="ai-bar-arrow">▲</span>
     </div>
   </div>
 </template>
 
 <style scoped>
 .ai-panel {
-  width: 340px;
-  height: 100%;
-  background: #141428;
-  border-left: 1px solid rgba(255,255,255,0.08);
-  display: flex;
-  flex-direction: column;
+  flex-shrink: 0;
+  position: relative;
 }
 
-.ai-header {
+.ai-collapsed-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 16px;
+  background: #161633;
+  border-top: 1px solid rgba(100,200,255,0.1);
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  color: #999;
+  transition: background 0.15s;
+}
+.ai-collapsed-bar:hover {
+  background: #1a1a3a;
+  color: #bbb;
+}
+
+.ai-bar-icon { font-size: 13px; }
+.ai-bar-title { font-weight: 500; color: #8cf; }
+.ai-bar-divider { color: rgba(255,255,255,0.15); }
+.ai-bar-msg { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777; }
+.ai-bar-arrow { color: #555; font-size: 10px; }
+.ai-collapsed-bar:hover .ai-bar-arrow { color: #8cf; }
+
+.ai-expanded {
+  position: absolute;
+  bottom: 32px;
+  left: 0;
+  right: 0;
+  max-height: 40vh;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  background: rgba(20, 20, 44, 0.98);
+  border-top: 1px solid rgba(255,255,255,0.1);
+  box-shadow: 0 -6px 24px rgba(0,0,0,0.5);
+  z-index: 100;
+}
+
+.ai-exp-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 16px;
+  padding: 8px 16px;
   border-bottom: 1px solid rgba(255,255,255,0.06);
   flex-shrink: 0;
 }
 
-.ai-title {
-  font-size: 15px;
+.ai-exp-title {
+  font-size: 14px;
   font-weight: 500;
   color: #ddd;
 }
 
-.ai-header-actions {
+.ai-exp-actions {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
 }
 
 .ai-mode-btn {
@@ -184,7 +237,7 @@ onMounted(() => {
 }
 .ai-mode-btn:hover { background: rgba(100,200,255,0.15); }
 
-.ai-new-btn, .ai-close-btn {
+.ai-new-btn {
   background: none;
   border: 1px solid rgba(255,255,255,0.1);
   color: #888;
@@ -194,22 +247,57 @@ onMounted(() => {
   cursor: pointer;
   font-size: 13px;
 }
-.ai-new-btn:hover, .ai-close-btn:hover { color: #ddd; border-color: rgba(255,255,255,0.2); }
+.ai-new-btn:hover { color: #ddd; border-color: rgba(255,255,255,0.2); }
+
+.ai-clear-btn {
+  padding: 3px 8px;
+  font-size: 11px;
+  color: #ccc;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 3px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ai-clear-btn:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
+
+.ai-version-select {
+  padding: 3px 6px;
+  font-size: 11px;
+  max-width: 90px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 3px;
+  color: #ccc;
+  outline: none;
+}
+
+.ai-collapse-btn {
+  padding: 3px 8px;
+  font-size: 11px;
+  color: #888;
+  background: none;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.ai-collapse-btn:hover { color: #ddd; }
 
 .ai-chat {
   flex: 1;
   overflow-y: auto;
-  padding: 12px 14px;
+  padding: 10px 16px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
+  min-height: 80px;
 }
 
 .ai-empty {
   color: #555;
-  font-size: 13px;
+  font-size: 12px;
   text-align: center;
-  margin-top: 60px;
+  margin-top: 30px;
 }
 
 .ai-msg {
@@ -253,14 +341,14 @@ onMounted(() => {
 .ai-input-area {
   display: flex;
   gap: 6px;
-  padding: 10px 14px;
+  padding: 8px 14px 10px;
   border-top: 1px solid rgba(255,255,255,0.06);
   flex-shrink: 0;
 }
 
 .ai-input {
   flex: 1;
-  padding: 8px 12px;
+  padding: 7px 12px;
   font-size: 12px;
   background: rgba(255,255,255,0.05);
   border: 1px solid rgba(255,255,255,0.1);
@@ -271,7 +359,7 @@ onMounted(() => {
 .ai-input:focus { border-color: rgba(255,255,255,0.2); }
 
 .ai-send-btn {
-  padding: 8px 14px;
+  padding: 7px 14px;
   font-size: 12px;
   color: #fff;
   background: rgba(100,200,255,0.15);
@@ -286,16 +374,16 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 20px 0;
+  padding: 16px 0;
 }
 
 .key-label {
-  font-size: 14px;
+  font-size: 13px;
   color: #ccc;
 }
 
 .key-input {
-  padding: 8px 12px;
+  padding: 6px 10px;
   font-size: 12px;
   background: rgba(255,255,255,0.05);
   border: 1px solid rgba(255,255,255,0.1);
@@ -310,35 +398,13 @@ onMounted(() => {
   color: #666;
 }
 
-.ai-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 16px;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-  flex-shrink: 0;
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: max-height 0.25s ease, opacity 0.2s ease;
 }
-
-.ai-version-select {
-  flex: 1;
-  padding: 4px 8px;
-  font-size: 11px;
-  background: rgba(255,255,255,0.05);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 3px;
-  color: #ccc;
-  outline: none;
+.slide-up-enter-from,
+.slide-up-leave-to {
+  max-height: 0;
+  opacity: 0;
 }
-
-.ai-clear-btn {
-  padding: 4px 10px;
-  font-size: 11px;
-  color: #ccc;
-  background: rgba(255,255,255,0.05);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 3px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.ai-clear-btn:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
 </style>

editor/stores/editorStore.ts

@@ -26,6 +26,7 @@ export const useEditorStore = defineStore('editor', () => {
   const sourcePath = ref('/scenes/demo.json')
   const deepseekKey = ref(localStorage.getItem('deepseek_key') || '')
   const showAIPanel = ref(false)
+  const aiCollapsed = ref(true)
   const aiSessionId = ref('')
   const aiChanges = ref<AIDiff | null>(null)
   const versions = ref<EditorVersion[]>([])
@@ -234,7 +235,7 @@ export const useEditorStore = defineStore('editor', () => {
 
   return {
     gameData, selectedNodeId, selectedScene, startSceneId, dirty, sourcePath,
-    deepseekKey, showAIPanel, aiSessionId, aiChanges, versions,
+    deepseekKey, showAIPanel, aiSessionId, aiCollapsed, aiChanges, versions,
     markDirty, loadJSON, exportJSON, addScene, deleteScene,
     updateScene, addChoice, updateChoice, deleteChoice, generateId,
     setSourcePath, setDeepseekKey, setAISessionId, clearAISession, autoSave, reloadFromDisk,