feat: 增强ActionButtons组件

-添加了下拉操作
-改进了按钮渲染和样式，以获得更好的用户体验。

apps/web-antd/src/components/action-buttons/action-buttons.vue

@@ -1,74 +1,215 @@
 <script setup lang="ts">
-import type { ActionItem } from './types';
+import type { ButtonType } from 'ant-design-vue/es/button';
+
+import type { ActionItem, PopConfirm } from './types';
 
 import { computed, type PropType, toRaw } from 'vue';
 
-import { AccessControl } from '@vben/access';
+import { useAccess } from '@vben/access';
 import { IconifyIcon } from '@vben/icons';
-import { isBoolean, isFunction, isString } from '@vben/utils';
+import { isBoolean, isFunction } from '@vben/utils';
 
-import { Button } from 'ant-design-vue';
+import { Button, Dropdown, Menu, Popconfirm, Space } from 'ant-design-vue';
 
-defineOptions({ name: 'ActionButtons' });
+defineOptions({
+  name: 'ActionButtons',
+});
 
 const props = defineProps({
   actions: {
     type: Array as PropType<ActionItem[]>,
-    default: null,
+    default() {
+      return [];
+    },
+  },
+  dropDownActions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  divider: {
+    type: Boolean,
+    default: true,
   },
 });
 
+const MenuItem = Menu.Item;
+
+const { hasAccessByCodes } = useAccess();
 function isIfShow(action: ActionItem): boolean {
   const ifShow = action.ifShow;
 
   let isIfShow = true;
 
-  if (isBoolean(ifShow)) isIfShow = ifShow;
+  if (isBoolean(ifShow)) {
-
+    isIfShow = ifShow;
-  if (isFunction(ifShow)) isIfShow = ifShow(action);
+  }
-
+  if (isFunction(ifShow)) {
+    isIfShow = ifShow(action);
+  }
   return isIfShow;
 }
 
 const getActions = computed(() => {
   return (toRaw(props.actions) || [])
     .filter((action) => {
-      return isIfShow(action);
+      return (
+        (hasAccessByCodes(action.auth || []) ||
+          (action.auth || []).length === 0) &&
+        isIfShow(action)
+      );
     })
     .map((action) => {
+      const { popConfirm } = action;
       return {
+        // getPopupContainer: document.body,
+        type: 'default' as ButtonType,
         ...action,
-        auth: isString(action.auth) ? Array.of(action.auth) : action.auth,
+        ...popConfirm,
+        onConfirm: popConfirm?.confirm,
+        onCancel: popConfirm?.cancel,
+        enable: !!popConfirm,
       };
     });
 });
+const getDropdownList = computed((): any[] => {
+  return (toRaw(props.dropDownActions) || [])
+    .filter((action) => {
+      return (
+        (hasAccessByCodes(action.auth || []) ||
+          (action.auth || []).length === 0) &&
+        isIfShow(action)
+      );
+    })
+    .map((action, index) => {
+      const { label, popConfirm } = action;
+      return {
+        ...action,
+        ...popConfirm,
+        onConfirm: popConfirm?.confirm,
+        onCancel: popConfirm?.cancel,
+        text: label,
+        divider:
+          index < props.dropDownActions.length - 1 ? props.divider : false,
+      };
+    });
+});
+const getPopConfirmProps = (attrs: PopConfirm) => {
+  const originAttrs: any = attrs;
+  delete originAttrs.icon;
+  if (attrs.confirm && isFunction(attrs.confirm)) {
+    originAttrs.onConfirm = attrs.confirm;
+    delete originAttrs.confirm;
+  }
+  if (attrs.cancel && isFunction(attrs.cancel)) {
+    originAttrs.onCancel = attrs.cancel;
+    delete originAttrs.cancel;
+  }
+  return originAttrs;
+};
+const getButtonProps = (action: ActionItem) => {
+  const res = {
+    type: action.type || 'primary',
+    ...action,
+  };
+  delete res.icon;
+  return res;
+};
+const handleMenuClick = (e: any) => {
+  const action = getDropdownList.value[e.key];
+  if (action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+};
 </script>
+
 <template>
-  <div class="flex">
+  <div class="m-table-action">
-    <template v-for="(action, index) in getActions" :key="index">
+    <Space :size="2">
-      <AccessControl :codes="action.auth" type="code">
+      <template v-for="(action, index) in getActions" :key="index">
-        <Button class="mr-1 flex" v-bind="action" :key="index">
+        <Popconfirm
-          <IconifyIcon
+          v-if="action.popConfirm"
-            v-if="action.preIcon"
+          v-bind="getPopConfirmProps(action.popConfirm)"
-            :class="{ 'mr-1': !!action.label }"
+        >
-            :icon="action.preIcon"
+          <template v-if="action.popConfirm.icon" #icon>
-            :size="14"
+            <IconifyIcon :icon="action.popConfirm.icon" />
-          />
+          </template>
+          <Button v-bind="getButtonProps(action)">
+            <template v-if="action.icon" #icon>
+              <IconifyIcon :icon="action.icon" />
+            </template>
+            {{ action.label }}
+          </Button>
+        </Popconfirm>
+        <Button v-else v-bind="getButtonProps(action)" @click="action.onClick">
+          <template v-if="action.icon" #icon>
+            <IconifyIcon :icon="action.icon" />
+          </template>
           {{ action.label }}
-          <IconifyIcon
-            v-if="action.postIcon"
-            :class="{ 'mr-1': !!action.label }"
-            :icon="action.postIcon"
-            :size="14"
-          />
         </Button>
-      </AccessControl>
+      </template>
-    </template>
+    </Space>
+
+    <Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
+      <slot name="more">
+        <Button size="large" type="link">
+          <template #icon>
+            <IconifyIcon icon="mdi:more-horiz" />
+          </template>
+        </Button>
+      </slot>
+      <template #overlay>
+        <Menu @click="handleMenuClick">
+          <MenuItem v-for="(action, index) in getDropdownList" :key="index">
+            <template v-if="action.popConfirm">
+              <Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
+                <template v-if="action.popConfirm.icon" #icon>
+                  <IconifyIcon :icon="action.popConfirm.icon" />
+                </template>
+                <div>
+                  <IconifyIcon v-if="action.icon" :icon="action.icon" />
+                  <span class="ml-1">{{ action.text }}</span>
+                </div>
+              </Popconfirm>
+            </template>
+            <template v-else>
+              <IconifyIcon v-if="action.icon" :icon="action.icon" />
+              <span class="ml-1">{{ action.label }}</span>
+            </template>
+          </MenuItem>
+        </Menu>
+      </template>
+    </Dropdown>
   </div>
 </template>
-<style lang="less" scoped>
+<style lang="less">
-.ant-btn-link {
+/** 修复 iconify 位置问题 **/
-  padding: 8px 4px;
+.m-table-action {
-  margin-left: 0;
+  .ant-btn > .iconify + span,
+  .ant-btn > span + .iconify {
+    margin-inline-start: 4px;
+  }
+
+  .ant-btn > .iconify {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    font-style: normal;
+    line-height: 0;
+    color: inherit;
+    text-align: center;
+    text-transform: none;
+    vertical-align: -0.125em;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /** 修复 link 按钮的样式问题 */
+  .ant-btn-link {
+    padding: 0;
+  }
 }
 </style>

apps/web-antd/src/components/action-buttons/types.d.ts

@@ -1,11 +1,27 @@
-import type { ButtonProps, TooltipProps } from 'ant-design-vue';
+import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
 
-export interface ActionItem extends ButtonProps {
+export interface PopConfirm {
-  color?: 'error' | 'success' | 'warning';
+  title: string;
-  preIcon?: string;
+  okText?: string;
-  postIcon?: string;
+  cancelText?: string;
-  label: string;
+  confirm: (...args: any[]) => void;
-  auth?: string | string[];
+  cancel?: (...args: any[]) => void;
-  tooltip?: string | TooltipProps;
+  icon?: string;
-  ifShow?: ((...args: any[]) => boolean) | boolean;
+}
+export interface ActionItem extends ButtonProps {
+  onClick?: (...args: any[]) => void;
+  class?: string;
+  // 16进制颜色
+  color?: string;
+  label?: string;
+  icon?: string;
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
+  // 权限编码控制是否显示
+  auth?: string[];
+  // 业务控制是否显示
+  ifShow?: ((action: ActionItem) => boolean) | boolean;
+  tooltip?: string | TooltipProps;
 }

apps/web-antd/src/views/system/post/index.vue

@@ -81,16 +81,26 @@ async function handleExport() {
             {
               type: 'primary',
               label: $t('page.action.add'),
-              preIcon: IconEnum.ADD,
+              icon: IconEnum.ADD,
               auth: ['system:post:create'],
               onClick: handleCreate.bind(null),
             },
             {
               label: $t('page.action.export'),
-              preIcon: IconEnum.EXPORT,
+              class:
+                'bg-green-500 text-white border-green-400 hover:bg-green-400 hover:!text-white hover:!border-green-400 active:!bg-green-600 active:!text-white active:!border-green-600',
+              icon: IconEnum.EXPORT,
               auth: ['system:post:export'],
               onClick: handleExport.bind(null),
             },
+            {
+              label: $t('page.action.delete'),
+              icon: IconEnum.DELETE,
+              class:
+                'bg-red-500 text-white border-red-400 hover:bg-red-400 hover:!text-white hover:!border-red-400 active:!bg-red-600 active:!text-white active:!border-red-600',
+              auth: ['system:post:delete'],
+              onClick: handleDelete.bind(null, 1),
+            },
           ]"
         />
       </template>
@@ -100,7 +110,7 @@ async function handleExport() {
             {
               type: 'link',
               label: $t('page.action.edit'),
-              preIcon: IconEnum.EDIT,
+              icon: IconEnum.EDIT,
               auth: ['system:post:update'],
               onClick: handleEdit.bind(null, row.id),
             },
@@ -108,11 +118,17 @@ async function handleExport() {
               type: 'link',
               danger: true,
               label: $t('page.action.delete'),
-              preIcon: IconEnum.DELETE,
+              icon: IconEnum.DELETE,
               auth: ['system:post:delete'],
               onClick: handleDelete.bind(null, row.id),
             },
           ]"
+          :drop-down-actions="[
+            {
+              type: 'link',
+              label: $t('page.action.edit'),
+            },
+          ]"
         />
       </template>
     </Grid>