@tmagic/editor 1.2.0-beta.9 → 1.2.1

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -17,75 +17,68 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <TMagicTree
-      v-if="!isEmpty(state.codeList)"
-      ref="tree"
-      node-key="id"
-      empty-text="暂无代码块"
-      :data="state.codeList"
-      :highlight-current="true"
-      :filter-node-method="filterNode"
-      @node-click="toggleCombineRelation"
-    >
-      <template #default="{ data }">
-        <div :id="data.id" class="list-container">
-          <div class="list-item">
-            <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
-            <!-- 右侧工具栏 -->
-            <div class="right-tool">
-              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <TMagicTooltip
-                effect="dark"
-                content="查看绑定关系"
-                placement="bottom"
-                v-if="state.bindComps[data.id] && state.bindComps[data.id].length > 0"
-              >
-                <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
-              </TMagicTooltip>
-              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
-                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+    <TMagicScrollbar>
+      <TMagicTree
+        v-if="!isEmpty(state.codeList)"
+        ref="tree"
+        node-key="id"
+        empty-text="暂无代码块"
+        :data="state.codeList"
+        :highlight-current="true"
+        :filter-node-method="filterNode"
+        @node-click="toggleCombineRelation"
+      >
+        <template #default="{ data }">
+          <div :id="data.id" class="list-container">
+            <div class="list-item">
+              <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
+              <!-- 右侧工具栏 -->
+              <div class="right-tool">
+                <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+                  <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
+                </TMagicTooltip>
+                <TMagicTooltip
+                  effect="dark"
+                  content="查看绑定关系"
+                  placement="bottom"
+                  v-if="data.combineInfo && data.combineInfo.length > 0"
+                >
+                  <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
+                </TMagicTooltip>
+                <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+                  <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+                </TMagicTooltip>
+                <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+              </div>
             </div>
-          </div>
-          <!-- 展示代码块下绑定的组件 -->
-          <div
-            class="code-comp-map-wrapper"
-            v-if="data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0"
-          >
-            <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
-              <path
-                fill="currentColor"
-                d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
-              ></path>
-            </svg>
-            <!-- todo 功能暂时隐藏 -->
-            <!-- <TMagicButton
-              v-for="(comp, index) in state.bindComps[data.id]"
-              :key="index"
-              class="code-comp"
-              size="small"
-              :plain="true"
-              >{{ comp.name }}<Icon :icon="Close" class="comp-delete-icon" @click.stop="unbind(comp.id, data.id)"></Icon
-            ></TMagicButton> -->
-            <TMagicButton
-              v-for="(comp, index) in state.bindComps[data.id]"
-              :key="index"
-              class="code-comp"
-              size="small"
-              :plain="true"
-              @click.stop="selectComp(comp.id)"
-              >{{ comp.name }}</TMagicButton
+            <!-- 展示代码块下绑定的组件 -->
+            <div
+              class="code-comp-map-wrapper"
+              v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
             >
+              <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
+                <path
+                  fill="currentColor"
+                  d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+                ></path>
+              </svg>
+              <TMagicButton
+                v-for="(comp, index) in data.combineInfo"
+                :key="index"
+                class="code-comp"
+                size="small"
+                :plain="true"
+                @click.stop="selectComp(comp.compId)"
+                >{{ comp.compName }}</TMagicButton
+              >
+            </div>
           </div>
-        </div>
-      </template>
-    </TMagicTree>
+        </template>
+      </TMagicTree>
+    </TMagicScrollbar>
 
     <!-- 代码块编辑区 -->
-    <code-block-editor>
+    <code-block-editor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
       <template #code-block-edit-panel-header="{ id }">
         <slot name="code-block-edit-panel-header" :id="id"></slot>
       </template>
@@ -93,69 +86,69 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeBlockList">
 import { computed, inject, reactive, ref, watch } from 'vue';
 import { Close, Edit, Link, View } from '@element-plus/icons-vue';
-import { forIn, isEmpty } from 'lodash-es';
+import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { Id } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
+import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { ColumnConfig } from '@tmagic/form';
+import { CodeBlockContent, Id } from '@tmagic/schema';
 
 import Icon from '../../../components/Icon.vue';
-import type { CodeBlockContent, CodeRelation, Services } from '../../../type';
-import { CodeDeleteErrorType, CodeDslList, CodeEditorMode, ListRelationState } from '../../../type';
+import type { CodeRelation, Services } from '../../../type';
+import { CodeDeleteErrorType, CodeDslItem, ListState } from '../../../type';
 
 import codeBlockEditor from './CodeBlockEditor.vue';
 
 const props = defineProps<{
-  customError?: (id: string, errorType: CodeDeleteErrorType) => any;
+  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  paramsColConfig?: ColumnConfig;
 }>();
 
 const services = inject<Services>('services');
 
 // 代码块列表
-const state = reactive<ListRelationState>({
+const state = reactive<ListState>({
   codeList: [],
-  bindComps: {},
 });
 
 const editable = computed(() => services?.codeBlockService.getEditStatus());
 
+// 是否展示代码编辑区
+const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
+// 获取绑定关系
+const codeCombineInfo = ref<CodeRelation | null>(null);
+
 // 根据代码块ID获取其绑定的组件信息
-const getBindCompsByCodeId = (codeId: string, codeBlockContent: CodeBlockContent) => {
-  if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
-    state.bindComps[codeId] = [];
-    return;
-  }
-  const compsField = codeBlockContent.comps as CodeRelation;
-  const bindCompIds = Object.keys(compsField);
-  const bindCompsFiltered = bindCompIds.filter((compId) => !isEmpty(compsField[compId]));
-  const compsInfo = bindCompsFiltered.map((compId) => ({
-    id: compId,
-    name: getCompName(compId),
+const getBindCompsByCodeId = (codeId: Id) => {
+  if (!codeCombineInfo.value || !codeCombineInfo.value[codeId]) return [];
+  const bindCompsId = Object.keys(codeCombineInfo.value[codeId]);
+  return bindCompsId.map((compId) => ({
+    compId,
+    compName: getCompName(compId),
   }));
-  state.bindComps[codeId] = compsInfo;
 };
 
 // 初始化代码块列表
 const initList = async () => {
-  const codeDsl = (await services?.codeBlockService.getCodeDsl()) || null;
-  if (!codeDsl) return;
+  const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
+  codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
+  if (!codeDsl || !codeCombineInfo.value) return;
   state.codeList = [];
-  forIn(codeDsl, (value: CodeBlockContent, codeId: string) => {
-    getBindCompsByCodeId(codeId, value);
+  forIn(codeDsl, (value: CodeBlockContent, codeId: Id) => {
     state.codeList.push({
       id: codeId,
       name: value.name,
       codeBlockContent: value,
       showRelation: true,
+      combineInfo: getBindCompsByCodeId(codeId),
     });
   });
 };
 
 watch(
-  () => services?.codeBlockService.getCodeDsl(),
+  [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
   () => {
     initList();
   },
@@ -165,21 +158,6 @@ watch(
   },
 );
 
-// 监听组件名称修改，更新到代码块列表
-watch(
-  () => services?.editorService.get('node'),
-  (curNode) => {
-    if (!curNode?.id) return;
-    forIn(state.bindComps, (bindCompInfo) => {
-      bindCompInfo.forEach((comp) => {
-        if (comp.id === curNode.id) {
-          comp.name = curNode.name;
-        }
-      });
-    });
-  },
-);
-
 // 新增代码块
 const createCodeBlock = async () => {
   const { codeBlockService } = services || {};
@@ -189,23 +167,23 @@ const createCodeBlock = async () => {
   }
   const codeConfig: CodeBlockContent = {
     name: '代码块',
-    content: `() => {\n  // place your code here\n}`,
+    content: `({app, params}) => {\n  // place your code here\n}`,
+    params: [],
   };
-  await codeBlockService.setMode(CodeEditorMode.EDITOR);
   const id = await codeBlockService.getUniqueId();
   await codeBlockService.setCodeDslById(id, codeConfig);
   codeBlockService.setCodeEditorContent(true, id);
 };
 
 // 编辑代码块
-const editCode = async (key: string) => {
-  await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
+const editCode = async (key: Id) => {
   services?.codeBlockService.setCodeEditorContent(true, key);
 };
 
 // 删除代码块
-const deleteCode = (key: string) => {
-  const existBinds = !!(state.bindComps[key]?.length > 0);
+const deleteCode = (key: Id) => {
+  const currentCode = state.codeList.find((codeItem: CodeDslItem) => codeItem.id === key);
+  const existBinds = !isEmpty(currentCode?.combineInfo);
   const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
   if (!existBinds && !undeleteableList.includes(key)) {
     // 无绑定关系，且不在不可删除列表中
@@ -222,7 +200,7 @@ const deleteCode = (key: string) => {
 const filterText = ref('');
 const tree = ref();
 
-const filterNode = (value: string, data: CodeDslList): boolean => {
+const filterNode = (value: string, data: CodeDslItem): boolean => {
   if (!value) {
     return true;
   }
@@ -234,7 +212,7 @@ const filterTextChangeHandler = (val: string) => {
 };
 
 // 展示/隐藏组件绑定关系
-const toggleCombineRelation = (data: CodeDslList) => {
+const toggleCombineRelation = (data: CodeDslItem) => {
   const { id } = data;
   const currentCode = state.codeList.find((item) => item.id === id);
   if (!currentCode) return;
@@ -247,20 +225,9 @@ const getCompName = (compId: Id): string => {
   return node?.name || String(compId);
 };
 
-// todo 功能暂时隐藏
-// 解除绑定
-// const unbind = async (compId: Id, codeId: string) => {
-//   const res = await services?.codeBlockService.unbind(compId, codeId, codeHooks);
-//   if (res) {
-//     ElMessage.success('绑定关系解除成功');
-//   } else {
-//     ElMessage.error('绑定关系解除失败');
-//   }
-// };
-
 // 选中组件
 const selectComp = (compId: Id) => {
-  const stage = services?.editorService.get<StageCore | null>('stage');
+  const stage = services?.editorService.get('stage');
   services?.editorService.select(compId);
   stage?.select(compId);
 };

package/src/layouts/workspace/Breadcrumb.vue

@@ -7,12 +7,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorBreadcrumb">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
-import type { MApp, MNode } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
+import type { MNode } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '../../type';
@@ -20,13 +19,13 @@ import type { Services } from '../../type';
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const node = computed(() => editorService?.get<MNode>('node'));
-const nodes = computed(() => editorService?.get<MNode[]>('nodes') || []);
-const root = computed(() => editorService?.get<MApp>('root'));
+const node = computed(() => editorService?.get('node'));
+const nodes = computed(() => editorService?.get('nodes') || []);
+const root = computed(() => editorService?.get('root'));
 const path = computed(() => getNodePath(node.value?.id || '', root.value?.items || []));
 
 const select = async (node: MNode) => {
   await editorService?.select(node);
-  editorService?.get<StageCore>('stage')?.select(node.id);
+  editorService?.get('stage')?.select(node.id);
 };
 </script>

package/src/layouts/workspace/PageBar.vue

@@ -46,12 +46,12 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPageBar">
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
-import type { MApp, MPage } from '@tmagic/schema';
+import type { MPage } from '@tmagic/schema';
 
 import ToolButton from '../../components/ToolButton.vue';
 import type { Services } from '../../type';
@@ -61,7 +61,7 @@ import PageBarScrollContainer from './PageBarScrollContainer.vue';
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const root = computed(() => editorService?.get<MApp>('root'));
+const root = computed(() => editorService?.get('root'));
 
 const page = computed(() => editorService?.get('page'));
 

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorPageBarScrollContainer">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
@@ -100,7 +100,7 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
-const pageLength = computed(() => editorService?.get<number>('pageLength'));
+const pageLength = computed(() => editorService?.get('pageLength'));
 
 watch(pageLength, (length = 0, preLength = 0) => {
   setTimeout(() => {
@@ -115,9 +115,11 @@ watch(pageLength, (length = 0, preLength = 0) => {
 
 const addPage = () => {
   if (!editorService) return;
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
   const pageConfig = {
     type: NodeType.PAGE,
-    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+    name: generatePageNameByApp(root),
   };
   editorService.add(pageConfig);
 };

package/src/layouts/workspace/Stage.vue

@@ -1,5 +1,5 @@
 <template>
-  <scroll-viewer
+  <ScrollViewer
     class="m-editor-stage"
     ref="stageWrap"
     :width="stageRect?.width"
@@ -7,6 +7,10 @@
     :wrap-width="stageContainerRect?.width"
     :wrap-height="stageContainerRect?.height"
     :zoom="zoom"
+    :correction-scroll-size="{
+      width: 60,
+      height: 50,
+    }"
   >
     <div
       class="m-editor-stage-container"
@@ -16,25 +20,29 @@
       @drop="dropHandler"
       @dragover="dragoverHandler"
     ></div>
-    <teleport to="body">
-      <viewer-menu ref="menu" :is-multi-select="isMultiSelect"></viewer-menu>
-    </teleport>
-  </scroll-viewer>
+    <Teleport to="body">
+      <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+    </Teleport>
+  </ScrollViewer>
 </template>
 
-<script lang="ts" setup>
-import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
+<script lang="ts" setup name="MEditorStage">
+import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '../../components/ScrollViewer.vue';
-import { Layout, Services, StageOptions, StageRect } from '../../type';
+import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '../../type';
 import { useStage } from '../../utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
+defineProps<{
+  stageContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 let stage: StageCore | null = null;
 let runtime: Runtime | null = null;
 
@@ -45,16 +53,17 @@ const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
 const stageContainer = ref<HTMLDivElement>();
 const menu = ref<InstanceType<typeof ViewerMenu>>();
 
-const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
-const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
-const stageContainerRect = computed(() => services?.uiService.get<StageRect>('stageContainerRect'));
-const root = computed(() => services?.editorService.get<MApp>('root'));
-const page = computed(() => services?.editorService.get<MPage>('page'));
-const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
-const node = computed(() => services?.editorService.get<MNode>('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
+const isMultiSelect = computed(() => nodes.value.length > 1);
+const stageRect = computed(() => services?.uiService.get('stageRect'));
+const stageContainerRect = computed(() => services?.uiService.get('stageContainerRect'));
+const root = computed(() => services?.editorService.get('root'));
+const page = computed(() => services?.editorService.get('page'));
+const zoom = computed(() => services?.uiService.get('zoom') || 1);
+const node = computed(() => services?.editorService.get('node'));
 
 watchEffect(() => {
-  if (stage) return;
+  if (stage || !page.value) return;
 
   if (!stageContainer.value) return;
   if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
@@ -88,6 +97,15 @@ watch(root, (root) => {
   }
 });
 
+watch(page, (page) => {
+  if (runtime && page) {
+    runtime.updatePageId?.(page.id);
+    nextTick(() => {
+      stage?.select(page.id);
+    });
+  }
+});
+
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     services?.uiService.set('stageContainerRect', {
@@ -125,7 +143,7 @@ const dropHandler = async (e: DragEvent) => {
   const doc = stage?.renderer.contentWindow?.document;
   const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
 
-  let parent: MContainer | undefined = page.value;
+  let parent: MContainer | undefined | null = page.value;
   if (parentEl) {
     parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
   }

package/src/layouts/workspace/ViewerMenu.vue

@@ -2,12 +2,11 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup>
-import { computed, inject, markRaw, reactive, ref, watch } from 'vue';
-import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
+<script lang="ts" setup name="MEditorViewerMenu">
+import { computed, inject, markRaw, ref, watch } from 'vue';
+import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
-import { MNode, NodeType } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
+import { NodeType } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '../../components/ContentMenu.vue';
@@ -15,7 +14,10 @@ import storageService from '../../services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '../../type';
 import { COPY_STORAGE_KEY } from '../../utils/editor';
 
-const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });
+const props = withDefaults(
+  defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
+  { isMultiSelect: false },
+);
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
@@ -23,14 +25,12 @@ const menu = ref<InstanceType<typeof ContentMenu>>();
 const canPaste = ref(false);
 const canCenter = ref(false);
 
-const node = computed(() => editorService?.get<MNode>('node'));
-const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
+const node = computed(() => editorService?.get('node'));
+const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
-const stage = computed(() => editorService?.get<StageCore>('stage'));
-
-const stageContentMenu = inject<(MenuButton | MenuComponent)[]>('stageContentMenu', []);
+const stage = computed(() => editorService?.get('stage'));
 
-const menuData = reactive<(MenuButton | MenuComponent)[]>([
+const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '水平居中',
@@ -43,7 +43,7 @@ const menuData = reactive<(MenuButton | MenuComponent)[]>([
   {
     type: 'button',
     text: '复制',
-    icon: markRaw(DocumentCopy),
+    icon: markRaw(CopyDocument),
     handler: () => {
       nodes.value && editorService?.copy(nodes.value);
       canPaste.value = true;
@@ -52,6 +52,7 @@ const menuData = reactive<(MenuButton | MenuComponent)[]>([
   {
     type: 'button',
     text: '粘贴',
+    icon: markRaw(DocumentCopy),
     display: () => canPaste.value,
     handler: () => {
       const rect = menu.value?.$el.getBoundingClientRect();
@@ -127,10 +128,10 @@ const menuData = reactive<(MenuButton | MenuComponent)[]>([
     type: 'button',
     text: '清空参考线',
     handler: () => {
-      editorService?.get<StageCore>('stage').clearGuides();
+      editorService?.get('stage')?.clearGuides();
     },
   },
-  ...stageContentMenu,
+  ...props.stageContentMenu,
 ]);
 
 watch(

package/src/layouts/workspace/Workspace.vue

@@ -3,7 +3,7 @@
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
-      <MagicStage :key="page?.id"></MagicStage>
+      <MagicStage v-if="page" :stage-content-menu="stageContentMenu"></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>
@@ -15,23 +15,26 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorWorkspace">
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
-import type { MNode, MPage } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
-import type { Services } from '../../type';
+import type { MenuButton, MenuComponent, Services } from '../../type';
 
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
+defineProps<{
+  stageContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 const services = inject<Services>('services');
 const workspace = ref<HTMLDivElement>();
-const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));
-const page = computed(() => services?.editorService.get<MPage>('page'));
+const nodes = computed(() => services?.editorService.get('nodes'));
+const page = computed(() => services?.editorService.get('page'));
 
 const mouseenterHandler = () => {
   workspace.value?.focus();