10 KiB
10 KiB
预警逻辑管理 - 删除规则二次确认功能
📋 更新概述
为水肥一体化系统的实时监测与预警模块中的预警逻辑管理页面的删除按钮增加了系统内二次确认功能，提升系统安全性，防止误删重要预警规则。
🎯 更新内容
1. 删除确认对话框 ⭐ 新增
功能特点
- ✅ 规则信息显示：显示即将删除的规则名称
- ✅ 警告提示：明确提示删除后无法恢复
- ✅ 状态提醒：如果规则处于启用状态，额外提醒删除后立即停止监控
- ✅ 双重确认：取消/确认两个按钮，防止误操作
- ✅ 视觉警示：使用红色主题色，强调操作的危险性
2. UI设计优化
对话框结构
标题区域：
- 警告图标（红色）
- "确认删除预警规则"标题
内容区域：
- 规则名称显示
- 红色警告框：删除后无法恢复提示
- 橙色提示框（可选）：启用状态规则的额外提醒
操作区域：
- 取消按钮（默认样式）
- 确认删除按钮（红色危险样式）
视觉层次
-
红色警告框
- 背景：浅红色 (bg-red-50)
- 边框：红色 (border-red-200)
- 文字：深红色 (text-red-800)
- 内容：强调删除不可恢复
-
橙色提示框（仅当规则启用时显示）
- 背景：浅橙色 (bg-orange-50)
- 边框：橙色 (border-orange-200)
- 文字：深橙色 (text-orange-800)
- 内容：提醒删除后监控立即停止
-
确认按钮
- 背景：红色 (bg-red-600)
- 悬停：深红色 (hover:bg-red-700)
- 视觉强调：突出危险操作
3. 操作流程
删除流程
- 用户点击规则卡片的"删除"按钮
- 系统弹出确认对话框
- 显示规则名称和警告信息
- 用户选择：
- 取消：关闭对话框，不执行删除
- 确认删除：执行删除操作
删除成功
- 规则从列表中移除
- 显示成功提示：
预警规则"规则名称"已删除 - 对话框自动关闭
💻 技术实现
状态管理
// 删除确认对话框控制
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
// 待删除的规则ID
const [ruleToDelete, setRuleToDelete] = useState<string | null>(null);
核心函数
触发删除确认
const handleDeleteRule = (ruleId: string) => {
setRuleToDelete(ruleId);
setShowDeleteConfirm(true);
};
确认删除执行
const confirmDeleteRule = () => {
if (ruleToDelete) {
const rule = alertRules.find(r => r.id === ruleToDelete);
setAlertRules(alertRules.filter(r => r.id !== ruleToDelete));
toast.success(`预警规则"${rule?.name}"已删除`);
setRuleToDelete(null);
}
setShowDeleteConfirm(false);
};
组件导入
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '../ui/alert-dialog';
📊 使用示例
示例1：删除已启用的规则
触发场景：
- 用户点击"EC值异常预警"规则的删除按钮
- 该规则当前状态为"启用"
对话框显示：
┌─────────────────────────────────────┐
│ ⚠️ 确认删除预警规则 │
├─────────────────────────────────────┤
│ 您确定要删除预警规则 │
│ "EC值异常预警"吗？ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ ⚠️ 警告：删除后将无法恢复， │ │
│ │ 该规则的所有配置信息将被永久删除。 │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 💡 提示：该规则当前处于启用状态， │ │
│ │ 删除后将立即停止监控。 │ │
│ └─────────────────────────────────┘ │
│ │
│ [取消] [确认删除] │
└─────────────────────────────────────┘
示例2：删除已禁用的规则
触发场景：
- 用户点击"水压异常预警"规则的删除按钮
- 该规则当前状态为"禁用"
对话框显示：
┌─────────────────────────────────────┐
│ ⚠️ 确认删除预警规则 │
├─────────────────────────────────────┤
│ 您确定要删除预警规则 │
│ "水压异常预警"吗？ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ ⚠️ 警告：删除后将无法恢复， │ │
│ │ 该规则的所有配置信息将被永久删除。 │ │
│ └─────────────────────────────────┘ │
│ │
│ [取消] [确认删除] │
└─────────────────────────────────────┘
🎨 UI细节
色彩方案
| 元素 | 背景色 | 边框色 | 文字色 | 说明 |
|---|---|---|---|---|
| 警告框 | bg-red-50 | border-red-200 | text-red-800 | 强调危险操作 |
| 提示框 | bg-orange-50 | border-orange-200 | text-orange-800 | 额外提醒信息 |
| 确认按钮 | bg-red-600 | - | white | 红色危险按钮 |
| 取消按钮 | - | - | - | 默认样式 |
图标使用
- 警告图标：
AlertTriangle（红色） - 位置：对话框标题左侧
- 尺寸：5x5 (w-5 h-5)
- 作用：视觉警示
间距布局
- 内容区域间距：
space-y-3 - 警告框内边距：
p-3 - 边框圆角：
rounded-md
✅ 安全性提升
1. 防止误删
- 双重确认机制
- 明确显示规则名称
- 清晰的警告提示
2. 信息透明
- 显示规则当前状态
- 提示删除后果
- 无法恢复的明确警告
3. 操作可逆
- 提供取消按钮
- 点击对话框外部可关闭
- 取消后不执行任何操作
🔄 与其他功能的协作
1. 规则列表
- 删除按钮触发确认对话框
- 删除成功后列表自动更新
- 保持用户当前的浏览位置
2. 状态统计
- 删除后更新预警规则统计
- 更新启用/禁用规则数量
- 更新相关图表数据
3. Toast通知
- 删除成功显示提示信息
- 包含被删除的规则名称
- 3秒后自动消失
🎯 用户体验优化
交互优化
-
视觉反馈
- 删除按钮悬停效果
- 对话框动画过渡
- 按钮点击效果
-
信息层次
- 重要信息突出显示
- 警告信息分级呈现
- 操作按钮位置醒目
-
操作便捷
- 键盘支持（ESC关闭）
- 点击遮罩层关闭
- 快捷按钮操作
可访问性
- 清晰的标题和描述
- 语义化的HTML结构
- 合理的焦点管理
- 键盘导航支持
🧪 测试建议
功能测试
- 点击删除按钮打开确认对话框
- 对话框显示正确的规则名称
- 启用状态规则显示额外提示
- 禁用状态规则不显示额外提示
- 点击"取消"关闭对话框且不删除
- 点击"确认删除"成功删除规则
- 删除成功后显示Toast提示
- 规则列表正确更新
UI测试
- 对话框样式符合设计规范
- 警告框颜色正确
- 提示框颜色正确
- 确认按钮为红色危险样式
- 图标显示正确
- 响应式布局正常
边界测试
- 连续删除多个规则
- 删除最后一个规则
- 快速点击删除按钮
- 在对话框打开时切换Tab
📝 用户操作指南
如何删除预警规则
-
定位规则
- 在预警逻辑管理页面
- 找到要删除的规则卡片
-
触发删除
- 点击规则卡片右上角的"删除"按钮
- 系统弹出确认对话框
-
确认信息
- 查看规则名称是否正确
- 阅读警告提示
- 了解删除后果
-
执行操作
- 确认删除：点击红色"确认删除"按钮
- 取消操作：点击"取消"按钮或点击对话框外部
-
验证结果
- 删除成功后规则从列表中消失
- 查看Toast提示确认删除成功
💡 最佳实践
删除建议
-
删除前确认
- 确保要删除的规则确实不再需要
- 建议先禁用规则观察影响
- 记录重要规则的配置参数
-
谨慎操作
- 仔细阅读确认对话框信息
- 特别注意启用状态的规则
- 避免误删正在使用的规则
-
数据备份
- 定期导出规则配置
- 保存重要规则的截图
- 记录关键参数设置
🚀 后续扩展建议
可选功能
-
删除前检查
- 检查规则触发历史
- 显示最近触发次数
- 提示相关依赖项
-
软删除
- 实现回收站功能
- 支持恢复已删除规则
- 设置自动清理周期
-
批量删除
- 支持多选规则
- 批量删除确认
- 显示删除进度
-
删除日志
- 记录删除操作
- 记录操作人和时间
- 支持审计追踪
📊 总结
本次更新为预警规则删除功能增加了完善的二次确认机制，通过清晰的警告提示、明确的操作按钮和友好的用户界面，有效防止误删重要规则，提升了系统的安全性和可靠性。
核心价值
✅ 提升安全性 - 防止误删重要配置 ✅ 改善体验 - 清晰的提示和引导 ✅ 增强信任 - 透明的操作反馈 ✅ 降低风险 - 可取消的确认流程
所有功能已完成开发并可立即使用！