feat(editor): 代码编辑支持全屏

packages/editor/src/components/CodeDraftEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-wrapper">
+  <div class="m-editor-wrapper" :class="isFullScreen ? 'fullScreen' : 'normal'">
     <magic-code-editor
       ref="codeEditor"
       class="m-editor-container"
@@ -9,10 +9,16 @@
       :options="codeOptions"
     ></magic-code-editor>
     <div class="m-editor-content-bottom" v-if="editable">
+      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
+        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
+      >
       <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
       <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
     </div>
     <div class="m-editor-content-bottom" v-else>
+      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
+        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
+      >
       <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
     </div>
   </div>
@@ -57,6 +63,7 @@ const editorContent = ref<string>('');
 const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
 // 原始代码内容
 const originCodeContent = ref<string>('');
+const isFullScreen = ref<boolean>(false);
 
 const codeOptions = computed(() => ({
   ...props.codeOptions,
@@ -127,4 +134,12 @@ const close = async () => {
     emit('close');
   }
 };
+
+// 切换全屏
+const toggleFullScreen = () => {
+  isFullScreen.value = !isFullScreen.value;
+  if (codeEditor.value) {
+    codeEditor.value.focus();
+  }
+};
 </script>

packages/editor/src/components/FunctionEditor.vue

@@ -46,6 +46,7 @@ const tableConfig = {
   border: true,
   enableFullscreen: false,
   name: 'params',
+  maxHeight: '150px',
   items: [
     {
       type: 'text',

packages/editor/src/theme/code-block.scss

@@ -78,6 +78,11 @@
 .m-fields-code-select {
   width: 100%;
 }
+
+.el-dialog.is-fullscreen.code-editor-dialog {
+  overflow: hidden;
+}
+
 .code-editor-dialog {
   .el-dialog__body {
     height: 90%;
@@ -149,7 +154,7 @@
     position: absolute;
     top: 0;
     left: 4px;
-    width: 100%;
+    width: calc(100% - 9px);
     height: 100%;
     z-index: 10;
     background: #fff;
@@ -160,8 +165,16 @@
 
   .m-editor-wrapper {
     height: 100%;
+    &.fullScreen {
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 100;
+    }
     .m-editor-container {
-      height: calc(100% - 65px);
+      height: calc(100% - 45px);
     }
     .m-editor-content-bottom {
       height: 45px;
@@ -174,7 +187,7 @@
       bottom: 0;
       > button {
         height: 30px;
-        margin-top: 15px;
+        margin-top: 5px;
       }
     }
   }