# 删除确认弹窗迁移文档

## 已完成修改的文件

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 组件
```typescript
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '../ui/alert-dialog';
```

### 2. 添加状态管理
```typescript
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 调用
```typescript
// 旧代码
if (confirm('确定要删除吗？')) {
  onDelete(id);
}

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

### 4. 添加 AlertDialog 组件
```tsx
<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 放在正确的位置（通常在主容器的末尾）