From c2e8a1caae210993366e1234613fc78e606ce36b Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 4 Nov 2022 19:19:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20content-menu=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                | 20 +++++++++----------
 .../editor/src/layouts/sidebar/LayerMenu.vue  | 10 ++++++----
 .../editor/src/layouts/sidebar/LayerPanel.vue | 12 +++++++----
 .../editor/src/layouts/sidebar/Sidebar.vue    |  6 +++++-
 .../editor/src/layouts/workspace/Stage.vue    |  8 ++++++--
 .../src/layouts/workspace/ViewerMenu.vue      | 13 ++++++------
 .../src/layouts/workspace/Workspace.vue       |  8 ++++++--
 .../unit/layouts/workspace/Stage.spec.ts      |  2 +-
 8 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 8bcdbb93..55e5a20e 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -1,12 +1,12 @@
 <template>
-  <framework :code-options="codeOptions">
+  <Framework :code-options="codeOptions">
     <template #nav>
-      <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
+      <slot name="nav" :editorService="editorService"><NavMenu :data="menu"></NavMenu></slot>
     </template>
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <sidebar :data="sidebar">
+        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>
@@ -34,33 +34,33 @@
           <template #code-block-edit-panel-header="{ id }">
             <slot name="code-block-edit-panel-header" :id="id"></slot>
           </template>
-        </sidebar>
+        </Sidebar>
       </slot>
     </template>
 
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
-        <workspace>
+        <Workspace :stage-content-menu="stageContentMenu">
           <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>
+        </Workspace>
       </slot>
     </template>
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
+        <PropsPanel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
-        </props-panel>
+        </PropsPanel>
       </slot>
     </template>
 
     <template #empty><slot name="empty" :editorService="editorService"></slot></template>
-  </framework>
+  </Framework>
 </template>
 
 <script lang="ts">
@@ -319,8 +319,6 @@ export default defineComponent({
 
     provide('services', services);
 
-    provide('layerContentMenu', props.layerContentMenu);
-    provide('stageContentMenu', props.stageContentMenu);
     provide(
       'stageOptions',
       reactive({
diff --git a/packages/editor/src/layouts/sidebar/LayerMenu.vue b/packages/editor/src/layouts/sidebar/LayerMenu.vue
index 14696ad6..d2c26b67 100644
--- a/packages/editor/src/layouts/sidebar/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/LayerMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
+  <ContentMenu :menu-data="menuData" ref="menu" style="overflow: initial"></ContentMenu>
 </template>
 
 <script lang="ts" setup name="MEditorLayerMenu">
@@ -11,6 +11,10 @@ import { NodeType } from '@tmagic/schema';
 import ContentMenu from '../../components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
 
+const props = defineProps<{
+  layerContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const node = computed(() => services?.editorService.get('node'));
@@ -18,8 +22,6 @@ const isRoot = computed(() => node.value?.type === NodeType.ROOT);
 const isPage = computed(() => node.value?.type === NodeType.PAGE);
 const componentList = computed(() => services?.componentListService.getList() || []);
 
-const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
-
 const createMenuItems = (group: ComponentGroup): MenuButton[] =>
   group.items.map((component) => ({
     text: component.text,
@@ -97,7 +99,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
       node.value && services?.editorService.remove(node.value);
     },
   },
-  ...layerContentMenu,
+  ...props.layerContentMenu,
 ]);
 
 const show = (e: MouseEvent) => {
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index db2606c2..74ca6d98 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -59,9 +59,9 @@
       </template>
     </TMagicTree>
 
-    <teleport to="body">
-      <layer-menu ref="menu"></layer-menu>
-    </teleport>
+    <Teleport to="body">
+      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
+    </Teleport>
   </TMagicScrollbar>
 </template>
 
@@ -76,11 +76,15 @@ import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
-import type { Services } from '../../type';
+import type { MenuButton, MenuComponent, Services } from '../../type';
 import { Layout } from '../../type';
 
 import LayerMenu from './LayerMenu.vue';
 
+defineProps<{
+  layerContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 const throttleTime = 150;
 const services = inject<Services>('services');
 const tree = ref<InstanceType<typeof TMagicTree>>();
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index b6e6af12..459f49d0 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -85,7 +85,7 @@ import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 import { getConfig, TMagicTabs } from '@tmagic/design';
 
 import MIcon from '../../components/Icon.vue';
-import type { SideComponent, SideItem } from '../../type';
+import type { MenuButton, MenuComponent, SideComponent, SideItem } from '../../type';
 import { SideBarData } from '../../type';
 
 import CodeBlockList from './code-block/CodeBlockList.vue';
@@ -95,6 +95,7 @@ import LayerPanel from './LayerPanel.vue';
 const props = withDefaults(
   defineProps<{
     data?: SideBarData;
+    layerContentMenu: (MenuButton | MenuComponent)[];
   }>(),
   {
     data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
@@ -120,6 +121,9 @@ const getItemConfig = (data: SideItem): SideComponent => {
       type: 'component',
       icon: Files,
       text: '已选组件',
+      props: {
+        layerContentMenu: props.layerContentMenu,
+      },
       component: LayerPanel,
       slots: {},
     },
diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index 73abdd8b..5069fcff 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -17,7 +17,7 @@
       @dragover="dragoverHandler"
     ></div>
     <teleport to="body">
-      <viewer-menu ref="menu" :is-multi-select="isMultiSelect"></viewer-menu>
+      <viewer-menu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></viewer-menu>
     </teleport>
   </scroll-viewer>
 </template>
@@ -30,11 +30,15 @@ import type { MApp, MContainer, MNode, MPage } 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, StageRect } 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;
 
diff --git a/packages/editor/src/layouts/workspace/ViewerMenu.vue b/packages/editor/src/layouts/workspace/ViewerMenu.vue
index 53fcb0ec..ea899df4 100644
--- a/packages/editor/src/layouts/workspace/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup name="MEditorViewerMenu">
-import { computed, inject, markRaw, reactive, ref, watch } from 'vue';
+import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { MNode, NodeType } from '@tmagic/schema';
@@ -15,7 +15,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;
@@ -28,9 +31,7 @@ const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
 const parent = computed(() => editorService?.get('parent'));
 const stage = computed(() => editorService?.get<StageCore>('stage'));
 
-const stageContentMenu = inject<(MenuButton | MenuComponent)[]>('stageContentMenu', []);
-
-const menuData = reactive<(MenuButton | MenuComponent)[]>([
+const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '水平居中',
@@ -130,7 +131,7 @@ const menuData = reactive<(MenuButton | MenuComponent)[]>([
       editorService?.get<StageCore>('stage').clearGuides();
     },
   },
-  ...stageContentMenu,
+  ...props.stageContentMenu,
 ]);
 
 watch(
diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue
index d196cd71..361cb8ba 100644
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@@ -3,7 +3,7 @@
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
-      <MagicStage :key="page?.id"></MagicStage>
+      <MagicStage :key="page?.id" :stage-content-menu="stageContentMenu"></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>
@@ -22,12 +22,16 @@ 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'));
diff --git a/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts b/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts
index f8a8975d..7a81805c 100644
--- a/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts
+++ b/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts
@@ -60,7 +60,7 @@ describe('Stage.vue', () => {
         type: NodeType.ROOT,
         items: [page],
       },
-
+      stageContentMenu: [],
       page,
       node: page,
       uiSelectMode: false,