331 lines
8.6 KiB
Markdown
331 lines
8.6 KiB
Markdown
# ConfirmDialog 组件
|
||
|
||
## 组件说明
|
||
|
||
确认对话框组件，基于 Ant Design Modal 封装，提供统一的确认对话框样式和交互。支持单个删除、批量删除、警告确认和通用确认等多种场景。
|
||
|
||
## 组件位置
|
||
|
||
```
|
||
src/components/ConfirmDialog/ConfirmDialog.jsx
|
||
```
|
||
|
||
## API 方法
|
||
|
||
组件以静态方法的形式提供，无需实例化，直接调用即可。
|
||
|
||
### ConfirmDialog.delete()
|
||
|
||
显示单个项目删除确认对话框。
|
||
|
||
#### 参数
|
||
|
||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||
|--------|------|------|--------|------|
|
||
| title | string | 否 | '确认删除' | 对话框标题 |
|
||
| itemName | string | 是 | - | 要删除的项目名称 |
|
||
| itemInfo | string | 否 | - | 项目附加信息 |
|
||
| onOk | function | 否 | - | 确认回调，支持返回 Promise |
|
||
| onCancel | function | 否 | - | 取消回调 |
|
||
|
||
#### 使用示例
|
||
|
||
```jsx
|
||
import ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'
|
||
|
||
const handleDeleteUser = (record) => {
|
||
ConfirmDialog.delete({
|
||
itemName: `用户名：${record.userName}`,
|
||
itemInfo: `姓名：${record.name}`,
|
||
onOk() {
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
// 执行删除操作
|
||
deleteUser(record.id)
|
||
resolve()
|
||
Toast.success('删除成功', `用户 "${record.userName}" 已成功删除`)
|
||
}, 1000)
|
||
})
|
||
},
|
||
})
|
||
}
|
||
```
|
||
|
||
### ConfirmDialog.batchDelete()
|
||
|
||
显示批量删除确认对话框。
|
||
|
||
#### 参数
|
||
|
||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||
|--------|------|------|--------|------|
|
||
| count | number | 是 | - | 要删除的项目数量 |
|
||
| items | Array<ItemInfo> | 是 | - | 项目列表 |
|
||
| onOk | function | 否 | - | 确认回调，支持返回 Promise |
|
||
| onCancel | function | 否 | - | 取消回调 |
|
||
|
||
##### ItemInfo 对象
|
||
|
||
| 属性名 | 类型 | 必填 | 说明 |
|
||
|--------|------|------|------|
|
||
| name | string | 是 | 项目名称 |
|
||
| info | string | 否 | 项目附加信息 |
|
||
|
||
#### 使用示例
|
||
|
||
```jsx
|
||
const handleBatchDelete = () => {
|
||
const selectedUsers = filteredUsers.filter((u) => selectedRowKeys.includes(u.id))
|
||
const items = selectedUsers.map((user) => ({
|
||
name: user.userName,
|
||
info: user.name,
|
||
}))
|
||
|
||
ConfirmDialog.batchDelete({
|
||
count: selectedRowKeys.length,
|
||
items,
|
||
onOk() {
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
const count = selectedRowKeys.length
|
||
const newUsers = filteredUsers.filter((u) => !selectedRowKeys.includes(u.id))
|
||
setFilteredUsers(newUsers)
|
||
setSelectedRowKeys([])
|
||
resolve()
|
||
Toast.success('批量删除成功', `已成功删除 ${count} 个用户`)
|
||
}, 1000)
|
||
})
|
||
},
|
||
})
|
||
}
|
||
```
|
||
|
||
### ConfirmDialog.warning()
|
||
|
||
显示警告确认对话框。
|
||
|
||
#### 参数
|
||
|
||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||
|--------|------|------|--------|------|
|
||
| title | string | 是 | - | 对话框标题 |
|
||
| content | string\|ReactNode | 是 | - | 对话框内容 |
|
||
| okText | string | 否 | '确定' | 确认按钮文字 |
|
||
| cancelText | string | 否 | '取消' | 取消按钮文字 |
|
||
| onOk | function | 否 | - | 确认回调 |
|
||
| onCancel | function | 否 | - | 取消回调 |
|
||
|
||
#### 使用示例
|
||
|
||
```jsx
|
||
const handleRiskyOperation = () => {
|
||
ConfirmDialog.warning({
|
||
title: '操作警告',
|
||
content: '此操作可能影响系统稳定性，确定要继续吗？',
|
||
okText: '继续操作',
|
||
onOk() {
|
||
// 执行危险操作
|
||
performRiskyOperation()
|
||
},
|
||
})
|
||
}
|
||
```
|
||
|
||
### ConfirmDialog.confirm()
|
||
|
||
显示通用确认对话框。
|
||
|
||
#### 参数
|
||
|
||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||
|--------|------|------|--------|------|
|
||
| title | string | 是 | - | 对话框标题 |
|
||
| content | string\|ReactNode | 是 | - | 对话框内容 |
|
||
| okText | string | 否 | '确定' | 确认按钮文字 |
|
||
| cancelText | string | 否 | '取消' | 取消按钮文字 |
|
||
| okType | string | 否 | 'primary' | 确认按钮类型（primary/danger） |
|
||
| onOk | function | 否 | - | 确认回调 |
|
||
| onCancel | function | 否 | - | 取消回调 |
|
||
|
||
#### 使用示例
|
||
|
||
```jsx
|
||
const handleSubmit = () => {
|
||
ConfirmDialog.confirm({
|
||
title: '提交确认',
|
||
content: '确定要提交当前表单吗？',
|
||
okText: '提交',
|
||
onOk() {
|
||
// 执行提交操作
|
||
submitForm()
|
||
},
|
||
})
|
||
}
|
||
```
|
||
|
||
## 完整使用示例
|
||
|
||
### 单个删除
|
||
|
||
```jsx
|
||
import ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'
|
||
import Toast from '../components/Toast/Toast'
|
||
|
||
function UserListPage() {
|
||
const handleDeleteUser = (record) => {
|
||
ConfirmDialog.delete({
|
||
itemName: `用户名：${record.userName}`,
|
||
itemInfo: `姓名：${record.name}`,
|
||
onOk() {
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
const newUsers = filteredUsers.filter((u) => u.id !== record.id)
|
||
setFilteredUsers(newUsers)
|
||
resolve()
|
||
Toast.success('删除成功', `用户 "${record.userName}" 已成功删除`)
|
||
}, 1000)
|
||
})
|
||
},
|
||
})
|
||
}
|
||
|
||
return (
|
||
<Button onClick={() => handleDeleteUser(user)} danger>
|
||
删除
|
||
</Button>
|
||
)
|
||
}
|
||
```
|
||
|
||
### 批量删除
|
||
|
||
```jsx
|
||
function UserListPage() {
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState([])
|
||
|
||
const handleBatchDelete = () => {
|
||
const selectedUsers = filteredUsers.filter((u) => selectedRowKeys.includes(u.id))
|
||
const items = selectedUsers.map((user) => ({
|
||
name: user.userName,
|
||
info: user.name,
|
||
}))
|
||
|
||
ConfirmDialog.batchDelete({
|
||
count: selectedRowKeys.length,
|
||
items,
|
||
onOk() {
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
const count = selectedRowKeys.length
|
||
const newUsers = filteredUsers.filter((u) => !selectedRowKeys.includes(u.id))
|
||
setFilteredUsers(newUsers)
|
||
setSelectedRowKeys([])
|
||
resolve()
|
||
Toast.success('批量删除成功', `已成功删除 ${count} 个用户`)
|
||
}, 1000)
|
||
})
|
||
},
|
||
})
|
||
}
|
||
|
||
return (
|
||
<Button
|
||
onClick={handleBatchDelete}
|
||
disabled={selectedRowKeys.length === 0}
|
||
danger
|
||
>
|
||
批量删除
|
||
</Button>
|
||
)
|
||
}
|
||
```
|
||
|
||
### 自定义内容
|
||
|
||
```jsx
|
||
ConfirmDialog.confirm({
|
||
title: '重置密码',
|
||
content: (
|
||
<div>
|
||
<p>确定要重置用户 <strong>{user.userName}</strong> 的密码吗？</p>
|
||
<p style={{ color: '#faad14' }}>新密码将发送到用户邮箱</p>
|
||
</div>
|
||
),
|
||
okText: '确认重置',
|
||
okType: 'primary',
|
||
onOk() {
|
||
resetPassword(user.id)
|
||
},
|
||
})
|
||
```
|
||
|
||
### 异步操作处理
|
||
|
||
```jsx
|
||
const handleDeleteUser = (record) => {
|
||
ConfirmDialog.delete({
|
||
itemName: `用户名：${record.userName}`,
|
||
itemInfo: `姓名：${record.name}`,
|
||
async onOk() {
|
||
try {
|
||
// 调用 API 删除用户
|
||
await api.deleteUser(record.id)
|
||
|
||
// 更新本地数据
|
||
const newUsers = filteredUsers.filter((u) => u.id !== record.id)
|
||
setFilteredUsers(newUsers)
|
||
|
||
Toast.success('删除成功', `用户 "${record.userName}" 已成功删除`)
|
||
} catch (error) {
|
||
Toast.error('删除失败', error.message)
|
||
throw error // 阻止对话框关闭
|
||
}
|
||
},
|
||
})
|
||
}
|
||
```
|
||
|
||
## 特性说明
|
||
|
||
### 删除确认样式
|
||
|
||
- 红色危险图标
|
||
- 高亮显示要删除的项目信息
|
||
- 红色警告提示"此操作不可恢复，请谨慎操作！"
|
||
- 危险样式的确认按钮
|
||
|
||
### 批量删除列表
|
||
|
||
- 最多显示 200px 高度的滚动列表
|
||
- 每个项目显示名称和附加信息
|
||
- 项目间用分隔线隔开
|
||
|
||
### Promise 支持
|
||
|
||
- `onOk` 回调支持返回 Promise
|
||
- 异步操作进行时，确认按钮显示 loading 状态
|
||
- Promise reject 时，对话框不会关闭
|
||
- 适合调用 API 等异步操作
|
||
|
||
### 居中显示
|
||
|
||
- 所有对话框默认垂直居中显示（`centered: true`）
|
||
|
||
## 使用场景
|
||
|
||
1. **删除确认** - 删除用户、设备、订单等数据前的确认
|
||
2. **批量删除** - 批量删除多条数据前的确认
|
||
3. **危险操作警告** - 执行可能影响系统的操作前的警告
|
||
4. **通用确认** - 提交表单、保存设置等操作的确认
|
||
5. **重要操作二次确认** - 任何需要用户明确确认的操作
|
||
|
||
## 注意事项
|
||
|
||
1. 删除操作统一使用红色危险样式，提醒用户谨慎操作
|
||
2. `onOk` 回调支持同步和异步（返回 Promise）两种方式
|
||
3. 批量删除时，`items` 数组会在对话框中完整展示，注意数量控制
|
||
4. 对话框内容支持字符串和 React 节点，可以自定义复杂内容
|
||
5. 确认按钮文字建议明确操作类型，如"确认删除"、"确认提交"等
|
||
6. 配合 Toast 组件使用，提供操作结果反馈
|
||
7. 异步操作失败时，throw error 可以阻止对话框关闭
|