From 8271a3b497ac3aadb79364e0eebc912ce7b3304f Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Wed, 16 Nov 2022 12:05:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BB=A3=E7=A0=81=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E6=94=AF=E6=8C=81=E5=85=A8=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/CodeDraftEditor.vue | 17 ++++++++++++++++-
 .../editor/src/components/FunctionEditor.vue  |  1 +
 packages/editor/src/theme/code-block.scss     | 19 ++++++++++++++++---
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/CodeDraftEditor.vue b/packages/editor/src/components/CodeDraftEditor.vue
index 239f18f4..2b9b8cd4 100644
--- a/packages/editor/src/components/CodeDraftEditor.vue
+++ b/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>
diff --git a/packages/editor/src/components/FunctionEditor.vue b/packages/editor/src/components/FunctionEditor.vue
index 4636d001..df6f69af 100644
--- a/packages/editor/src/components/FunctionEditor.vue
+++ b/packages/editor/src/components/FunctionEditor.vue
@@ -46,6 +46,7 @@ const tableConfig = {
   border: true,
   enableFullscreen: false,
   name: 'params',
+  maxHeight: '150px',
   items: [
     {
       type: 'text',
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 9caad5e4..8bb131b9 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/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;
       }
     }
   }