feat(button): 添加SubmitButton组件并支持ant-design主题

apps/finance/src/views/posting/reconciliate/index.vue

@@ -6,7 +6,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { ref, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, SubmitButton } from '@vben/common-ui';
 
 import { Button, message, notification, Tag } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -128,6 +128,7 @@ const gridOptions: VxeTableGridOptions<PaymentRowType> = {
           limit: page.pageSize,
           year: date[0],
           month: date[1],
+          type: formValues.type ?? '',
           ...formValues,
         });
       },
@@ -152,9 +153,7 @@ async function onStartSysCheck() {
       month: date[1],
     };
     // 调用自动核对接口
-    const hide = message.loading('系统自动核对中...', 0);
     await reconciliateBillsApi.autoCheck(params);
-    hide();
     gridApi?.query();
     notification.success({
       message: '完成',
@@ -208,7 +207,7 @@ async function onManualCheck(data?: PaymentRowType) {
     <Grid>
       <template #toolbar-actions>
         <div class="flex gap-2">
-          <Button type="primary" @click="onStartSysCheck()">启动系统自动对账</Button>
+          <SubmitButton theme="ant-design" :submit="onStartSysCheck" text="启动系统自动对账" />
           <Button type="primary" @click="onManualCheck()">人工对账</Button>
         </div>
       </template>

apps/finance/src/views/posting/reconciliate/modules/Manual.vue

@@ -3,9 +3,11 @@ import type { CreateOrderType, PaymentRowType } from '../types';
 
 import { ref, watch } from 'vue';
 
+import { SubmitButton } from '@vben/common-ui';
+
 import { VbenIcon } from '@vben-core/shadcn-ui';
 
-import { Button, Card, Input, message, Modal, notification } from 'ant-design-vue';
+import { Card, Input, message, Modal, notification } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { reconciliateBillsApi } from '#/api/posting/reconciliate';
@@ -319,6 +321,7 @@ async function onCompleteCheckCreated() {
 
   const paymentIds = multipleCurrentData.value.map((item) => item.id);
   // 调用接口
+  const hideLoading = message.loading('处理中...', 0);
   await (isBatchMode.value
     ? reconciliateBillsApi.manualCheckCreatedBatch({
         paymentIds: paymentIds.join(','),
@@ -326,6 +329,7 @@ async function onCompleteCheckCreated() {
       })
     : reconciliateBillsApi.manualCheckCreated(data));
   onCompleteCheck();
+  hideLoading();
   // 清空已选列表
   selectedData.value = [];
   selectedRef.value?.clearData();
@@ -408,7 +412,12 @@ async function onCompleteCheckCreated() {
           size="small"
         >
           <template #extra>
-            <Button type="primary" size="small" @click="onCompleteCheckCreated()">确认对账</Button>
+            <SubmitButton
+              theme="ant-design"
+              size="small"
+              :submit="onCompleteCheckCreated"
+              text="确认对账"
+            />
           </template>
           <Selected
             ref="selectedRef"

packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'reka-ui';
 
-import type { ButtonVariants, ButtonVariantSize } from './types';
+import type { ButtonTheme, ButtonVariants, ButtonVariantSize } from './types';
 
 import { cn } from '@vben-core/shared/utils';
 
@@ -12,6 +12,7 @@ import { buttonVariants } from './button';
 interface Props extends PrimitiveProps {
   class?: any;
   size?: ButtonVariantSize;
+  theme?: ButtonTheme;
   variant?: ButtonVariants;
 }
 
@@ -25,7 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
+    disabled
+    :class="cn(buttonVariants({ variant, size, theme }), props.class)"
   >
     <slot></slot>
   </Primitive>

packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts

@@ -6,18 +6,23 @@ export const buttonVariants = cva(
     defaultVariants: {
       size: 'default',
       variant: 'default',
+      theme: 'default',
     },
     variants: {
+      theme: {
+        'ant-design': '',
+        default: '',
+      },
       size: {
         default: 'h-9 px-4 py-2',
         icon: 'h-8 w-8 rounded-sm px-1 text-lg',
         lg: 'h-10 rounded-md px-4',
         sm: 'h-8 rounded-md px-2 text-xs',
+        small: 'h-8 rounded-md px-2 text-xs',
         xs: 'h-8 w-8 rounded-sm px-1 text-xs',
       },
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
@@ -26,9 +31,20 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
         outline:
           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
       },
     },
+    compoundVariants: [
+      {
+        theme: 'ant-design',
+        size: 'default',
+        class: 'h-8 rounded-md px-4 text-sm',
+      },
+      {
+        theme: 'ant-design',
+        size: 'small',
+        class: 'h-6 rounded-md px-2 text-sm',
+      },
+    ],
   },
 );

packages/@core/ui-kit/shadcn-ui/src/ui/button/types.ts

@@ -3,6 +3,7 @@ export type ButtonVariantSize =
   | 'icon'
   | 'lg'
   | 'sm'
+  | 'small'
   | 'xs'
   | null
   | undefined;
@@ -18,3 +19,5 @@ export type ButtonVariants =
   | 'secondary'
   | null
   | undefined;
+
+export type ButtonTheme = 'ant-design' | 'default';

packages/effects/common-ui/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './json-viewer';
 export * from './loading';
 export * from './page';
 export * from './resize';
+export * from './submit-button';
 export * from './tippy';
 export * from './tree';
 export * from '@vben-core/form-ui';

packages/effects/common-ui/src/components/submit-button/button.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { ButtonTheme, ButtonVariants, ButtonVariantSize } from '@vben-core/shadcn-ui';
+
+import { ref } from 'vue';
+
+import { Button, VbenIcon } from '@vben-core/shadcn-ui';
+
+interface SubmitProps {
+  /**
+   * @zh_CN 主题
+   */
+  theme?: ButtonTheme;
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN 文字
+   */
+  text?: string;
+  size?: ButtonVariantSize;
+  type?: ButtonVariants;
+  /**
+   * @zh_CN 提交函数
+   */
+  submit?: () => Promise<void>;
+}
+
+defineOptions({ name: 'Loading' });
+const props = defineProps<SubmitProps>();
+const spinning = ref(false);
+async function runSubmit() {
+  if (props.submit) {
+    spinning.value = true;
+    await new Promise((resolve) => setTimeout(resolve, props.minLoadingTime || 0));
+    await props.submit();
+    spinning.value = false;
+  }
+}
+</script>
+<template>
+  <Button
+    :disabled="spinning"
+    :theme="props.theme"
+    :type="props.type ?? 'primary'"
+    :size="props.size ?? 'default'"
+    :class="props.class"
+    @click="runSubmit()"
+  >
+    <VbenIcon
+      v-if="spinning"
+      class="mr-1 animate-spin"
+      icon="ant-design:loading-3-quarters-outlined"
+      fallback
+    />
+    {{ props.text || '提交' }}
+  </Button>
+</template>

packages/effects/common-ui/src/components/submit-button/index.ts

@@ -0,0 +1 @@
+export { default as SubmitButton } from './button.vue';