92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { getSceneById } from '@api/scene';
|
|
import { EditorService } from '@core/editor.service';
|
|
import { watch } from 'vue';
|
|
import { ref } from 'vue';
|
|
import { onMounted, provide, shallowRef } from 'vue';
|
|
|
|
const EDITOR_KEY = Symbol('editor-key');
|
|
|
|
type Props = {
|
|
id: string;
|
|
};
|
|
const props = defineProps<Props>();
|
|
|
|
//#region 接口
|
|
const readScene = async () => {
|
|
const res = await getSceneById(props.id);
|
|
title.value = res?.label ?? '';
|
|
editor.value?.load(res?.json, !editable.value);
|
|
};
|
|
//#endregion
|
|
|
|
const title = ref<string>('');
|
|
watch(
|
|
() => props.id,
|
|
() => readScene(),
|
|
{ immediate: true, flush: 'post' },
|
|
);
|
|
|
|
const container = shallowRef<HTMLDivElement>();
|
|
const editor = shallowRef<EditorService>();
|
|
provide(EDITOR_KEY, editor);
|
|
onMounted(() => {
|
|
editor.value = new EditorService(container.value!);
|
|
});
|
|
|
|
const editable = ref<boolean>(false);
|
|
watch(editable, (v) => editor.value?.setState(v));
|
|
|
|
const current = ref<string>();
|
|
</script>
|
|
|
|
<template>
|
|
<a-layout class="full">
|
|
<a-layout-header class="p-16" style="height: 64px">
|
|
<a-flex justify="space-between" align="center">
|
|
<a-typography-text strong>{{ title }}</a-typography-text>
|
|
<a-space align="center">
|
|
<a-button v-if="editable" class="warning" @click="editable = false">
|
|
<i class="icon exit size-18 mr-8" />
|
|
<span>{{ $t('退出编辑器') }}</span>
|
|
</a-button>
|
|
<a-button v-else type="primary" @click="editable = true">
|
|
<i class="icon edit size-18 mr-8" />
|
|
<span>{{ $t('启用编辑器') }}</span>
|
|
</a-button>
|
|
<a-button>{{ $t('推送') }}</a-button>
|
|
<a-button>{{ $t('导入') }}</a-button>
|
|
<a-button>{{ $t('导出') }}</a-button>
|
|
</a-space>
|
|
</a-flex>
|
|
</a-layout-header>
|
|
|
|
<a-layout class="p-16">
|
|
<a-layout-sider :width="320">
|
|
<a-tabs class="full" type="card">
|
|
<a-tab-pane key="1" :tab="$t('机器人')">
|
|
<RobotGroups
|
|
v-if="editor"
|
|
:token="EDITOR_KEY"
|
|
:editable="editable"
|
|
:current="current"
|
|
@change="current = $event"
|
|
/>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" :tab="$t('库区')">Content of Tab Pane 2</a-tab-pane>
|
|
<a-tab-pane key="3" :tab="$t('高级组')">Content of Tab Pane 3</a-tab-pane>
|
|
</a-tabs>
|
|
</a-layout-sider>
|
|
<a-layout-content>
|
|
<div ref="container" class="editor-container full"></div>
|
|
</a-layout-content>
|
|
</a-layout>
|
|
</a-layout>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.editor-container {
|
|
background-color: transparent !important;
|
|
}
|
|
</style>
|