From 32681964b340fc8e68f8b6a6eb420043fd569b78 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 20 Jun 2025 19:47:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20stage=20overlay=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/hooks/use-stage.ts        |  1 +
 .../layouts/workspace/viewer/StageOverlay.vue | 31 +++++++++++++++----
 packages/editor/src/services/stageOverlay.ts  |  2 +-
 packages/editor/src/theme/stage.scss          | 17 ++++------
 packages/editor/src/type.ts                   |  1 +
 5 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts
index ca819019..496032ee 100644
--- a/packages/editor/src/hooks/use-stage.ts
+++ b/packages/editor/src/hooks/use-stage.ts
@@ -45,6 +45,7 @@ export const useStage = (stageOptions: StageOptions) => {
     updateDragEl: stageOptions.updateDragEl,
     guidesOptions: stageOptions.guidesOptions,
     disabledMultiSelect: stageOptions.disabledMultiSelect,
+    disabledRule: stageOptions.disabledRule,
   });
 
   watch(
diff --git a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
index b19a0e41..326a0583 100644
--- a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
+++ b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
@@ -1,9 +1,19 @@
 <template>
-  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay">
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'30'" @click="closeOverlayHandler"
       ><CloseBold
     /></TMagicIcon>
-    <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
+
+    <ScrollViewer
+      class="m-editor-stage"
+      :width="wrapWidth"
+      :height="wrapHeight"
+      :wrap-width="columnWidth.center"
+      :wrap-height="frameworkRect.height"
+      :zoom="zoom"
+    >
+      <div ref="stageOverlay" class="m-editor-stage-container" :style="style"></div>
+    </ScrollViewer>
   </div>
 </template>
 
@@ -13,10 +23,11 @@ import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useServices } from '@editor/hooks/use-services';
 import type { StageOptions } from '@editor/type';
 
-const { stageOverlayService, editorService } = useServices();
+const { stageOverlayService, editorService, uiService } = useServices();
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
@@ -26,10 +37,12 @@ const stageOverlayVisible = computed(() => stageOverlayService.get('stageOverlay
 const wrapWidth = computed(() => stageOverlayService.get('wrapWidth'));
 const wrapHeight = computed(() => stageOverlayService.get('wrapHeight'));
 const stage = computed(() => editorService.get('stage'));
+const zoom = computed(() => uiService.get('zoom'));
+const columnWidth = computed(() => uiService.get('columnWidth'));
+const frameworkRect = computed(() => uiService.get('frameworkRect'));
 
 const style = computed(() => ({
-  width: `${wrapWidth.value}px`,
-  height: `${wrapHeight.value}px`,
+  transform: `scale(${zoom.value})`,
 }));
 
 watch(stage, (stage) => {
@@ -43,6 +56,12 @@ watch(stage, (stage) => {
   }
 });
 
+watch(zoom, (zoom) => {
+  const stage = stageOverlayService.get('stage');
+  if (!stage || !zoom) return;
+  stage.setZoom(zoom);
+});
+
 watch(stageOverlayEl, (stageOverlay) => {
   const subStage = stageOverlayService.createStage(stageOptions);
   stageOverlayService.set('stage', subStage);
diff --git a/packages/editor/src/services/stageOverlay.ts b/packages/editor/src/services/stageOverlay.ts
index 55182b08..1156d8d3 100644
--- a/packages/editor/src/services/stageOverlay.ts
+++ b/packages/editor/src/services/stageOverlay.ts
@@ -97,9 +97,9 @@ class StageOverlay extends BaseService {
   public createStage(stageOptions: StageOptions = {}) {
     return useStage({
       ...stageOptions,
-      zoom: 1,
       runtimeUrl: '',
       autoScrollIntoView: false,
+      disabledRule: true,
       render: async (stage: StageCore) => {
         this.copyDocumentElement();
 
diff --git a/packages/editor/src/theme/stage.scss b/packages/editor/src/theme/stage.scss
index aabd0c0a..d8f4c866 100644
--- a/packages/editor/src/theme/stage.scss
+++ b/packages/editor/src/theme/stage.scss
@@ -35,22 +35,15 @@
   width: 100%;
   height: 100%;
   background-color: #fff;
-  display: flex;
   z-index: 20;
-  overflow: auto;
-}
-
-.m-editor-stage-overlay-container {
-  position: relative;
-  flex-shrink: 0;
-  margin: auto;
-  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 }
 
 .m-editor-stage-overlay-close.tmagic-design-icon {
   position: fixed;
   right: 20px;
   top: 10px;
+  cursor: pointer;
+  z-index: 1;
 }
 
 .m-editor-stage-float-button {
@@ -66,8 +59,10 @@
   background-color: #ffffff;
   transition: background-color 0.2s;
   color: rgba(0, 0, 0, 0.88);
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 .m-editor-node-list-menu {
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 7e88c9d0..e97f3c46 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -164,6 +164,7 @@ export interface StageOptions {
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  disabledRule?: boolean;
   zoom?: number;
 }