feat(ui): 添加删除操作延迟确认功能
增强用户体验,防止误删除操作: 1. MessageModal 组件增强 - 添加 confirmDelay 属性(秒) - 确认按钮倒计时功能 - 倒计时期间禁用确认按钮 - 按钮显示剩余秒数 (例如: "删除 (4s)") 2. 删除操作应用延迟确认(4秒) - ✅ 文档类型删除 (document-types._index.tsx) - ✅ 文档删除和批量删除 (documents.list.tsx) - ✅ 入口模块删除 (entry-modules._index.tsx) - ✅ 提示词删除 (prompts._index.tsx) - ✅ 规则组删除 (rule-groups._index.tsx) 技术实现: - 使用 useEffect + setInterval 实现倒计时 - 倒计时结束自动清理定时器 - 按钮禁用状态控制(disabled + opacity + cursor) 用户体验提升: - 防止误操作:4秒思考时间 - 视觉反馈:倒计时提示 - 操作可逆:倒计时期间可取消 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -576,21 +576,22 @@ export default function DocumentsIndex() {
|
||||
toastService.warning("文件正在处理中,无法删除");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
messageService.show({
|
||||
title: "确认删除",
|
||||
message: `确定要删除文档"${name}"吗?`,
|
||||
type: "warning",
|
||||
confirmText: "删除",
|
||||
cancelText: "取消",
|
||||
confirmDelay: 4,
|
||||
onConfirm: () => {
|
||||
// 设置删除状态为true
|
||||
setIsDeleting(true);
|
||||
|
||||
|
||||
const form = new FormData();
|
||||
form.append("_action", "delete");
|
||||
form.append("id", id);
|
||||
|
||||
|
||||
fetcher.submit(form, { method: "post" });
|
||||
}
|
||||
});
|
||||
@@ -602,38 +603,39 @@ export default function DocumentsIndex() {
|
||||
toastService.error('请至少选择一个文档');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 检查是否有正在处理中的文件
|
||||
const hasProcessingFiles = documents.some((doc: DocumentUI) =>
|
||||
const hasProcessingFiles = documents.some((doc: DocumentUI) =>
|
||||
selectedRowKeys.includes(doc.id.toString()) && doc.fileStatus !== 'Processed'
|
||||
);
|
||||
|
||||
|
||||
if (hasProcessingFiles) {
|
||||
toastService.error('存在服务器未处理完成的文件,请重新选择需要删除的文件');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
messageService.show({
|
||||
title: "确认批量删除",
|
||||
message: `确认删除选中的 ${selectedRowKeys.length} 个文档?`,
|
||||
type: "warning",
|
||||
confirmText: "删除",
|
||||
cancelText: "取消",
|
||||
confirmDelay: 4,
|
||||
onConfirm: () => {
|
||||
// 设置删除状态为true
|
||||
setIsDeleting(true);
|
||||
|
||||
|
||||
// 使用fetcher提交表单
|
||||
const formData = new FormData();
|
||||
formData.append('_action', 'batchDelete');
|
||||
|
||||
|
||||
// 添加所有选中的ID
|
||||
selectedRowKeys.forEach(id => {
|
||||
formData.append('ids', id);
|
||||
});
|
||||
|
||||
|
||||
fetcher.submit(formData, { method: 'post' });
|
||||
|
||||
|
||||
// 清空选中行
|
||||
setSelectedRowKeys([]);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user