diff --git a/src/pages/AntdV/HAPopconfirmButton.vue b/src/pages/AntdV/HAPopconfirm.vue
similarity index 78%
rename from src/pages/AntdV/HAPopconfirmButton.vue
rename to src/pages/AntdV/HAPopconfirm.vue
index e606690..c196dc0 100644
--- a/src/pages/AntdV/HAPopconfirmButton.vue
+++ b/src/pages/AntdV/HAPopconfirm.vue
@@ -1,13 +1,19 @@
-<script setup lang="ts">
+<script lang="ts">
 import type { PopconfirmProps } from 'ant-design-vue';
-defineOptions({ inheritAttrs: true });
 
-const props = defineProps<HPopconfirmProps>();
 type NotUndefined<T> = T extends undefined ? never : T;
 type PopconfirmOnConfirmParameters = Parameters<NotUndefined<PopconfirmProps['onConfirm']>>;
 type HPopconfirmProps = {
+  description: PopconfirmProps['description'];
   onConfirm?: (...args: PopconfirmOnConfirmParameters) => Promise<void>;
+  title: PopconfirmProps['title'];
 };
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: true });
+
+const props = defineProps<HPopconfirmProps>();
 
 const _loading = shallowRef(false);
 const onConfirm: PopconfirmProps['onConfirm'] = async (e) => {
@@ -24,16 +30,18 @@ const onConfirm: PopconfirmProps['onConfirm'] = async (e) => {
 
 <template>
   <APopconfirm
-    :arrowPointAtCenter="!true"
-    :disabled="_loading"
-    placement="topRight"
     :align="{
       targetOffset: [0, 0],
     }"
-    :onConfirm
-    :cancelButtonProps="{ disabled: _loading }"
+    :arrow-point-at-center="!true"
+    :cancel-button-props="{ disabled: _loading }"
+    :description
+    :disabled="_loading"
+    :on-confirm
+    :title
+    placement="topRight"
   >
-    <slot />
+    <slot></slot>
   </APopconfirm>
 </template>
 
diff --git a/src/pages/AntdV/index.page.vue b/src/pages/AntdV/index.page.vue
index 553c6b3..fd05934 100644
--- a/src/pages/AntdV/index.page.vue
+++ b/src/pages/AntdV/index.page.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue';
 
-import HAPopconfirmButton from './HAPopconfirmButton.vue';
+import HAPopconfirm from './HAPopconfirm.vue';
 
 async function handleConfirmAsync(e: MouseEvent) {
   console.debug('handleConfirmAsync', e);
@@ -15,19 +15,9 @@ async function handleConfirmAsync(e: MouseEvent) {
 <template>
   <ACard>
     <ACard>
-      <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>
+      <HAPopconfirm title="你确定吗？ 🤔 " description="别担心，我们只是假装很严肃 🎭" @confirm="handleConfirmAsync">
+        <AButton size="small" danger type="text">HAPopconfirm</AButton>
+      </HAPopconfirm>
     </ACard>
     <ACard class="mt-4">
       <AForm name="basic" :label-col="{ style: { width: '7em' } }">
@@ -44,3 +34,4 @@ async function handleConfirmAsync(e: MouseEvent) {
     </ACard>
   </ACard>
 </template>
+./HAPopconfirm.vue