feat: 添加 APopconfirmButton 组件并更新 index.page.vue 以集成确认删除功能

src/pages/AntdV/APopconfirmButton.vue

@@ -0,0 +1,41 @@
+<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>

src/pages/AntdV/index.page.vue

@@ -1,5 +1,8 @@
-<script setup></script>
+<script setup>
+import APopconfirmButton from './APopconfirmButton.vue';
+</script>
 <template>
+  <ACard>
     <ACard>
       <AForm name="basic" :label-col="{ style: { width: '7em' } }">
         <AFormItem required label="Username">
@@ -13,5 +16,13 @@
         </AFormItem>
       </AForm>
     </ACard>
+
+    <ACard class="mt-4">
+      <AButton size="small" type="text">Delete</AButton>
+      <APopconfirmButton #default="{ loading, open }">
+        <AButton :disabled="loading" size="small" @click="open" danger type="text">Delete</AButton>
+      </APopconfirmButton>
+    </ACard>
+  </ACard>
 </template>
 <style lang="scss" scoped></style>