login_task_web/docs/按狀態批量刪除鏈接前端實現說明.md

按狀態批量刪除鏈接前端實現說明

功能概述

在現有的鏈接生成頁面中新增了按狀態批量刪除鏈接的功能，用戶可以根據指定的狀態批量刪除自己的鏈接。

實現內容

1. API 接口實現

文件： src/api/links.js

新增了 batchDeleteByStatus 方法：

// 按状态批量删除链接
export function batchDeleteByStatus(payload) {
  // payload: { statusList: string[], confirmDelete: boolean }
  return http.post('/api/link/batch-delete-by-status', payload)
}

2. UI 界面實現

文件： src/views/links/LinkGenerate.vue

2.1 操作入口

• 桌面端： 在鏈接列表卡片頭部新增「按狀態刪除」按鈕
• 移動端： 在移動端操作按鈕組中新增相同功能按鈕

2.2 對話框界面

• 使用 el-dialog 組件創建批量刪除對話框
• 包含狀態選擇（多選框組）和確認刪除選項
• 支持響應式設計，移動端優化顯示

2.3 狀態選項

支持的鏈接狀態：

• NEW: 新建
• USING: 使用中
• LOGGED_IN: 已登錄
• COMPLETED: 已完成
• REFUNDED: 已退款
• EXPIRED: 已過期

3. 業務邏輯實現

3.1 表單驗證

• 狀態列表不能為空
• 必須勾選確認刪除選項
• 使用 Element Plus 的表單驗證規則

3.2 安全確認機制

• 表單提交前進行驗證
• 二次確認對話框顯示要刪除的狀態
• 防止誤操作

3.3 結果處理

• 顯示刪除結果統計（成功/失敗數量）
• 失敗時顯示詳細錯誤信息
• 自動刷新鏈接列表

4. 響應式數據結構

const batchDeleteByStatusDialog = reactive({
  visible: false,        // 對話框顯示狀態
  loading: false,        // 刪除操作加載狀態
  form: {
    statusList: [],      // 選中的狀態列表
    confirmDelete: false // 確認刪除選項
  },
  rules: {
    // 表單驗證規則
    statusList: [...],
    confirmDelete: [...]
  }
})

5. 主要方法

5.1 showBatchDeleteByStatusDialog()

• 顯示批量刪除對話框
• 重置表單狀態

5.2 closeBatchDeleteByStatusDialog()

• 關閉對話框
• 清理表單數據和狀態

5.3 handleBatchDeleteByStatus()

• 執行批量刪除操作
• 包含完整的驗證、確認、調用API、結果處理流程

用戶操作流程

1. 打開功能： 點擊「按狀態刪除」按鈕
2. 選擇狀態： 勾選要刪除的鏈接狀態（可多選）
3. 確認操作： 勾選確認刪除選項
4. 提交請求： 點擊「確認刪除」按鈕
5. 二次確認： 在彈出的確認對話框中確認操作
6. 查看結果： 系統顯示刪除結果並自動刷新列表

錯誤處理

客戶端驗證

• 狀態列表為空時提示用戶選擇
• 未確認刪除時阻止提交
• 表單驗證失敗時顯示相應錯誤信息

服務端錯誤

• 網絡錯誤時顯示通用錯誤信息
• 服務端返回的具體錯誤信息會顯示給用戶
• 部分成功時會顯示成功和失敗的統計信息

移動端優化

界面適配

• 對話框寬度自適應移動端屏幕
• 狀態選擇框採用縱向佈局
• 按鈕尺寸和間距針對觸摸操作優化

樣式優化

• 選擇框使用卡片式設計，易於點擊
• 選中狀態有明顯的視覺反饋
• 支持深色模式適配

安全特性

1. 權限控制： 用戶只能刪除自己創建的鏈接
2. 操作確認： 雙重確認機制防止誤操作
3. 參數驗證： 前後端雙重驗證確保數據安全
4. 狀態限制： 限制可選擇的狀態類型和數量

技術特點

• 響應式設計： 支持桌面端和移動端
• 用戶體驗： 操作流程清晰，反饋及時
• 錯誤處理： 完善的錯誤捕獲和用戶提示
• 代碼復用： 複用現有的 API 和組件結構
• 維護性： 代碼結構清晰，易於維護和擴展

這個實現為用戶提供了一個安全、易用的批量刪除功能，大大提高了鏈接管理的效率。