@skyfox2000/webui 1.4.23 → 1.4.25

package/package.json

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

package/src/components/content/index.ts

@@ -32,6 +32,8 @@ 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 };

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

@@ -0,0 +1,115 @@
+<script setup lang="ts" generic="T">
+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;
+}
+
+defineProps<{
+   /**
+    * 分组工具配置
+    */
+   groupTools: ToolGroup[];
+}>();
+
+/**
+ * 处理工具点击事件
+ */
+const onToolClick = (tool: ExtendedButtonTool) => {
+   if (tool.click) {
+      // 传入必要的参数，这里使用空对象作为占位符，实际使用时由外部传入
+      tool.click({} as any, undefined as any, undefined as any);
+   }
+};
+
+/**
+ * 判断工具是否可见
+ */
+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>
+
+<template>
+   <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">
+            <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]' : '',
+                  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 />
+                  </template>
+                  <template v-if="tool.label">
+                     {{ tool.label }}
+                  </template>
+               </Button>
+
+               <!-- 自定义组件 -->
+               <component v-else-if="tool.component" :is="tool.component" v-bind="tool.props"
+                  @click="onToolClick(tool)" />
+            </template>
+         </div>
+
+         <!-- 竖线分割 -->
+         <div v-else-if="group.type === 'split'" class="w-[1px] h-[16px] bg-[#d9d9d9] mx-[8px]"></div>
+
+         <!-- 空白区域 -->
+         <div v-else-if="group.type === 'space'" :class="group.width ? group.width : 'flex-1'"></div>
+      </template>
+   </div>
+</template>

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

@@ -0,0 +1,11 @@
+/**
+ * 工具栏组件导出
+ */
+export { default as GroupTools } from './groupTools.vue';
+export { default as IconTool } from './icontool.vue';
+export { default as Toolbar } from './index.vue';
+
+/**
+ * 工具栏相关类型定义
+ */
+export type { ToolGroup } from './groupTools.vue';

package/src/components/index.ts

@@ -27,6 +27,7 @@ export {
    TableOperate,
    Toolbar,
    Icontool,
+   GroupTools,
    Tree,
 } from './content';
 

package/src/index.ts

@@ -249,6 +249,7 @@ export {
    TableOperate,
    Toolbar,
    Icontool,
+   GroupTools,
    Tree,
    AutoComplete,
    Cascader,