feat: update TableAction

web/apps/web-antd/src/adapter/vxe-table.ts

@@ -285,4 +285,5 @@ export type OnActionClickParams<T = Recordable<any>> = {
 export type OnActionClickFn<T = Recordable<any>> = (
   params: OnActionClickParams<T>,
 ) => void;
+export * from '#/components/table-action';
 export type * from '@vben/plugins/vxe-table';

web/apps/web-antd/src/components/table-action/icons.ts

@@ -0,0 +1,13 @@
+export const ACTION_ICON = {
+  DOWNLOAD: 'lucide:download',
+  UPLOAD: 'lucide:upload',
+  ADD: 'lucide:plus',
+  EDIT: 'lucide:edit',
+  DELETE: 'lucide:trash-2',
+  REFRESH: 'lucide:refresh-cw',
+  SEARCH: 'lucide:search',
+  FILTER: 'lucide:filter',
+  MORE: 'lucide:ellipsis-vertical',
+  VIEW: 'lucide:eye',
+  COPY: 'lucide:copy',
+};

web/apps/web-antd/src/components/table-action/index.ts

@@ -0,0 +1,4 @@
+export * from './icons';
+
+export { default as TableAction } from './table-action.vue';
+export * from './typing';

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

@@ -0,0 +1,278 @@
+<!-- add by 星语：参考 vben2 的方式，增加 TableAction 组件 -->
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { ActionItem, PopConfirm } from './typing';
+
+import { computed, unref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isBoolean, isFunction } from '@vben/utils';
+
+import {
+  Button,
+  Dropdown,
+  Menu,
+  Popconfirm,
+  Space,
+  Tooltip,
+} from 'ant-design-vue';
+
+const props = defineProps({
+  actions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  dropDownActions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  divider: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { hasAccessByCodes } = useAccess();
+
+/** 检查是否显示 */
+function isIfShow(action: ActionItem): boolean {
+  const ifShow = action.ifShow;
+  let isIfShow = true;
+  if (isBoolean(ifShow)) {
+    isIfShow = ifShow;
+  }
+  if (isFunction(ifShow)) {
+    isIfShow = ifShow(action);
+  }
+  if (isIfShow) {
+    isIfShow =
+      hasAccessByCodes(action.auth || []) || (action.auth || []).length === 0;
+  }
+  return isIfShow;
+}
+
+/** 处理按钮 actions */
+const getActions = computed(() => {
+  const actions = props.actions || [];
+  return actions.filter((action: ActionItem) => isIfShow(action));
+});
+
+/** 处理下拉菜单 actions */
+const getDropdownList = computed(() => {
+  const dropDownActions = props.dropDownActions || [];
+  return dropDownActions.filter((action: ActionItem) => isIfShow(action));
+});
+
+/** Space 组件的 size */
+const spaceSize = computed(() => {
+  const actions = unref(getActions);
+  return actions?.some((item: ActionItem) => item.type === 'link') ? 0 : 8;
+});
+
+/** 获取 PopConfirm 属性 */
+function getPopConfirmProps(popConfirm: PopConfirm) {
+  if (!popConfirm) return {};
+
+  const attrs: Record<string, any> = {};
+
+  // 复制基本属性，排除函数
+  Object.keys(popConfirm).forEach((key) => {
+    if (key !== 'confirm' && key !== 'cancel' && key !== 'icon') {
+      attrs[key] = popConfirm[key as keyof PopConfirm];
+    }
+  });
+
+  // 单独处理事件函数
+  if (popConfirm.confirm && isFunction(popConfirm.confirm)) {
+    attrs.onConfirm = popConfirm.confirm;
+  }
+  if (popConfirm.cancel && isFunction(popConfirm.cancel)) {
+    attrs.onCancel = popConfirm.cancel;
+  }
+
+  return attrs;
+}
+
+/** 获取 Button 属性 */
+function getButtonProps(action: ActionItem) {
+  return {
+    type: action.type || 'link',
+    danger: action.danger || false,
+    disabled: action.disabled,
+    loading: action.loading,
+    size: action.size,
+  };
+}
+
+/** 获取 Tooltip 属性 */
+function getTooltipProps(tooltip: any | string) {
+  if (!tooltip) return {};
+  return typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
+}
+
+/** 处理菜单点击 */
+function handleMenuClick(e: any) {
+  const action = getDropdownList.value[e.key];
+  if (action && action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+/** 生成稳定的 key */
+function getActionKey(action: ActionItem, index: number) {
+  return `${action.label || ''}-${action.type || ''}-${index}`;
+}
+
+/** 处理按钮点击 */
+function handleButtonClick(action: ActionItem) {
+  if (action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+// 监听props变化，强制重新计算
+watch(
+  () => [props.actions, props.dropDownActions],
+  () => {
+    // 这里不需要额外处理，computed会自动重新计算
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <div class="table-actions">
+    <Space :size="spaceSize">
+      <template
+        v-for="(action, index) in getActions"
+        :key="getActionKey(action, index)"
+      >
+        <Popconfirm
+          v-if="action.popConfirm"
+          v-bind="getPopConfirmProps(action.popConfirm)"
+        >
+          <template v-if="action.popConfirm.icon" #icon>
+            <IconifyIcon :icon="action.popConfirm.icon" />
+          </template>
+          <Tooltip v-bind="getTooltipProps(action.tooltip)">
+            <Button v-bind="getButtonProps(action)">
+              <template v-if="action.icon" #icon>
+                <IconifyIcon :icon="action.icon" />
+              </template>
+              {{ action.label }}
+            </Button>
+          </Tooltip>
+        </Popconfirm>
+        <Tooltip v-else v-bind="getTooltipProps(action.tooltip)">
+          <Button
+            v-bind="getButtonProps(action)"
+            @click="handleButtonClick(action)"
+          >
+            <template v-if="action.icon" #icon>
+              <IconifyIcon :icon="action.icon" />
+            </template>
+            {{ action.label }}
+          </Button>
+        </Tooltip>
+      </template>
+    </Space>
+
+    <Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
+      <slot name="more">
+        <Button type="link">
+          <template #icon>
+            {{ $t('page.action.more') }}
+            <IconifyIcon icon="lucide:ellipsis-vertical" />
+          </template>
+        </Button>
+      </slot>
+      <template #overlay>
+        <Menu>
+          <Menu.Item
+            v-for="(action, index) in getDropdownList"
+            :key="index"
+            :disabled="action.disabled"
+            @click="!action.popConfirm && handleMenuClick({ 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
+                  :class="
+                    action.disabled === true
+                      ? 'cursor-not-allowed text-gray-300'
+                      : ''
+                  "
+                >
+                  <IconifyIcon v-if="action.icon" :icon="action.icon" />
+                  <span :class="action.icon ? 'ml-1' : ''">
+                    {{ action.label }}
+                  </span>
+                </div>
+              </Popconfirm>
+            </template>
+            <template v-else>
+              <div
+                :class="
+                  action.disabled === true
+                    ? 'cursor-not-allowed text-gray-300'
+                    : ''
+                "
+              >
+                <IconifyIcon v-if="action.icon" :icon="action.icon" />
+                {{ action.label }}
+              </div>
+            </template>
+          </Menu.Item>
+        </Menu>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<style lang="scss">
+.table-actions {
+  .ant-btn-link {
+    padding: 4px;
+    margin-left: 0;
+  }
+
+  .ant-btn > .iconify + span,
+  .ant-btn > span + .iconify {
+    margin-inline-start: 4px;
+  }
+
+  .iconify {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    font-style: normal;
+    line-height: 0;
+    vertical-align: -0.125em;
+    color: inherit;
+    text-align: center;
+    text-transform: none;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.ant-popconfirm {
+  .ant-popconfirm-buttons {
+    .ant-btn {
+      margin-inline-start: 4px !important;
+    }
+  }
+}
+</style>

web/apps/web-antd/src/components/table-action/typing.ts

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

web/apps/web-antd/src/store/auth.ts

@@ -49,7 +49,6 @@ export const useAuthStore = defineStore('auth', () => {
         ]);
 
         userInfo = fetchUserInfoResult;
-
         userStore.setUserInfo(userInfo);
         accessStore.setAccessCodes(accessCodes);
 
@@ -107,6 +106,7 @@ export const useAuthStore = defineStore('auth', () => {
     // 设置权限
     if (userInfo && Array.isArray(userInfo.permissions)) {
       permissionStore.setPermissions(userInfo.permissions);
+      accessStore.setAccessCodes(userInfo.permissions);
     }
 
     return userInfo;

web/apps/web-antd/src/views/system/config/list.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type {
+import {
-  OnActionClickParams,
+  ACTION_ICON,
-  VxeTableGridOptions,
+  type OnActionClickParams, TableAction,
+  type VxeTableGridOptions,
 } from '#/adapter/vxe-table';
 import type { SystemConfigApi } from '#/models/system/config';
 
@@ -127,14 +128,17 @@ function refreshGrid() {
     <FormModal @success="refreshGrid" />
     <Grid table-title="参数配置">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-permission="'system:config:create'"
+              label: $t('ui.actionTitle.create', [$t('system.config.name')]),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create') }}
+              auth: ['system:config:create'],
-        </Button>
+              onClick: onCreate,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

web/apps/web-antd/src/views/system/dept/list.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type {
+import {
-  OnActionClickParams,
+  ACTION_ICON,
-  VxeTableGridOptions,
+  type OnActionClickParams, TableAction,
+  type VxeTableGridOptions,
 } from '#/adapter/vxe-table';
 import type { SystemDeptApi } from '#/api/system/dept';
 
@@ -139,20 +140,27 @@ function refreshGrid() {
     <FormModal @success="refreshGrid" />
     <Grid table-title="部门列表">
       <template #toolbar-tools>
-        <Button class="mr-2" type="primary" @click="expandAll">
+        <TableAction
-          展开全部
+          :actions="[
-        </Button>
+            {
-        <Button class="mr-2" type="primary" @click="collapseAll">
+              label: $t('ui.actionTitle.create', [$t('system.dept.name')]),
-          折叠全部
+              type: 'primary',
-        </Button>
+              icon: ACTION_ICON.ADD,
-        <Button
+              auth: ['system:dept:create'],
-          type="primary"
+              onClick: onCreate,
-          @click="onCreate"
+            },
-          v-permission="'system:dept:create'"
+            {
-        >
+              label: '展开全部',
-          <Plus class="size-5" />
+              type: 'primary',
-          {{ $t('ui.actionTitle.create', [$t('system.dept.name')]) }}
+              onClick: expandAll,
-        </Button>
+            },
+            {
+              label: '折叠全部',
+              type: 'primary',
+              onClick: collapseAll,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

web/apps/web-antd/src/views/system/dict_data/list.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type {
+import {
-  OnActionClickParams,
+  ACTION_ICON,
-  VxeTableGridOptions,
+  type OnActionClickParams, TableAction,
+  type VxeTableGridOptions,
 } from '#/adapter/vxe-table';
 import type { SystemDictDataApi } from '#/api/system/dict_data';
 
@@ -137,14 +138,17 @@ function refreshGrid() {
     <FormModal @success="refreshGrid" />
     <Grid table-title="字典数据">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-permission="'system:dict_data:create'"
+              label: $t('ui.actionTitle.create', [$t('system.dict_data.name')]),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', [$t('system.dict_data.name')]) }}
+              auth: ['system:dict_data:create'],
-        </Button>
+              onClick: onCreate,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

web/apps/web-antd/src/views/system/dict_type/list.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type {
+import {
-  OnActionClickParams,
+  ACTION_ICON,
-  VxeTableGridOptions,
+  type OnActionClickParams, TableAction,
+  type VxeTableGridOptions,
 } from '#/adapter/vxe-table';
 import type { SystemDictTypeApi } from '#/api/system/dict_type';
 
@@ -145,14 +146,17 @@ function refreshGrid() {
     <FormModal @success="refreshGrid" />
     <Grid table-title="字典列表">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-permission="'system:dict_type:create'"
+              label: $t('ui.actionTitle.create', [$t('system.dict_type.name')]),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', [$t('system.dict_type.name')]) }}
+              auth: ['system:dict_type:create'],
-        </Button>
+              onClick: onCreate,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

web/apps/web-antd/src/views/system/menu/list.vue

@@ -118,7 +118,7 @@ function onDelete(row: SystemMenuApi.SystemMenu) {
 <template>
   <Page auto-content-height>
     <FormDrawer @success="onRefresh" />
-    <Grid>
+    <Grid table-title="菜单列表">
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="expandAll">
           展开全部

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type {
+import {
-  OnActionClickParams,
+  ACTION_ICON,
-  VxeTableGridOptions,
+  type OnActionClickParams, TableAction,
+  type VxeTableGridOptions,
 } from '#/adapter/vxe-table';
 import type { SystemPostApi } from '#/models/system/post';
 
@@ -127,14 +128,17 @@ function refreshGrid() {
     <FormModal @success="refreshGrid" />
     <Grid table-title="岗位信息表">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-permission="'system:post:create'"
+              label: $t('ui.actionTitle.create', [$t('system.post.name')]),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', [$t('system.post.name')]) }}
+              auth: ['system:post:create'],
-        </Button>
+              onClick: onCreate,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

web/apps/web-antd/src/views/system/role/list.vue

@@ -8,11 +8,10 @@ import type {
 import type { SystemRoleApi } from '#/api/system/role';
 
 import { Page, useVbenDrawer } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message, Modal } from 'ant-design-vue';
+import { message, Modal } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteRole, getRoleList, patchRole } from '#/api/system/role';
 import { $t } from '#/locales';
 
@@ -156,14 +155,17 @@ function onCreate() {
     <FormDrawer @success="onRefresh" />
     <Grid :table-title="$t('system.role.list')">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-permission="'system:role:create'"
+              label: $t('ui.actionTitle.create', [$t('system.role.name')]),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', [$t('system.role.name')]) }}
+              auth: ['system:role:create'],
-        </Button>
+              onClick: onCreate,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

web/apps/web-antd/src/views/system/user/list.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type {
+import {
-  OnActionClickParams,
+  ACTION_ICON,
-  VxeTableGridOptions,
+  type OnActionClickParams, TableAction,
+  type VxeTableGridOptions,
 } from '#/adapter/vxe-table';
 import type { SystemUserApi } from '#/models/system/user';
 
@@ -128,14 +129,17 @@ function refreshGrid() {
     <FormModal @success="refreshGrid" />
     <Grid table-title="用户数据">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-permission="'system:user:create'"
+              label: $t('ui.actionTitle.create', [$t('system.user.name')]),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', [$t('system.user.name')]) }}
+              auth: ['system:user:create'],
-        </Button>
+              onClick: onCreate,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>