重命名 APopconfirmButton 为 HAPopconfirmButton 并更新相关引用

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>