feat(editor): 新增组件树、数据源slots

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>

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: '暂无数据',
   },
 );
 

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>

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',

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',
 });

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 }">

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;
 }