chore: NodeEditor.vue update

This commit is contained in:
2026-06-14 21:16:33 +08:00
parent b45ad8bbc3
commit 94e0ea9c24

View File

@@ -18,19 +18,29 @@ const jsonText = ref('')
const errorMsg = ref('') const errorMsg = ref('')
const saved = ref(false) const saved = ref(false)
watch(() => props.scene, (s) => { watch(() => [props.scene, store.gameData] as const, () => {
if (!s) { jsonText.value = ''; errorMsg.value = ''; return }
jsonText.value = JSON.stringify(s, null, 2)
errorMsg.value = '' errorMsg.value = ''
saved.value = false saved.value = false
}, { immediate: true }) 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() { function onBlur() {
if (!props.scene) return
errorMsg.value = '' errorMsg.value = ''
try { try {
const parsed = JSON.parse(jsonText.value) const parsed = JSON.parse(jsonText.value)
if (props.scene) {
store.updateScene(props.scene.id, parsed) store.updateScene(props.scene.id, parsed)
} else {
const { scenes } = store.gameData
store.gameData = { ...parsed, scenes }
}
saved.value = true saved.value = true
setTimeout(() => { saved.value = false }, 2000) setTimeout(() => { saved.value = false }, 2000)
} catch (e: any) { } catch (e: any) {
@@ -40,14 +50,14 @@ function onBlur() {
</script> </script>
<template> <template>
<div class="node-editor" v-if="scene"> <div class="node-editor" v-if="scene || jsonText">
<div class="editor-header"> <div class="editor-header">
<h3>{{ scene.id }}</h3> <h3>{{ scene ? scene.id : '全局配置' }}</h3>
<div class="header-actions"> <div class="header-actions">
<span v-if="saved" class="saved-hint">已保存</span> <span v-if="saved" class="saved-hint">已保存</span>
<span v-if="errorMsg" class="error-hint">JSON 错误: {{ errorMsg }}</span> <span v-if="errorMsg" class="error-hint">JSON 错误: {{ errorMsg }}</span>
<button class="icon-btn danger" @click="emit('deleteScene', scene.id)" title="删除场景">🗑</button> <button v-if="scene" class="icon-btn danger" @click="emit('deleteScene', scene.id)" title="删除场景">删除场景</button>
<button class="icon-btn" @click="emit('close')" title="关闭"></button> <button v-if="scene" class="icon-btn" @click="emit('close')" title="关闭">关闭</button>
</div> </div>
</div> </div>
@@ -61,8 +71,8 @@ function onBlur() {
></textarea> ></textarea>
</div> </div>
<div class="node-editor empty-state" v-else> <div class="node-editor empty-state" v-else-if="Object.keys(store.gameData.scenes).length === 0">
<p>点击左侧画布中的节点来编辑</p> <p>加载或新建场景后开始编辑</p>
</div> </div>
</template> </template>