@tmagic/editor 1.3.5 → 1.3.7

package/src/layouts/{workspace → page-bar}/PageBarScrollContainer.vue

@@ -1,25 +1,20 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
-    <div
-      v-if="showAddPageButton"
-      id="m-editor-page-bar-add-icon"
-      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
-      @click="addPage"
-    >
-      <Icon :icon="Plus"></Icon>
-    </div>
-    <div v-else style="width: 21px"></div>
+    <slot name="prepend"></slot>
+
     <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
       <Icon :icon="ArrowLeftBold"></Icon>
     </div>
+
     <div
-      v-if="pageLength"
+      v-if="(type === NodeType.PAGE && pageLength) || (type === NodeType.PAGE_FRAGMENT && pageFragmentLength)"
       class="m-editor-page-bar-items"
       ref="itemsContainer"
       :style="`width: ${itemsContainerWidth}px`"
     >
       <slot></slot>
     </div>
+
     <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
       <Icon :icon="ArrowRightBold"></Icon>
     </div>
@@ -27,19 +22,32 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
-import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
+import {
+  computed,
+  type ComputedRef,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type WatchStopHandle,
+} from 'vue';
+import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
-import { generatePageNameByApp } from '@editor/utils/editor';
 
 defineOptions({
   name: 'MEditorPageBarScrollContainer',
 });
 
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
@@ -72,7 +80,7 @@ onMounted(() => {
   pageBar.value && resizeObserver.observe(pageBar.value);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });
 
@@ -104,27 +112,45 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
-const pageLength = computed(() => editorService?.get('pageLength'));
-
-watch(pageLength, (length = 0, preLength = 0) => {
-  setTimeout(() => {
-    setCanScroll();
-    if (length < preLength) {
-      scroll('start');
+const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const pageFragmentLength = computed(() => editorService?.get('pageFragmentLength') || 0);
+
+const crateWatchLength = (length: ComputedRef<number>) =>
+  watch(
+    length,
+    (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll('start');
+        } else {
+          scroll('end');
+        }
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+let unWatchPageLength: WatchStopHandle | null;
+let unWatchPageFragmentLength: WatchStopHandle | null;
+
+watch(
+  () => props.type,
+  (type) => {
+    if (type === NodeType.PAGE) {
+      unWatchPageFragmentLength?.();
+      unWatchPageFragmentLength = null;
+      unWatchPageLength = crateWatchLength(pageLength);
     } else {
-      scroll('end');
+      unWatchPageLength?.();
+      unWatchPageLength = null;
+      unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
     }
-  });
-});
-
-const addPage = () => {
-  if (!editorService) return;
-  const root = toRaw(editorService.get('root'));
-  if (!root) throw new Error('root 不能为空');
-  const pageConfig = {
-    type: NodeType.PAGE,
-    name: generatePageNameByApp(root),
-  };
-  editorService.add(pageConfig);
-};
+  },
+  {
+    immediate: true,
+  },
+);
 </script>

package/src/layouts/page-bar/SwitchTypeButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <TMagicButton
+    v-for="item in data"
+    class="m-editor-page-bar-switch-type-button"
+    size="small"
+    :key="item.type"
+    text
+    :class="{ active: modelValue === item.type }"
+    :type="modelValue === item.type ? 'primary' : ''"
+    @click="clickHandler(item.type)"
+    >{{ item.text }}</TMagicButton
+  >
+</template>
+
+<script setup lang="ts">
+import { TMagicButton } from '@tmagic/design';
+import { NodeType } from '@tmagic/schema';
+
+defineOptions({
+  name: 'MEditorPageBarSwitchTypeButton',
+});
+
+defineProps<{
+  modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
+  {
+    type: NodeType.PAGE,
+    text: '页面',
+  },
+  {
+    type: NodeType.PAGE_FRAGMENT,
+    text: '页面片',
+  },
+];
+
+const emit = defineEmits<{
+  'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
+}>();
+
+const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
+  emit('update:modelValue', value);
+};
+</script>

package/src/layouts/sidebar/Sidebar.vue

@@ -4,13 +4,13 @@
       <div
         class="m-editor-sidebar-header-item"
         v-for="(config, index) in sideBarItems"
+        v-show="!floatBoxStates?.get(config.$key)?.status"
+        draggable="true"
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
         @click="activeTabName = config.text || `${index}`"
-        draggable="true"
         @dragstart="dragstartHandler"
         @dragend="dragendHandler(config.$key, $event)"
-        v-show="!floatBoxStates?.get(config.$key)?.status"
       >
         <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
         <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
@@ -74,6 +74,11 @@
           <component v-else-if="config.slots?.layerNodeContent" :is="config.slots.layerNodeContent" :data="nodeData" />
         </template>
 
+        <template #layer-node-label="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeLabel">
+          <slot v-if="config.$key === 'layer'" name="layer-node-label" :data="nodeData"></slot>
+          <component v-else-if="config.slots?.layerNodeLabel" :is="config.slots.layerNodeTool" :data="nodeData" />
+        </template>
+
         <template #layer-node-tool="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeTool">
           <slot v-if="config.$key === 'layer'" name="layer-node-tool" :data="nodeData"></slot>
           <component v-else-if="config.slots?.layerNodeTool" :is="config.slots.layerNodeTool" :data="nodeData" />
@@ -155,6 +160,7 @@ const props = withDefaults(
   defineProps<{
     data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   }>(),
   {
     data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
@@ -182,6 +188,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,
+        customContentMenu: props.customContentMenu,
       },
       component: LayerPanel,
       slots: {},

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -1,57 +1,42 @@
 <template>
-  <TMagicTree
-    ref="tree"
-    class="magic-editor-layer-tree"
-    node-key="id"
-    empty-text="暂无代码块"
-    :default-expanded-keys="expandedKeys"
-    :expand-on-click-node="false"
-    :data="codeList"
-    :props="{
-      children: 'children',
-      label: 'name',
-      value: 'id',
-    }"
-    :highlight-current="true"
-    :filter-node-method="filterNode"
-    @node-click="clickHandler"
-  >
-    <template #default="{ data }">
-      <div :id="data.id" class="list-container">
-        <div class="list-item">
-          <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
-          <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
-          <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-            >{{ 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 v-if="editable" effect="dark" content="删除" placement="bottom">
-              <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>
+  <Tree :data="codeList" :node-status-map="nodeStatusMap" @node-click="clickHandler">
+    <template #tree-node-label="{ data }">
+      <div
+        :class="{
+          code: data.type === 'code',
+          hook: data.type === 'key',
+          disabled: data.type === 'key' || data.type === 'code',
+        }"
+      >
+        {{ data.name }} {{ data.key ? `(${data.key})` : '' }}
       </div>
     </template>
-  </TMagicTree>
+
+    <template #tree-node-tool="{ data }">
+      <TMagicTooltip v-if="data.type === 'code'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+        <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
+      </TMagicTooltip>
+      <TMagicTooltip v-if="data.type === 'code' && editable" effect="dark" content="删除" placement="bottom">
+        <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.key}`)"></Icon>
+      </TMagicTooltip>
+      <slot name="code-block-panel-tool" :id="data.key" :data="data"></slot>
+    </template>
+  </Tree>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import { DepTargetType } from '@tmagic/dep';
-import { tMagicMessage, tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import type { Id } from '@tmagic/schema';
+import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
+import type { Id, MNode } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
-import AppManageIcon from '@editor/icons/AppManageIcon.vue';
-import CodeIcon from '@editor/icons/CodeIcon.vue';
-import { type CodeBlockListSlots, CodeDeleteErrorType, type CodeDslItem, type Services } from '@editor/type';
+import Tree from '@editor/components/Tree.vue';
+import { useFilter } from '@editor/hooks/use-filter';
+import { useNodeStatus } from '@editor/hooks/use-node-status';
+import { type CodeBlockListSlots, CodeDeleteErrorType, type Services, type TreeNodeData } from '@editor/type';
 
 defineSlots<CodeBlockListSlots>();
 
@@ -68,38 +53,49 @@ const emit = defineEmits<{
   remove: [id: string];
 }>();
 
-const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
+const services = inject<Services>('services');
+const { codeBlockService, depService, editorService } = services || {};
 
 // 代码块列表
-const codeList = computed(() =>
+const codeList = computed<TreeNodeData[]>(() =>
   Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
     // 组件节点
-    const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
+    const compNodes: TreeNodeData[] = Object.entries(target.deps).map(([id, dep]) => ({
       name: dep.name,
       type: 'node',
-      id,
-      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
+      id: `${target.id}_${id}`,
+      key: id,
+      items: dep.keys.map((key) => {
+        const data: TreeNodeData = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: 'key' };
+        return data;
+      }),
     }));
-    return {
+
+    const data: TreeNodeData = {
       id: target.id,
+      key: target.id,
       name: target.name,
       type: 'code',
       codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-      children: compNodes,
+      items: compNodes,
     };
+
+    return data;
   }),
 );
-// 默认展开组件层级的节点
-const expandedKeys = computed(() => codeList.value.map((item) => item.id));
-const editable = computed(() => codeBlockService?.getEditStatus());
 
-const filterNode = (value: string, data: CodeDslItem): boolean => {
+const filterNode = (value: string, data: MNode): boolean => {
   if (!value) {
     return true;
   }
-  return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
+  return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
 };
 
+const { nodeStatusMap } = useNodeStatus(codeList);
+const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
+
+const editable = computed(() => codeBlockService?.getEditStatus());
+
 // 选中组件
 const selectComp = (compId: Id) => {
   const stage = editorService?.get('stage');
@@ -107,11 +103,9 @@ const selectComp = (compId: Id) => {
   stage?.select(compId);
 };
 
-const clickHandler = (data: any, node: any) => {
+const clickHandler = (event: MouseEvent, data: any) => {
   if (data.type === 'node') {
-    selectComp(data.id);
-  } else if (data.type === 'key') {
-    selectComp(node.parent.data.id);
+    selectComp(data.key);
   }
 };
 
@@ -122,7 +116,7 @@ const editCode = (id: string) => {
 
 const deleteCode = async (id: string) => {
   const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
-  const existBinds = Boolean(currentCode?.children.length);
+  const existBinds = Boolean(currentCode?.items?.length);
   const undeleteableList = codeBlockService?.getUndeletableList() || [];
   if (!existBinds && !undeleteableList.includes(id)) {
     await tMagicMessageBox.confirm('确定删除该代码块吗？', '提示', {
@@ -142,11 +136,7 @@ const deleteCode = async (id: string) => {
   }
 };
 
-const tree = ref<InstanceType<typeof TMagicTree>>();
-
 defineExpose({
-  filter(val: string) {
-    tree.value?.filter(val);
-  },
+  filter: filterTextChangeHandler,
 });
 </script>

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-layer-panel">
     <slot name="code-block-panel-header">
       <div class="search-wrapper">
         <SearchInput @search="filterTextChangeHandler"></SearchInput>
@@ -17,6 +17,7 @@
       </template>
     </CodeBlockList>
   </TMagicScrollbar>
+
   <!-- 代码块编辑区 -->
   <CodeBlockEditor
     v-if="codeConfig"

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -1,48 +1,40 @@
 <template>
-  <TMagicTree
-    ref="tree"
-    class="magic-editor-layer-tree"
-    node-key="id"
-    empty-text="暂无代码块"
-    default-expand-all
-    :expand-on-click-node="false"
-    :data="list"
-    :highlight-current="true"
-    @node-click="clickHandler"
-  >
-    <template #default="{ data }">
-      <div :id="data.id" class="list-container">
-        <div class="list-item">
-          <Icon v-if="data.type === 'code'" class="codeIcon" :icon="Coin"></Icon>
-          <Icon v-if="data.type === 'node'" class="compIcon" :icon="Aim"></Icon>
-          <span class="name" :class="{ code: data.type === 'ds', hook: data.type === 'key' }">{{
-            data.type === 'key' ? data.name : `${data.name}(${data.id})`
-          }}</span>
-          <!-- 右侧工具栏 -->
-          <div class="right-tool" v-if="data.type === 'ds'">
-            <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-              <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.id}`)"></Icon>
-            </TMagicTooltip>
-            <TMagicTooltip v-if="editable" effect="dark" content="删除" placement="bottom">
-              <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
-            </TMagicTooltip>
-            <slot name="data-source-panel-tool" :data="data"></slot>
-          </div>
-        </div>
+  <Tree :data="list" :node-status-map="nodeStatusMap" @node-click="clickHandler">
+    <template #tree-node-label="{ data }">
+      <div
+        :class="{
+          ds: data.type === 'ds',
+          hook: data.type === 'key',
+          disabled: data.type === 'key' || data.type === 'ds',
+        }"
+      >
+        {{ data.name }} {{ data.key ? `(${data.key})` : '' }}
       </div>
     </template>
-  </TMagicTree>
+    <template #tree-node-tool="{ data }">
+      <TMagicTooltip v-if="data.type === 'ds'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+        <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.key}`)"></Icon>
+      </TMagicTooltip>
+      <TMagicTooltip v-if="data.type === 'ds' && editable" effect="dark" content="删除" placement="bottom">
+        <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.key}`)"></Icon>
+      </TMagicTooltip>
+      <slot name="data-source-panel-tool" :data="data"></slot>
+    </template>
+  </Tree>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
-import { Aim, Close, Coin, Edit, View } from '@element-plus/icons-vue';
+import { computed, inject } from 'vue';
+import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import { DepTargetType } from '@tmagic/dep';
-import { tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { DepData, Id } from '@tmagic/schema';
+import { tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
+import { DepData, Id, MNode } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
+import Tree from '@editor/components/Tree.vue';
+import { useFilter } from '@editor/hooks/use-filter';
+import { useNodeStatus } from '@editor/hooks/use-node-status';
 import type { DataSourceListSlots, Services } from '@editor/type';
 
 defineSlots<DataSourceListSlots>();
@@ -66,32 +58,39 @@ const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) |
 const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
 const dsCondDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
 
-const getKeyTreeConfig = (dep: DepData[string], type?: string) =>
-  dep.keys.map((key) => ({ name: key, id: key, type: 'key', isMethod: type === 'method', isCond: type === 'cond' }));
+const getKeyTreeConfig = (dep: DepData[string], type?: string, parentKey?: Id) =>
+  dep.keys.map((key) => ({
+    name: key,
+    id: `${parentKey}_${key}`,
+    type: 'key',
+    isMethod: type === 'method',
+    isCond: type === 'cond',
+  }));
 
-const getNodeTreeConfig = (id: string, dep: DepData[string], type?: string) => ({
+const getNodeTreeConfig = (id: string, dep: DepData[string], type?: string, parentKey?: Id) => ({
   name: dep.name,
   type: 'node',
-  id,
-  children: getKeyTreeConfig(dep, type),
+  id: `${parentKey}_${id}`,
+  key: id,
+  items: getKeyTreeConfig(dep, type, `${parentKey}_${id}`),
 });
 
 /**
  * 生成tree中依赖节点的数据
- * @param children 节点
+ * @param items 节点
  * @param deps 依赖
  * @param type 依赖类型
  */
-const mergeChildren = (children: any[], deps: DepData, type?: string) => {
+const mergeChildren = (dsId: Id, items: any[], deps: DepData, type?: string) => {
   Object.entries(deps).forEach(([id, dep]) => {
     // 已经生成过的节点
-    const nodeItem = children.find((item) => item.id === id);
+    const nodeItem = items.find((item) => item.key === id);
     // 节点存在，则追加依赖的key
     if (nodeItem) {
-      nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+      nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
     } else {
       // 节点不存在，则生成
-      children.push(getNodeTreeConfig(id, dep, type));
+      items.push(getNodeTreeConfig(id, dep, type, dsId));
     }
   });
 };
@@ -102,21 +101,32 @@ const list = computed(() =>
     const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
     const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
 
-    const children: any[] = [];
+    const items: any[] = [];
     // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示
-    mergeChildren(children, dsDeps);
-    mergeChildren(children, dsMethodDeps, 'method');
-    mergeChildren(children, dsCondDeps, 'cond');
+    mergeChildren(ds.id, items, dsDeps);
+    mergeChildren(ds.id, items, dsMethodDeps, 'method');
+    mergeChildren(ds.id, items, dsCondDeps, 'cond');
 
     return {
       id: ds.id,
+      key: ds.id,
       name: ds.title,
       type: 'ds',
-      children,
+      items,
     };
   }),
 );
 
+const filterNode = (value: string, data: MNode): boolean => {
+  if (!value) {
+    return true;
+  }
+  return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
+};
+
+const { nodeStatusMap } = useNodeStatus(list);
+const { filterTextChangeHandler } = useFilter(list, nodeStatusMap, filterNode);
+
 const editHandler = (id: string) => {
   emit('edit', id);
 };
@@ -138,19 +148,13 @@ const selectComp = (compId: Id) => {
   stage?.select(compId);
 };
 
-const clickHandler = (data: any, node: any) => {
+const clickHandler = (event: MouseEvent, data: any) => {
   if (data.type === 'node') {
-    selectComp(data.id);
-  } else if (data.type === 'key') {
-    selectComp(node.parent.data.id);
+    selectComp(data.key);
   }
 };
 
-const tree = ref<InstanceType<typeof TMagicTree>>();
-
 defineExpose({
-  filter(val: string) {
-    tree.value?.filter(val);
-  },
+  filter: filterTextChangeHandler,
 });
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
+  <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
       <TMagicPopover v-if="editable" placement="right">