feat(design): Add Popconfirm docs and demos

.dumirc.ts

@@ -192,6 +192,7 @@ export default defineConfig({
             { title: 'Modal 对话框', link: '/components/modal' },
             { title: 'Drawer 抽屉', link: '/components/drawer' },
             { title: 'Notification 通知提醒框', link: '/components/notification' },
+            { title: 'Popconfirm 气泡确认框', link: '/components/popconfirm' },
             { title: 'Progress 进度条', link: '/components/progress' },
             { title: 'Result 结果', link: '/components/result' },
             { title: 'Skeleton 骨架屏', link: '/components/skeleton' },

packages/design/src/popconfirm/demo/basic.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, message, Popconfirm } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    onConfirm={e => {
+      console.log(e);
+      message.success('Click on Yes');
+    }}
+    onCancel={e => {
+      console.log(e);
+      message.info('Click on No');
+    }}
+  >
+    <Button danger>Delete</Button>
+  </Popconfirm>
+);
+
+export default App;

packages/design/src/popconfirm/demo/promise.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, message, Popconfirm } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    onConfirm={() => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(null);
+          message.success('The task is deleted');
+        }, 3000);
+      });
+    }}
+  >
+    <Button danger>Delete</Button>
+  </Popconfirm>
+);
+
+export default App;

packages/design/src/popconfirm/index.md

@@ -0,0 +1,19 @@
+---
+title: Popconfirm 气泡确认框
+nav:
+  title: 基础组件
+  path: /components
+---
+
+- 🔥 完全继承 antd [Popconfirm](https://ant.design/components/popconfirm-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基本"></code>
+
+<code src="./demo/promise.tsx" title="基于 Promise 的异步关闭" description="点击确定后异步关闭气泡确认框。"></code>
+
+## API
+
+- 详见 antd Popconfirm 文档: https://ant.design/components/popconfirm-cn