tianshu-engine/editor/components/NodeEditor.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { SceneNode, Choice } from '@engine/types'

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

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('')

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
  }
}, { immediate: true })

function saveVideo() {
  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,
  })
}
</script>

<template>
  <div class="node-editor" v-if="scene">
    <div class="editor-header">
      <h3>{{ scene.id }}</h3>
      <div class="header-actions">
        <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>
  </div>

  <div class="node-editor empty-state" v-else>
    <p>点击左侧画布中的节点来编辑</p>
  </div>
</template>

<style scoped>
.node-editor {
  width: 340px;
  height: 100%;
  background: #141428;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.empty-state {
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 14px;
}

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

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

.header-actions {
  display: flex;
  gap: 6px;
}

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

.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 {
  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;
  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-size: 12px;
  color: #777;
  white-space: nowrap;
  min-width: 80px;
}

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