From cae928f7f90a3e2d52b866400ab5ce46da90cec6 Mon Sep 17 00:00:00 2001
From: moonszhang <moonszhang@tencent.com>
Date: Tue, 12 Mar 2024 19:54:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D=E7=82=B9?=
 =?UTF-8?q?=E5=87=BBfloatbox=E6=97=B6=E6=9B=B4=E6=96=B0zindex=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E5=AE=BD=E9=AB=98=E8=A2=AB=E9=87=8D=E7=BD=AE=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/FloatingBox.vue     | 56 +++++++++----------
 packages/form/src/theme/form-box.scss         |  2 +-
 2 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/packages/editor/src/components/FloatingBox.vue b/packages/editor/src/components/FloatingBox.vue
index 55f7b3a9..384e61b4 100644
--- a/packages/editor/src/components/FloatingBox.vue
+++ b/packages/editor/src/components/FloatingBox.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body" v-if="visible">
-    <div ref="target" class="m-editor-float-box" :style="style" @mousedown="nextZIndex">
+    <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
       <div ref="dragTarget" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
@@ -33,21 +33,12 @@ interface Rect {
   height: number | string;
 }
 
-const props = withDefaults(
-  defineProps<{
-    visible: boolean;
-    position?: Position;
-    rect?: Rect;
-    title?: string;
-    beforeClose?: (done: (cancel?: boolean) => void) => void;
-  }>(),
-  {
-    visible: false,
-    title: '',
-    position: () => ({ left: 0, top: 0 }),
-    rect: () => ({ width: 'auto', height: 'auto' }),
-  },
-);
+const props = withDefaults(defineProps<{ visible: boolean; position?: Position; rect?: Rect; title?: string }>(), {
+  visible: false,
+  title: '',
+  position: () => ({ left: 0, top: 0 }),
+  rect: () => ({ width: 'auto', height: 'auto' }),
+});
 
 const emit = defineEmits<{
   'update:visible': [boolean];
@@ -59,12 +50,23 @@ const dragTarget = ref<HTMLDivElement>();
 const zIndex = useZIndex();
 const curZIndex = ref<number>(zIndex.nextZIndex());
 
+const rect = ref({
+  width: props.rect.width,
+  height: props.rect.height,
+});
+
+watchEffect(() => {
+  rect.value = {
+    width: props.rect.width,
+    height: props.rect.height,
+  };
+});
+
 const style = computed(() => ({
   left: `${props.position.left}px`,
   top: `${props.position.top}px`,
-  width: typeof props.rect.width === 'string' ? props.rect.width : `${props.rect.width}px`,
-  height: typeof props.rect.height === 'string' ? props.rect.height : `${props.rect.height}px`,
-  zIndex: curZIndex.value,
+  width: typeof rect.value.width === 'string' ? rect.value.width : `${rect.value.width}px`,
+  height: typeof rect.value.height === 'string' ? rect.value.height : `${rect.value.height}px`,
 }));
 
 let moveable: VanillaMoveable | null = null;
@@ -91,6 +93,8 @@ const initMoveable = () => {
   });
 
   moveable.on('resize', (e) => {
+    rect.value.width = e.width;
+    rect.value.height = e.height;
     e.target.style.width = `${e.width}px`;
     e.target.style.height = `${e.height}px`;
     e.target.style.transform = e.drag.transform;
@@ -121,18 +125,8 @@ onBeforeUnmount(() => {
   destroyMoveable();
 });
 
-const hide = (cancel?: boolean) => {
-  if (cancel !== false) {
-    emit('update:visible', false);
-  }
-};
-
 const closeHandler = () => {
-  if (typeof props.beforeClose === 'function') {
-    props.beforeClose(hide);
-  } else {
-    hide();
-  }
+  emit('update:visible', false);
 };
 
 const nextZIndex = () => {
diff --git a/packages/form/src/theme/form-box.scss b/packages/form/src/theme/form-box.scss
index 10413cb9..392552c9 100644
--- a/packages/form/src/theme/form-box.scss
+++ b/packages/form/src/theme/form-box.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   padding: 16px;
-  max-width: 90%;
+  box-sizing: border-box;
   .el-box__header {
     margin: 0;
   }