feat: GhostButton component

apps/web-antd/src/components/global/button.ts

@@ -0,0 +1,21 @@
+import { defineComponent, h } from 'vue';
+
+import { Button } from 'ant-design-vue';
+import buttonProps from 'ant-design-vue/es/button/buttonTypes';
+import { omit } from 'lodash-es';
+
+/**
+ * 表格操作列按钮专用
+ */
+export const GhostButton = defineComponent({
+  name: 'GhostButton',
+  props: omit(buttonProps(), ['type', 'ghost', 'size']),
+  setup(props, { attrs, slots }) {
+    return () =>
+      h(
+        Button,
+        { ...props, ...attrs, type: 'primary', ghost: true, size: 'small' },
+        slots,
+      );
+  },
+});

apps/web-antd/src/components/global/index.ts

@@ -2,9 +2,13 @@ import type { App } from 'vue';
 
 import { Button as AButton } from 'ant-design-vue';
 
+import { GhostButton } from './button';
+
 /**
  * 全局组件注册
  */
 export function setupGlobalComponent(app: App) {
   app.use(AButton);
+  // 表格操作列专用按钮
+  app.component('GhostButton', GhostButton);
 }

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

@@ -248,29 +248,28 @@ function handleResetPwd(record: Recordable<any>) {
         </template>
         <template #action="{ row }">
           <template v-if="row.userId !== 1">
-            <a-button
+            <Space>
-              size="small"
+              <ghost-button
-              type="link"
+                v-access:code="['system:user:edit']"
-              v-access:code="['system:user:edit']"
+                @click.stop="handleEdit(row)"
-              @click.stop="handleEdit(row)"
-            >
-              {{ $t('pages.common.edit') }}
-            </a-button>
-            <Popconfirm
-              placement="left"
-              title="确认删除？"
-              @confirm="handleDelete(row)"
-            >
-              <a-button
-                danger
-                size="small"
-                type="link"
-                v-access:code="['system:user:remove']"
-                @click.stop=""
               >
-                {{ $t('pages.common.delete') }}
+                {{ $t('pages.common.edit') }}
-              </a-button>
+              </ghost-button>
-            </Popconfirm>
+              <Popconfirm
+                :get-popup-container="getPopupContainer"
+                placement="left"
+                title="确认删除？"
+                @confirm="handleDelete(row)"
+              >
+                <ghost-button
+                  danger
+                  v-access:code="['system:user:remove']"
+                  @click.stop=""
+                >
+                  {{ $t('pages.common.delete') }}
+                </ghost-button>
+              </Popconfirm>
+            </Space>
             <Dropdown
               :get-popup-container="getPopupContainer"
               placement="bottomRight"

apps/web-antd/types/global-components.d.ts

@@ -4,5 +4,6 @@ export {};
 declare module 'vue' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es/button')['default'];
+    GhostButton: typeof import('#/components/global/button')['GhostButton']
   }
 }