From 7b6dcedfad07af458d2496b69230fe2920dead70 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 18 Dec 2023 19:51:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(core,editor,ui):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/Node.ts                     |   9 +-
 packages/core/src/Page.ts                     |  11 +-
 packages/editor/src/Editor.vue                |   7 +-
 packages/editor/src/editorProps.ts            |   5 +
 .../editor/src/fields/PageFragmentSelect.vue  |  55 ++++++
 packages/editor/src/index.ts                  |   3 +
 packages/editor/src/initService.ts            |   4 +-
 packages/editor/src/layouts/AddPageBox.vue    |  20 ++-
 packages/editor/src/layouts/Framework.vue     |  17 +-
 .../editor/src/layouts/page-bar/AddButton.vue |  48 ++++++
 .../editor/src/layouts/page-bar/PageBar.vue   | 158 ++++++++++++++++++
 .../PageBarScrollContainer.vue                |  92 ++++++----
 .../src/layouts/page-bar/SwitchTypeButton.vue |  45 +++++
 .../layouts/sidebar/layer/use-node-status.ts  |   6 +-
 .../editor/src/layouts/workspace/PageBar.vue  |  87 ----------
 .../src/layouts/workspace/Workspace.vue       |   6 -
 packages/editor/src/services/editor.ts        |  95 +++++++----
 packages/editor/src/services/history.ts       |   8 +-
 packages/editor/src/services/keybinding.ts    |   6 +-
 packages/editor/src/theme/code-block.scss     |  16 --
 packages/editor/src/theme/page-bar.scss       |  19 ++-
 packages/editor/src/type.ts                   |  22 ++-
 packages/editor/src/utils/editor.ts           |  37 ++--
 packages/editor/src/utils/operator.ts         |   8 +-
 .../editor/tests/unit/utils/editor.spec.ts    |   2 +-
 packages/schema/src/index.ts                  |  12 +-
 packages/ui-react/src/index.ts                |   4 +
 .../src/page-fragment-container/index.ts      |  24 +++
 .../src/PageFragmentContainer.tsx             |  55 ++++++
 .../page-fragment-container/src/formConfig.ts |  25 +++
 .../page-fragment-container/src/initValue.ts  |  24 +++
 packages/ui-react/src/page-fragment/index.ts  |  24 +++
 .../src/page-fragment/src/PageFragment.tsx    |  51 ++++++
 .../src/page-fragment/src/formConfig.ts       |  50 ++++++
 .../src/page-fragment/src/initValue.ts        |  25 +++
 packages/ui-vue2/src/index.ts                 |   4 +
 .../src/page-fragment-container/index.ts      |  24 +++
 .../src/PageFragmentContainer.vue             |  59 +++++++
 .../page-fragment-container/src/formConfig.ts |  25 +++
 .../page-fragment-container/src/initValue.ts  |  24 +++
 packages/ui-vue2/src/page-fragment/index.ts   |  24 +++
 .../src/page-fragment/src/PageFragment.vue    |  42 +++++
 .../src/page-fragment/src/formConfig.ts       |  50 ++++++
 .../src/page-fragment/src/initValue.ts        |  25 +++
 packages/ui/src/index.ts                      |   4 +
 .../ui/src/page-fragment-container/index.ts   |  24 +++
 .../src/PageFragmentContainer.vue             |  57 +++++++
 .../page-fragment-container/src/formConfig.ts |  25 +++
 .../page-fragment-container/src/initValue.ts  |  24 +++
 packages/ui/src/page-fragment/index.ts        |  24 +++
 .../ui/src/page-fragment/src/PageFragment.vue |  41 +++++
 .../ui/src/page-fragment/src/formConfig.ts    |  50 ++++++
 .../ui/src/page-fragment/src/initValue.ts     |  25 +++
 packages/utils/src/index.ts                   |   5 +
 playground/src/configs/componentGroupList.ts  |   7 +-
 runtime/react/playground/main.tsx             |   2 +-
 runtime/vue2/playground/index.html            |   2 +-
 runtime/vue3/playground/index.html            |   2 +-
 58 files changed, 1415 insertions(+), 234 deletions(-)
 create mode 100644 packages/editor/src/fields/PageFragmentSelect.vue
 create mode 100644 packages/editor/src/layouts/page-bar/AddButton.vue
 create mode 100644 packages/editor/src/layouts/page-bar/PageBar.vue
 rename packages/editor/src/layouts/{workspace => page-bar}/PageBarScrollContainer.vue (65%)
 create mode 100644 packages/editor/src/layouts/page-bar/SwitchTypeButton.vue
 delete mode 100644 packages/editor/src/layouts/workspace/PageBar.vue
 create mode 100644 packages/ui-react/src/page-fragment-container/index.ts
 create mode 100644 packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx
 create mode 100644 packages/ui-react/src/page-fragment-container/src/formConfig.ts
 create mode 100644 packages/ui-react/src/page-fragment-container/src/initValue.ts
 create mode 100644 packages/ui-react/src/page-fragment/index.ts
 create mode 100644 packages/ui-react/src/page-fragment/src/PageFragment.tsx
 create mode 100644 packages/ui-react/src/page-fragment/src/formConfig.ts
 create mode 100644 packages/ui-react/src/page-fragment/src/initValue.ts
 create mode 100644 packages/ui-vue2/src/page-fragment-container/index.ts
 create mode 100644 packages/ui-vue2/src/page-fragment-container/src/PageFragmentContainer.vue
 create mode 100644 packages/ui-vue2/src/page-fragment-container/src/formConfig.ts
 create mode 100644 packages/ui-vue2/src/page-fragment-container/src/initValue.ts
 create mode 100644 packages/ui-vue2/src/page-fragment/index.ts
 create mode 100644 packages/ui-vue2/src/page-fragment/src/PageFragment.vue
 create mode 100644 packages/ui-vue2/src/page-fragment/src/formConfig.ts
 create mode 100644 packages/ui-vue2/src/page-fragment/src/initValue.ts
 create mode 100644 packages/ui/src/page-fragment-container/index.ts
 create mode 100644 packages/ui/src/page-fragment-container/src/PageFragmentContainer.vue
 create mode 100644 packages/ui/src/page-fragment-container/src/formConfig.ts
 create mode 100644 packages/ui/src/page-fragment-container/src/initValue.ts
 create mode 100644 packages/ui/src/page-fragment/index.ts
 create mode 100644 packages/ui/src/page-fragment/src/PageFragment.vue
 create mode 100644 packages/ui/src/page-fragment/src/formConfig.ts
 create mode 100644 packages/ui/src/page-fragment/src/initValue.ts

diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts
index da2ec9b4..6cbd6b38 100644
--- a/packages/core/src/Node.ts
+++ b/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() {
diff --git a/packages/core/src/Page.ts b/packages/core/src/Page.ts
index 51def7aa..9dc1f7fa 100644
--- a/packages/core/src/Page.ts
+++ b/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);
     });
diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 76672144..ba1f5620 100644
--- a/packages/editor/src/Editor.vue
+++ b/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>
 
diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index 076b3406..bd6cd550 100644
--- a/packages/editor/src/editorProps.ts
+++ b/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,
 };
diff --git a/packages/editor/src/fields/PageFragmentSelect.vue b/packages/editor/src/fields/PageFragmentSelect.vue
new file mode 100644
index 00000000..dc20f195
--- /dev/null
+++ b/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>
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index e8b81f7b..b36c4468 100644
--- a/packages/editor/src/index.ts
+++ b/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);
   },
 };
diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts
index 4463649a..9f6734c2 100644
--- a/packages/editor/src/initService.ts
+++ b/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);
   };
 
diff --git a/packages/editor/src/layouts/AddPageBox.vue b/packages/editor/src/layouts/AddPageBox.vue
index 99f42ad7..d82f4265 100644
--- a/packages/editor/src/layouts/AddPageBox.vue
+++ b/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>
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index bb6fce94..0df652dd 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/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);
diff --git a/packages/editor/src/layouts/page-bar/AddButton.vue b/packages/editor/src/layouts/page-bar/AddButton.vue
new file mode 100644
index 00000000..9472d7bd
--- /dev/null
+++ b/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>
diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
new file mode 100644
index 00000000..50fc2513
--- /dev/null
+++ b/packages/editor/src/layouts/page-bar/PageBar.vue
@@ -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>
diff --git a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
similarity index 65%
rename from packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
rename to packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
index 903e6dd1..a25e61ec 100644
--- a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
@@ -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>
diff --git a/packages/editor/src/layouts/page-bar/SwitchTypeButton.vue b/packages/editor/src/layouts/page-bar/SwitchTypeButton.vue
new file mode 100644
index 00000000..d6512d85
--- /dev/null
+++ b/packages/editor/src/layouts/page-bar/SwitchTypeButton.vue
@@ -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>
diff --git a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
index dc8add8b..fadc6c69 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
@@ -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,
diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
deleted file mode 100644
index 91e16b53..00000000
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ /dev/null
@@ -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>
diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue
index 3c41b32b..b3df0ec6 100644
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@@ -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>();
 
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 22322f21..92dfbd87 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -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);
diff --git a/packages/editor/src/services/history.ts b/packages/editor/src/services/history.ts
index 28248660..125bdf86 100644
--- a/packages/editor/src/services/history.ts
+++ b/packages/editor/src/services/history.ts
@@ -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;
diff --git a/packages/editor/src/services/keybinding.ts b/packages/editor/src/services/keybinding.ts
index 79886ce2..e5627bc1 100644
--- a/packages/editor/src/services/keybinding.ts
+++ b/packages/editor/src/services/keybinding.ts
@@ -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);
     },
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 4e6d78a0..d1d236da 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -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 {
diff --git a/packages/editor/src/theme/page-bar.scss b/packages/editor/src/theme/page-bar.scss
index 5e5a43dd..0586c0cb 100644
--- a/packages/editor/src/theme/page-bar.scss
+++ b/packages/editor/src/theme/page-bar.scss
@@ -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;
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index d1ae40b9..5c5b3c80 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -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;
diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts
index bb276206..942b4afd 100644
--- a/packages/editor/src/utils/editor.ts
+++ b/packages/editor/src/utils/editor.ts
@@ -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);
   });
diff --git a/packages/editor/src/utils/operator.ts b/packages/editor/src/utils/operator.ts
index d73d9636..64d8778c 100644
--- a/packages/editor/src/utils/operator.ts
+++ b/packages/editor/src/utils/operator.ts
@@ -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;
     }),
diff --git a/packages/editor/tests/unit/utils/editor.spec.ts b/packages/editor/tests/unit/utils/editor.spec.ts
index 0a1b8b81..7f3373ad 100644
--- a/packages/editor/tests/unit/utils/editor.spec.ts
+++ b/packages/editor/tests/unit/utils/editor.spec.ts
@@ -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');
   });
diff --git a/packages/schema/src/index.ts b/packages/schema/src/index.ts
index 110078bb..dc91149e 100644
--- a/packages/schema/src/index.ts
+++ b/packages/schema/src/index.ts
@@ -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;
 
diff --git a/packages/ui-react/src/index.ts b/packages/ui-react/src/index.ts
index 6a1e57a0..fb6437dc 100644
--- a/packages/ui-react/src/index.ts
+++ b/packages/ui-react/src/index.ts
@@ -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;
diff --git a/packages/ui-react/src/page-fragment-container/index.ts b/packages/ui-react/src/page-fragment-container/index.ts
new file mode 100644
index 00000000..d68f4eb4
--- /dev/null
+++ b/packages/ui-react/src/page-fragment-container/index.ts
@@ -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;
diff --git a/packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx b/packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx
new file mode 100644
index 00000000..01587c23
--- /dev/null
+++ b/packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx
@@ -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;
\ No newline at end of file
diff --git a/packages/ui-react/src/page-fragment-container/src/formConfig.ts b/packages/ui-react/src/page-fragment-container/src/formConfig.ts
new file mode 100644
index 00000000..3ba71aa2
--- /dev/null
+++ b/packages/ui-react/src/page-fragment-container/src/formConfig.ts
@@ -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',
+  },
+];
diff --git a/packages/ui-react/src/page-fragment-container/src/initValue.ts b/packages/ui-react/src/page-fragment-container/src/initValue.ts
new file mode 100644
index 00000000..0ba15f5a
--- /dev/null
+++ b/packages/ui-react/src/page-fragment-container/src/initValue.ts
@@ -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: '',
+  },
+};
diff --git a/packages/ui-react/src/page-fragment/index.ts b/packages/ui-react/src/page-fragment/index.ts
new file mode 100644
index 00000000..14d1cf27
--- /dev/null
+++ b/packages/ui-react/src/page-fragment/index.ts
@@ -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;
diff --git a/packages/ui-react/src/page-fragment/src/PageFragment.tsx b/packages/ui-react/src/page-fragment/src/PageFragment.tsx
new file mode 100644
index 00000000..5e3eb3c3
--- /dev/null
+++ b/packages/ui-react/src/page-fragment/src/PageFragment.tsx
@@ -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;
diff --git a/packages/ui-react/src/page-fragment/src/formConfig.ts b/packages/ui-react/src/page-fragment/src/formConfig.ts
new file mode 100644
index 00000000..39577c52
--- /dev/null
+++ b/packages/ui-react/src/page-fragment/src/formConfig.ts
@@ -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;
+        }
+      }
+    },
+  },
+];
diff --git a/packages/ui-react/src/page-fragment/src/initValue.ts b/packages/ui-react/src/page-fragment/src/initValue.ts
new file mode 100644
index 00000000..ff74f6a6
--- /dev/null
+++ b/packages/ui-react/src/page-fragment/src/initValue.ts
@@ -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',
+  },
+};
diff --git a/packages/ui-vue2/src/index.ts b/packages/ui-vue2/src/index.ts
index f1cf656c..9a68ac2f 100644
--- a/packages/ui-vue2/src/index.ts
+++ b/packages/ui-vue2/src/index.ts
@@ -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;
diff --git a/packages/ui-vue2/src/page-fragment-container/index.ts b/packages/ui-vue2/src/page-fragment-container/index.ts
new file mode 100644
index 00000000..14da745a
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment-container/index.ts
@@ -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;
diff --git a/packages/ui-vue2/src/page-fragment-container/src/PageFragmentContainer.vue b/packages/ui-vue2/src/page-fragment-container/src/PageFragmentContainer.vue
new file mode 100644
index 00000000..5f3c3d29
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment-container/src/PageFragmentContainer.vue
@@ -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>
diff --git a/packages/ui-vue2/src/page-fragment-container/src/formConfig.ts b/packages/ui-vue2/src/page-fragment-container/src/formConfig.ts
new file mode 100644
index 00000000..3ba71aa2
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment-container/src/formConfig.ts
@@ -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',
+  },
+];
diff --git a/packages/ui-vue2/src/page-fragment-container/src/initValue.ts b/packages/ui-vue2/src/page-fragment-container/src/initValue.ts
new file mode 100644
index 00000000..0ba15f5a
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment-container/src/initValue.ts
@@ -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: '',
+  },
+};
diff --git a/packages/ui-vue2/src/page-fragment/index.ts b/packages/ui-vue2/src/page-fragment/index.ts
new file mode 100644
index 00000000..a815295c
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment/index.ts
@@ -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;
diff --git a/packages/ui-vue2/src/page-fragment/src/PageFragment.vue b/packages/ui-vue2/src/page-fragment/src/PageFragment.vue
new file mode 100644
index 00000000..fe4db7e5
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment/src/PageFragment.vue
@@ -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>
diff --git a/packages/ui-vue2/src/page-fragment/src/formConfig.ts b/packages/ui-vue2/src/page-fragment/src/formConfig.ts
new file mode 100644
index 00000000..39577c52
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment/src/formConfig.ts
@@ -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;
+        }
+      }
+    },
+  },
+];
diff --git a/packages/ui-vue2/src/page-fragment/src/initValue.ts b/packages/ui-vue2/src/page-fragment/src/initValue.ts
new file mode 100644
index 00000000..ff74f6a6
--- /dev/null
+++ b/packages/ui-vue2/src/page-fragment/src/initValue.ts
@@ -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',
+  },
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f1cf656c..d83dcc39 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -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;
diff --git a/packages/ui/src/page-fragment-container/index.ts b/packages/ui/src/page-fragment-container/index.ts
new file mode 100644
index 00000000..14da745a
--- /dev/null
+++ b/packages/ui/src/page-fragment-container/index.ts
@@ -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;
diff --git a/packages/ui/src/page-fragment-container/src/PageFragmentContainer.vue b/packages/ui/src/page-fragment-container/src/PageFragmentContainer.vue
new file mode 100644
index 00000000..b130f964
--- /dev/null
+++ b/packages/ui/src/page-fragment-container/src/PageFragmentContainer.vue
@@ -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>
diff --git a/packages/ui/src/page-fragment-container/src/formConfig.ts b/packages/ui/src/page-fragment-container/src/formConfig.ts
new file mode 100644
index 00000000..3ba71aa2
--- /dev/null
+++ b/packages/ui/src/page-fragment-container/src/formConfig.ts
@@ -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',
+  },
+];
diff --git a/packages/ui/src/page-fragment-container/src/initValue.ts b/packages/ui/src/page-fragment-container/src/initValue.ts
new file mode 100644
index 00000000..0ba15f5a
--- /dev/null
+++ b/packages/ui/src/page-fragment-container/src/initValue.ts
@@ -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: '',
+  },
+};
diff --git a/packages/ui/src/page-fragment/index.ts b/packages/ui/src/page-fragment/index.ts
new file mode 100644
index 00000000..a815295c
--- /dev/null
+++ b/packages/ui/src/page-fragment/index.ts
@@ -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;
diff --git a/packages/ui/src/page-fragment/src/PageFragment.vue b/packages/ui/src/page-fragment/src/PageFragment.vue
new file mode 100644
index 00000000..ea33f447
--- /dev/null
+++ b/packages/ui/src/page-fragment/src/PageFragment.vue
@@ -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>
diff --git a/packages/ui/src/page-fragment/src/formConfig.ts b/packages/ui/src/page-fragment/src/formConfig.ts
new file mode 100644
index 00000000..39577c52
--- /dev/null
+++ b/packages/ui/src/page-fragment/src/formConfig.ts
@@ -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;
+        }
+      }
+    },
+  },
+];
diff --git a/packages/ui/src/page-fragment/src/initValue.ts b/packages/ui/src/page-fragment/src/initValue.ts
new file mode 100644
index 00000000..ff74f6a6
--- /dev/null
+++ b/packages/ui/src/page-fragment/src/initValue.ts
@@ -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',
+  },
+};
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index b73a9654..00fce860 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -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];
diff --git a/playground/src/configs/componentGroupList.ts b/playground/src/configs/componentGroupList.ts
index 6e93aef6..de861a62 100644
--- a/playground/src/configs/componentGroupList.ts
+++ b/playground/src/configs/componentGroupList.ts
@@ -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',
+      },
     ],
   },
   {
diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx
index 4cbc7bd3..174372c0 100644
--- a/runtime/react/playground/main.tsx
+++ b/runtime/react/playground/main.tsx
@@ -59,7 +59,7 @@ window.appInstance = app;
 let curPageId = '';
 
 const updateConfig = (root: MApp) => {
-  app?.setConfig(root);
+  app?.setConfig(root,curPageId);
   renderDom();
 };
 
diff --git a/runtime/vue2/playground/index.html b/runtime/vue2/playground/index.html
index d414e334..e565f0da 100644
--- a/runtime/vue2/playground/index.html
+++ b/runtime/vue2/playground/index.html
@@ -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>
 
diff --git a/runtime/vue3/playground/index.html b/runtime/vue3/playground/index.html
index 7ffa8465..fd7b8e82 100644
--- a/runtime/vue3/playground/index.html
+++ b/runtime/vue3/playground/index.html
@@ -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>