更新 Vite 配置中的 API 目标地址为本地地址，新增按状态批量删除链接的功能，包含相关对话框和表单验证逻辑，优化移动端样式以提升用户体验。
This commit is contained in:
zyh
138
docs/按狀態批量刪除鏈接前端實現說明.md
Normal file
138
docs/按狀態批量刪除鏈接前端實現說明.md
Normal file
@@ -0,0 +1,138 @@
|
||||
# 按狀態批量刪除鏈接前端實現說明
|
||||
|
||||
## 功能概述
|
||||
在現有的鏈接生成頁面中新增了按狀態批量刪除鏈接的功能，用戶可以根據指定的狀態批量刪除自己的鏈接。
|
||||
|
||||
## 實現內容
|
||||
|
||||
### 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 和組件結構
|
||||
- **維護性：** 代碼結構清晰，易於維護和擴展
|
||||
|
||||
這個實現為用戶提供了一個安全、易用的批量刪除功能，大大提高了鏈接管理的效率。
|
||||
Reference in New Issue
Block a user