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

packages/core/src/Node.ts

@@ -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() {

packages/core/src/Page.ts

@@ -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);
  });

packages/editor/src/Editor.vue

@@ -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>
 

packages/editor/src/editorProps.ts

@@ -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,
 };

packages/editor/src/fields/PageFragmentSelect.vue

@@ -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>

packages/editor/src/index.ts

@@ -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);
  },
 };

packages/editor/src/initService.ts

@@ -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);
  };
 

packages/editor/src/layouts/AddPageBox.vue

@@ -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>

packages/editor/src/layouts/Framework.vue

@@ -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);

packages/editor/src/layouts/page-bar/AddButton.vue

@@ -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>