fix(editor): 样式修改,editor pannel使用resize组件

Tencent · Sep 22, 2022 · c2637b1 · c2637b1
1 parent 27d8640
commit c2637b1
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 62 deletions.
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-fields-code-select" :key="fieldKey">
-    <el-card>
+    <el-card shadow="never">
       <template #header>
         <m-fields-select
           :config="selectConfig"

diff --git a/packages/editor/src/layouts/Layout.vue b/packages/editor/src/layouts/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="el">
+  <div ref="el" class="m-editor-layout">
     <template v-if="typeof props.left !== 'undefined'">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>

diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -1,14 +1,15 @@
 <template>
   <el-dialog
     v-model="isShowCodeBlockEditor"
+    :title="currentTitle"
     :fullscreen="true"
     :before-close="saveAndClose"
     :append-to-body="true"
     custom-class="code-editor-dialog"
   >
-    <!-- 左侧列表 -->
-    <template v-if="mode === EditorMode.LIST">
-      <el-card class="code-editor-side-menu">
+    <layout v-model:left="left" :min-left="45" class="code-editor-layout">
+      <!-- 左侧列表 -->
+      <template #left v-if="mode === EditorMode.LIST">
         <el-tree
           v-if="!isEmpty(state.codeList)"
           ref="tree"
@@ -28,46 +29,50 @@
             </div>
           </template>
         </el-tree>
-      </el-card>
-    </template>
-    <!-- 右侧区域 -->
-    <div
-      v-if="!isEmpty(codeConfig)"
-      :class="[
-        mode === EditorMode.LIST ? 'm-editor-code-block-editor-panel-list-mode' : 'm-editor-code-block-editor-panel',
-      ]"
-    >
-      <slot name="code-block-edit-panel-header" :id="id"></slot>
-      <el-card shadow="never">
-        <template #header>
-          <div class="code-name-wrapper">
-            <div class="code-name-label">代码块名称</div>
-            <el-input class="code-name-input" v-model="codeConfig.name" :disabled="!editable" />
-          </div>
-        </template>
-        <div class="m-editor-wrapper">
-          <magic-code-editor
-            ref="codeEditor"
-            class="m-editor-container"
-            :init-values="`${codeConfig.content}`"
-            @save="saveCode"
-            :options="{
-              tabSize: 2,
-              fontSize: 16,
-              formatOnPaste: true,
-              readOnly: !editable,
-            }"
-          ></magic-code-editor>
-          <div class="m-editor-content-bottom" v-if="editable">
-            <el-button type="primary" class="button" @click="saveCode">保存</el-button>
-            <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
-          </div>
-          <div class="m-editor-content-bottom" v-else>
-            <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
-          </div>
+      </template>
+      <!-- 右侧区域 -->
+      <template #center>
+        <div
+          v-if="!isEmpty(codeConfig)"
+          :class="[
+            mode === EditorMode.LIST
+              ? 'm-editor-code-block-editor-panel-list-mode'
+              : 'm-editor-code-block-editor-panel',
+          ]"
+        >
+          <slot name="code-block-edit-panel-header" :id="id"></slot>
+          <el-card shadow="never">
+            <template #header>
+              <div class="code-name-wrapper">
+                <div class="code-name-label">代码块名称</div>
+                <el-input class="code-name-input" v-model="codeConfig.name" :disabled="!editable" />
+              </div>
+            </template>
+            <div class="m-editor-wrapper">
+              <magic-code-editor
+                ref="codeEditor"
+                class="m-editor-container"
+                :init-values="`${codeConfig.content}`"
+                @save="saveCode"
+                :options="{
+                  tabSize: 2,
+                  fontSize: 16,
+                  formatOnPaste: true,
+                  readOnly: !editable,
+                }"
+              ></magic-code-editor>
+              <div class="m-editor-content-bottom" v-if="editable">
+                <el-button type="primary" class="button" @click="saveCode">保存</el-button>
+                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+              </div>
+              <div class="m-editor-content-bottom" v-else>
+                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+              </div>
+            </div>
+          </el-card>
         </div>
-      </el-card>
-    </div>
+      </template>
+    </layout>
   </el-dialog>
 </template>
 
@@ -78,10 +83,13 @@ import { forIn, isEmpty } from 'lodash-es';
 
 import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
 import { EditorMode } from '../../../type';
+import Layout from '../../Layout.vue';
 
 const services = inject<Services>('services');
 
 const codeEditor = ref<any | null>(null);
+const left = ref(200);
+const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容
 const codeConfig = ref<CodeBlockContent | null>(null);
 // select选择的内容(ListState)
@@ -114,6 +122,7 @@ watchEffect(async () => {
       content: value.content,
     });
   });
+  currentTitle.value = state.codeList[0]?.name || '';
 });
 
 // 保存代码
@@ -148,5 +157,6 @@ const saveAndClose = async () => {
 
 const selectHandler = (data: CodeDslList) => {
   services?.codeBlockService.setId(data.id);
+  currentTitle.value = data.name;
 };
 </script>
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
@@ -69,6 +69,7 @@
 .code-editor-dialog {
   .el-dialog__body {
     height: 90%;
+    padding-top: 10px;
   }
   .el-card {
     height: 100%;
@@ -79,19 +80,18 @@
     }
   }
 
-  .code-editor-side-menu {
-    width: 20%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #fff;
+  .code-editor-layout {
+    height: 100%;
+    border: 1px solid #e4e7ed;
 
     .side-tree {
-      margin-top: 10px;
+      height: 100%;
+      overflow: auto;
+
       .list-container {
         width: 100%;
         overflow: hidden;
-        margin-left: -20px;
+        margin-left: -10px;
         .list-item {
           width: 100%;
           margin: 10px 0;
@@ -121,13 +121,12 @@
   }
 
   .m-editor-code-block-editor-panel-list-mode {
-    position: absolute;
-    top: 0;
-    left: 20%;
-    width: 80%;
     height: 100%;
     z-index: 10;
     background: #fff;
+    .el-card {
+      border: 0;
+    }
   }
 
   .m-editor-code-block-editor-panel {
@@ -146,15 +145,10 @@
       height: 100%;
     }
     .m-editor-content-bottom {
-      text-align: right;
       height: 40px;
-      padding-right: 20px;
-      position: absolute;
-      width: calc(100% - 30px);
+      width: 100%;
       display: flex;
       justify-content: end;
-      bottom: 20px;
-      right: 0;
       background: #fff;
       > button {
         height: 30px;

diff --git a/packages/editor/src/theme/index.scss b/packages/editor/src/theme/index.scss
@@ -13,3 +13,4 @@
 @import "./code-editor.scss";
 @import "./icon.scss";
 @import "./code-block.scss";
+@import "./layout.scss";
diff --git a/packages/editor/src/theme/layout.scss b/packages/editor/src/theme/layout.scss
@@ -0,0 +1,5 @@
+.m-editor-layout {
+  width: 100%;
+  display: flex;
+  justify-self: space-between;
+}