JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

feat(core,editor,ui): 新增页面片

Browse Source
This commit is contained in:
roymondchen 2023-12-18 19:51:41 +08:00
parent 698c3451ff
commit 7b6dcedfad
58 changed files with 1415 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/src/Node.ts
View File

@ -20,7 +20,8 @@ import { EventEmitter } from 'events';
import { isEmpty } from 'lodash-es';
import { DeprecatedEventConfig, EventConfig, HookType, MComponent, MContainer, MPage } from '@tmagic/schema';
import type { DeprecatedEventConfig, EventConfig, MComponent, MContainer, MPage, MPageFragment } from '@tmagic/schema';
import { HookType } from '@tmagic/schema';
import type App from './App';
import type Page from './Page';
@ -33,7 +34,7 @@ interface NodeOptions {
app: App;
}
class Node extends EventEmitter {
public data: MComponent | MContainer | MPage;
public data: MComponent | MContainer | MPage | MPageFragment;
public style?: {
[key: string]: any;
};
@ -56,9 +57,9 @@ class Node extends EventEmitter {
this.listenLifeSafe();
}
public setData(data: MComponent | MContainer | MPage) {
public setData(data: MComponent | MContainer | MPage | MPageFragment) {
this.data = data;
this.emit('updata-data');
this.emit('update-data');
}
public destroy() {

11
packages/core/src/Page.ts
View File

@ -16,12 +16,12 @@
* limitations under the License.
*/
import type { Id, MComponent, MContainer, MPage } from '@tmagic/schema';
import type { Id, MComponent, MContainer, MPage, MPageFragment } from '@tmagic/schema';
import type App from './App';
import Node from './Node';
interface ConfigOptions {
config: MPage;
config: MPage | MPageFragment;
app: App;
}
@ -45,6 +45,13 @@ class Page extends Node {
this.setNode(config.id, node);
if (config.type === 'page-fragment-container' && config.pageFragmentId) {
const pageFragment = this.app.dsl?.items?.find((page) => page.id === config.pageFragmentId);
if (pageFragment) {
config.items = [pageFragment];
}
}
config.items?.forEach((element: MComponent | MContainer) => {
this.initNode(element, node);
});

7
packages/editor/src/Editor.vue
View File

@ -1,5 +1,5 @@
<template>
<Framework>
<Framework :disabled-page-fragment="disabledPageFragment">
<template #header>
<slot name="header"></slot>
</template>
@ -61,8 +61,6 @@
<Workspace :stage-content-menu="stageContentMenu" :custom-content-menu="customContentMenu">
<template #stage><slot name="stage"></slot></template>
<template #workspace-content><slot name="workspace-content" :editorService="editorService"></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>
</Workspace>
</slot>
</template>
@ -89,6 +87,9 @@
<template #footer>
<slot name="footer"></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>
</Framework>
</template>

5
packages/editor/src/editorProps.ts
View File

@ -72,8 +72,12 @@ export interface EditorProps {
extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
/** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
collectorOptions?: CustomTargetOptions;
/** 标尺配置 */
guidesOptions?: Partial<GuidesOptions>;
/** 禁止多选 */
disabledMultiSelect?: boolean;
/** 禁用页面片 */
disabledPageFragment?: boolean;
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
}
@ -96,4 +100,5 @@ export const defaultEditorProps = {
codeOptions: () => ({}),
renderType: RenderType.IFRAME,
disabledMultiSelect: false,
disabledPageFragment: false,
};

55
packages/editor/src/fields/PageFragmentSelect.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="m-fields-page-fragment-select">
<div class="page-fragment-select-container">
<!-- 页面片下拉框 -->
<m-form-container
class="select"
:config="selectConfig"
:model="model"
:size="size"
@change="changeHandler"
></m-form-container>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, inject } from 'vue';
import { FieldProps } from '@tmagic/form';
import { NodeType } from '@tmagic/schema';
import type { PageFragmentSelectConfig, Services } from '@editor/type';
defineOptions({
name: 'MEditorPageFragmentSelect',
});
const services = inject<Services>('services');
const emit = defineEmits(['change']);
const props = withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
disabled: false,
});
const pageList = computed(() =>
services?.editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
);
const selectConfig = {
type: 'select',
name: props.name,
options: () => {
if (pageList.value) {
return pageList.value.map((item) => ({
text: `${item.name}（${item.id}）`,
label: `${item.name}（${item.id}）`,
value: item.id,
}));
}
return [];
},
};
const changeHandler = async () => {
emit('change', props.model[props.name]);
};
</script>

3
packages/editor/src/index.ts
View File

@ -30,6 +30,7 @@ import DataSourceMocks from './fields/DataSourceMocks.vue';
import DataSourceSelect from './fields/DataSourceSelect.vue';
import EventSelect from './fields/EventSelect.vue';
import KeyValue from './fields/KeyValue.vue';
import PageFragmentSelect from './fields/PageFragmentSelect.vue';
import uiSelect from './fields/UISelect.vue';
import CodeEditor from './layouts/CodeEditor.vue';
import { setConfig } from './utils/config';
@ -79,6 +80,7 @@ export { default as LayoutContainer } from './components/SplitView.vue';
export { default as SplitView } from './components/SplitView.vue';
export { default as Resizer } from './components/Resizer.vue';
export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
const defaultInstallOpt: InstallOptions = {
// eslint-disable-next-line no-eval
@ -108,5 +110,6 @@ export default {
app.component('m-fields-data-source-methods', DataSourceMethods);
app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
app.component('m-fields-page-fragment-select', PageFragmentSelect);
},
};

4
packages/editor/src/initService.ts
View File

@ -11,7 +11,7 @@ import {
DepTargetType,
Target,
} from '@tmagic/dep';
import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
import { getNodes } from '@tmagic/utils';
import PropsPanel from './layouts/PropsPanel.vue';
@ -350,7 +350,7 @@ export const initServiceEvents = (
};
// 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
const historyChangeHandler = (page: MPage) => {
const historyChangeHandler = (page: MPage | MPageFragment) => {
depService.collect([page], true);
};

20
packages/editor/src/layouts/AddPageBox.vue
View File

@ -1,12 +1,19 @@
<template>
<div class="m-editor-empty-panel">
<div class="m-editor-empty-content">
<div class="m-editor-empty-button" @click="clickHandler">
<div class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE)">
<div>
<MIcon :icon="Plus"></MIcon>
</div>
<p>新增页面</p>
</div>
<div v-if="!disabledPageFragment" class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE_FRAGMENT)">
<div>
<MIcon :icon="Plus"></MIcon>
</div>
<p>新增页面片</p>
</div>
</div>
</div>
</template>
@ -25,9 +32,13 @@ defineOptions({
name: 'MEditorAddPageBox',
});
defineProps<{
disabledPageFragment: boolean;
}>();
const services = inject<Services>('services');
const clickHandler = () => {
const clickHandler = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
const { editorService } = services || {};
if (!editorService) return;
@ -36,8 +47,9 @@ const clickHandler = () => {
if (!root) throw new Error('root 不能为空');
editorService.add({
type: NodeType.PAGE,
name: generatePageNameByApp(root),
type,
name: generatePageNameByApp(root, type),
items: [],
});
};
</script>

17
packages/editor/src/layouts/Framework.vue
View File

@ -31,13 +31,18 @@
</template>
<template #center>
<slot v-if="pageLength > 0" name="workspace"></slot>
<slot v-if="page" name="workspace"></slot>
<slot v-else name="empty">
<AddPageBox></AddPageBox>
<AddPageBox :disabled-page-fragment="disabledPageFragment"></AddPageBox>
</slot>
<PageBar :disabled-page-fragment="disabledPageFragment">
<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>
</PageBar>
</template>
<template v-if="pageLength > 0" #right>
<template v-if="page" #right>
<TMagicScrollbar>
<slot name="props-panel"></slot>
</TMagicScrollbar>
@ -58,6 +63,7 @@ import SplitView from '@editor/components/SplitView.vue';
import type { FrameworkSlots, GetColumnWidth, Services } from '@editor/type';
import { getConfig } from '@editor/utils/config';
import PageBar from './page-bar/PageBar.vue';
import AddPageBox from './AddPageBox.vue';
import CodeEditor from './CodeEditor.vue';
@ -67,6 +73,10 @@ defineOptions({
name: 'MEditorFramework',
});
defineProps<{
disabledPageFragment: boolean;
}>();
const DEFAULT_LEFT_COLUMN_WIDTH = 310;
const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
@ -77,6 +87,7 @@ const content = ref<HTMLDivElement>();
const splitView = ref<InstanceType<typeof SplitView>>();
const root = computed(() => editorService?.get('root'));
const page = computed(() => editorService?.get('page'));
const pageLength = computed(() => editorService?.get('pageLength') || 0);
const stageLoading = computed(() => editorService?.get('stageLoading') || false);

48
packages/editor/src/layouts/page-bar/AddButton.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div
v-if="showAddPageButton"
id="m-editor-page-bar-add-icon"
class="m-editor-page-bar-item m-editor-page-bar-item-icon"
@click="addPage"
>
<Icon :icon="Plus"></Icon>
</div>
<div v-else style="width: 21px"></div>
</template>
<script setup lang="ts">
import { computed, inject, toRaw } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/schema';
import Icon from '@editor/components/Icon.vue';
import type { Services } from '@editor/type';
import { generatePageNameByApp } from '@editor/utils/editor';
defineOptions({
name: 'MEditorPageBarAddButton',
});
const props = defineProps<{
type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
}>();
const services = inject<Services>('services');
const uiService = services?.uiService;
const editorService = services?.editorService;
const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
const addPage = () => {
if (!editorService) return;
const root = toRaw(editorService.get('root'));
if (!root) throw new Error('root 不能为空');
const pageConfig = {
type: props.type,
name: generatePageNameByApp(root, props.type),
items: [],
};
editorService.add(pageConfig);
};
</script>

158
packages/editor/src/layouts/page-bar/PageBar.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<div class="m-editor-page-bar-tabs">
<SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
<PageBarScrollContainer :type="active">
<template #prepend>
<AddButton :type="active"></AddButton>
</template>
<div
v-for="item in list"
class="m-editor-page-bar-item"
:key="item.id"
:class="{ active: page?.id === item.id }"
@click="switchPage(item.id)"
>
<div class="m-editor-page-bar-title">
<slot name="page-bar-title" :page="item">
<span :title="item.name">{{ item.name || item.id }}</span>
</slot>
</div>
<TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
<div>
<slot name="page-bar-popover" :page="item">
<ToolButton
:data="{
type: 'button',
text: '复制',
icon: DocumentCopy,
handler: () => copy(item),
}"
></ToolButton>
<ToolButton
:data="{
type: 'button',
text: '删除',
icon: Delete,
handler: () => remove(item),
}"
></ToolButton>
</slot>
</div>
<template #reference>
<TMagicIcon class="m-editor-page-bar-menu-icon">
<CaretBottom></CaretBottom>
</TMagicIcon>
</template>
</TMagicPopover>
</div>
</PageBarScrollContainer>
</div>
</template>
<script lang="ts" setup>
import { computed, inject, ref, watch } from 'vue';
import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
import { TMagicIcon, TMagicPopover } from '@tmagic/design';
import { Id, type MPage, type MPageFragment, NodeType } from '@tmagic/schema';
import { isPage, isPageFragment } from '@tmagic/utils';
import ToolButton from '@editor/components/ToolButton.vue';
import type { Services } from '@editor/type';
import { getPageFragmentList, getPageList } from '@editor/utils';
import AddButton from './AddButton.vue';
import PageBarScrollContainer from './PageBarScrollContainer.vue';
import SwitchTypeButton from './SwitchTypeButton.vue';
defineOptions({
name: 'MEditorPageBar',
});
defineProps<{
disabledPageFragment: boolean;
}>();
const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
const services = inject<Services>('services');
const editorService = services?.editorService;
const root = computed(() => editorService?.get('root'));
const page = computed(() => editorService?.get('page'));
const pageList = computed(() => getPageList(root.value));
const pageFragmentList = computed(() => getPageFragmentList(root.value));
const list = computed(() => (active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value));
const activePage = ref<Id>('');
const activePageFragment = ref<Id>('');
watch(
page,
(page) => {
if (!page) {
if (active.value === NodeType.PAGE) {
activePage.value = '';
}
if (active.value === NodeType.PAGE_FRAGMENT) {
activePageFragment.value = '';
}
return;
}
if (isPage(page)) {
activePage.value = page?.id;
if (active.value !== NodeType.PAGE) {
active.value = NodeType.PAGE;
}
} else if (isPageFragment(page)) {
activePageFragment.value = page?.id;
if (active.value !== NodeType.PAGE_FRAGMENT) {
active.value = NodeType.PAGE_FRAGMENT;
}
}
},
{
immediate: true,
},
);
watch(active, (active) => {
if (active === NodeType.PAGE) {
if (!activePage.value) {
editorService?.selectRoot();
return;
}
switchPage(activePage.value);
return;
}
if (active === NodeType.PAGE_FRAGMENT) {
if (!activePageFragment.value) {
editorService?.selectRoot();
return;
}
switchPage(activePageFragment.value);
}
});
const switchPage = (id: Id) => {
editorService?.select(id);
};
const copy = (node: MPage | MPageFragment) => {
node && editorService?.copy(node);
editorService?.paste({
left: 0,
top: 0,
});
};
const remove = (node: MPage | MPageFragment) => {
editorService?.remove(node);
};
</script>

92
packages/editor/src/layouts/workspace/PageBarScrollContainer.vue → packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
View File

@ -1,25 +1,20 @@
<template>
<div class="m-editor-page-bar" ref="pageBar">
<div
v-if="showAddPageButton"
id="m-editor-page-bar-add-icon"
class="m-editor-page-bar-item m-editor-page-bar-item-icon"
@click="addPage"
>
<Icon :icon="Plus"></Icon>
</div>
<div v-else style="width: 21px"></div>
<slot name="prepend"></slot>
<div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
<Icon :icon="ArrowLeftBold"></Icon>
</div>
<div
v-if="pageLength"
v-if="(type === NodeType.PAGE && pageLength) || (type === NodeType.PAGE_FRAGMENT && pageFragmentLength)"
class="m-editor-page-bar-items"
ref="itemsContainer"
:style="`width: ${itemsContainerWidth}px`"
>
<slot></slot>
</div>
<div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
<Icon :icon="ArrowRightBold"></Icon>
</div>
@ -27,19 +22,32 @@
</template>
<script setup lang="ts">
import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
import {
computed,
type ComputedRef,
inject,
nextTick,
onBeforeUnmount,
onMounted,
ref,
watch,
type WatchStopHandle,
} from 'vue';
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/schema';
import Icon from '@editor/components/Icon.vue';
import type { Services } from '@editor/type';
import { generatePageNameByApp } from '@editor/utils/editor';
defineOptions({
name: 'MEditorPageBarScrollContainer',
});
const props = defineProps<{
type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
}>();
const services = inject<Services>('services');
const editorService = services?.editorService;
const uiService = services?.uiService;
@ -104,27 +112,45 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
};
const pageLength = computed(() => editorService?.get('pageLength'));
const pageLength = computed(() => editorService?.get('pageLength') || 0);
const pageFragmentLength = computed(() => editorService?.get('pageFragmentLength') || 0);
watch(pageLength, (length = 0, preLength = 0) => {
setTimeout(() => {
setCanScroll();
if (length < preLength) {
scroll('start');
const crateWatchLength = (length: ComputedRef<number>) =>
watch(
length,
(length = 0, preLength = 0) => {
setTimeout(() => {
setCanScroll();
if (length < preLength) {
scroll('start');
} else {
scroll('end');
}
});
},
{
immediate: true,
},
);
let unWatchPageLength: WatchStopHandle | null;
let unWatchPageFragmentLength: WatchStopHandle | null;
watch(
() => props.type,
(type) => {
if (type === NodeType.PAGE) {
unWatchPageFragmentLength?.();
unWatchPageFragmentLength = null;
unWatchPageLength = crateWatchLength(pageLength);
} else {
scroll('end');
unWatchPageLength?.();
unWatchPageLength = null;
unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
}
});
});
const addPage = () => {
if (!editorService) return;
const root = toRaw(editorService.get('root'));
if (!root) throw new Error('root 不能为空');
const pageConfig = {
type: NodeType.PAGE,
name: generatePageNameByApp(root),
};
editorService.add(pageConfig);
};
},
{
immediate: true,
},
);
</script>

45
packages/editor/src/layouts/page-bar/SwitchTypeButton.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<TMagicButton
v-for="item in data"
class="m-editor-page-bar-switch-type-button"
size="small"
:key="item.type"
text
:class="{ active: modelValue === item.type }"
:type="modelValue === item.type ? 'primary' : ''"
@click="clickHandler(item.type)"
>{{ item.text }}</TMagicButton
>
</template>
<script setup lang="ts">
import { TMagicButton } from '@tmagic/design';
import { NodeType } from '@tmagic/schema';
defineOptions({
name: 'MEditorPageBarSwitchTypeButton',
});
defineProps<{
modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
}>();
const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
{
type: NodeType.PAGE,
text: '页面',
},
{
type: NodeType.PAGE_FRAGMENT,
text: '页面片',
},
];
const emit = defineEmits<{
'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
}>();
const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
emit('update:modelValue', value);
};
</script>

6
packages/editor/src/layouts/sidebar/layer/use-node-status.ts
View File

@ -1,13 +1,13 @@
import { computed, ref, watch } from 'vue';
import type { Id, MNode, MPage } from '@tmagic/schema';
import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
import { getNodePath } from '@tmagic/utils';
import { LayerNodeStatus, Services } from '@editor/type';
import { traverseNode } from '@editor/utils';
import { updateStatus } from '@editor/utils/tree';
const createPageNodeStatus = (page: MPage, initalLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
const map = new Map<Id, LayerNodeStatus>();
map.set(page.id, {
@ -21,7 +21,7 @@ const createPageNodeStatus = (page: MPage, initalLayerNodeStatus?: Map<Id, Layer
traverseNode<MNode>(node, (node) => {
map.set(
node.id,
initalLayerNodeStatus?.get(node.id) || {
initialLayerNodeStatus?.get(node.id) || {
visible: true,
expand: false,
selected: false,

87
packages/editor/src/layouts/workspace/PageBar.vue
View File

@ -1,87 +0,0 @@
<template>
<PageBarScrollContainer>
<div
v-for="item in (root && root.items) || []"
class="m-editor-page-bar-item"
:key="item.key"
:class="{ active: page?.id === item.id }"
@click="switchPage(item)"
>
<div class="m-editor-page-bar-title">
<slot name="page-bar-title" :page="item">
<TMagicTooltip effect="dark" placement="top-start" :content="item.name">
<span>{{ item.name || item.id }}</span>
</TMagicTooltip>
</slot>
</div>
<TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
<div>
<slot name="page-bar-popover" :page="item">
<ToolButton
:data="{
type: 'button',
text: '复制',
icon: DocumentCopy,
handler: () => copy(item),
}"
></ToolButton>
<ToolButton
:data="{
type: 'button',
text: '删除',
icon: Delete,
handler: () => remove(item),
}"
></ToolButton>
</slot>
</div>
<template #reference>
<TMagicIcon class="m-editor-page-bar-menu-icon">
<CaretBottom></CaretBottom>
</TMagicIcon>
</template>
</TMagicPopover>
</div>
</PageBarScrollContainer>
</template>
<script lang="ts" setup>
import { computed, inject } from 'vue';
import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
import type { MPage } from '@tmagic/schema';
import ToolButton from '@editor/components/ToolButton.vue';
import type { Services } from '@editor/type';
import PageBarScrollContainer from './PageBarScrollContainer.vue';
defineOptions({
name: 'MEditorPageBar',
});
const services = inject<Services>('services');
const editorService = services?.editorService;
const root = computed(() => editorService?.get('root'));
const page = computed(() => editorService?.get('page'));
const switchPage = (page: MPage) => {
editorService?.select(page);
};
const copy = (node: MPage) => {
node && editorService?.copy(node);
editorService?.paste({
left: 0,
top: 0,
});
};
const remove = (node: MPage) => {
editorService?.remove(node);
};
</script>

6
packages/editor/src/layouts/workspace/Workspace.vue
View File

@ -11,11 +11,6 @@
</slot>
<slot name="workspace-content"></slot>
<PageBar>
<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>
</PageBar>
</div>
</template>
@ -26,7 +21,6 @@ import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@edito
import MagicStage from './viewer/Stage.vue';
import Breadcrumb from './Breadcrumb.vue';
import PageBar from './PageBar.vue';
defineSlots<WorkspaceSlots>();

95
packages/editor/src/services/editor.ts
View File

@ -20,10 +20,9 @@ import { reactive, toRaw } from 'vue';
import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
import { DepTargetType } from '@tmagic/dep';
import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema';
import StageCore from '@tmagic/stage';
import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
import depService from '@editor/services/dep';
import historyService from '@editor/services/history';
@ -37,8 +36,10 @@ import {
fixNodePosition,
getInitPositionStyle,
getNodeIndex,
getPageFragmentList,
getPageList,
isFixed,
setChilrenLayout,
setChildrenLayout,
setLayout,
} from '@editor/utils/editor';
import { beforePaste, getAddParent } from '@editor/utils/operator';
@ -58,6 +59,7 @@ class Editor extends BaseService {
highlightNode: null,
modifiedNodeIds: new Map(),
pageLength: 0,
pageFragmentLength: 0,
disabledMultiSelect: false,
});
private isHistoryStateChange = false;
@ -94,7 +96,7 @@ class Editor extends BaseService {
/**
* 设置当前指点节点配置
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
* @param value MNode
*/
public set<K extends StoreStateKey, T extends StoreState[K]>(name: K, value: T) {
@ -111,11 +113,14 @@ class Editor extends BaseService {
throw new Error('root 不能为数组');
}
if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
this.state.pageLength = value.items?.length || 0;
if (value && isObject(value)) {
const app = value as MApp;
this.state.pageLength = getPageList(app).length || 0;
this.state.pageFragmentLength = getPageFragmentList(app).length || 0;
this.state.stageLoading = this.state.pageLength !== 0;
} else {
this.state.pageLength = 0;
this.state.pageFragmentLength = 0;
this.state.stageLoading = false;
}
@ -125,7 +130,7 @@ class Editor extends BaseService {
/**
* 获取当前指点节点配置
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
* @returns MNode
*/
public get<K extends StoreStateKey>(name: K): StoreState[K] {
@ -167,8 +172,8 @@ class Editor extends BaseService {
info.parent = path[path.length - 2] as MContainer;
path.forEach((item) => {
if (item.type === NodeType.PAGE) {
info.page = item as MPage;
if (isPage(item) || isPageFragment(item)) {
info.page = item as MPage | MPageFragment;
return;
}
});
@ -316,6 +321,17 @@ class Editor extends BaseService {
this.set('nodes', nodes);
}
public selectRoot() {
const root = this.get('root');
if (!root) return;
this.set('nodes', [root]);
this.set('parent', null);
this.set('page', null);
this.set('stage', null);
this.set('highlightNode', null);
}
public async doAdd(node: MNode, parent: MContainer): Promise<MNode> {
const root = this.get('root');
@ -326,11 +342,11 @@ class Editor extends BaseService {
if (!curNode) throw new Error('当前选中节点为空');
if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
throw new Error('app下不能添加组件');
}
if (parent.id !== curNode.id && node.type !== NodeType.PAGE) {
if (parent.id !== curNode.id && !(isPage(node) || isPageFragment(node))) {
const index = parent.items.indexOf(curNode);
parent.items?.splice(index + 1, 0, node);
} else {
@ -384,7 +400,7 @@ class Editor extends BaseService {
const newNodes = await Promise.all(
addNodes.map((node) => {
const root = this.get('root');
if (isPage(node) && root) {
if ((isPage(node) || isPageFragment(node)) && root) {
return this.doAdd(node, root);
}
const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(node);
@ -403,13 +419,15 @@ class Editor extends BaseService {
if (isPage(newNodes[0])) {
this.state.pageLength += 1;
} else if (isPageFragment(newNodes[0])) {
this.state.pageFragmentLength += 1;
} else {
// 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
stage?.select(newNodes[0].id);
}
}
if (!isPage(newNodes[0])) {
if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
this.pushHistoryState();
}
@ -422,7 +440,7 @@ class Editor extends BaseService {
const root = this.get('root');
if (!root) throw new Error('root不能为空');
const { parent, node: curNode } = this.getNodeInfo(node.id);
const { parent, node: curNode } = this.getNodeInfo(node.id, false);
if (!parent || !curNode) throw new Error('找不要删除的节点');
@ -434,29 +452,38 @@ class Editor extends BaseService {
const stage = this.get('stage');
stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
if (node.type === NodeType.PAGE) {
const selectDefault = async (pages: MNode[]) => {
if (pages[0]) {
await this.select(pages[0]);
stage?.select(pages[0].id);
} else {
this.selectRoot();
historyService.resetPage();
}
};
const rootItems = root.items || [];
if (isPage(node)) {
this.state.pageLength -= 1;
if (root.items[0]) {
await this.select(root.items[0]);
stage?.select(root.items[0].id);
} else {
this.set('nodes', [root]);
this.set('parent', null);
this.set('page', null);
this.set('stage', null);
this.set('highlightNode', null);
this.resetModifiedNodeId();
historyService.reset();
await selectDefault(getPageList(root));
} else if (isPageFragment(node)) {
this.state.pageFragmentLength -= 1;
return;
}
await selectDefault(getPageFragmentList(root));
} else {
await this.select(parent);
stage?.select(parent.id);
this.addModifiedNodeId(parent.id);
}
this.addModifiedNodeId(parent.id);
if (!rootItems.length) {
this.resetModifiedNodeId();
historyService.reset();
}
}
/**
@ -468,7 +495,7 @@ class Editor extends BaseService {
await Promise.all(nodes.map((node) => this.doRemove(node)));
if (!isPage(nodes[0])) {
if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) {
// 更新历史记录
this.pushHistoryState();
}
@ -518,7 +545,7 @@ class Editor extends BaseService {
const newLayout = await this.getLayout(newConfig);
const layout = await this.getLayout(node);
if (Array.isArray(newConfig.items) && newLayout !== layout) {
newConfig = setChilrenLayout(newConfig as MContainer, newLayout);
newConfig = setChildrenLayout(newConfig as MContainer, newLayout);
}
parentNodeItems[index] = newConfig;
@ -535,8 +562,8 @@ class Editor extends BaseService {
root: cloneDeep(root),
});
if (newConfig.type === NodeType.PAGE) {
this.set('page', newConfig as MPage);
if (isPage(newConfig) || isPageFragment(newConfig)) {
this.set('page', newConfig as MPage | MPageFragment);
}
this.addModifiedNodeId(newConfig.id);

8
packages/editor/src/services/history.ts
View File

@ -18,7 +18,7 @@
import { reactive } from 'vue';
import type { MPage } from '@tmagic/schema';
import type { MPage, MPageFragment } from '@tmagic/schema';
import type { HistoryState, StepValue } from '@editor/type';
import { UndoRedo } from '@editor/utils/undo-redo';
@ -41,12 +41,16 @@ class History extends BaseService {
public reset() {
this.state.pageSteps = {};
this.resetPage();
}
public resetPage() {
this.state.pageId = undefined;
this.state.canRedo = false;
this.state.canUndo = false;
}
public changePage(page: MPage): void {
public changePage(page: MPage | MPageFragment): void {
if (!page) return;
this.state.pageId = page.id;

6
packages/editor/src/services/keybinding.ts
View File

@ -1,6 +1,6 @@
import KeyController, { KeyControllerEvent } from 'keycon';
import { isPage } from '@tmagic/utils';
import { isPage, isPageFragment } from '@tmagic/utils';
import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
@ -19,7 +19,7 @@ class Keybinding extends BaseService {
[KeyBindingCommand.DELETE_NODE]: () => {
const nodes = editorService.get('nodes');
if (!nodes || isPage(nodes[0])) return;
if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
editorService.remove(nodes);
},
[KeyBindingCommand.COPY_NODE]: () => {
@ -29,7 +29,7 @@ class Keybinding extends BaseService {
[KeyBindingCommand.CUT_NODE]: () => {
const nodes = editorService.get('nodes');
if (!nodes || isPage(nodes[0])) return;
if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
editorService.copy(nodes);
editorService.remove(nodes);
},

16
packages/editor/src/theme/code-block.scss
View File

@ -1,21 +1,5 @@
.m-editor-code-block-list {
height: 100%;
.list-container {
.list-item {
.codeIcon {
width: 22px;
height: 22px;
margin-right: 5px;
}
.compIcon {
width: 22px;
height: 22px;
margin-right: 5px;
}
}
}
}
.m-fields-code-select {

19
packages/editor/src/theme/page-bar.scss
View File

@ -1,7 +1,24 @@
.m-editor-page-bar {
.m-editor-page-bar-tabs {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
.tmagic-design-button.m-editor-page-bar-switch-type-button {
margin-left: 7px;
position: relative;
top: 1px;
border-radius: 3px 3px 0 0;
border: 1px solid $--border-color;
border-bottom: 1px solid transparent;
&.active {
background-color: #f3f3f3;
}
}
}
.m-editor-page-bar {
display: flex;
width: 100%;
height: $--page-bar-height;

22
packages/editor/src/type.ts
View File

@ -19,7 +19,7 @@
import type { Component } from 'vue';
import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
import type StageCore from '@tmagic/stage';
import type {
ContainerHighlightType,
@ -54,13 +54,13 @@ export interface FrameworkSlots {
workspace(props: {}): any;
'props-panel'(props: {}): any;
'footer'(props: {}): any;
'page-bar-title'(props: { page: MPage | MPageFragment }): any;
'page-bar-popover'(props: { page: MPage | MPageFragment }): any;
}
export interface WorkspaceSlots {
stage(props: {}): any;
'workspace-content'(props: {}): any;
'page-bar-title'(props: { page: MPage }): any;
'page-bar-popover'(props: { page: MPage }): any;
}
export interface ComponentListPanelSlots {
@ -138,7 +138,7 @@ export interface StageOptions {
export interface StoreState {
root: MApp | null;
page: MPage | null;
page: MPage | MPageFragment | null;
parent: MContainer | null;
node: MNode | null;
highlightNode: MNode | null;
@ -147,6 +147,7 @@ export interface StoreState {
stageLoading: boolean;
modifiedNodeIds: Map<Id, Id>;
pageLength: number;
pageFragmentLength: number;
disabledMultiSelect: boolean;
}
@ -228,7 +229,7 @@ export interface UiState {
export interface EditorNodeInfo {
node: MNode | null;
parent: MContainer | null;
page: MPage | null;
page: MPage | MPageFragment | null;
}
export interface AddMNode {
@ -493,7 +494,7 @@ export interface CodeParamStatement {
}
export interface StepValue {
data: MPage;
data: MPage | MPageFragment;
modifiedNodeIds: Map<Id, Id>;
nodeId: Id;
}
@ -588,6 +589,15 @@ export interface CodeSelectColConfig {
display?: boolean | FilterFunction;
}
export interface PageFragmentSelectConfig {
type: 'page-fragment-select';
name: string;
text: string;
labelWidth?: number | string;
disabled?: boolean | FilterFunction;
display?: boolean | FilterFunction;
}
export interface DataSourceMethodSelectConfig {
type: 'data-source-method-select';
name: string;

37
packages/editor/src/utils/editor.ts
View File

@ -18,24 +18,29 @@
import serialize from 'serialize-javascript';
import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema';
import type StageCore from '@tmagic/stage';
import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
import { Layout } from '@editor/type';
export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
/**
* 获取所有页面配置
* @param app DSL跟节点
* @param root DSL跟节点
* @returns 所有页面配置
*/
export const getPageList = (app: MApp): MPage[] => {
if (app.items && Array.isArray(app.items)) {
return app.items.filter((item: MPage) => item.type === NodeType.PAGE);
}
return [];
export const getPageList = (root?: MApp | null): MPage[] => {
if (!root) return [];
if (!Array.isArray(root.items)) return [];
return root.items.filter((item) => isPage(item)) as MPage[];
};
export const getPageFragmentList = (root?: MApp | null): MPageFragment[] => {
if (!root) return [];
if (!Array.isArray(root.items)) return [];
return root.items.filter((item) => isPageFragment(item)) as MPageFragment[];
};
/**
@ -43,22 +48,23 @@ export const getPageList = (app: MApp): MPage[] => {
* @param pages 所有页面配置
* @returns 所有页面名称
*/
export const getPageNameList = (pages: MPage[]): string[] => pages.map((page: MPage) => page.name || 'index');
export const getPageNameList = (pages: (MPage | MPageFragment)[]): string[] =>
pages.map((page) => page.name || 'index');
/**
* 新增页面时，生成页面名称
* @param {Object} pageNameList 所有页面名称
* @returns {string}
*/
export const generatePageName = (pageNameList: string[]): string => {
export const generatePageName = (pageNameList: string[], type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string => {
let pageLength = pageNameList.length;
if (!pageLength) return 'index';
if (!pageLength) return `${type}_index`;
let pageName = `page_${pageLength}`;
let pageName = `${type}_${pageLength}`;
while (pageNameList.includes(pageName)) {
pageLength += 1;
pageName = `page_${pageLength}`;
pageName = `${type}_${pageLength}`;
}
return pageName;
@ -69,7 +75,8 @@ export const generatePageName = (pageNameList: string[]): string => {
* @param {Object} app 所有页面配置
* @returns {string}
*/
export const generatePageNameByApp = (app: MApp): string => generatePageName(getPageNameList(getPageList(app)));
export const generatePageNameByApp = (app: MApp, type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string =>
generatePageName(getPageNameList(type === 'page' ? getPageList(app) : getPageFragmentList(app)), type);
/**
* @param {Object} node
@ -129,7 +136,7 @@ export const getInitPositionStyle = (style: Record<string, any> = {}, layout: La
return style;
};
export const setChilrenLayout = (node: MContainer, layout: Layout) => {
export const setChildrenLayout = (node: MContainer, layout: Layout) => {
node.items?.forEach((child: MNode) => {
setLayout(child, layout);
});

8
packages/editor/src/utils/operator.ts
View File

@ -1,8 +1,8 @@
import { toRaw } from 'vue';
import { isEmpty } from 'lodash-es';
import { Id, MContainer, MNode } from '@tmagic/schema';
import { isPage } from '@tmagic/utils';
import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
import { isPage, isPageFragment } from '@tmagic/utils';
import editorService from '@editor/services/editor';
import propsService from '@editor/services/props';
@ -58,8 +58,8 @@ export const beforePaste = async (position: PastePosition, config: MNode[]): Pro
};
}
const root = editorService.get('root');
if (isPage(pasteConfig) && root) {
pasteConfig.name = generatePageNameByApp(root);
if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
}
return pasteConfig as MNode;
}),

2
packages/editor/tests/unit/utils/editor.spec.ts
View File

@ -54,7 +54,7 @@ describe('util form', () => {
test('generatePageName', () => {
// 已有一个页面了，再生成出来的name格式为page_${index}
const name = editor.generatePageName(['index', 'page_2']);
const name = editor.generatePageName(['index', 'page_2'], NodeType.PAGE);
// 第二个页面
expect(name).toBe('page_3');
});

12
packages/schema/src/index.ts
View File

@ -48,9 +48,14 @@ export interface AppCore {
}
export enum NodeType {
/** 容器 */
CONTAINER = 'container',
/** 页面 */
PAGE = 'page',
/** 根类型 */
ROOT = 'app',
/** 页面片 */
PAGE_FRAGMENT = 'page-fragment',
}
export type Id = string | number;
@ -145,11 +150,16 @@ export interface MPage extends MContainer {
type: NodeType.PAGE;
}
export interface MPageFragment extends MContainer {
/** 页面类型 */
type: NodeType.PAGE_FRAGMENT;
}
export interface MApp extends MComponent {
/** App页面类型，app作为整个结构的根节点；有且只有一个 */
type: NodeType.ROOT;
/** */
items: MPage[];
items: (MPage | MPageFragment)[];
/** 代码块 */
codeBlocks?: CodeBlockDSL;

4
packages/ui-react/src/index.ts
View File

@ -21,6 +21,8 @@ import Container from './container';
import Img from './img';
import Overlay from './overlay';
import Page from './page';
import pageFragment from './page-fragment';
import pageFragmentContainer from './page-fragment-container';
import Qrcode from './qrcode';
import Text from './text';
export { default as AppContent } from './AppContent';
@ -36,6 +38,8 @@ const ui: Record<string, any> = {
text: Text,
qrcode: Qrcode,
overlay: Overlay,
'page-fragment': pageFragment,
'page-fragment-container': pageFragmentContainer,
};
export default ui;

24
packages/ui-react/src/page-fragment-container/index.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import PageFragmentContainer from './src/PageFragmentContainer';
export { default as config } from './src/formConfig';
export { default as value } from './src/initValue';
export default PageFragmentContainer;

55
packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx Normal file
View File

@ -0,0 +1,55 @@
import React, { constructor, useEffect, useMemo, useState } from 'react';
import type { MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
import useApp from '../../useApp';
interface PageFragmentContainerProps {
config: MComponent;
}
const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({ config }) => {
const { app } = useApp({
config,
methods: {},
});
if (!app) return null;
const MagicUiContainer = app.resolveComponent('container');
let containerConfig = {}
const fragment = app?.dsl?.items?.find((page) => page.id === config.pageFragmentId)
if(fragment) {
const { id, type, items, ...others } = fragment;
const itemsWithoutId = items.map((item: MNode) => {
const { id, ...otherConfig } = item;
return otherConfig;
});
if (app?.platform === 'editor') {
containerConfig ={
...others,
items: itemsWithoutId,
};
}else {
containerConfig = {
...others,
items
}
}
}
return (
<div
id={`${config.id || ''}`}
className="magic-ui-page-fragment-container"
style={app.transformStyle(config.style || {})}
>
<MagicUiContainer
config={containerConfig}
></MagicUiContainer>
</div>
);
};
PageFragmentContainer.displayName = 'magic-ui-page-fragment-container';
export default PageFragmentContainer;

25
packages/ui-react/src/page-fragment-container/src/formConfig.ts Normal file
View File

@ -0,0 +1,25 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
name: 'pageFragmentId',
text: '页面片ID',
type: 'page-fragment-select',
},
];

24
packages/ui-react/src/page-fragment-container/src/initValue.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
style: {
width: '',
height: '',
},
};

24
packages/ui-react/src/page-fragment/index.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import PageFragment from './src/PageFragment';
export { default as config } from './src/formConfig';
export { default as value } from './src/initValue';
export default PageFragment;

51
packages/ui-react/src/page-fragment/src/PageFragment.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import type { MComponent, MContainer, MPageFragment } from '@tmagic/schema';
import useApp from '../../useApp';
interface PageFragmentProps {
config: MPageFragment;
}
const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
const { app } = useApp({
config,
methods: {},
});
if (!app) return null;
return (
<div
id={`${config.id || ''}`}
className={`magic-ui-page-fragment magic-ui-container magic-layout-${config.layout}${
config.className ? ` ${config.className}` : ''
}`}
style={app.transformStyle(config.style || {})}
>
{config.items?.map((item: MComponent | MContainer) => {
const MagicUiComp = app.resolveComponent(item.type || 'container');
if (!MagicUiComp) return null;
if (item.visible === false) return null;
if (item.condResult === false) return null;
return (
<MagicUiComp
id={`${item.id || ''}`}
key={item.id}
config={item}
className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
style={app.transformStyle(item.style || {})}
></MagicUiComp>
);
})}
</div>
);
};
PageFragment.displayName = 'magic-ui-page-fragment';
export default PageFragment;

50
packages/ui-react/src/page-fragment/src/formConfig.ts Normal file
View File

@ -0,0 +1,50 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
text: '页面片标识',
name: 'name',
disabled: true,
},
{
text: '页面片标题',
name: 'title',
},
{
name: 'layout',
text: '容器布局',
type: 'select',
defaultValue: 'absolute',
options: [
{ value: 'absolute', text: '绝对定位' },
{ value: 'relative', text: '流式布局' },
],
onChange: (formState: any, v: string, { model }: any) => {
if (!model.style) return v;
if (v === 'relative') {
model.style.height = 'auto';
} else {
const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
if (el) {
model.style.height = el.getBoundingClientRect().height;
}
}
},
},
];

25
packages/ui-react/src/page-fragment/src/initValue.ts Normal file
View File

@ -0,0 +1,25 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
items: [],
style: {
width: '375',
height: '950',
},
};

4
packages/ui-vue2/src/index.ts
View File

@ -21,6 +21,8 @@ import Container from './container';
import Img from './img';
import Overlay from './overlay';
import Page from './page';
import PageFragment from './page-fragment';
import PageFragmentContainer from './page-fragment-container';
import Qrcode from './qrcode';
import Text from './text';
@ -32,6 +34,8 @@ const ui: Record<string, any> = {
img: Img,
qrcode: Qrcode,
overlay: Overlay,
'page-fragment': PageFragment,
'page-fragment-container': PageFragmentContainer,
};
export default ui;

24
packages/ui-vue2/src/page-fragment-container/index.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import PageFragmentContainer from './src/PageFragmentContainer.vue';
export { default as config } from './src/formConfig';
export { default as value } from './src/initValue';
export default PageFragmentContainer;

59
packages/ui-vue2/src/page-fragment-container/src/PageFragmentContainer.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div :id="`${config.id || ''}`" class="magic-ui-page-fragment-container">
<magic-ui-container :config="containerConfig" :model="model"></magic-ui-container>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import { MComponent, MNode } from '@tmagic/schema';
import Container from '../../container';
import useApp from '../../useApp';
export default defineComponent({
components: {
'magic-ui-container': Container,
},
props: {
config: {
type: Object as PropType<MComponent>,
default: () => ({}),
},
},
setup(props) {
const app = useApp(props);
const fragment = computed(() => app?.dsl?.items?.find((page) => page.id === props.config.pageFragmentId));
const containerConfig = computed(() => {
if (!fragment.value) return { items: [] };
const { id, type, items, ...others } = fragment.value;
const itemsWithoutId = items.map((item: MNode) => {
const { id, ...otherConfig } = item;
return otherConfig;
});
if (app?.platform === 'editor') {
return {
...others,
items: itemsWithoutId,
};
}
return {
...others,
items,
};
});
return {
containerConfig,
};
},
});
</script>
<style scoped>
.in-editor .magic-ui-page-fragment-container {
min-width: 100px;
min-height: 100px;
}
</style>

25
packages/ui-vue2/src/page-fragment-container/src/formConfig.ts Normal file
View File

@ -0,0 +1,25 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
name: 'pageFragmentId',
text: '页面片ID',
type: 'page-fragment-select',
},
];

24
packages/ui-vue2/src/page-fragment-container/src/initValue.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
style: {
width: '',
height: '',
},
};

24
packages/ui-vue2/src/page-fragment/index.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import PageFragment from './src/PageFragment.vue';
export { default as config } from './src/formConfig';
export { default as value } from './src/initValue';
export default PageFragment;

42
packages/ui-vue2/src/page-fragment/src/PageFragment.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div
:id="`${config.id || ''}`"
:class="`magic-ui-page-fragment magic-ui-container magic-layout-${config.layout}${
config.className ? ` ${config.className}` : ''
}`"
:style="style"
>
<slot></slot>
<magic-ui-component v-for="item in config.items" :key="item.id" :config="item"></magic-ui-component>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import type { MPageFragment } from '@tmagic/schema';
import MComponent from '../../Component.vue';
import useApp from '../../useApp';
export default defineComponent({
components: {
'magic-ui-component': MComponent,
},
props: {
config: {
type: Object as PropType<MPageFragment>,
default: () => ({}),
},
},
setup(props) {
const app = useApp(props);
return {
style: computed(() => app?.transformStyle(props.config.style || {})),
};
},
});
</script>

50
packages/ui-vue2/src/page-fragment/src/formConfig.ts Normal file
View File

@ -0,0 +1,50 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
text: '页面片标识',
name: 'name',
disabled: true,
},
{
text: '页面片标题',
name: 'title',
},
{
name: 'layout',
text: '容器布局',
type: 'select',
defaultValue: 'absolute',
options: [
{ value: 'absolute', text: '绝对定位' },
{ value: 'relative', text: '流式布局' },
],
onChange: (formState: any, v: string, { model }: any) => {
if (!model.style) return v;
if (v === 'relative') {
model.style.height = 'auto';
} else {
const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
if (el) {
model.style.height = el.getBoundingClientRect().height;
}
}
},
},
];

25
packages/ui-vue2/src/page-fragment/src/initValue.ts Normal file
View File

@ -0,0 +1,25 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
items: [],
style: {
width: '375',
height: '950',
},
};

4
packages/ui/src/index.ts
View File

@ -21,6 +21,8 @@ import Container from './container';
import Img from './img';
import Overlay from './overlay';
import Page from './page';
import PageFragment from './page-fragment';
import PageFragmentContainer from './page-fragment-container';
import Qrcode from './qrcode';
import Text from './text';
@ -32,6 +34,8 @@ const ui: Record<string, any> = {
img: Img,
qrcode: Qrcode,
overlay: Overlay,
'page-fragment-container': PageFragmentContainer,
'page-fragment': PageFragment,
};
export default ui;

24
packages/ui/src/page-fragment-container/index.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import PageFragmentContainer from './src/PageFragmentContainer.vue';
export { default as config } from './src/formConfig';
export { default as value } from './src/initValue';
export default PageFragmentContainer;

57
packages/ui/src/page-fragment-container/src/PageFragmentContainer.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div :id="`${config.id || ''}`" class="magic-ui-page-fragment-container">
<Container :config="containerConfig" :model="model"></Container>
</div>
</template>
<script lang="ts" setup>
import { computed, inject } from 'vue';
import Core from '@tmagic/core';
import { MComponent, MNode } from '@tmagic/schema';
import Container from '../../container';
import useApp from '../../useApp';
const props = withDefaults(
defineProps<{
config: MComponent;
model?: any;
}>(),
{
model: () => ({}),
},
);
const app: Core | undefined = inject('app');
const fragment = computed(() => app?.dsl?.items?.find((page) => page.id === props.config.pageFragmentId));
const containerConfig = computed(() => {
if (!fragment.value) return { items: [] };
const { id, type, items, ...others } = fragment.value;
const itemsWithoutId = items.map((item: MNode) => {
const { id, ...otherConfig } = item;
return otherConfig;
});
if (app?.platform === 'editor') {
return {
...others,
items: itemsWithoutId,
};
}
return {
...others,
items,
};
});
useApp({
config: props.config,
methods: {},
});
</script>
<style scoped>
.in-editor .magic-ui-page-fragment-container {
min-width: 100px;
min-height: 100px;
}
</style>

25
packages/ui/src/page-fragment-container/src/formConfig.ts Normal file
View File

@ -0,0 +1,25 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
name: 'pageFragmentId',
text: '页面片ID',
type: 'page-fragment-select',
},
];

24
packages/ui/src/page-fragment-container/src/initValue.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
style: {
width: '',
height: '',
},
};

24
packages/ui/src/page-fragment/index.ts Normal file
View File

@ -0,0 +1,24 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import PageFragment from './src/PageFragment.vue';
export { default as config } from './src/formConfig';
export { default as value } from './src/initValue';
export default PageFragment;

41
packages/ui/src/page-fragment/src/PageFragment.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div
:id="`${config.id || ''}`"
:class="`magic-ui-page-fragment magic-ui-container magic-layout-${config.layout}${
config.className ? ` ${config.className}` : ''
}`"
:style="style"
>
<slot></slot>
<MComponent v-for="item in config.items" :key="item.id" :config="item"></MComponent>
</div>
</template>
<script lang="ts" setup>
import { computed, inject } from 'vue';
import Core from '@tmagic/core';
import type { MPageFragment } from '@tmagic/schema';
import MComponent from '../../Component.vue';
import useApp from '../../useApp';
const props = withDefaults(
defineProps<{
config: MPageFragment;
model?: any;
}>(),
{
model: () => ({}),
},
);
const app: Core | undefined = inject('app');
const style = computed(() => app?.transformStyle(props.config.style || {}));
useApp({
config: props.config,
methods: {},
});
</script>

50
packages/ui/src/page-fragment/src/formConfig.ts Normal file
View File

@ -0,0 +1,50 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
text: '页面片标识',
name: 'name',
disabled: true,
},
{
text: '页面片标题',
name: 'title',
},
{
name: 'layout',
text: '容器布局',
type: 'select',
defaultValue: 'absolute',
options: [
{ value: 'absolute', text: '绝对定位' },
{ value: 'relative', text: '流式布局' },
],
onChange: (formState: any, v: string, { model }: any) => {
if (!model.style) return v;
if (v === 'relative') {
model.style.height = 'auto';
} else {
const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
if (el) {
model.style.height = el.getBoundingClientRect().height;
}
}
},
},
];

25
packages/ui/src/page-fragment/src/initValue.ts Normal file
View File

@ -0,0 +1,25 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
items: [],
style: {
width: '375',
height: '950',
},
};

5
packages/utils/src/index.ts
View File

@ -135,6 +135,11 @@ export const isPage = (node?: MComponent | null): boolean => {
return Boolean(node.type?.toLowerCase() === NodeType.PAGE);
};
export const isPageFragment = (node?: MComponent | null): boolean => {
if (!node) return false;
return Boolean(node.type?.toLowerCase() === NodeType.PAGE_FRAGMENT);
};
export const isNumber = (value: string) => /^(-?\d+)(\.\d+)?$/.test(value);
export const getHost = (targetUrl: string) => targetUrl.match(/\/\/([^/]+)/)?.[1];

7
playground/src/configs/componentGroupList.ts
View File

@ -1,4 +1,4 @@
import { FolderOpened, Grid, PictureFilled, SwitchButton, Tickets } from '@element-plus/icons-vue';
import { FolderOpened, Grid, PictureFilled, SwitchButton, Ticket, Tickets } from '@element-plus/icons-vue';
export default [
{
@ -14,6 +14,11 @@ export default [
text: '蒙层',
type: 'overlay',
},
{
icon: Ticket,
text: '页面片容器',
type: 'page-fragment-container',
},
],
},
{

2
runtime/react/playground/main.tsx
View File

@ -59,7 +59,7 @@ window.appInstance = app;
let curPageId = '';
const updateConfig = (root: MApp) => {
app?.setConfig(root);
app?.setConfig(root,curPageId);
renderDom();
};

2
runtime/vue2/playground/index.html
View File

@ -40,7 +40,7 @@
</head>
<body style="font-size: 14px">
<div id="app"></div>
<div id="app" class="in-editor"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2
runtime/vue3/playground/index.html
View File

@ -40,7 +40,7 @@
</head>
<body style="font-size: 14px">
<div id="app"></div>
<div id="app" class="in-editor"></div>
<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>