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

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

## 實現內容

### 1. API 接口實現
**文件：** `src/api/links.js`

新增了 `batchDeleteByStatus` 方法：
```javascript
// 按状态批量删除链接
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. 響應式數據結構

```javascript
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 和組件結構
- **維護性：** 代碼結構清晰，易於維護和擴展

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