From 8aa2ecd9c8ffc15d4356eda8e409d7f747b0a911 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 30 Mar 2023 17:04:46 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20=E7=BB=9F=E4=B8=80=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=88=97=E8=A1=A8=E4=B8=8E=E5=85=B6=E4=BB=96=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E6=90=9C=E7=B4=A2=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sidebar/code-block/CodeBlockEditor.vue    | 13 ++--
 .../sidebar/code-block/CodeBlockList.vue      | 62 +++++++++----------
 packages/editor/src/theme/code-block.scss     |  7 ++-
 3 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 02884ffe..697b470c 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -1,12 +1,13 @@
 <template>
-  <TMagicDialog
-    :model-value="true"
+  <TMagicDrawer
     class="code-editor-dialog"
+    :model-value="true"
     :title="currentTitle"
-    :fullscreen="true"
     :close-on-press-escape="false"
     :append-to-body="true"
     :show-close="false"
+    :close-on-click-modal="false"
+    :size="size"
   >
     <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
@@ -26,14 +27,14 @@
         </div>
       </template>
     </Layout>
-  </TMagicDialog>
+  </TMagicDrawer>
 </template>
 
 <script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicDialog } from '@tmagic/design';
+import { TMagicDrawer } from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent } from '@tmagic/schema';
 
@@ -49,6 +50,8 @@ defineProps<{
   paramsColConfig?: ColumnConfig;
 }>();
 
+const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
 const left = ref(200);
 const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 149d446a..ab9b3f5c 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-code-block-list">
+  <TMagicScrollbar class="m-editor-code-block-list">
     <slot name="code-block-panel-header">
       <div class="code-header-wrapper">
         <SearchInput @search="filterTextChangeHandler"></SearchInput>
@@ -10,38 +10,36 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <TMagicScrollbar>
-      <TMagicTree
-        ref="tree"
-        class="magic-editor-layer-tree"
-        node-key="id"
-        empty-text="暂无代码块"
-        default-expand-all
-        :expand-on-click-node="false"
-        :data="codeList"
-        :highlight-current="true"
-        :filter-node-method="filterNode"
-        @node-click="clickHandler"
-      >
-        <template #default="{ data }">
-          <div :id="data.id" class="list-container">
-            <div class="list-item">
-              <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
-              <!-- 右侧工具栏 -->
-              <div class="right-tool" v-if="data.type === 'code'">
-                <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-                  <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-                </TMagicTooltip>
-                <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
-                  <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-                </TMagicTooltip>
-                <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-              </div>
+    <TMagicTree
+      ref="tree"
+      class="magic-editor-layer-tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      default-expand-all
+      :expand-on-click-node="false"
+      :data="codeList"
+      :highlight-current="true"
+      :filter-node-method="filterNode"
+      @node-click="clickHandler"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <div class="list-item">
+            <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
+            <!-- 右侧工具栏 -->
+            <div class="right-tool" v-if="data.type === 'code'">
+              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
             </div>
           </div>
-        </template>
-      </TMagicTree>
-    </TMagicScrollbar>
+        </div>
+      </template>
+    </TMagicTree>
 
     <!-- 代码块编辑区 -->
     <CodeBlockEditor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
@@ -49,7 +47,7 @@
         <slot name="code-block-edit-panel-header" :id="id"></slot>
       </template>
     </CodeBlockEditor>
-  </div>
+  </TMagicScrollbar>
 </template>
 
 <script setup lang="ts" name="MEditorCodeBlockList">
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 8598bb37..59a57247 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -1,6 +1,10 @@
 .m-editor-code-block-list {
   height: 100%;
-  margin-top: 48px;
+
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
   .code-header-wrapper {
     display: flex;
     align-items: center;
@@ -8,6 +12,7 @@
     position: absolute;
     top: 0;
     width: 100%;
+    z-index: 1;
 
     .search-input {
       flex: 1;