admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

2025-10-17 20:56:50 +08:00

6.1 KiB

Raw Permalink Blame History

问题修复 - 详情按钮隐藏 v3.11.22

版本: v3.11.22
日期: 2025-10-08
类型: 问题修复

问题描述

在v3.11.21中修复压缩数据显示异常后，出现了新的副作用：

现象：当任务完成且数据被压缩后，Token卡片上的"详情"按钮消失了
影响：用户无法点击查看压缩提示和任务摘要信息
原因：hasTaskResults 计算属性依赖于 taskResults.value 的长度，而压缩后返回空对象

根本原因

代码逻辑链

数据压缩（v3.11.16引入）：

// batchTaskStore.js
const compactCompletedTaskData = (tokenId) => {
  // ...
  progress.result = {
    _compacted: true,
    taskCount,
    summary: `${progress.status === 'completed' ? '成功' : '失败'}（${taskCount}个任务）`
  };
};

过滤压缩数据（v3.11.21引入）：

// TaskProgressCard.vue
const taskResults = computed(() => {
  if (props.progress.result._compacted) {
    return {};  // 返回空对象，不显示为任务详情
  }
  return props.progress.result;
});

按钮显示条件（原有逻辑）：

<n-button
  v-if="hasTaskResults"  <!-- 依赖这个条件 -->
  @click="showDetail = true"
>
  详情
</n-button>

const hasTaskResults = computed(() => {
  return Object.keys(taskResults.value).length > 0  // 空对象长度为0，返回false
})

问题流程

任务完成
  ↓
数据被压缩 (result._compacted = true)
  ↓
taskResults 返回 {}
  ↓
hasTaskResults = false
  ↓
详情按钮被隐藏 (v-if="hasTaskResults")
  ↓
用户无法查看压缩提示 ❌

解决方案

修改策略

修改 hasTaskResults 计算属性，即使数据被压缩也返回 true：

const hasTaskResults = computed(() => {
  // 即使数据被压缩，也应该显示详情按钮（用户可以查看压缩提示）
  if (props.progress?.result?._compacted) {
    return true;
  }
  return Object.keys(taskResults.value).length > 0
})

逻辑优化

现在的完整逻辑：

数据被压缩：
- hasTaskResults = true → 显示详情按钮 ✅
- taskResults = {} → 不显示为任务列表 ✅
- 点击详情 → 显示压缩提示Alert ✅
数据未压缩：
- hasTaskResults = true → 显示详情按钮 ✅
- taskResults = {...} → 显示完整任务列表 ✅
无数据：
- hasTaskResults = false → 隐藏详情按钮 ✅
- 显示空状态提示 ✅

修改文件

src/components/TaskProgressCard.vue

// 是否有任务结果
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个任务）            │
└────────────────────────────┘

技术要点

计算属性优先级

合理的计算顺序：

特殊状态优先：压缩数据、错误状态等
正常逻辑次之：数据长度、内容检查等

const computed = () => {
  // 1. 特殊情况处理
  if (specialCase) return specialValue;
  
  // 2. 正常逻辑
  return normalLogic;
}

条件渲染与数据分离

UI显示条件（v-if）应该考虑所有业务场景
数据过滤逻辑（computed）专注于数据转换
两者解耦：数据为空不等于按钮应该隐藏

测试验证

测试场景

✅ 任务执行中 → 无详情按钮
✅ 任务刚完成（未压缩）→ 有详情按钮 → 显示完整任务列表
✅ 任务完成2秒后（已压缩）→ 有详情按钮 → 显示压缩提示
✅ 任务失败 → 有详情按钮 → 显示错误信息

预期行为

所有已完成或失败的任务，无论是否压缩，都应该：

✅ 显示"详情"按钮
✅ 点击后能查看信息（完整数据或压缩提示）
✅ 不显示内部字段（_compacted等）为任务项

经验总结

副作用防范

当引入新逻辑时，要考虑对相关功能的影响：

新功能A（数据压缩）
  ↓ 影响
功能B（数据显示）← 已修复
  ↓ 影响
功能C（按钮显示）← 本次修复

修复策略

快速定位：通过UI现象反推代码逻辑
理解链路：梳理完整的依赖关系
最小改动：在源头修复，避免连锁改动
全面测试：验证所有相关场景

状态: ✅ 已修复
版本: v3.11.22

6.1 KiB Raw Permalink Blame History Unescape Escape