mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-10-28 05:20:43 +00:00
303 lines
11 KiB
Vue
303 lines
11 KiB
Vue
<template>
|
||
<Framework
|
||
:disabled-page-fragment="disabledPageFragment"
|
||
:page-bar-sort-options="pageBarSortOptions"
|
||
:page-filter-function="pageFilterFunction"
|
||
:hide-sidebar="hideSidebar"
|
||
:theme="theme"
|
||
>
|
||
<template #header>
|
||
<slot name="header"></slot>
|
||
</template>
|
||
|
||
<template #nav>
|
||
<slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
|
||
</template>
|
||
|
||
<template #content-before>
|
||
<slot name="content-before"></slot>
|
||
</template>
|
||
|
||
<template #src-code><slot name="src-code" :editorService="editorService"></slot></template>
|
||
|
||
<template #sidebar>
|
||
<slot name="sidebar" :editorService="editorService">
|
||
<Sidebar
|
||
:data="sidebar"
|
||
:layer-content-menu="layerContentMenu"
|
||
:custom-content-menu="customContentMenu"
|
||
:indent="treeIndent"
|
||
:next-level-indent-increment="treeNextLevelIndentIncrement"
|
||
:layer-node-is-expandable="layerNodeIsExpandable"
|
||
:can-drop-in="canDropIn"
|
||
:before-layer-node-dblclick="beforeLayerNodeDblclick"
|
||
@layer-node-dblclick="layerNodeDblclickHandler"
|
||
>
|
||
<template #layer-panel-header>
|
||
<slot name="layer-panel-header"></slot>
|
||
</template>
|
||
|
||
<template #layer-node-content="{ data }">
|
||
<slot name="layer-node-content" :data="data"></slot>
|
||
</template>
|
||
|
||
<template #layer-node-label="{ data }">
|
||
<slot name="layer-node-label" :data="data"></slot>
|
||
</template>
|
||
|
||
<template #layer-node-tool="{ data }">
|
||
<slot name="layer-node-tool" :data="data"></slot>
|
||
</template>
|
||
|
||
<template #component-list="{ componentGroupList }">
|
||
<slot name="component-list" :component-group-list="componentGroupList"></slot>
|
||
</template>
|
||
|
||
<template #component-list-panel-header>
|
||
<slot name="component-list-panel-header"></slot>
|
||
</template>
|
||
|
||
<template #component-list-item="{ component }">
|
||
<slot name="component-list-item" :component="component"></slot>
|
||
</template>
|
||
|
||
<template #code-block-panel-header>
|
||
<slot name="code-block-panel-header"></slot>
|
||
</template>
|
||
|
||
<template #code-block-panel-tool="{ id, data }">
|
||
<slot name="code-block-panel-tool" :id="id" :data="data"></slot>
|
||
</template>
|
||
|
||
<template #code-block-panel-search>
|
||
<slot name="code-block-panel-search"></slot>
|
||
</template>
|
||
|
||
<template #data-source-panel-tool="{ data }">
|
||
<slot name="data-source-panel-tool" :data="data"></slot>
|
||
</template>
|
||
|
||
<template #data-source-panel-search>
|
||
<slot name="data-source-panel-search"></slot>
|
||
</template>
|
||
</Sidebar>
|
||
</slot>
|
||
</template>
|
||
|
||
<template #workspace>
|
||
<slot name="workspace" :editorService="editorService">
|
||
<Workspace
|
||
:disabled-stage-overlay="disabledStageOverlay"
|
||
:stage-content-menu="stageContentMenu"
|
||
:custom-content-menu="customContentMenu"
|
||
>
|
||
<template #stage-top><slot name="stage-top"></slot></template>
|
||
<template #stage><slot name="stage"></slot></template>
|
||
<template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
|
||
</Workspace>
|
||
</slot>
|
||
</template>
|
||
|
||
<template #props-panel>
|
||
<slot name="props-panel">
|
||
<PropsPanel
|
||
:extend-state="extendFormState"
|
||
:disabled-show-src="disabledShowSrc"
|
||
@mounted="propsPanelMountedHandler"
|
||
@unmounted="propsPanelUnmountedHandler"
|
||
@form-error="propsPanelFormErrorHandler"
|
||
@submit-error="propsPanelSubmitErrorHandler"
|
||
>
|
||
<template #props-panel-header>
|
||
<slot name="props-panel-header"></slot>
|
||
</template>
|
||
</PropsPanel>
|
||
</slot>
|
||
</template>
|
||
|
||
<template #empty><slot name="empty" :editorService="editorService"></slot></template>
|
||
|
||
<template #content-after>
|
||
<slot name="content-after"></slot>
|
||
</template>
|
||
|
||
<template #footer>
|
||
<slot name="footer"></slot>
|
||
</template>
|
||
|
||
<template #page-bar><slot name="page-bar"></slot></template>
|
||
<template #page-bar-add-button><slot name="page-bar-add-button"></slot></template>
|
||
<template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
|
||
<template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
|
||
<template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
|
||
</Framework>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { EventEmitter } from 'events';
|
||
|
||
import { computed, provide, ref } from 'vue';
|
||
|
||
import type { MApp } from '@tmagic/core';
|
||
import { M_THEME_KEY } from '@tmagic/design';
|
||
|
||
import Framework from './layouts/Framework.vue';
|
||
import TMagicNavMenu from './layouts/NavMenu.vue';
|
||
import FormPanel from './layouts/props-panel/FormPanel.vue';
|
||
import PropsPanel from './layouts/props-panel/PropsPanel.vue';
|
||
import Sidebar from './layouts/sidebar/Sidebar.vue';
|
||
import Workspace from './layouts/workspace/Workspace.vue';
|
||
import codeBlockService from './services/codeBlock';
|
||
import componentListService from './services/componentList';
|
||
import dataSourceService from './services/dataSource';
|
||
import depService from './services/dep';
|
||
import editorService from './services/editor';
|
||
import eventsService from './services/events';
|
||
import historyService from './services/history';
|
||
import keybindingService from './services/keybinding';
|
||
import propsService from './services/props';
|
||
import stageOverlayService from './services/stageOverlay';
|
||
import storageService from './services/storage';
|
||
import uiService from './services/ui';
|
||
import keybindingConfig from './utils/keybinding-config';
|
||
import { defaultEditorProps, EditorProps, ENABLE_PROPS_FORM_VALIDATE } from './editorProps';
|
||
import { initServiceEvents, initServiceState } from './initService';
|
||
import type { TreeNodeData } from './type';
|
||
import type { EditorSlots, EventBus, Services, StageOptions } from './type';
|
||
|
||
defineSlots<EditorSlots>();
|
||
|
||
defineOptions({
|
||
name: 'MEditor',
|
||
});
|
||
|
||
const emit = defineEmits<{
|
||
'props-panel-mounted': [instance: InstanceType<typeof FormPanel>];
|
||
'props-panel-unmounted': [];
|
||
'update:modelValue': [value: MApp | null];
|
||
'props-form-error': [e: any];
|
||
'props-submit-error': [e: any];
|
||
'layer-node-dblclick': [event: MouseEvent, data: TreeNodeData];
|
||
}>();
|
||
|
||
const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);
|
||
|
||
const services: Services = {
|
||
componentListService,
|
||
eventsService,
|
||
historyService,
|
||
propsService,
|
||
editorService,
|
||
uiService,
|
||
storageService,
|
||
codeBlockService,
|
||
depService,
|
||
dataSourceService,
|
||
keybindingService,
|
||
stageOverlayService,
|
||
};
|
||
|
||
initServiceEvents(props, emit, services);
|
||
initServiceState(props, services);
|
||
keybindingService.register(keybindingConfig);
|
||
keybindingService.registerEl('global');
|
||
|
||
const stageOptions: StageOptions = {
|
||
runtimeUrl: props.runtimeUrl,
|
||
autoScrollIntoView: props.autoScrollIntoView,
|
||
render: props.render,
|
||
moveableOptions: props.moveableOptions,
|
||
canSelect: props.canSelect,
|
||
updateDragEl: props.updateDragEl,
|
||
isContainer: props.isContainer,
|
||
// sourceIds 为空表示从组件列表新增（尚无 id），否则是画布上拖动已有组件
|
||
canDropIn: props.canDropIn
|
||
? (sourceIds, targetId) =>
|
||
props.canDropIn!(sourceIds, targetId, sourceIds.length === 0 ? 'stage-add' : 'stage-drag')
|
||
: undefined,
|
||
containerHighlightClassName: props.containerHighlightClassName,
|
||
containerHighlightDuration: props.containerHighlightDuration,
|
||
containerHighlightType: props.containerHighlightType,
|
||
disabledDragStart: props.disabledDragStart,
|
||
renderType: props.renderType,
|
||
guidesOptions: props.guidesOptions,
|
||
disabledMultiSelect: props.disabledMultiSelect,
|
||
alwaysMultiSelect: props.alwaysMultiSelect,
|
||
disabledFlashTip: props.disabledFlashTip,
|
||
beforeDblclick: props.beforeDblclick,
|
||
};
|
||
|
||
stageOverlayService.set('stageOptions', stageOptions);
|
||
|
||
const propsPanelRef = ref<InstanceType<typeof FormPanel> | null>(null);
|
||
|
||
provide('services', services);
|
||
|
||
provide('codeOptions', props.codeOptions);
|
||
provide('stageOptions', stageOptions);
|
||
/** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
|
||
provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
|
||
/**
|
||
* 把顶层 `extendFormState` 提供给非 PropsPanel 链路上的组件使用（例如历史差异对话框 HistoryDiffDialog
|
||
* 内部的 CompareForm）。这样所有依赖业务上下文的表单 filterFunction 都能拿到一致的扩展状态，
|
||
* 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
|
||
*/
|
||
provide('extendFormState', props.extendFormState);
|
||
|
||
// 用 computed 包一层再 provide，否则传下去的是 provide 那一刻的值快照，
|
||
// props.isLargeStageContainer 后续变化不会同步到子孙（如 @tmagic/design/ColorPicker）。
|
||
// 子孙侧 `inject<ComputedRef<boolean>>('isLargeStageContainer', computed(() => false))`
|
||
// 用 `.value` 或模板自动解包读取即可拿到最新值。
|
||
provide(
|
||
'isLargeStageContainer',
|
||
computed(() => props.isLargeStageContainer),
|
||
);
|
||
/**
|
||
* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
|
||
* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
|
||
*/
|
||
provide('getPropsPanelFormState', () => propsPanelRef.value?.configForm?.formState);
|
||
|
||
/**
|
||
* 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
|
||
* 以 markRaw component 形式渲染，无法直接通过 props 透传）。业务方可借此在历史记录
|
||
* 面板内追加自定义模块的历史 tab。
|
||
*/
|
||
provide('historyListExtraTabs', props.historyListExtraTabs);
|
||
|
||
provide<EventBus>('eventBus', new EventEmitter());
|
||
|
||
/**
|
||
* 把当前主题以响应式 ref 形式 provide 给后代，供包含 `Teleport` 的组件
|
||
* （如 `TMagicPopover` / `FloatingBox` / `ContentMenu`）在传送目标上挂 `m-theme--<theme>`
|
||
* 类，让主题级 CSS 变量在 portal 节点上也能命中。详见 `@tmagic/design/theme.ts`。
|
||
*/
|
||
provide(
|
||
M_THEME_KEY,
|
||
computed(() => props.theme ?? ''),
|
||
);
|
||
|
||
const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
|
||
propsPanelRef.value = e;
|
||
emit('props-panel-mounted', e);
|
||
};
|
||
const propsPanelUnmountedHandler = () => {
|
||
propsPanelRef.value = null;
|
||
emit('props-panel-unmounted');
|
||
};
|
||
|
||
const propsPanelSubmitErrorHandler = (e: any) => {
|
||
emit('props-submit-error', e);
|
||
};
|
||
|
||
const propsPanelFormErrorHandler = (e: any) => {
|
||
emit('props-form-error', e);
|
||
};
|
||
|
||
const layerNodeDblclickHandler = (event: MouseEvent, data: TreeNodeData) => {
|
||
emit('layer-node-dblclick', event, data);
|
||
};
|
||
|
||
defineExpose(services);
|
||
</script>
|