smart-crop-ui/src/CONFIRM_DIALOG_MIGRATION.md

删除确认弹窗迁移文档

已完成修改的文件

1. ✅ /components/machinery/driver/DriverList.tsx - 驾驶员列表删除
2. ✅ /components/machinery/MachineryList.tsx - 农机列表删除
3. ✅ /components/machinery/TagManagement.tsx - 标签管理删除

待修改的文件列表

农机管理模块

4. /components/machinery/scheduling/TaskAssignment.tsx - 任务删除
5. /components/machinery/security/GeoFence.tsx - 围栏删除
6. /components/machinery/load/LoadDevice.tsx - 设备拆卸
7. /components/machinery/load/LoadType.tsx - 设备类型删除
8. /components/machinery/MaintenanceRecords.tsx - 维护记录删除
9. /components/machinery/ChangeHistoryExamples.tsx - 变更历史清除

配置管理模块

10. /components/config/MenuManagement.tsx - 菜单删除
11. /components/config/RoleManagement.tsx - 角色删除
12. /components/config/EmployeeManagement.tsx - 员工删除和密码重置
13. /components/config/UserManagement.tsx - 用户删除和密码重置
14. /components/config/PermissionManagement.tsx - 权限删除
15. /components/config/MessageSend.tsx - 消息取消和删除

地块管理模块

16. /components/field/FieldList.tsx - 地块删除

修改模式

1. 导入 AlertDialog 组件

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '../ui/alert-dialog';

2. 添加状态管理

const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [deletingId, setDeletingId] = useState<string>('');

const handleDeleteClick = (id: string) => {
  setDeletingId(id);
  setDeleteDialogOpen(true);
};

const confirmDelete = () => {
  onDelete(deletingId); // 或具体的删除逻辑
  setDeleteDialogOpen(false);
  setDeletingId('');
};

3. 替换 confirm 调用

// 旧代码
if (confirm('确定要删除吗？')) {
  onDelete(id);
}

// 新代码
onClick={() => handleDeleteClick(id)}

4. 添加 AlertDialog 组件

<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>确认删除</AlertDialogTitle>
      <AlertDialogDescription>
        确定要删除这条记录吗？此操作无法撤销。
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>取消</AlertDialogCancel>
      <AlertDialogAction
        className="bg-red-600 hover:bg-red-700"
        onClick={confirmDelete}
      >
        删除
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

注意事项

1. 确保导入路径正确（../ui/alert-dialog 或 ../../ui/alert-dialog）
2. 对于需要传递额外参数的删除操作，使用 state 保存
3. 对于有多个删除操作的页面，可能需要多个 state 或使用对象/类型区分
4. 确保 AlertDialog 放在正确的位置（通常在主容器的末尾）