From 70d730ca82af7abab3c084d1ff924140a5c7d8bb Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 4 Dec 2025 17:31:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20=E6=96=B0=E5=A2=9E=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E6=8C=89=E9=92=AE=E5=B0=81=E8=A3=85=E6=88=90?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/index.ts                  |  1 +
 .../data-source/DataSourceAddButton.vue       | 46 +++++++++++++++++++
 .../data-source/DataSourceListPanel.vue       | 31 ++++---------
 3 files changed, 55 insertions(+), 23 deletions(-)
 create mode 100644 packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue

diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index ce5502b9..9e9ff21f 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -92,6 +92,7 @@ export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as DataSourceConfigPanel } from './layouts/sidebar/data-source/DataSourceConfigPanel.vue';
+export { default as DataSourceAddButton } from './layouts/sidebar/data-source/DataSourceAddButton.vue';
 export { default as PropsPanel } from './layouts/props-panel/PropsPanel.vue';
 export { default as PropsFormPanel } from './layouts/props-panel/FormPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue
new file mode 100644
index 00000000..8c594937
--- /dev/null
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue
@@ -0,0 +1,46 @@
+<template>
+  <TMagicPopover
+    placement="right"
+    trigger="hover"
+    popper-class="data-source-list-panel-add-menu"
+    :destroy-on-close="true"
+  >
+    <template #reference>
+      <TMagicButton v-bind="addButtonConfig || {}">{{ addButtonText || '' }}</TMagicButton>
+    </template>
+    <ToolButton
+      v-for="(item, index) in datasourceTypeList"
+      :data="{
+        type: 'button',
+        text: item.text,
+        handler: () => {
+          $emit('add', item.type);
+        },
+      }"
+      :key="index"
+    ></ToolButton>
+  </TMagicPopover>
+</template>
+
+<script setup lang="ts">
+import { type ButtonProps, TMagicButton, TMagicPopover } from '@tmagic/design';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+
+defineOptions({
+  name: 'MEditorDataSourceAddButton',
+});
+
+defineProps<{
+  datasourceTypeList: {
+    text: string;
+    type: string;
+  }[];
+  addButtonConfig?: ButtonProps;
+  addButtonText?: string;
+}>();
+
+defineEmits<{
+  add: [type: string];
+}>();
+</script>
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index a8bff216..18c095fe 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -2,28 +2,13 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover
+      <DataSourceAddButton
         v-if="editable"
-        placement="right"
-        trigger="hover"
-        popper-class="data-source-list-panel-add-menu"
-        :destroy-on-close="true"
-      >
-        <template #reference>
-          <TMagicButton type="primary" size="small">新增</TMagicButton>
-        </template>
-        <ToolButton
-          v-for="(item, index) in datasourceTypeList"
-          :data="{
-            type: 'button',
-            text: item.text,
-            handler: () => {
-              addHandler(item.type);
-            },
-          }"
-          :key="index"
-        ></ToolButton>
-      </TMagicPopover>
+        add-button-text="新增"
+        :add-button-config="{ type: 'primary', size: 'small' }"
+        :datasource-type-list="datasourceTypeList"
+        @add="addHandler"
+      ></DataSourceAddButton>
 
       <slot name="data-source-panel-search"></slot>
     </div>
@@ -63,15 +48,15 @@
 import { computed, inject, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
-import { TMagicButton, tMagicMessageBox, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
+import { tMagicMessageBox, TMagicScrollbar } from '@tmagic/design';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
-import ToolButton from '@editor/components/ToolButton.vue';
 import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
 import { useServices } from '@editor/hooks/use-services';
 import type { CustomContentMenuFunction, DataSourceListSlots, EventBus, MenuButton, MenuComponent } from '@editor/type';
 
+import DataSourceAddButton from './DataSourceAddButton.vue';
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
 import { useContentMenu } from './useContentMenu';