chrome请求对比插件-下载图片优化

// === dashboard.js 修改部分 ===

// --- 替换原有的 btnDownload 监听器 --- document.getElementById('btnDownload').addEventListener('click', async () => { if (selectedIndexA === -1 || selectedIndexB === -1) { alert("请先选择请求"); return; }

const btn = document.getElementById('btnDownload'); const originalText = btn.innerText; btn.innerText = "📸 生成全量长图中..."; btn.disabled = true;

// 保存当前滚动位置，防止截图跳跃 const scrollTop = document.getElementById('diffOutput').scrollTop;

try { const timeStr = getFormattedTimestamp(); const ignoreInput = document.getElementById('ignoreKeys').value; const ignoreList = ignoreInput.split(/[,，]/).map(k => k.trim()).filter(k => k); const reqA = store.A[selectedIndexA]; const reqB = store.B[selectedIndexB];

  const textA = prepareTextForDiff(reqA.postData, ignoreList);
  const textB = prepareTextForDiff(reqB.postData, ignoreList);

  // 1. 下载 JSON 文件 (保持不变)
  downloadString(textA, `diff_A_${timeStr}.json`);
  downloadString(textB, `diff_B_${timeStr}.json`);

  // === 2. 下载截图 (核心修改) ===
  
  // A. 【强制展开所有折叠】
  // 找到所有被隐藏的行，移除隐藏类
  document.querySelectorAll('.hidden-by-fold').forEach(el => el.classList.remove('hidden-by-fold'));
  // 找到所有折叠头，移除折叠状态并改变图标
  document.querySelectorAll('.fold-header.collapsed').forEach(el => {
      el.classList.remove('collapsed');
      const toggle = el.querySelector('.fold-toggle');
      if(toggle) toggle.innerText = '[-]';
  });

  // B. 【临时撑开容器高度】
  // 获取需要截图的 DOM 节点
  const target = document.getElementById('captureTarget');
  const diffOutput = document.getElementById('diffOutput');
  
  // 保存原始样式
  const originalOutputHeight = diffOutput.style.height;
  const originalOutputOverflow = diffOutput.style.overflow;
  
  // 强制设置为内容自适应高度，移除滚动条
  diffOutput.style.height = 'auto';
  diffOutput.style.overflow = 'visible';
  
  // C. 【执行截图】
  // windowHeight 设为 scrollHeight 确保截取完整高度
  // scrollX/Y: 0 防止偏移
  const canvas = await html2canvas(target, { 
      scale: 1.5, 
      backgroundColor: "#ffffff", 
      logging: false,
      useCORS: true,
      windowHeight: target.scrollHeight + 100 // 增加一点缓冲高度
  });
  
  const imgUrl = canvas.toDataURL("image/png");
  const link = document.createElement('a');
  link.href = imgUrl;
  link.download = `diff_view_${timeStr}.png`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  // D. 【恢复现场】
  // 恢复样式
  diffOutput.style.height = originalOutputHeight;
  diffOutput.style.overflow = originalOutputOverflow;
  
  // 恢复折叠状态 (最简单的方法是重新计算并渲染一遍 Diff)
  // 如果不想重新渲染，可以跳过这一步，保留展开状态给用户看
  // 这里选择重新渲染，恢复到“刚打开时的状态”
  const mode = document.getElementById('diffMode').value;
  let diffData = computeDiff(textA, textB, '\n');
  if (mode === 'idea') {
    diffData = processDiffForIdea(diffData);
  }
  renderSideBySide(diffData);
  
  // 恢复滚动条位置
  document.getElementById('diffOutput').scrollTop = scrollTop;

} catch (e) { console.error(e); alert("下载失败: " + e.message); // 出错也要尝试恢复样式 document.getElementById('diffOutput').style.height = ''; document.getElementById('diffOutput').style.overflow = ''; } finally { btn.innerText = originalText; btn.disabled = false; } });