From 5fc649607aa4ac522b0d783973104fec39bf5021 Mon Sep 17 00:00:00 2001
From: moonszhang <moonszhang@tencent.com>
Date: Tue, 12 Mar 2024 16:06:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D=E9=AB=98?=
 =?UTF-8?q?=E7=BA=A7=E4=B8=AD=E6=89=93=E5=BC=80=E4=BB=A3=E7=A0=81=E5=9D=97?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89floatbox=E5=B5=8C=E5=A5=97=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=8Cfloatbox=E6=94=AF=E6=8C=81beforeClose?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/CodeBlockEditor.vue | 76 +++++++++++++------
 .../editor/src/components/FloatingBox.vue     | 33 ++++++--
 .../sidebar/code-block/CodeBlockListPanel.vue | 66 ++++------------
 3 files changed, 91 insertions(+), 84 deletions(-)

diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index f99922b7..59869f78 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -1,25 +1,33 @@
 <template>
-  <MFormBox
-    class="m-editor-code-block-editor"
-    ref="fomDrawer"
-    label-width="80px"
-    :close-on-press-escape="false"
-    :title="content.name"
-    :width="size"
-    :config="functionConfig"
-    :values="content"
-    :disabled="disabled"
-    :before-close="beforeClose"
-    @change="changeHandler"
-    @submit="submitForm"
-    @error="errorHandler"
-    @open="openHandler"
-    @closed="closedHandler"
-  >
-    <template #left>
-      <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+  <!-- 代码块编辑区 -->
+  <FloatingBox v-model:visible="boxVisible" title="代码编辑" :position="boxPosition" :before-close="beforeClose">
+    <template #body>
+      <div ref="floatingBoxBody"></div>
     </template>
-  </MFormBox>
+  </FloatingBox>
+
+  <Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible">
+    <MFormBox
+      class="m-editor-code-block-editor"
+      ref="fomDrawer"
+      label-width="80px"
+      :close-on-press-escape="false"
+      :title="content.name"
+      :width="size"
+      :config="functionConfig"
+      :values="content"
+      :disabled="disabled"
+      @change="changeHandler"
+      @submit="submitForm"
+      @error="errorHandler"
+      @open="openHandler"
+      @closed="closedHandler"
+    >
+      <template #left>
+        <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+      </template>
+    </MFormBox>
+  </Teleport>
 
   <TMagicDialog v-model="difVisible" title="查看修改" fullscreen>
     <div style="display: flex; margin-bottom: 10px">
@@ -47,14 +55,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services } from '@editor/type';
+import type { Services, SlideType } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 defineOptions({
@@ -66,6 +75,7 @@ const props = defineProps<{
   disabled?: boolean;
   isDataSource?: boolean;
   dataSourceType?: string;
+  slideType?: SlideType;
 }>();
 
 const emit = defineEmits<{
@@ -246,7 +256,7 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
       done();
     })
     .catch((action: string) => {
-      done(action === 'close');
+      done(action === 'cancel');
     });
 };
 
@@ -254,8 +264,26 @@ const closedHandler = () => {
   changedValue.value = undefined;
 };
 
+const boxVisible = ref<boolean>(false);
+const editVisible = ref<boolean>(false);
+const floatingBoxBody = ref<HTMLDivElement>();
+
+const boxPosition = computed(() => {
+  const columnWidth = services?.uiService?.get('columnWidth');
+  const navMenuRect = services?.uiService?.get('navMenuRect');
+  return {
+    left: columnWidth?.left ?? 0,
+    top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+  };
+});
+
 defineExpose({
-  show() {
+  async show() {
+    if (props.slideType !== 'box') {
+      boxVisible.value = true;
+    }
+    await nextTick();
+    editVisible.value = true;
     fomDrawer.value?.show();
   },
 
diff --git a/packages/editor/src/components/FloatingBox.vue b/packages/editor/src/components/FloatingBox.vue
index ba1cf007..55f7b3a9 100644
--- a/packages/editor/src/components/FloatingBox.vue
+++ b/packages/editor/src/components/FloatingBox.vue
@@ -33,12 +33,21 @@ interface Rect {
   height: number | string;
 }
 
-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 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 emit = defineEmits<{
   'update:visible': [boolean];
@@ -112,8 +121,18 @@ onBeforeUnmount(() => {
   destroyMoveable();
 });
 
+const hide = (cancel?: boolean) => {
+  if (cancel !== false) {
+    emit('update:visible', false);
+  }
+};
+
 const closeHandler = () => {
-  emit('update:visible', false);
+  if (typeof props.beforeClose === 'function') {
+    props.beforeClose(hide);
+  } else {
+    hide();
+  }
 };
 
 const nextZIndex = () => {
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
index 5b271e54..951fa812 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
@@ -3,7 +3,7 @@
     <slot name="code-block-panel-header">
       <div class="search-wrapper">
         <SearchInput @search="filterTextChangeHandler"></SearchInput>
-        <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="showCreate"
+        <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="createCodeBlock"
           >新增</TMagicButton
         >
         <slot name="code-block-panel-search"></slot>
@@ -11,39 +11,30 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <CodeBlockList ref="codeBlockList" :custom-error="customError" @edit="showEdit" @remove="deleteCode">
+    <CodeBlockList ref="codeBlockList" :custom-error="customError" @edit="editCode" @remove="deleteCode">
       <template #code-block-panel-tool="{ id, data }">
         <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
       </template>
     </CodeBlockList>
   </TMagicScrollbar>
 
-  <!-- 代码块编辑区 -->
-  <FloatingBox v-model:visible="popVisible" title="代码编辑" :position="boxPosition">
-    <template #body>
-      <div ref="scrollBar"></div>
-    </template>
-  </FloatingBox>
-
-  <Teleport :to="scrollBar" :disabled="slideType === 'box'" v-if="editVisible">
-    <CodeBlockEditor
-      v-if="codeConfig"
-      ref="codeBlockEditor"
-      :disabled="!editable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
-  </Teleport>
+  <CodeBlockEditor
+    v-if="codeConfig"
+    ref="codeBlockEditor"
+    :disabled="!editable"
+    :content="codeConfig"
+    :slideType="slideType"
+    @submit="submitCodeBlockHandler"
+  ></CodeBlockEditor>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import FloatingBox from '@editor/components/FloatingBox.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
 import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services, SlideType } from '@editor/type';
@@ -56,12 +47,12 @@ defineOptions({
   name: 'MEditorCodeBlockListPanel',
 });
 
-const props = defineProps<{
+defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
   slideType?: SlideType;
 }>();
 
-const { codeBlockService, uiService } = inject<Services>('services') || {};
+const { codeBlockService } = inject<Services>('services') || {};
 
 const editable = computed(() => codeBlockService?.getEditStatus());
 
@@ -73,35 +64,4 @@ const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
 const filterTextChangeHandler = (val: string) => {
   codeBlockList.value?.filter(val);
 };
-
-const boxPosition = computed(() => {
-  const columnWidth = uiService?.get('columnWidth');
-  const navMenuRect = uiService?.get('navMenuRect');
-  return {
-    left: columnWidth?.left ?? 0,
-    top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
-  };
-});
-
-const scrollBar = ref<HTMLDivElement>();
-const popVisible = ref<boolean>(false);
-const editVisible = ref<boolean>(false);
-
-const beforeShowEdit = async () => {
-  if (props.slideType !== 'box') {
-    popVisible.value = true;
-  }
-  await nextTick();
-  editVisible.value = true;
-};
-
-const showEdit = async (id: string) => {
-  await beforeShowEdit();
-  editCode(id);
-};
-
-const showCreate = async () => {
-  await beforeShowEdit();
-  createCodeBlock();
-};
 </script>