feat: 实现 DOCX 媒体预处理与跨端 PNG 捕获

2026-07-30 13:21:18 +08:00
parent 7831bc23f0
commit fe5d67fb6d
20 changed files with 1294 additions and 16 deletions
@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+
+import { beforeEach, describe, expect, it } from "vitest";
+import { collectDocxMediaCaptureTargets } from "../src/index.js";
+
+describe("DOCX 媒体捕获计划", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    window.scrollTo(0, 0);
+  });
+
+  it("按文档顺序标记图片、Mermaid 和 ECharts", () => {
+    document.body.innerHTML = `
+      <article id="write">
+        <figure class="md-document-image-block">
+          <img class="md-document-image" alt="架构截图">
+          <figcaption>系统架构</figcaption>
+        </figure>
+        <div class="mermaid"><svg aria-label="处理流程"></svg></div>
+        <figure class="md-echarts">
+          <div class="md-echarts-host" aria-label="年度收入">
+            <svg></svg>
+          </div>
+          <figcaption>收入趋势</figcaption>
+        </figure>
+      </article>
+    `;
+    const media = Array.from(
+      document.querySelectorAll<HTMLElement | SVGSVGElement>(
+        "img, svg"
+      )
+    );
+    media.forEach((element, index) => {
+      element.getBoundingClientRect = () =>
+        ({
+          x: 10,
+          y: 20 + index * 100,
+          left: 10,
+          top: 20 + index * 100,
+          right: 650,
+          bottom: 380 + index * 100,
+          width: 640,
+          height: 360,
+          toJSON: () => ({})
+        }) as DOMRect;
+    });
+
+    const targets = collectDocxMediaCaptureTargets(document, {
+      contentWidthPx: 700,
+      contentHeightPx: 900
+    });
+
+    expect(
+      targets.map(
+        ({ id, kind, kindOrdinal, altText, caption }) => ({
+          id,
+          kind,
+          kindOrdinal,
+          altText,
+          caption
+        })
+      )
+    ).toEqual([
+      {
+        id: "docx-media-1",
+        kind: "image",
+        kindOrdinal: 1,
+        altText: "架构截图",
+        caption: "系统架构"
+      },
+      {
+        id: "docx-media-2",
+        kind: "mermaid",
+        kindOrdinal: 1,
+        altText: "处理流程",
+        caption: undefined
+      },
+      {
+        id: "docx-media-3",
+        kind: "echarts",
+        kindOrdinal: 1,
+        altText: "年度收入",
+        caption: "收入趋势"
+      }
+    ]);
+    expect(
+      media.map((element) => element.dataset.docxMediaId)
+    ).toEqual(["docx-media-1", "docx-media-2", "docx-media-3"]);
+    expect(targets[0]?.rasterScale).toBe(3.125);
+  });
+
+  it("限制超大媒体的显示尺寸和 PNG 像素规模", () => {
+    document.body.innerHTML = `
+      <article id="write">
+        <img class="md-document-image" alt="">
+      </article>
+    `;
+    const image = document.querySelector("img")!;
+    image.getBoundingClientRect = () =>
+      ({
+        x: 0,
+        y: 0,
+        left: 0,
+        top: 0,
+        right: image.style.width ? 800 : 4000,
+        bottom: image.style.width ? 600 : 3000,
+        width: image.style.width ? 800 : 4000,
+        height: image.style.width ? 600 : 3000,
+        toJSON: () => ({})
+      }) as DOMRect;
+
+    const [target] = collectDocxMediaCaptureTargets(document, {
+      contentWidthPx: 800,
+      contentHeightPx: 900
+    });
+
+    expect(target?.displayWidthPx).toBeLessThanOrEqual(800);
+    expect(
+      (target?.captureWidthPx ?? 0) *
+        (target?.rasterScale ?? 0)
+    ).toBeLessThanOrEqual(4096);
+    expect(target?.altText).toBe("图片 1");
+  });
+});