87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<template>
|
|
<m-editor
|
|
:menu="menu"
|
|
:runtime-url="runtimeUrl"
|
|
:component-group-list="componentList"
|
|
:modelValue="uiConfigs"
|
|
:props-values="magicPresetValues"
|
|
:props-configs="magicPresetConfigs"
|
|
:event-method-list="magicPresetEvents"
|
|
:default-selected="editorDefaultSelected"
|
|
></m-editor>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, reactive, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { ComponentGroup } from '@tmagic/editor';
|
|
import { asyncLoadJs } from '@tmagic/utils';
|
|
|
|
import editorApi from '@src/api/editor';
|
|
import magicStore from '@src/store/index';
|
|
import { topMenu } from '@src/use/use-menu';
|
|
import { initConfigByActId } from '@src/use/use-publish';
|
|
|
|
export default defineComponent({
|
|
name: 'App',
|
|
|
|
setup() {
|
|
const route = useRoute();
|
|
|
|
const uiConfigs = computed(() => magicStore.get('uiConfigs'));
|
|
const editorDefaultSelected = computed(() => magicStore.get('editorDefaultSelected'));
|
|
const componentList = reactive<ComponentGroup[]>([]);
|
|
|
|
const magicPresetValues = ref<Record<string, any>>({});
|
|
const magicPresetConfigs = ref<Record<string, any>>({});
|
|
const magicPresetEvents = ref<Record<string, any>>({});
|
|
// 获取编辑器左侧组件树
|
|
const getComponentList = async () => {
|
|
const { data: list } = await editorApi.getComponentList();
|
|
componentList.push(...list);
|
|
};
|
|
// 根据活动id获取活动配置
|
|
const getActById = async () => {
|
|
await initConfigByActId({ actId: Number(route.params.actId) });
|
|
};
|
|
|
|
asyncLoadJs('/runtime/vue3/assets/config.js').then(() => {
|
|
magicPresetConfigs.value = (window as any).magicPresetConfigs;
|
|
});
|
|
asyncLoadJs('/runtime/vue3/assets/value.js').then(() => {
|
|
magicPresetValues.value = (window as any).magicPresetValues;
|
|
});
|
|
asyncLoadJs('/runtime/vue3/assets/event.js').then(() => {
|
|
magicPresetEvents.value = (window as any).magicPresetEvents;
|
|
});
|
|
|
|
getComponentList();
|
|
getActById();
|
|
|
|
return {
|
|
componentList,
|
|
menu: topMenu(),
|
|
uiConfigs,
|
|
runtimeUrl: '/runtime/vue3/playground.html',
|
|
magicPresetValues,
|
|
magicPresetConfigs,
|
|
magicPresetEvents,
|
|
editorDefaultSelected,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.m-editor {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
</style>
|