style(editor): 统一代码列表与其他列表的搜索框

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('');
 // 编辑器当前需展示的代码块内容

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,7 +10,6 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <TMagicScrollbar>
     <TMagicTree
       ref="tree"
       class="magic-editor-layer-tree"
@@ -41,7 +40,6 @@
         </div>
       </template>
     </TMagicTree>
-    </TMagicScrollbar>
 
     <!-- 代码块编辑区 -->
     <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">

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;