feat(editor): 代码块编辑区改为使用弹窗,代码块slot完善

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>

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();

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"

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();
 };
 
 // 保存代码

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>

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;