@skyfox2000/webui 1.4.24 → 1.4.26

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.4.24",
+   "version": "1.4.26",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],

package/src/components/content/index.ts

@@ -32,6 +32,22 @@ import Toolbar from './toolbar/index.vue';
 export { Toolbar };
 import Icontool from './toolbar/icontool.vue';
 export { Icontool };
+import GroupTools from './toolbar/groupTools.vue';
+export { GroupTools };
 
 import Tree from './tree/index.vue';
 export { Tree };
+
+import ToolPanel from './toolpanel/index.vue';
+export { ToolPanel };
+
+// 导出ToolPanel相关类型
+export type {
+   ToolPanelGroup,
+   DisplayMode,
+   PanelCollapsed,
+   ToolPanelConfig,
+   ToolPanelEvents,
+   ToolPanelProps,
+   DragConfig,
+} from './toolpanel/types';

package/src/components/content/toolbar/groupTools.vue

@@ -1,80 +1,35 @@
-<script setup lang="ts" generic="T">
+<script setup lang="ts">
 import { Button, ToolIcon } from '../../common';
-import type { ButtonTool } from '@/typings/tools.d';
-
-/**
- * 工具组类型定义
- */
-export type GroupType = 'tools' | 'split' | 'space';
-
-/**
- * 扩展的工具定义，支持自定义组件
- */
-export interface ExtendedButtonTool extends ButtonTool {
-   /**
-    * 自定义组件
-    */
-   component?: any;
-   /**
-    * 组件属性
-    */
-   props?: Record<string, any>;
-}
-
-/**
- * 工具组定义
- */
-export interface ToolGroup {
-   /**
-    * 组类型
-    * - tools: 工具组
-    * - split: 竖线分割
-    * - space: 空白区域
-    */
-   type: GroupType;
-   /**
-    * 工具列表，当type为tools时有效
-    */
-   tools?: ExtendedButtonTool[];
-   /**
-    * 空白区域宽度，当type为space时有效
-    */
-   width?: string;
-}
+import { getToolVisible, getToolStatus, onToolClicked } from '@/utils/tools';
+import type { ComponentTool, ToolGroup } from '@/typings/tools.d';
 
 defineProps<{
    /**
     * 分组工具配置
     */
    groupTools: ToolGroup[];
+   /**
+    * 统一样式类，应用于所有工具组
+    */
+   groupClass?: string;
 }>();
 
 /**
  * 处理工具点击事件
  */
-const onToolClick = (tool: ExtendedButtonTool) => {
-   if (tool.click) {
-      // 传入必要的参数，这里使用空对象作为占位符，实际使用时由外部传入
-      tool.click({} as any, undefined as any, undefined as any);
+const onToolClick = (tool: ComponentTool, group: ToolGroup) => {
+   // 切换模式：单选切换 - 直接修改 group.selected，外部通过监听数据变化来响应
+   if (group.mode === 'toggle') {
+      group.selected = group.selected === tool.key ? undefined : tool.key;
+   }
+   
+   // 使用统一的工具点击处理
+   onToolClicked(tool);
+   
+   // 如果工具有自定义点击方法，则执行
+   if (tool.click && typeof tool.click === 'function') {
+      (tool.click as any)(tool);
    }
-};
-
-/**
- * 判断工具是否可见
- */
-const isToolVisible = (tool: ExtendedButtonTool): boolean => {
-   if (typeof tool.visible === 'boolean') return tool.visible;
-   if (typeof tool.visible === 'function') return tool.visible({} as any);
-   return true;
-};
-
-/**
- * 判断工具是否禁用
- */
-const isToolDisabled = (tool: ExtendedButtonTool): boolean => {
-   if (typeof tool.disabled === 'boolean') return tool.disabled;
-   if (typeof tool.disabled === 'function') return tool.disabled({} as any);
-   return false;
 };
 </script>
 
@@ -82,26 +37,61 @@ const isToolDisabled = (tool: ExtendedButtonTool): boolean => {
    <div class="flex items-center">
       <template v-for="(group, groupIndex) in groupTools" :key="groupIndex">
          <!-- 工具组 -->
-         <div v-if="group.type === 'tools'" class="inline-flex [&>button]:ml-[-1px] first:[&>button]:ml-0">
+         <div v-if="group.type === 'tools'" :class="[
+            'inline-flex',
+            groupClass || '',
+            group.class || ''
+         ]">
             <template v-for="(tool, toolIndex) in group.tools" :key="tool.key">
-               <Button v-if="isToolVisible(tool) && !tool.children" :class="[
-                  'px-[8px] py-[2px] relative border-[#ccc] bg-[#fcfcfc] rounded-none text-[#666] hover:z-10',
-                  toolIndex === 0 ? 'rounded-l-[5px]' : '',
+               <Button v-if="getToolVisible(tool) && !tool.children && !tool.component" :class="[
+                  group.mode === 'toggle' && group.selected === tool.key
+                     ? 'px-[8px] py-[2px] relative border-[#1890ff] bg-[#1890ff] text-white rounded-none'
+                     : 'px-[8px] py-[2px] relative border-[#ccc] bg-[#fcfcfc] rounded-none text-[#666]',
+                  'hover:z-10 hover:border-[#666]',
+                  toolIndex === 0 ? 'rounded-l-[5px] ml-0' : '-ml-[1px]',
                   toolIndex === (group.tools?.length || 0) - 1 ? 'rounded-r-[5px]' : '',
-                  tool.class || ''
-               ]" :type="tool.type" :danger="tool.danger" :disabled="isToolDisabled(tool)" :tiptext="tool.label"
-                  @click="onToolClick(tool)">
-                  <template v-if="tool.icon">
-                     <ToolIcon :icon="tool.icon" class="w-[18px] h-[18.5px]" clickable />
+                  tool.class || '',
+                  tool.display === 'icon' ? 'px-[6px]' : '',
+                  tool.display === 'text' ? 'px-[8px]' : ''
+               ]" :type="tool.type" :danger="tool.danger" :disabled="getToolStatus(tool)" :tiptext="tool.label"
+                  v-bind="tool.props" @click="onToolClick(tool, group)">
+                  <!-- 仅显示图标 -->
+                  <template v-if="tool.display === 'icon' && tool.icon">
+                     <ToolIcon :icon="tool.icon" class="w-[18px] h-[18.5px]" :class="tool.iconClass"
+                        v-bind="tool.iconProps" clickable />
                   </template>
-                  <template v-if="tool.label">
+                  <!-- 仅显示文字 -->
+                  <template v-else-if="tool.display === 'text' && tool.label">
                      {{ tool.label }}
                   </template>
+                  <!-- 同时显示图标和文字 -->
+                  <template v-else>
+                     <template v-if="tool.icon">
+                        <ToolIcon :icon="tool.icon" class="w-[18px] h-[18.5px] mr-[4px]" :class="tool.iconClass"
+                           v-bind="tool.iconProps" clickable />
+                     </template>
+                     <template v-if="tool.label">
+                        {{ tool.label }}
+                     </template>
+                  </template>
                </Button>
 
                <!-- 自定义组件 -->
-               <component v-else-if="tool.component" :is="tool.component" v-bind="tool.props"
-                  @click="onToolClick(tool)" />
+               <div v-else-if="tool.component" :class="[
+                  group.mode === 'toggle' && group.selected === tool.key
+                     ? 'p-0 relative border-[#1890ff] bg-[#1890ff] text-white rounded-none flex justify-center items-center'
+                     : 'p-0 relative border-[#ccc] bg-[#fcfcfc] rounded-none text-[#666] flex justify-center items-center',
+                  'hover:z-10 hover:border-[#666]',
+                  toolIndex === 0 ? 'rounded-l-[5px] ml-0' : '-ml-[1px]',
+                  toolIndex === (group.tools?.length || 0) - 1 ? 'rounded-r-[5px]' : '',
+                  tool.class || '',
+                  getToolStatus(tool) ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+               ]" @click="!getToolStatus(tool) && onToolClick(tool, group)">
+                  <component :is="tool.component" v-bind="{
+                     ...tool.props,
+                     disabled: getToolStatus(tool)
+                  }" />
+               </div>
             </template>
          </div>
 

package/src/components/content/toolbar/index.ts

@@ -8,4 +8,4 @@ export { default as Toolbar } from './index.vue';
 /**
  * 工具栏相关类型定义
  */
-export type { ToolGroup } from './groupTools.vue';
+export type { ToolGroup, ComponentTool, GroupType } from '@/typings/tools.d';

package/src/components/content/toolpanel/index.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ToolIcon, Input } from '@/components/';
+
+
+import { getToolVisible, getToolStatus, onToolClicked } from '@/utils/tools';
+import type { ComponentTool, ToolGroup } from '@/typings/tools.d';
+import GroupTools from '../toolbar/groupTools.vue';
+import type {
+   ToolPanelGroup,
+   ToolPanelProps
+} from './types';
+
+const props = withDefaults(defineProps<ToolPanelProps>(), {
+   mode: 'list',
+   collapsed: false,
+   showSearch: true,
+   allowGroupCollapse: true,
+   rowCount: 3,
+   showModeToggle: true,
+   width: () => ({
+      expanded: 'w-72',
+      collapsed: 'w-16'
+   })
+});
+
+// 内部状态
+const searchKeyword = ref('');
+const groupCollapsedMap = ref<Record<string, boolean>>({});
+
+// 判断工具数据是否为分组格式
+const isGroupedData = computed(() => {
+   return Array.isArray(props.tools) && props.tools.length > 0 && 'tools' in props.tools[0];
+});
+
+// 合并工具数据 - 支持分组和非分组两种格式
+const toolData = computed(() => {
+   if (!props.tools || !Array.isArray(props.tools)) {
+      return [];
+   }
+
+   // 如果已经是分组格式，直接返回
+   if (isGroupedData.value) {
+      return props.tools as ToolPanelGroup[];
+   }
+
+   // 如果是工具数组格式，转换为分组格式
+   const tools = props.tools as ComponentTool[];
+   return [{
+      id: 'default-group',
+      name: '工具',
+      tools: tools
+   }] as ToolPanelGroup[];
+});
+
+// 过滤后的工具数据 - 过滤时隐藏分组显示
+const filteredToolData = computed(() => {
+   if (!searchKeyword.value.trim()) {
+      return toolData.value;
+   }
+
+   const keyword = searchKeyword.value.toLowerCase();
+   const filteredGroups = toolData.value.map((group: ToolPanelGroup) => ({
+      ...group,
+      tools: group.tools.filter((tool: ComponentTool) => {
+         const labelMatch = tool.label?.toLowerCase().includes(keyword);
+         const descMatch = (tool as any).description?.toLowerCase().includes(keyword);
+         return labelMatch || descMatch;
+      })
+   })).filter((group: ToolPanelGroup) => group.tools.length > 0);
+
+   // 如果有搜索关键词，返回扁平化的工具列表，不显示分组
+   if (searchKeyword.value.trim() && filteredGroups.length > 0) {
+      const allTools = filteredGroups.flatMap(group => group.tools);
+      return [{
+         id: 'search-results',
+         name: '搜索结果',
+         tools: allTools
+      }];
+   }
+
+   return filteredGroups;
+});
+
+// 获取面板宽度样式
+const panelWidthClass = computed(() => {
+   return props.collapsed ? props.width.collapsed : props.width.expanded;
+});
+
+// 模式切换按钮组
+const modeToggleGroup = computed<ToolGroup[]>(() => {
+   if (!props.showModeToggle) return [];
+
+   return [{
+      type: 'tools',
+      mode: 'toggle',
+      selected: props.mode,
+      tools: [
+         {
+            key: 'list',
+            label: '列表',
+            icon: 'icon-datalist',
+            display: 'icon',
+            tiptext: '列表视图',
+            click: () => {
+               props.onModeChange?.('list');
+            }
+         } as ComponentTool,
+         {
+            key: 'grid',
+            label: '网格',
+            icon: 'icon-icon-list',
+            display: 'icon',
+            tiptext: '网格视图',
+            click: () => {
+               props.onModeChange?.('grid');
+            }
+         } as ComponentTool
+      ]
+   }];
+});
+
+// 面板折叠按钮组
+const collapseToggleGroup = computed<ToolGroup[]>(() => {
+   return [{
+      type: 'tools',
+      mode: 'normal',
+      tools: [
+         {
+            key: 'collapse',
+            label: props.collapsed ? '展开' : '收起',
+            icon: 'icon-menu',
+            display: 'icon',
+            tiptext: props.collapsed ? '展开面板' : '收起面板',
+            // 添加特殊的点击处理
+            click: () => {
+               props.onCollapseChange?.(!props.collapsed);
+            }
+         } as ComponentTool
+      ]
+   }];
+});
+
+// 判断分组是否折叠
+const isGroupCollapsed = (groupId: string): boolean => {
+   return groupCollapsedMap.value[groupId] ?? false;
+};
+
+// 切换分组折叠状态
+const toggleGroupCollapse = (groupId: string) => {
+   if (!props.allowGroupCollapse) return;
+
+   // 使用响应式更新
+   const newState = !groupCollapsedMap.value[groupId];
+   groupCollapsedMap.value = {
+      ...groupCollapsedMap.value,
+      [groupId]: newState
+   };
+   console.log('切换分组折叠状态:', groupId, newState);
+};
+
+// 处理工具点击事件
+const handleToolClick = (tool: ComponentTool, event: MouseEvent) => {
+   if (getToolStatus(tool)) return;
+
+   // 使用统一的工具点击处理
+   onToolClicked(tool);
+
+   props.onToolClick?.(tool, event);
+};
+
+// 处理搜索
+const handleSearch = (keyword: string) => {
+   searchKeyword.value = keyword;
+   props.onSearch?.(keyword);
+};
+
+
+
+// 拖拽事件处理
+const handleDragStart = (event: DragEvent, tool: ComponentTool) => {
+   props.dragConfig?.onDragStart?.(event, tool);
+};
+
+const handleDragEnd = (event: DragEvent) => {
+   props.dragConfig?.onDragEnd?.(event);
+};
+
+
+
+
+</script>
+
+<template>
+   <div class="relative h-full">
+      <!-- 主面板 -->
+      <div
+         class="h-full bg-white border-r border-gray-200 transition-all duration-300 ease-in-out shadow-sm"
+         :class="panelWidthClass">
+         <!-- 展开状态 -->
+         <div v-if="!props.collapsed" class="h-full flex flex-col">
+            <!-- 顶部工具栏 -->
+            <div class="px-3 pt-3 pb-2 flex items-center justify-end gap-2">
+               <!-- 模式切换按钮 -->
+               <GroupTools v-if="showModeToggle" :group-tools="modeToggleGroup as any" />
+
+               <!-- 折叠按钮 -->
+               <GroupTools :group-tools="collapseToggleGroup as any" />
+            </div>
+
+            <!-- 搜索框区域 -->
+            <div v-if="showSearch" class="px-3 pt-3 pb-2">
+               <Input v-model:value="searchKeyword" placeholder="搜索工具..." allow-clear size="small" class="w-full"
+                  @update:value="(value: string) => handleSearch(value)"
+                  @press-enter="(e: Event) => handleSearch((e.target as HTMLInputElement).value)" />
+            </div>
+            <!-- 工具列表滚动区域 -->
+            <div class="flex-1 overflow-y-auto px-4 pb-4">
+               <!-- 工具组 -->
+               <div v-for="group in filteredToolData" :key="group.id" class="mb-4 last:mb-0">
+                  <!-- 分组标题 - 搜索结果时或默认分组时不显示分组标题 -->
+                  <div v-if="allowGroupCollapse && group.id !== 'search-results' && group.id !== 'default-group'"
+                     class="flex items-center justify-between text-xs font-semibold text-gray-700 mb-2 px-3 py-2 bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg cursor-pointer hover:from-gray-100 hover:to-gray-200 transition-all"
+                     @click="toggleGroupCollapse(group.id)">
+                     <span>{{ group.name }}</span>
+                     <ToolIcon :icon="isGroupCollapsed(group.id) ? 'icon-chevron-right' : 'icon-chevron-down'"
+                        class="w-3.5 h-3.5 transition-transform duration-200" />
+                  </div>
+                  <h3 v-else-if="group.id !== 'search-results' && group.id !== 'default-group'"
+                     class="text-xs font-semibold text-gray-700 mb-2 px-3 py-2 bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg">
+                     {{ group.name }}
+                  </h3>
+
+                  <!-- 工具列表 -->
+                  <div
+                     v-if="!isGroupCollapsed(group.id) || group.id === 'search-results' || group.id === 'default-group'">
+                     <!-- 网格模式 -->
+                     <div v-if="props.mode === 'grid'" class="grid grid-cols-3 gap-1.5 px-1">
+                        <div v-for="tool in group.tools" v-show="getToolVisible(tool)" :key="tool.key"
+                           :title="`${tool.label}${(tool as any).description ? ': ' + (tool as any).description : ''}`"
+                           class="aspect-square flex flex-col items-center justify-center p-1.5 bg-gray-50 border border-solid border-gray-200 rounded-lg shadow-sm hover:border-blue-300 hover:shadow-lg hover:bg-blue-50 transition-all duration-200 cursor-move group"
+                           :class="[
+                              getToolStatus(tool) ? 'opacity-50 cursor-not-allowed bg-gray-200' : 'hover:scale-105',
+                              tool.class || '',
+                              dragConfig?.draggable ? 'cursor-move' : '',
+                           ]" :draggable="dragConfig?.draggable"
+                           @click="tool.click ? (tool.click as any)(tool, $event) : handleToolClick(tool, $event)"
+                           @dragstart="handleDragStart($event, tool as any)" @dragend="handleDragEnd($event)"
+                           v-bind="dragConfig">
+                           <ToolIcon v-if="tool.icon" :icon="tool.icon"
+                              class="w-9 h-9 mb-1 text-blue-600 group-hover:text-blue-700 transition-colors flex-shrink-0 !cursor-move"
+                              :class="[tool.iconClass,
+                              dragConfig?.draggable ? 'cursor-move' : '']" v-bind="tool.iconProps" />
+                           <span
+                              class="text-xs text-gray-700 font-medium text-center leading-tight truncate w-full group-hover:text-gray-900">{{
+                                 tool.label }}</span>
+                        </div>
+                     </div>
+
+                     <!-- 列表模式 -->
+                     <div v-else class="space-y-1.5">
+                        <div v-for="tool in group.tools" v-show="getToolVisible(tool)" :key="tool.key"
+                           :title="`${tool.label}${(tool as any).description ? ': ' + (tool as any).description : ''}`"
+                           class="flex items-center px-2.5 py-2 bg-gray-50 border border-gray-200 border-solid rounded-lg shadow-sm hover:border-blue-500 hover:shadow-md hover:bg-blue-50 transition-all duration-200 group"
+                           :class="[
+                              getToolStatus(tool) ? 'opacity-50 cursor-not-allowed bg-gray-200' : 'hover:scale-[1.02]',
+                              tool.class || '',
+                              dragConfig?.draggable ? 'cursor-move' : ''
+                           ]" :draggable="dragConfig?.draggable"
+                           @click="tool.click ? (tool.click as any)(tool, $event) : handleToolClick(tool, $event)"
+                           @dragstart="handleDragStart($event, tool as any)" @dragend="handleDragEnd($event)"
+                           v-bind="dragConfig">
+                           <ToolIcon v-if="tool.icon" :icon="tool.icon"
+                              class="w-7 h-7 mr-2.5 flex-shrink-0 text-blue-600 group-hover:text-blue-700 transition-colors"
+                              :class="[tool.iconClass,
+                              dragConfig?.draggable ? '!cursor-move' : '']" v-bind="tool.iconProps" />
+                           <div class="flex-1 min-w-0">
+                              <div class="font-medium text-gray-900 text-sm group-hover:text-gray-950 text-center">{{
+                                 tool.label }}</div>
+                              <div v-if="(tool as any).description"
+                                 class="text-xs text-gray-600 mt-0.5 truncate group-hover:text-gray-700 text-center">
+                                 {{ (tool as any).description }}
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+
+         <!-- 收起状态 -->
+         <div v-else class="relative h-full">
+            <!-- 顶部折叠按钮 -->
+            <div class="pt-4 pb-2 flex justify-center">
+               <GroupTools :group-tools="collapseToggleGroup as any" />
+            </div>
+            <!-- 工具列表 -->
+            <div class="overflow-y-auto flex flex-col items-center gap-3 pb-4">
+               <div v-for="group in filteredToolData" :key="group.id" class="flex flex-col items-center gap-2">
+                  <div v-for="tool in group.tools" v-show="getToolVisible(tool)" :key="tool.key"
+                     :title="`${tool.label}${(tool as any).description ? ': ' + (tool as any).description : ''}`"
+                     class="w-12 h-12 flex items-center justify-center bg-gray-50 border border-gray-400 rounded-lg shadow-sm hover:border-blue-500 hover:shadow-md hover:bg-blue-50 transition-all duration-200 cursor-move group"
+                     :class="[
+                        getToolStatus(tool) ? 'opacity-50 cursor-not-allowed bg-gray-200' : 'hover:scale-110',
+                        tool.class || '',
+                        dragConfig?.draggable ? 'cursor-move' : ''
+                     ]" :draggable="dragConfig?.draggable"
+                     @click="tool.click ? (tool.click as any)(tool, $event) : handleToolClick(tool, $event)"
+                     @dragstart="handleDragStart($event, tool as any)" @dragend="handleDragEnd($event)"
+                     v-bind="dragConfig">
+                     <ToolIcon v-if="tool.icon" :icon="tool.icon"
+                        class="w-7 h-7 text-blue-600 group-hover:text-blue-700 transition-colors"
+                        :class="tool.iconClass" v-bind="tool.iconProps" />
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+
+
+   </div>
+</template>

package/src/components/content/toolpanel/types.ts

@@ -0,0 +1,90 @@
+import type { ComponentTool } from '@/typings/tools.d';
+
+/**
+ * 工具面板显示模式
+ */
+export type DisplayMode = 'list' | 'grid';
+
+/**
+ * 工具面板折叠状态
+ */
+export type PanelCollapsed = boolean;
+
+/**
+ * 工具面板分组配置
+ */
+export interface ToolPanelGroup {
+   /** 分组ID */
+   id: string;
+   /** 分组名称 */
+   name: string;
+   /** 分组图标 */
+   icon?: string;
+   /** 分组是否折叠 */
+   collapsed?: boolean;
+   /** 工具列表 */
+   tools: ComponentTool[];
+   /** 分组样式类 */
+   class?: string;
+}
+
+/**
+ * 工具面板配置
+ */
+export interface ToolPanelConfig {
+   /** 工具数据 - 支持分组和非分组两种格式 */
+   tools: ToolPanelGroup[] | ComponentTool[];
+   /** 显示模式 */
+   mode?: DisplayMode;
+   /** 面板折叠状态 */
+   collapsed?: PanelCollapsed;
+   /** 是否显示搜索框 */
+   showSearch?: boolean;
+   /** 是否支持分组折叠 */
+   allowGroupCollapse?: boolean;
+   /** 网格模式每行显示数量 */
+   rowCount?: number;
+   /** 是否显示模式切换按钮 */
+   showModeToggle?: boolean;
+   /** 面板宽度配置 */
+   width?: {
+      expanded: string;
+      collapsed: string;
+   };
+}
+
+/**
+ * 工具面板事件
+ */
+export interface ToolPanelEvents {
+   /** 工具点击事件 */
+   onToolClick?: (tool: ComponentTool, event: MouseEvent) => void;
+   /** 搜索事件 */
+   onSearch?: (keyword: string) => void;
+   /** 显示模式变化事件 */
+   onModeChange?: (mode: DisplayMode) => void;
+   /** 面板折叠状态变化事件 */
+   onCollapseChange?: (collapsed: PanelCollapsed) => void;
+}
+
+/**
+ * 拖拽配置接口
+ */
+export interface DragConfig {
+   /** 是否启用拖拽 */
+   draggable?: boolean;
+   /** 拖拽开始事件处理 */
+   onDragStart?: (event: DragEvent, tool: ComponentTool) => void;
+   /** 拖拽结束事件处理 */
+   onDragEnd?: (event: DragEvent) => void;
+   /** 其他拖拽相关属性 */
+   [key: string]: any;
+}
+
+/**
+ * 工具面板完整属性（包含配置和事件）
+ */
+export type ToolPanelProps = ToolPanelConfig & ToolPanelEvents & {
+   /** 拖拽配置 */
+   dragConfig?: DragConfig;
+};

package/src/components/index.ts

@@ -1,3 +1,13 @@
+import {
+   DisplayMode,
+   DragConfig,
+   PanelCollapsed,
+   ToolPanelConfig,
+   ToolPanelEvents,
+   ToolPanelGroup,
+   ToolPanelProps,
+} from './content';
+
 // 基础组件
 export {
    Button,
@@ -27,9 +37,21 @@ export {
    TableOperate,
    Toolbar,
    Icontool,
+   GroupTools,
+   ToolPanel,
    Tree,
 } from './content';
 
+export type {
+   ToolPanelGroup,
+   DisplayMode,
+   PanelCollapsed,
+   ToolPanelConfig,
+   ToolPanelEvents,
+   ToolPanelProps,
+   DragConfig,
+};
+
 // 表单组件
 export {
    AutoComplete,