fix(editor): 代码块列表无法滚动

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

@@ -17,63 +17,65 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <TMagicTree
-      v-if="!isEmpty(state.codeList)"
-      ref="tree"
-      node-key="id"
-      empty-text="暂无代码块"
-      :data="state.codeList"
-      :highlight-current="true"
-      :filter-node-method="filterNode"
-      @node-click="toggleCombineRelation"
-    >
-      <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">
-              <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="data.combineInfo && data.combineInfo.length > 0"
+    <TMagicScrollbar>
+      <TMagicTree
+        v-if="!isEmpty(state.codeList)"
+        ref="tree"
+        node-key="id"
+        empty-text="暂无代码块"
+        :data="state.codeList"
+        :highlight-current="true"
+        :filter-node-method="filterNode"
+        @node-click="toggleCombineRelation"
+      >
+        <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">
+                <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="data.combineInfo && data.combineInfo.length > 0"
+                >
+                  <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></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>
+            <!-- 展示代码块下绑定的组件 -->
+            <div
+              class="code-comp-map-wrapper"
+              v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
+            >
+              <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
+                <path
+                  fill="currentColor"
+                  d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+                ></path>
+              </svg>
+              <TMagicButton
+                v-for="(comp, index) in data.combineInfo"
+                :key="index"
+                class="code-comp"
+                size="small"
+                :plain="true"
+                @click.stop="selectComp(comp.compId)"
+                >{{ comp.compName }}</TMagicButton
               >
-                <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></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>
-          <!-- 展示代码块下绑定的组件 -->
-          <div
-            class="code-comp-map-wrapper"
-            v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
-          >
-            <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
-              <path
-                fill="currentColor"
-                d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
-              ></path>
-            </svg>
-            <TMagicButton
-              v-for="(comp, index) in data.combineInfo"
-              :key="index"
-              class="code-comp"
-              size="small"
-              :plain="true"
-              @click.stop="selectComp(comp.compId)"
-              >{{ comp.compName }}</TMagicButton
-            >
-          </div>
-        </div>
-      </template>
-    </TMagicTree>
+        </template>
+      </TMagicTree>
+    </TMagicScrollbar>
 
     <!-- 代码块编辑区 -->
     <code-block-editor v-if="isShowCodeBlockEditor">
@@ -89,7 +91,7 @@ import { computed, inject, reactive, ref, watch } from 'vue';
 import { Close, Edit, Link, View } from '@element-plus/icons-vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 

packages/editor/src/theme/code-block.scss

@@ -1,5 +1,7 @@
 .m-editor-code-block-list {
+  height: 100%;
   margin-top: 5px;
+
   .el-tree-node__content {
     height: auto;
   }