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

packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -1,12 +1,13 @@
 <template>
-  <TMagicDialog
+  <TMagicDrawer
-    :model-value="true"
     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,38 +10,36 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <TMagicScrollbar>
+    <TMagicTree
-      <TMagicTree
+      ref="tree"
-        ref="tree"
+      class="magic-editor-layer-tree"
-        class="magic-editor-layer-tree"
+      node-key="id"
-        node-key="id"
+      empty-text="暂无代码块"
-        empty-text="暂无代码块"
+      default-expand-all
-        default-expand-all
+      :expand-on-click-node="false"
-        :expand-on-click-node="false"
+      :data="codeList"
-        :data="codeList"
+      :highlight-current="true"
-        :highlight-current="true"
+      :filter-node-method="filterNode"
-        :filter-node-method="filterNode"
+      @node-click="clickHandler"
-        @node-click="clickHandler"
+    >
-      >
+      <template #default="{ data }">
-        <template #default="{ data }">
+        <div :id="data.id" class="list-container">
-          <div :id="data.id" class="list-container">
+          <div class="list-item">
-            <div class="list-item">
+            <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
-              <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
+            <!-- 右侧工具栏 -->
-              <!-- 右侧工具栏 -->
+            <div class="right-tool" v-if="data.type === 'code'">
-              <div class="right-tool" v-if="data.type === 'code'">
+              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-                <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-                  <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
-                </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
-                <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-                  <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
-                </TMagicTooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-                <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-              </div>
             </div>
           </div>
-        </template>
+        </div>
-      </TMagicTree>
+      </template>
-    </TMagicScrollbar>
+    </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">

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;