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,17 +1,28 @@
-<script setup></script>
+<script setup>
+import APopconfirmButton from './APopconfirmButton.vue';
+</script>
 <template>
   <ACard>
-    <AForm name="basic" :label-col="{ style: { width: '7em' } }">
-      <AFormItem required label="Username">
-        <AInput />
-      </AFormItem>
-      <AFormItem label="Password">
-        <AInput />
-      </AFormItem>
-      <AFormItem>
-        <AButton html-type="submit" type="primary">Submit</AButton>
-      </AFormItem>
-    </AForm>
+    <ACard>
+      <AForm name="basic" :label-col="{ style: { width: '7em' } }">
+        <AFormItem required label="Username">
+          <AInput />
+        </AFormItem>
+        <AFormItem label="Password">
+          <AInput />
+        </AFormItem>
+        <AFormItem>
+          <AButton html-type="submit" type="primary">Submit</AButton>
+        </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>