From 4a4118c2dc4b79cb9060c14384a99449b452f363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 28 Feb 2025 11:41:02 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=20APopconfirmButton?=
 =?UTF-8?q?=20=E4=B8=BA=20HAPopconfirmButton=20=E5=B9=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AntdV/APopconfirmButton.vue  | 41 -----------------------
 src/pages/AntdV/HAPopconfirmButton.vue | 45 ++++++++++++++++++++++++++
 src/pages/AntdV/index.page.vue         | 33 +++++++++++++++----
 3 files changed, 71 insertions(+), 48 deletions(-)
 delete mode 100644 src/pages/AntdV/APopconfirmButton.vue
 create mode 100644 src/pages/AntdV/HAPopconfirmButton.vue

diff --git a/src/pages/AntdV/APopconfirmButton.vue b/src/pages/AntdV/APopconfirmButton.vue
deleted file mode 100644
index 0f49612..0000000
--- a/src/pages/AntdV/APopconfirmButton.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false });
-const loading = shallowRef(false);
-const open = shallowRef(false);
-function openPopconfirm() {
-  open.value = true;
-}
-
-function handleConfirm() {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-  }, 2000);
-}
-</script>
-
-<template>
-  <APopconfirm
-    :open
-    :okButtonProps="{ loading: loading }"
-    :cancelButtonProps="{ disabled: loading ? true : undefined }"
-    :disabled="true"
-    title="你确定吗？ 🤔 "
-    :description="loading ? '删除中...' : '删除后无法恢复'"
-    arrowPointAtCenter
-    placement="topRight"
-    @confirm="handleConfirm"
-    @cancel="open = false"
-    :align="{
-      targetOffset: [0, 0],
-    }"
-  >
-    <slot :loading="loading" :open="openPopconfirm" />
-  </APopconfirm>
-</template>
-
-<style lang="less">
-[class^='ant-'] .anticon svg {
-  vertical-align: unset; /* baseline */
-}
-</style>
diff --git a/src/pages/AntdV/HAPopconfirmButton.vue b/src/pages/AntdV/HAPopconfirmButton.vue
new file mode 100644
index 0000000..eeb86b6
--- /dev/null
+++ b/src/pages/AntdV/HAPopconfirmButton.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopconfirmProps } from 'ant-design-vue';
+defineOptions({ inheritAttrs: true });
+
+type NotUndefined<T> = T extends undefined ? never : T;
+type PopconfirmOnConfirmParameters = Parameters<NotUndefined<PopconfirmProps['onConfirm']>>;
+type HPopconfirmProps = {
+  onConfirm?: (...args: PopconfirmOnConfirmParameters) => Promise<void>;
+};
+
+const props = defineProps<HPopconfirmProps>();
+
+const _loading = shallowRef(false);
+const onConfirm: PopconfirmProps['onConfirm'] = async (e) => {
+  if (props.onConfirm) {
+    try {
+      _loading.value = true;
+      await props.onConfirm(e);
+    } finally {
+      _loading.value = false;
+    }
+  }
+};
+</script>
+
+<template>
+  <APopconfirm
+    :arrowPointAtCenter="!true"
+    :disabled="_loading"
+    placement="topRight"
+    :align="{
+      targetOffset: [0, 0],
+    }"
+    :onConfirm
+    :cancelButtonProps="{ disabled: _loading }"
+  >
+    <slot />
+  </APopconfirm>
+</template>
+
+<style lang="less">
+[class^='ant-'] .anticon svg {
+  vertical-align: unset; /* baseline */
+}
+</style>
diff --git a/src/pages/AntdV/index.page.vue b/src/pages/AntdV/index.page.vue
index cc4d13b..553c6b3 100644
--- a/src/pages/AntdV/index.page.vue
+++ b/src/pages/AntdV/index.page.vue
@@ -1,13 +1,33 @@
-<script setup>
-import APopconfirmButton from './APopconfirmButton.vue';
+<script setup lang="ts">
+import { message } from 'ant-design-vue';
+
+import HAPopconfirmButton from './HAPopconfirmButton.vue';
+
+async function handleConfirmAsync(e: MouseEvent) {
+  console.debug('handleConfirmAsync', e);
+  await new Promise((resolve) => {
+    setTimeout(resolve, 2000);
+  });
+  message.success('哇！数据已被成功送入黑洞 🕳️');
+}
 </script>
+
 <template>
   <ACard>
     <ACard>
-      <AButton size="small" type="text">Delete</AButton>
-      <APopconfirmButton #default="{ loading, open }">
-        <AButton :disabled="loading" size="small" @click="open" danger type="text">Delete</AButton>
-      </APopconfirmButton>
+      <APopconfirm @confirm="handleConfirmAsync">
+        <AButton size="small" type="text">APopconfirm</AButton>
+      </APopconfirm>
+
+      <AButton size="small" type="text">AButton</AButton>
+
+      <HAPopconfirmButton
+        title="你确定吗？ 🤔 "
+        description="别担心，我们只是假装很严肃 🎭"
+        @confirm="handleConfirmAsync"
+      >
+        <AButton size="small" danger type="text">HAPopconfirmButton</AButton>
+      </HAPopconfirmButton>
     </ACard>
     <ACard class="mt-4">
       <AForm name="basic" :label-col="{ style: { width: '7em' } }">
@@ -24,4 +44,3 @@ import APopconfirmButton from './APopconfirmButton.vue';
     </ACard>
   </ACard>
 </template>
-<style lang="scss" scoped></style>