tianshu-engine/editor/components/NodeEditor.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { SceneNode } from '@engine/types'
import { useEditorStore } from '../stores/editorStore'

const props = defineProps<{
  scene: SceneNode | null
  sceneList: { id: string; label: string }[]
}>()

const emit = defineEmits<{
  deleteScene: [id: string]
  close: []
}>()

const store = useEditorStore()
const jsonText = ref('')
const errorMsg = ref('')
const saved = ref(false)
const globalTooltip = ref('')

watch(() => [props.scene, store.gameData] as const, () => {
  errorMsg.value = ''
  saved.value = false
  if (props.scene) {
    jsonText.value = JSON.stringify(props.scene, null, 2)
  } else if (Object.keys(store.gameData.scenes).length > 0) {
    const { scenes, ...rest } = store.gameData
    jsonText.value = JSON.stringify(rest, null, 2)
  } else {
    jsonText.value = ''
  }
}, { immediate: true, deep: true })

function onBlur() {
  store.clearAIMarkers()
  errorMsg.value = ''
  try {
    const parsed = JSON.parse(jsonText.value)
    if (props.scene) {
      store.updateScene(props.scene.id, parsed)
    } else {
      const { scenes } = store.gameData
      store.gameData = { ...parsed, scenes }
      store.startSceneId = parsed.startScene || store.startSceneId
      store.autoSave()
    }
    saved.value = true
    setTimeout(() => { saved.value = false }, 2000)
  } catch (e: any) {
    errorMsg.value = e.message
  }
}
</script>

<template>
  <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>
  </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;
  background: #141428;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.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;
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.editor-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #ddd;
}

.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 {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: #888;
  width: 28px;
  height: 28px;
  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; }

.json-area {
  flex: 1;
  padding: 14px 16px;
  background: #0a0a1a;
  color: #ccc;
  border: none;
  outline: none;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: none;
  tab-size: 2;
}

.json-area.error {
  border-left: 3px solid #e74c3c;
}

.global-diff-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 400;
  color: #ffe0b2;
  background: rgba(230, 81, 0, 0.15);
  border: 1px solid rgba(230, 81, 0, 0.3);
  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>