From 480d013994c02ecc98261d1f04726f2ed3a5a4b1 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 1 Nov 2023 15:17:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9E=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=91=E3=80=81=E6=95=B0=E6=8D=AE=E6=BA=90slots?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                |  8 +++++++
 packages/editor/src/components/Tree.vue       | 23 ++++++++++++-------
 .../editor/src/layouts/sidebar/Sidebar.vue    | 13 +++++++++++
 .../sidebar/data-source/DataSourceList.vue    |  6 +++--
 .../data-source/DataSourceListPanel.vue       | 10 ++++++--
 .../src/layouts/sidebar/layer/LayerPanel.vue  |  4 +++-
 packages/editor/src/type.ts                   |  9 +++++++-
 7 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 2088b772..9e6800b4 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -25,6 +25,10 @@
             <slot name="layer-node-content" :data="data"></slot>
           </template>
 
+          <template #layer-node-tool="{ data }">
+            <slot name="layer-node-tool" :data="data"></slot>
+          </template>
+
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
@@ -40,6 +44,10 @@
           <template #code-block-panel-tool="{ id, data }">
             <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
           </template>
+
+          <template #data-source-panel-tool="{ data }">
+            <slot name="data-source-panel-tool" :data="data"></slot>
+          </template>
         </Sidebar>
       </slot>
     </template>
diff --git a/packages/editor/src/components/Tree.vue b/packages/editor/src/components/Tree.vue
index 740fb70e..e7f488a0 100644
--- a/packages/editor/src/components/Tree.vue
+++ b/packages/editor/src/components/Tree.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="m-editor-tree" @dragover="handleDragOver">
-    <TreeNode v-for="item in data" :key="item.id" :data="item" :indent="indent" :node-status-map="nodeStatusMap">
-      <template #tree-node-content="{ data: nodeData }">
-        <slot name="tree-node-content" :data="nodeData"> </slot>
-      </template>
+    <template v-if="data?.length">
+      <TreeNode v-for="item in data" :key="item.id" :data="item" :indent="indent" :node-status-map="nodeStatusMap">
+        <template #tree-node-content="{ data: nodeData }">
+          <slot name="tree-node-content" :data="nodeData"> </slot>
+        </template>
 
-      <template #tree-node-tool="{ data: nodeData }">
-        <slot name="tree-node-tool" :data="nodeData"> </slot>
-      </template>
-    </TreeNode>
+        <template #tree-node-tool="{ data: nodeData }">
+          <slot name="tree-node-tool" :data="nodeData"> </slot>
+        </template>
+      </TreeNode>
+    </template>
+    <div v-else>
+      <p>{{ emptyText }}</p>
+    </div>
   </div>
 </template>
 
@@ -47,9 +52,11 @@ withDefaults(
     data: TreeNodeData[];
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
+    emptyText?: string;
   }>(),
   {
     indent: 0,
+    emptyText: '暂无数据',
   },
 );
 
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 8b2b188c..db79ee25 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -64,6 +64,19 @@
           <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData"></slot>
           <component v-else-if="config.slots?.layerNodeContent" :is="config.slots.layerNodeContent" :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" />
+        </template>
+
+        <template
+          #data-source-panel-tool="{ data }"
+          v-if="config.$key === 'data-source' || config.slots?.codeBlockPanelTool"
+        >
+          <slot v-if="config.$key === 'data-source'" name="data-source-panel-tool" :data="data"></slot>
+          <component v-else-if="config.slots?.DataSourcePanelTool" :is="config.slots.DataSourcePanelTool" />
+        </template>
       </component>
     </div>
   </div>
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
index 951f4d16..1bf54900 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
@@ -26,7 +26,7 @@
             <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" :id="data.id" :data="data.codeBlockContent"></slot>
+            <slot name="data-source-panel-tool" :data="data"></slot>
           </div>
         </div>
       </div>
@@ -42,7 +42,9 @@ import { tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { Dep, Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
-import { DepTargetType, Services } from '@editor/type';
+import { type DataSourceListSlots, DepTargetType, type Services } from '@editor/type';
+
+defineSlots<DataSourceListSlots>();
 
 defineOptions({
   name: 'MEditorDataSourceList',
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index 0430041d..3afe2bb7 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -23,7 +23,11 @@
     </div>
 
     <!-- 数据源列表 -->
-    <DataSourceList @edit="editHandler" @remove="removeHandler"></DataSourceList>
+    <DataSourceList @edit="editHandler" @remove="removeHandler">
+      <template #data-source-panel-tool="{ data }">
+        <slot name="data-source-panel-tool" :data="data"></slot>
+      </template>
+    </DataSourceList>
 
     <DataSourceConfigPanel
       ref="editDialog"
@@ -44,11 +48,13 @@ import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { Services } from '@editor/type';
+import type { DataSourceListSlots, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
 
+defineSlots<DataSourceListSlots>();
+
 defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
index f4ff892e..6636b45b 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
@@ -19,7 +19,9 @@
       @node-click="nodeClickHandler"
     >
       <template #tree-node-tool="{ data: nodeData }">
-        <LayerNodeTool :data="nodeData"></LayerNodeTool>
+        <slot name="layer-node-tool" :data="nodeData">
+          <LayerNodeTool :data="nodeData"></LayerNodeTool>
+        </slot>
       </template>
 
       <template #tree-node-content="{ data: nodeData }">
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 8120b069..a4c45f1f 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -75,19 +75,25 @@ export interface CodeBlockListSlots {
   'code-block-panel-tool'(props: { id: Id; data: CodeBlockContent }): any;
 }
 
+export interface DataSourceListSlots {
+  'data-source-panel-tool'(props: { data: any }): any;
+}
+
 export interface LayerNodeSlots {
   'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface LayerPanelSlots extends LayerNodeSlots {
   'layer-panel-header'(props: {}): any;
+  'layer-node-tool'(props: { data: MNode }): any;
+  'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface PropsPanelSlots {
   'props-panel-header'(props: {}): any;
 }
 
-export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots;
+export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots & DataSourceListSlots;
 
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
@@ -614,4 +620,5 @@ export interface TreeNodeData {
   id: Id;
   name?: string;
   items?: TreeNodeData[];
+  [key: string]: any;
 }