139 lines
4.0 KiB
Markdown
139 lines
4.0 KiB
Markdown
# 按狀態批量刪除鏈接前端實現說明
|
|
|
|
## 功能概述
|
|
在現有的鏈接生成頁面中新增了按狀態批量刪除鏈接的功能，用戶可以根據指定的狀態批量刪除自己的鏈接。
|
|
|
|
## 實現內容
|
|
|
|
### 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 和組件結構
|
|
- **維護性：** 代碼結構清晰，易於維護和擴展
|
|
|
|
這個實現為用戶提供了一個安全、易用的批量刪除功能，大大提高了鏈接管理的效率。
|