232 lines
6.1 KiB
Markdown
232 lines
6.1 KiB
Markdown
# 问题修复 - 详情按钮隐藏 v3.11.22
|
||
|
||
**版本**: v3.11.22
|
||
**日期**: 2025-10-08
|
||
**类型**: 问题修复
|
||
|
||
## 问题描述
|
||
|
||
在v3.11.21中修复压缩数据显示异常后，出现了新的副作用：
|
||
- **现象**：当任务完成且数据被压缩后，Token卡片上的"详情"按钮消失了
|
||
- **影响**：用户无法点击查看压缩提示和任务摘要信息
|
||
- **原因**：`hasTaskResults` 计算属性依赖于 `taskResults.value` 的长度，而压缩后返回空对象
|
||
|
||
## 根本原因
|
||
|
||
### 代码逻辑链
|
||
|
||
1. **数据压缩**（v3.11.16引入）：
|
||
```javascript
|
||
// batchTaskStore.js
|
||
const compactCompletedTaskData = (tokenId) => {
|
||
// ...
|
||
progress.result = {
|
||
_compacted: true,
|
||
taskCount,
|
||
summary: `${progress.status === 'completed' ? '成功' : '失败'}（${taskCount}个任务）`
|
||
};
|
||
};
|
||
```
|
||
|
||
2. **过滤压缩数据**（v3.11.21引入）：
|
||
```javascript
|
||
// TaskProgressCard.vue
|
||
const taskResults = computed(() => {
|
||
if (props.progress.result._compacted) {
|
||
return {}; // 返回空对象，不显示为任务详情
|
||
}
|
||
return props.progress.result;
|
||
});
|
||
```
|
||
|
||
3. **按钮显示条件**（原有逻辑）：
|
||
```vue
|
||
<n-button
|
||
v-if="hasTaskResults" <!-- 依赖这个条件 -->
|
||
@click="showDetail = true"
|
||
>
|
||
详情
|
||
</n-button>
|
||
```
|
||
|
||
```javascript
|
||
const hasTaskResults = computed(() => {
|
||
return Object.keys(taskResults.value).length > 0 // 空对象长度为0，返回false
|
||
})
|
||
```
|
||
|
||
### 问题流程
|
||
|
||
```
|
||
任务完成
|
||
↓
|
||
数据被压缩 (result._compacted = true)
|
||
↓
|
||
taskResults 返回 {}
|
||
↓
|
||
hasTaskResults = false
|
||
↓
|
||
详情按钮被隐藏 (v-if="hasTaskResults")
|
||
↓
|
||
用户无法查看压缩提示 ❌
|
||
```
|
||
|
||
## 解决方案
|
||
|
||
### 修改策略
|
||
|
||
修改 `hasTaskResults` 计算属性，即使数据被压缩也返回 `true`：
|
||
|
||
```javascript
|
||
const hasTaskResults = computed(() => {
|
||
// 即使数据被压缩，也应该显示详情按钮（用户可以查看压缩提示）
|
||
if (props.progress?.result?._compacted) {
|
||
return true;
|
||
}
|
||
return Object.keys(taskResults.value).length > 0
|
||
})
|
||
```
|
||
|
||
### 逻辑优化
|
||
|
||
现在的完整逻辑：
|
||
|
||
1. **数据被压缩**：
|
||
- `hasTaskResults = true` → 显示详情按钮 ✅
|
||
- `taskResults = {}` → 不显示为任务列表 ✅
|
||
- 点击详情 → 显示压缩提示Alert ✅
|
||
|
||
2. **数据未压缩**：
|
||
- `hasTaskResults = true` → 显示详情按钮 ✅
|
||
- `taskResults = {...}` → 显示完整任务列表 ✅
|
||
|
||
3. **无数据**：
|
||
- `hasTaskResults = false` → 隐藏详情按钮 ✅
|
||
- 显示空状态提示 ✅
|
||
|
||
## 修改文件
|
||
|
||
### src/components/TaskProgressCard.vue
|
||
|
||
```javascript
|
||
// 是否有任务结果
|
||
const hasTaskResults = computed(() => {
|
||
// 即使数据被压缩，也应该显示详情按钮（用户可以查看压缩提示）
|
||
if (props.progress?.result?._compacted) {
|
||
return true;
|
||
}
|
||
return Object.keys(taskResults.value).length > 0
|
||
})
|
||
```
|
||
|
||
## 用户体验改进
|
||
|
||
### 修复前
|
||
```
|
||
Token卡片（已完成 + 数据已压缩）
|
||
┌─────────────────────────┐
|
||
│ 10601服-0-7145... 执行中│ ← 只有"子任务"按钮
|
||
│ │
|
||
│ 一键补差 0/7 │
|
||
│ ██████████████████ 100% │
|
||
│ │
|
||
│ 发车: 4/4 今日已达上限 │
|
||
└─────────────────────────┘
|
||
```
|
||
|
||
### 修复后
|
||
```
|
||
Token卡片（已完成 + 数据已压缩）
|
||
┌─────────────────────────┐
|
||
│ 10601服-0-7145... 已完成 │
|
||
│ [详情][子任务]│ ← 详情按钮恢复显示
|
||
│ 一键补差 0/7 │
|
||
│ ██████████████████ 100% │
|
||
│ │
|
||
│ 成功: 7 │
|
||
│ 发车: 4/4 今日已达上限 │
|
||
└─────────────────────────┘
|
||
|
||
点击"详情"后：
|
||
┌────────────────────────────┐
|
||
│ 📦 数据已优化压缩 │
|
||
│ │
|
||
│ 为节省内存，已完成任务的 │
|
||
│ 详细数据已被压缩。 │
|
||
│ │
|
||
│ 成功（7个任务） │
|
||
└────────────────────────────┘
|
||
```
|
||
|
||
## 技术要点
|
||
|
||
### 计算属性优先级
|
||
|
||
合理的计算顺序：
|
||
1. **特殊状态优先**：压缩数据、错误状态等
|
||
2. **正常逻辑次之**：数据长度、内容检查等
|
||
|
||
```javascript
|
||
const computed = () => {
|
||
// 1. 特殊情况处理
|
||
if (specialCase) return specialValue;
|
||
|
||
// 2. 正常逻辑
|
||
return normalLogic;
|
||
}
|
||
```
|
||
|
||
### 条件渲染与数据分离
|
||
|
||
- **UI显示条件**（v-if）应该考虑所有业务场景
|
||
- **数据过滤逻辑**（computed）专注于数据转换
|
||
- **两者解耦**：数据为空不等于按钮应该隐藏
|
||
|
||
## 相关版本
|
||
|
||
- **v3.11.16**: 引入数据压缩机制
|
||
- **v3.11.21**: 修复压缩数据显示为失败项
|
||
- **v3.11.22**: 修复详情按钮隐藏问题（本版本）
|
||
|
||
## 测试验证
|
||
|
||
### 测试场景
|
||
|
||
1. ✅ 任务执行中 → 无详情按钮
|
||
2. ✅ 任务刚完成（未压缩）→ 有详情按钮 → 显示完整任务列表
|
||
3. ✅ 任务完成2秒后（已压缩）→ 有详情按钮 → 显示压缩提示
|
||
4. ✅ 任务失败 → 有详情按钮 → 显示错误信息
|
||
|
||
### 预期行为
|
||
|
||
所有已完成或失败的任务，无论是否压缩，都应该：
|
||
- ✅ 显示"详情"按钮
|
||
- ✅ 点击后能查看信息（完整数据或压缩提示）
|
||
- ✅ 不显示内部字段（`_compacted`等）为任务项
|
||
|
||
## 经验总结
|
||
|
||
### 副作用防范
|
||
|
||
当引入新逻辑时，要考虑对相关功能的影响：
|
||
```
|
||
新功能A（数据压缩）
|
||
↓ 影响
|
||
功能B（数据显示）← 已修复
|
||
↓ 影响
|
||
功能C（按钮显示）← 本次修复
|
||
```
|
||
|
||
### 修复策略
|
||
|
||
1. **快速定位**：通过UI现象反推代码逻辑
|
||
2. **理解链路**：梳理完整的依赖关系
|
||
3. **最小改动**：在源头修复，避免连锁改动
|
||
4. **全面测试**：验证所有相关场景
|
||
|
||
---
|
||
|
||
**状态**: ✅ 已修复
|
||
**版本**: v3.11.22
|
||
|