From 81d868aa61d4829bd574d5ff9877c07b2fed09a8 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 7 Oct 2024 13:53:10 +0800
Subject: [PATCH] feat: GhostButton component

---
 apps/web-antd/src/components/global/button.ts | 21 +++++++++
 apps/web-antd/src/components/global/index.ts  |  4 ++
 apps/web-antd/src/views/system/user/index.vue | 43 +++++++++----------
 apps/web-antd/types/global-components.d.ts    |  1 +
 4 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 apps/web-antd/src/components/global/button.ts

diff --git a/apps/web-antd/src/components/global/button.ts b/apps/web-antd/src/components/global/button.ts
new file mode 100644
index 00000000..397fdf61
--- /dev/null
+++ b/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,
+      );
+  },
+});
diff --git a/apps/web-antd/src/components/global/index.ts b/apps/web-antd/src/components/global/index.ts
index 29d7cf94..ff07852f 100644
--- a/apps/web-antd/src/components/global/index.ts
+++ b/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);
 }
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 4fa7a2d0..c5bd7926 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/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
-              size="small"
-              type="link"
-              v-access:code="['system:user:edit']"
-              @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=""
+            <Space>
+              <ghost-button
+                v-access:code="['system:user:edit']"
+                @click.stop="handleEdit(row)"
               >
-                {{ $t('pages.common.delete') }}
-              </a-button>
-            </Popconfirm>
+                {{ $t('pages.common.edit') }}
+              </ghost-button>
+              <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"
diff --git a/apps/web-antd/types/global-components.d.ts b/apps/web-antd/types/global-components.d.ts
index 1d870cf9..7c94560c 100644
--- a/apps/web-antd/types/global-components.d.ts
+++ b/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']
   }
 }