chore: NodeEditor.vue update
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user