2025-last-week-summary

根据容器宽度超长省略

async fn 一定会返回一个promise, 它的返回是同步的，状态的改变时异步的

一定需要注意的性能优化和用户体验

1. 产品，项目，测试和客户都比较注意的一个点就是对于列表的频繁切换，这里一定要用节流，就是在一定时间内的频繁点击，需要节流为一次点击。 不然就会出现快速点击十次，这时候如果再配合接口反应慢，会出现内容响应延迟， 内容跳动的情况。

2.如果遇到许多接口需要来自某一个变化的参数的话，比如列表点击会改变当前选中的行，当前行中存在详情接口，以及若干别的依赖的参数a, 那么就可以基于详情接口是否请求完毕，去做防抖，就是频繁点击详情接口的时候防抖，然后详情接口请求完毕之后在去请求别的接口，这种就不会出现多接口频繁请求混乱的问题

markdown 处理组件

import { Thinking } from "vue-element-plus-x";
import MarkdownIt from "markdown-it";
import MdMermaid from "mermaid-it-markdown";
import mermaid from "mermaid";

前端导出Pdf

import jsPDF from "jspdf";

// 函数：将HTML元素转换为PDF
const exportLoading = ref(false);
const headRef = ref();
const contentRef = ref();

const exportToPDF = () => {
  exportLoading.value = true;
  // 获取预览元素
  const previewElement = document.querySelector("#ai-report-content");
  // 使用html2canvas将预览内容转换为图片
  html2canvas(previewElement, {
    scale: 2, // 提高分辨率
    useCORS: true,
    logging: false
  })
    .then((canvas) => {
      // 创建jsPDF实例
      const pdf = new jsPDF("p", "mm", "a4");
      const ctx = canvas.getContext("2d");
      const a4w = 170;
      const a4h = 250; // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
      const imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
      let renderedHeight = 0;

      while (renderedHeight < canvas.height) {
        const page = document.createElement("canvas");
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页

        // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        page
          .getContext("2d")
          .putImageData(
            ctx.getImageData(
              0,
              renderedHeight,
              canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight)
            ),
            0,
            0
          );
        pdf.addImage(
          page.toDataURL("image/jpeg", 1.0),
          "JPEG",
          20,
          20,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); // 添加图像到页面，保留10mm边距

        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); // 如果后面还有内容，添加一个空页
        }
        // 预览pdf(这里我用的是事件总线把canvas传递过去展示，达到模拟pdf预览的效果，有用但效果不是很好，有需要的可以自行修改)
        //this.$EventBus.$emit('open-pdf', canvas);
      }

      // 保存PDF
      pdf.save(
        `${get(curCase, "value.case_name") || curCase.value?.police_number}-研判报告.pdf`
      );
    })
    .catch((error) => {
      console.error("生成PDF时出错:", error);
    })
    .finally(() => {
      exportLoading.value = false;
    });
};