XRD 衍射分析组件 (全逻辑覆盖版)

Xrd.vue 是一个专门为材料科学设计的学术级绘图工具。它不仅解决了实验数据“怎么画出来”的问题，还解决了“怎么分析”和“怎么发论文”的问题。

✨ 功能概览
💻 源码解析

核心功能点

智能峰位识别

自动捕捉衍射峰，并实时计算半高宽 (FWHM) 和 d 间距。

晶粒尺寸计算

内置谢乐公式，根据峰位信息自动估算纳米晶粒大小。

PDF 文本解析

支持直接从 PDF 卡片或论文中粘贴 [2θ 强度] 文本进行对比。

学术导出

一键导出 3600px 级别的超清 PNG，满足 SCI 论文投稿要求。

交互流程

文件导入：支持多文件全屏拖拽上传或手动选择。
参数微调：实时调整波长、敏感度、平滑度，图表自动反馈。
细节查看：点击图表上的“倒三角”标记，查看该峰的详细物理参数。
标注管理：一键添加或删除 PDF 参考标注，调整层叠间距。

1. 物理计算核心 (calculateGrainSize)

// 作用：利用谢乐公式算出晶粒直径
const calculateGrainSize = (peak: XrdPeak) => {
  const fwhm = peak.fit?.fwhm || peak.fwhm_detected;
  if (!fwhm || !wavelength.value) return "N/A"; // 缺数据就不算

  const K = constantK.value; // 常数 K (0.89)
  const lam = wavelength.value; // 波长 (nm)

  // 物理知识点：角度必须转弧度，且谢乐公式里的 theta 是 2-theta 的一半
  const beta = Number(fwhm) * (Math.PI / 180);
  const theta = (Number(peak.two_theta) / 2) * (Math.PI / 180);

  const res = (K * lam) / (beta * Math.cos(theta));
  return isFinite(res) ? res.toFixed(1) : "N/A"; // 返回 1 位小数
};

2. 学术绘图引擎 (refreshChart)

// 作用：把多条曲线整齐地叠起来，并画上 PDF 参考线
const refreshChart = () => {
  const layerOffset = globalMaxY * (Number(stackGap.value) || 0.1);

  // A: 实验曲线层 - 每条曲线根据 index 自动向上偏移，并设置不同 z-index 保证叠放顺序
  const series = fileQueue.value.map((item, index) => {
    const offset = (index + 0.5) * layerOffset;
    const color = getLineColor(index); // 使用 academicColors 配色
    return {
      type: 'line',
      data: item.x.map((x, i) => [x, item.y_processed[i] + offset]),
      z: 10 - index // 让后传的文件叠在前面文件的下方
    };
  });

  // B: PDF 参考层 - 用柱状图 (bar) 模拟 PDF 卡片的棒状图
  selectedPDFs.value.forEach((pdf) => {
    series.push({
      type: 'bar', barWidth: 3,
      itemStyle: { color: '#fbbf24' }, // 经典学术金
      data: pdf.peaks.map(p => [p.two_theta, (p.intensity * scaleFactor) + baseOffset])
    });
  });
};

3. 参数自动重算与防抖 (watch + debounce)

// 作用：当你滑动滑块时，别立刻请求服务器，等你停下 0.5 秒后再发请求
watch(
  [peakProminence, sgWindow, wavelength],
  debounce(() => {
    if (fileQueue.value.length > 0) reAnalyzeAll();
  }, 500)
);

4. 高级文件处理 (handleFileUpload & reAnalyzeAll)

// 作用：重算时必须发二进制文件！
const reAnalyzeAll = async () => {
  const fd = new FormData();
  fd.append('file', item.rawFile); // 👈 只有传原始二进制，后端才能重算平滑效果

  // 傻瓜提示：S-G 窗口必须是奇数，否则算法会报错，代码里做了自动加1处理
  let sw = Math.round(Number(sgWindow.value) || 15);
  if (sw % 2 === 0) sw += 1;
  fd.append('sg_window', sw.toString());

  const res = await axios.post('/api/xrd/analyze', fd);
};

5. 全局监听器 (Global Listeners)

// 作用：处理全屏拖拽和窗口缩放
onMounted(() => {
  window.addEventListener('resize', handleResize); // 窗口变大图表跟着变
  // 阻止浏览器默认打开文件的行为，否则你把 XRD 文件拖进来，浏览器会直接跳页
  window.addEventListener('dragover', preventGlobalDefault);
  window.addEventListener('drop', preventGlobalDefault);
});

🛠 技术参数对照表

函数/变量	参数作用	物理背景
`stackGap`	曲线高度	不让谱图互相遮挡
`peakProminence`	灵敏度	决定多高的突起算一个“峰”
`sgWindow`	平滑曲线	窗口越大，波浪线越圆滑
`markRaw`	性能提升	不深度监控图表，能大幅提速