web-map/src/pages/scene-editor.vue

<script setup lang="ts">
import type { RobotGroup } from '@api/robot';
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>();

const title = ref<string>('');
const groups = ref<RobotGroup[]>([]);
const map = ref<string>('');
onMounted(() => {
  getSceneById(props.id).then((res) => {
    title.value = res?.label ?? '';
    groups.value = res?.robotGroups ?? [];
    map.value = res?.map ?? '';
  });
});
watch(map, (v) => {
  editor.value?.load(v, !editable.value);
});

const container = shallowRef<HTMLDivElement>();
const editor = shallowRef<EditorService>();
provide(EDITOR_KEY, editor);
onMounted(() => {
  editor.value = new EditorService(container.value!);
});

const editable = ref<boolean>(false);
</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 type="primary">
            <i class="icon edit mr-2" />
            <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('机器人')">
            <RobotGroup v-if="editor" :editor="EDITOR_KEY" :editable="editable" />
          </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>