From f1242ee3f46ca2ba7df2c88033772680f74aaf9e Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Tue, 6 Sep 2022 17:37:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BB=A3=E7=A0=81=E5=9D=97?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=8C=BA=E6=94=B9=E4=B8=BA=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97,=E4=BB=A3=E7=A0=81=E5=9D=97slot=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                |  3 -
 packages/editor/src/layouts/PropsPanel.vue    |  5 --
 .../editor/src/layouts/sidebar/TabPane.vue    |  5 ++
 .../sidebar/code-block/CodeBlockEditor.vue    | 86 +++++++------------
 .../sidebar/code-block/CodeBlockList.vue      |  5 ++
 packages/editor/src/theme/code-block.scss     | 25 +-----
 6 files changed, 43 insertions(+), 86 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 33854800..b1722111 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -47,9 +47,6 @@
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
-          <template #props-panel-code-block>
-            <slot name="props-panel-code-block"></slot>
-          </template>
         </props-panel>
       </slot>
     </template>
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index a265621b..5184a505 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="m-editor-props-panel">
     <slot name="props-panel-header"></slot>
-    <slot name="props-panel-code-block">
-      <code-block-editor />
-    </slot>
     <m-form
       ref="configForm"
       :class="`m-editor-props-panel ${propsPanelSize}`"
@@ -26,8 +23,6 @@ import type StageCore from '@tmagic/stage';
 
 import type { Services } from '../type';
 
-import CodeBlockEditor from './sidebar/code-block/CodeBlockEditor.vue';
-
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();
diff --git a/packages/editor/src/layouts/sidebar/TabPane.vue b/packages/editor/src/layouts/sidebar/TabPane.vue
index 73dd2633..b40c92f0 100644
--- a/packages/editor/src/layouts/sidebar/TabPane.vue
+++ b/packages/editor/src/layouts/sidebar/TabPane.vue
@@ -30,6 +30,11 @@
         <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
       </template>
 
+      <template #code-block-panel-header v-if="data === 'code-block' || config.slots?.codeBlockPanelHeader">
+        <slot v-if="data === 'code-block'" name="code-block-panel-header"></slot>
+        <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
+      </template>
+
       <template
         #layer-node-content="{ data: nodeData, node }"
         v-if="data === 'layer' || config.slots?.layerNodeContent"
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 162eea48..8e67ce92 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -1,51 +1,44 @@
 <template>
-  <div ref="codeBlockEditor" class="m-editor-code-block-editor-panel" v-if="state.isShowCodeBlockEditor">
-    <div class="header">
-      <h3 class="title">代码块编辑面板</h3>
-      <el-button class="close-btn" circle :icon="Close" type="danger" bg :text="false" @click="closePanel"></el-button>
-    </div>
-    <el-row :gutter="20" class="code-name-wrapper">
-      <el-col :span="6">
-        <span>代码块名称</span>
-      </el-col>
-      <el-col :span="6">
-        <el-input size="small" v-model="state.codeConfig.name" />
-      </el-col>
-    </el-row>
-    <div class="m-editor-content" :class="isFullScreen ? 'fullScreen' : 'normal'">
-      <magic-code-editor
-        ref="codeEditor"
-        class="m-editor-content"
-        :init-values="state.codeConfig.content"
-        @save="saveCode"
-        :options="{
-          tabSize: 2,
-          fontSize: 16,
-          formatOnPaste: true,
-        }"
-      ></magic-code-editor>
-      <div class="m-editor-content-bottom clearfix">
-        <el-button type="primary" class="button" @click="toggleFullScreen">
-          {{ isFullScreen ? '退出全屏' : '全屏' }}
-        </el-button>
-        <el-button type="primary" class="button" @click="saveCode">保存</el-button>
+  <el-dialog v-model="state.isShowCodeBlockEditor" title="代码块编辑面板" :fullscreen="true">
+    <div ref="codeBlockEditor" class="m-editor-code-block-editor-panel">
+      <el-row class="code-name-wrapper" justify="start">
+        <el-col :span="2">
+          <span>代码块名称</span>
+        </el-col>
+        <el-col :span="6">
+          <el-input size="small" v-model="state.codeConfig.name" />
+        </el-col>
+      </el-row>
+      <div class="m-editor-content">
+        <magic-code-editor
+          ref="codeEditor"
+          class="m-editor-content"
+          :init-values="state.codeConfig.content"
+          @save="saveCode"
+          :options="{
+            tabSize: 2,
+            fontSize: 16,
+            formatOnPaste: true,
+          }"
+        ></magic-code-editor>
+        <div class="m-editor-content-bottom clearfix">
+          <el-button type="primary" class="button" @click="saveCode">保存</el-button>
+          <el-button type="primary" class="button" @click="saveAndClose">保存并关闭</el-button>
+        </div>
       </div>
     </div>
-  </div>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
 import { inject, ref, watchEffect } from 'vue';
-import { Close } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
-import type { Services } from '../type';
+import type { Services } from '../../../type';
 
 import useCodeBlock from './useCodeBlock';
 
 const { state, closePanel } = useCodeBlock();
-let parentElement: HTMLElement | null = null;
-const isFullScreen = ref(false);
 const codeBlockEditor = ref<HTMLElement | null>(null);
 const codeEditor = ref<any | null>(null);
 const services = inject<Services>('services');
@@ -55,28 +48,13 @@ watchEffect(() => {
     if (!codeBlockEditor.value) {
       return;
     }
-    parentElement = codeBlockEditor.value.parentElement;
   }
 });
 
-// 切换全屏
-const toggleFullScreen = () => {
-  isFullScreen.value = !isFullScreen.value;
-
-  if (!codeBlockEditor.value) return;
-  if (isFullScreen.value) {
-    globalThis.document.body.appendChild(codeBlockEditor.value);
-  } else if (parentElement) {
-    parentElement.appendChild(codeBlockEditor.value);
-  } else {
-    codeBlockEditor.value.remove();
-  }
-
-  setTimeout(() => {
-    if (!codeEditor.value) return;
-    codeEditor.value.focus();
-    codeEditor.value.getEditor().layout();
-  });
+// 保存并关闭
+const saveAndClose = () => {
+  saveCode();
+  closePanel();
 };
 
 // 保存代码
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index da1f2dad..54bd21eb 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="m-editor-code-block-list">
+    <slot name="code-block-panel-header"></slot>
     <div class="create-code-button">
       <el-button type="primary" size="small" @click="createCodeBlock">新增代码块</el-button>
     </div>
@@ -7,10 +8,14 @@
 
     <!-- 代码块列表 -->
     <div class="list-container"></div>
+
+    <!-- 代码块编辑区 -->
+    <code-block-editor />
   </div>
 </template>
 
 <script lang="ts" setup>
+import codeBlockEditor from './CodeBlockEditor.vue';
 import useCodeBlock from './useCodeBlock';
 const { createCodeBlock } = useCodeBlock();
 </script>
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index bd9a5e29..9db3faaa 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -19,35 +19,12 @@
   z-index: 10;
   background: #fff;
 
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 20px;
-    h3.title {
-      font-size: 16px;
-      font-weight: bold;
-    }
-  }
-  .close-btn {
-    background: rgb(213, 71, 71);
-    color: #fff;
-  }
   .code-name-wrapper {
     padding: 10px 20px;
     display: flex;
     align-items: center;
   }
-  .m-editor-content {
-    &.fullScreen {
-      height: 100%;
-      width: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 100;
-    }
-  }
+
   .m-editor-content-bottom {
     text-align: right;
     padding-right: 20px;