bee-front-components 1.0.0

package/lib/components/PdfViewer/index.js

@@ -0,0 +1,699 @@
+import _Icon from "choerodon-ui/lib/icon";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * @name PdfViewer 轻量 PDF 预览组件（基于 pdfjs-dist）
+ * @description
+ * - 多实例：每个实例独立 getDocument，各自拥有独立 worker，可左右分屏对比多份文档
+ * - 懒加载：IntersectionObserver 仅渲染可视区页面（可提前 rootMargin 预渲染），滚动顺滑
+ * - 文档级 LRU 缓存：同批次/委托单多份文档来回切换时秒开，LRU 上限避免 90+ 份大单场景内存爆炸
+ * - 联动：暴露 scrollToPage / onVisiblePageChange，可做多实例同步滚动
+ * - 缩放：右下角工具栏按钮（缩放/比例显示），或 Ctrl/Cmd + 滚轮 / 双指捏合（替代浏览器默认缩放），按锚点保持缩放前后内容位置
+ * - 定位：url 携带 #page=N 片段（如 xxx.pdf#page=3）时，文档加载完成后自动滚动到对应页
+ *
+ * @note worker 部署
+ * pdf.js 解析运行在 Web Worker 中，需要加载 pdf.worker.min.js：
+ * 请将 node_modules/pdfjs-dist/build/pdf.worker.min.js 复制到应用静态根目录（dist/），
+ * 或通过 <PdfViewer workerSrc="..." /> 指定可访问地址。
+ * 若 worker 加载失败，pdf.js 会自动降级为 fake worker（主线程解析），功能可用但会阻塞 UI。
+ */
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import * as pdfjsNS from "pdfjs-dist";
+
+// pdfjs-dist v2 是 AMD/UMD 构建，webpack 下 `import * as` 可能被包装成 { default: PDFJS }，
+// 统一取 default（不存在则用命名空间本体），避免 pdfjsLib.getDocument 解析为 undefined
+const pdfjsLib = pdfjsNS.default || pdfjsNS;
+
+/* ====================== 1. Worker 配置 ====================== */
+// 基于 umi define 注入的 PUBLIC_URL 拼接（dev 为 "/"，prod 部署时 BUILD_PUBLIC_URL 会替换成实际部署路径）；
+// public/ 下的 pdf.worker.min.js 会随构建自动拷贝到静态根目录
+const DEFAULT_WORKER_SRC = `${process.env.PUBLIC_URL}pdf.worker.min.js`;
+export function configurePdfWorker(src) {
+  pdfjsLib.GlobalWorkerOptions.workerSrc = src;
+}
+if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
+  configurePdfWorker(DEFAULT_WORKER_SRC);
+}
+
+/* ====================== 2. 工具：LRU 缓存 ====================== */
+class LRUCache {
+  constructor(max) {
+    this.max = max;
+    this.map = new Map();
+  }
+  has(key) {
+    return this.map.has(key);
+  }
+  get(key) {
+    const value = this.map.get(key);
+    if (value !== undefined) {
+      // 命中后刷新到末尾（最新）
+      this.map.delete(key);
+      this.map.set(key, value);
+    }
+    return value;
+  }
+  set(key, value) {
+    if (this.map.has(key)) {
+      this.map.delete(key);
+    }
+    this.map.set(key, value);
+    // 超出上限淘汰最久未用的
+    if (this.map.size > this.max) {
+      const oldest = this.map.keys().next().value;
+      if (oldest !== undefined) {
+        this.map.delete(oldest);
+      }
+    }
+  }
+  clear() {
+    this.map.clear();
+  }
+}
+
+/* ====================== 3. 文档级 LRU 缓存 ====================== */
+
+const DOC_CACHE_MAX = 5;
+const docCache = new LRUCache(DOC_CACHE_MAX);
+// 懒加载：前 2 页强制渲染作为首屏兜底（IO 尚未触发时也不空白），其余页按可视区按需渲染，避免大文档全量渲染卡死
+const FORCE_RENDER_PAGES = 2;
+// 缩放范围与步进（Ctrl/Cmd + 滚轮 或 双指捏合 触发）
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 4;
+const ZOOM_STEP = 1.1;
+
+/** 按 URL 获取（并缓存）PDFDocumentProxy，多实例共享同一解析结果 */
+function getDocument(url) {
+  // 中文等非 ASCII 字符需百分号编码；encodeURI 对已编码序列幂等，不会二次编码
+  const encodedUrl = encodeURI(url);
+  const cached = docCache.get(encodedUrl);
+  if (cached) {
+    return Promise.resolve(cached);
+  }
+  const loadingTask = pdfjsLib.getDocument({
+    url: encodedUrl
+  });
+  return loadingTask.promise.then(doc => {
+    const item = {
+      doc,
+      loadingTask
+    };
+    docCache.set(encodedUrl, item);
+    return item;
+  });
+}
+
+/* ====================== 4. 单页渲染器 ====================== */
+
+/**
+ * 单页：按页面宽高比自适应——纵向页宽度适配容器，横向页高度适配可视区（一页一屏，超宽回退宽度适配）。
+ * 懒加载：仅渲染可视页（前 2 页兜底强制渲染），页面对象就绪后立即渲染（page 为 state，异步就绪会正确触发重跑）。
+ */
+const PageItem = /*#__PURE__*/React.memo(({
+  doc,
+  pageNum,
+  scale,
+  containerWidth,
+  containerHeight,
+  visible
+}) => {
+  const canvasRef = useRef(null);
+  // 离屏 canvas（复用）：渲染先画到离屏画布，完成后同一帧内一次性提交到可见 canvas，
+  // 避免"canvas.width 赋值清空画布 → 异步渲染空窗"导致的变黑闪烁
+  const offscreenRef = useRef(null);
+  const _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    page = _useState2[0],
+    setPage = _useState2[1];
+  // 已渲染的尺寸指纹（"宽x高"）：缩放导致 display 变化时据此按新 scale 重新绘制，避免 canvas 被 CSS 拉伸而模糊
+  const renderedKeyRef = useRef("");
+  // 适配后的显示尺寸（逻辑像素）
+  const _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    display = _useState4[0],
+    setDisplay = _useState4[1];
+
+  // 获取页面对象，按宽高比计算适配后的显示尺寸
+  useEffect(() => {
+    let cancelled = false;
+    doc.getPage(pageNum).then(p => {
+      if (cancelled) {
+        return;
+      }
+      setPage(p);
+      const raw = p.getViewport({
+        scale: 1
+      });
+      // 容器宽度尚未测出时（首帧/弹窗时序）用默认 800 兜底，避免整页塌陷成空白
+      const cw = containerWidth > 0 ? containerWidth : 800;
+      const ch = containerHeight > 0 ? containerHeight : 0;
+      const ratio = raw.height / raw.width;
+      let w;
+      let h;
+      if (ch > 0 && ratio <= 1) {
+        // 横向页：优先高度适配（一页一屏），高度适配超宽则回退宽度适配
+        h = ch;
+        w = ch / ratio;
+        if (w > cw) {
+          w = cw;
+          h = cw * ratio;
+        }
+      } else {
+        // 纵向页（或容器高度未知）：宽度适配，高度按比例
+        w = cw;
+        h = cw * ratio;
+      }
+      setDisplay({
+        w: Math.floor(w * scale),
+        h: Math.floor(h * scale)
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [doc, pageNum, scale, containerWidth, containerHeight]);
+
+  // 渲染：懒加载（前 2 页兜底强制渲染），页面对象 + 适配尺寸就绪 + 进入可视区后渲染；
+  // display 变化（缩放/尺寸变化）时尺寸指纹不同，会按新 scale 重新绘制。
+  // 离屏渲染 + 一次性提交：重渲染期间可见 canvas 保持旧内容，渲染完成瞬间切新内容，无"变黑"空窗
+  useEffect(() => {
+    if (!page || !display || !canvasRef.current) {
+      return;
+    }
+    const key = `${display.w}x${display.h}`;
+    if (renderedKeyRef.current === key) {
+      return;
+    }
+    // 第 3 页起仅渲染可视页（滚动进入可视区时此 effect 因 visible 变化重跑）
+    if (pageNum > FORCE_RENDER_PAGES && !visible) {
+      return;
+    }
+    const raw = page.getViewport({
+      scale: 1
+    });
+    const viewport = page.getViewport({
+      scale: display.w / raw.width
+    });
+    // 高清适配（pdf.js 官方 Viewer 同款做法）：位图按 devicePixelRatio 放大、CSS 保持逻辑尺寸，
+    // 并传入匹配的 transform，让渲染器按高分辨率绘制，接近 Chrome 原生 PDF 查看器的清晰度
+    const outputScale = window.devicePixelRatio || 1;
+    const bw = Math.floor(viewport.width * outputScale);
+    const bh = Math.floor(viewport.height * outputScale);
+    const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
+
+    // 1. 先渲染到离屏 canvas
+    let offscreen = offscreenRef.current;
+    if (!offscreen) {
+      offscreen = document.createElement("canvas");
+      offscreenRef.current = offscreen;
+    }
+    offscreen.width = bw;
+    offscreen.height = bh;
+    const offCtx = offscreen.getContext("2d", {
+      alpha: false
+    });
+    const renderTask = page.render({
+      canvasContext: offCtx,
+      viewport,
+      transform
+    });
+    renderTask.promise.then(() => {
+      renderedKeyRef.current = key;
+      // 2. 渲染完成，同一帧内提交到可见 canvas（设尺寸清空 + drawImage 同步完成，浏览器不插帧）
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      canvas.width = bw;
+      canvas.height = bh;
+      const ctx = canvas.getContext("2d", {
+        alpha: false
+      });
+      if (offscreen) {
+        ctx.drawImage(offscreen, 0, 0);
+      }
+    }).catch(err => {
+      // 渲染被取消（deps 变化/卸载触发 renderTask.cancel()）是预期行为，忽略；其余错误抛给上层
+      if ((err === null || err === void 0 ? void 0 : err.name) !== "RenderingCancelledException") {
+        // console.error(err);
+      }
+    });
+    return () => {
+      renderTask.cancel();
+    };
+  }, [page, display, visible, pageNum]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: (display === null || display === void 0 ? void 0 : display.w) || undefined,
+      height: (display === null || display === void 0 ? void 0 : display.h) || undefined,
+      position: "relative",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: "100%",
+      height: "100%",
+      display: "block",
+      background: "#fff"
+    }
+  }));
+});
+
+/* ====================== 5. 主组件 ====================== */
+
+const PdfViewer = /*#__PURE__*/forwardRef((props, ref) => {
+  const url = props.url,
+    workerSrc = props.workerSrc,
+    _props$scale = props.scale,
+    scale = _props$scale === void 0 ? 1 : _props$scale,
+    _props$height = props.height,
+    height = _props$height === void 0 ? "100%" : _props$height,
+    _props$gap = props.gap,
+    gap = _props$gap === void 0 ? 8 : _props$gap,
+    _props$lazy = props.lazy,
+    lazy = _props$lazy === void 0 ? true : _props$lazy,
+    onLoad = props.onLoad,
+    onError = props.onError,
+    onVisiblePageChange = props.onVisiblePageChange,
+    className = props.className;
+  const containerRef = useRef(null);
+  const wrapperRefs = useRef([]);
+  const docRef = useRef(null);
+  const lastReportedPageRef = useRef(0);
+  // URL 片段目标页码（如 xxx.pdf#page=3），文档加载后自动定位
+  const targetPageRef = useRef(0);
+  const _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    doc = _useState6[0],
+    setDoc = _useState6[1];
+  const _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    pageCount = _useState8[0],
+    setPageCount = _useState8[1];
+  const _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    error = _useState0[0],
+    setError = _useState0[1];
+  const _useState1 = useState(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    containerWidth = _useState10[0],
+    setContainerWidth = _useState10[1];
+  const _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    containerHeight = _useState12[0],
+    setContainerHeight = _useState12[1];
+  const _useState13 = useState(new Set()),
+    _useState14 = _slicedToArray(_useState13, 2),
+    visiblePages = _useState14[0],
+    setVisiblePages = _useState14[1];
+  // 同步 ref，避免 IO 回调闭包读到过期的 visiblePages
+  const visiblePagesRef = useRef(new Set());
+  // 内部缩放：初始取 props.scale，之后由 Ctrl/Cmd+滚轮 / 双指捏合接管（props.scale 仅作初始值）
+  const _useState15 = useState(scale),
+    _useState16 = _slicedToArray(_useState15, 2),
+    zoom = _useState16[0],
+    setZoom = _useState16[1];
+  const zoomRef = useRef(zoom);
+  zoomRef.current = zoom;
+
+  // worker 地址覆盖
+  useEffect(() => {
+    if (workerSrc) {
+      configurePdfWorker(workerSrc);
+    }
+  }, [workerSrc]);
+
+  // 容器宽高变化监听（自适应布局）
+  // 200ms 防抖：容器宽度过渡动画（如对比模式 50% 切换）期间每帧都触发 RO，若同步 setState
+  // 会导致几十页 PageItem 反复重算+重渲染（闪烁/卡顿），合并到动画结束后统一更新一次。
+  // 首次回调（observe 后异步触发，此时布局已稳定）立即应用尺寸，避免挂载空窗导致的“无→出文件”闪烁
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    let timer;
+    let first = true;
+    const applySize = () => {
+      const w = container.clientWidth;
+      const h = container.clientHeight;
+      if (w) {
+        setContainerWidth(w);
+      }
+      if (h) {
+        setContainerHeight(h);
+      }
+    };
+    // 挂载即测量一次
+    applySize();
+    const ro = new ResizeObserver(() => {
+      if (first) {
+        first = false;
+        applySize();
+        return;
+      }
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = window.setTimeout(applySize, 200);
+    });
+    ro.observe(container);
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      ro.disconnect();
+    };
+  }, []);
+
+  // 加载文档（走 LRU 缓存）
+  useEffect(() => {
+    let cancelled = false;
+    docRef.current = null;
+    setDoc(null);
+    setPageCount(0);
+    setError(null);
+    setVisiblePages(new Set());
+    visiblePagesRef.current = new Set();
+    lastReportedPageRef.current = 0;
+    if (!url) {
+      return;
+    }
+    // 解析 URL 片段中的目标页码（如 xxx.pdf#page=3）；# 片段不参与请求，仅用于定位
+    const pageMatch = /#page=(\d+)/.exec(url);
+    targetPageRef.current = pageMatch ? Math.max(1, Number(pageMatch[1])) : 0;
+    getDocument(url).then(({
+      doc: d
+    }) => {
+      if (cancelled) {
+        return;
+      }
+      docRef.current = d;
+      setDoc(d);
+      setPageCount(d.numPages);
+      onLoad === null || onLoad === void 0 ? void 0 : onLoad(d);
+    }).catch(err => {
+      if (cancelled) {
+        return;
+      }
+      setError(err);
+      onError === null || onError === void 0 ? void 0 : onError(err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  // 懒加载：IntersectionObserver 观察每页 wrapper，仅可视页触发渲染
+  useEffect(() => {
+    if (!lazy || !doc) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const observer = new IntersectionObserver(entries => {
+      // 基于 ref 取最新集合，避免闭包过期导致可见页丢失
+      const next = new Set(visiblePagesRef.current);
+      entries.forEach(entry => {
+        const index = Number(entry.target.dataset.page);
+        if (entry.isIntersecting) {
+          next.add(index + 1);
+        } else {
+          next.delete(index + 1);
+        }
+      });
+      visiblePagesRef.current = next;
+      setVisiblePages(next);
+      const minPage = next.size ? Math.min(...next) : 0;
+      if (minPage && minPage !== lastReportedPageRef.current) {
+        lastReportedPageRef.current = minPage;
+        onVisiblePageChange === null || onVisiblePageChange === void 0 ? void 0 : onVisiblePageChange(minPage);
+      }
+    }, {
+      root: container,
+      rootMargin: "2rem 0"
+    } // 提前 2rem 预渲染，滚动更顺滑
+    );
+    // rAF 延迟观察，确保页面布局稳定后再建立可视区监听
+    const rafId = requestAnimationFrame(() => {
+      wrapperRefs.current.forEach(el => el && observer.observe(el));
+    });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(rafId);
+    };
+  }, [doc, lazy]);
+
+  // 统一缩放入口：factor 为期望倍率，anchorY 为锚点相对容器可视顶部的偏移；
+  // 缩放后按比例补偿 scrollTop，保持锚点处内容不漂移（页面高度随 scale 近似线性变化）
+  const applyZoom = useCallback((factor, anchorY) => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const current = zoomRef.current;
+    const nextZoom = Math.min(MAX_SCALE, Math.max(MIN_SCALE, current * factor));
+    if (nextZoom === current) {
+      return;
+    }
+    const actualFactor = nextZoom / current;
+    const contentY = container.scrollTop + anchorY;
+    setZoom(nextZoom);
+    // 等页面按新 scale 重排后再校正滚动位置（双 rAF 确保布局已更新）
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        container.scrollTop = Math.max(0, contentY * actualFactor - anchorY);
+      });
+    });
+  }, []);
+
+  // Ctrl/Cmd + 滚轮 与 双指捏合 缩放
+  // 用原生监听（passive: false）：React 合成 wheel/touch 事件默认 passive，preventDefault 无法拦截浏览器默认缩放
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    // Ctrl/Cmd + 滚轮缩放，替代浏览器默认的页面缩放（Mac 触控板捏合即此路径）
+    const onWheel = e => {
+      if (!e.ctrlKey && !e.metaKey) {
+        return;
+      }
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      applyZoom(e.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP, e.clientY - rect.top);
+    };
+
+    // 双指捏合缩放（单指不拦截，保留原生滚动）
+    let pinchStartDist = 0;
+    const onTouchStart = e => {
+      if (e.touches.length >= 2) {
+        e.preventDefault();
+        pinchStartDist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+      }
+    };
+    const onTouchMove = e => {
+      if (e.touches.length >= 2 && pinchStartDist > 0) {
+        e.preventDefault();
+        const dist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+        const rect = container.getBoundingClientRect();
+        const anchorY = (e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top;
+        // 以捏合开始时的距离为基准，避免逐事件累积误差；
+        // 倍率变化按 1/10 衰减，双指轻微移动不会导致缩放速度过猛
+        const factor = 1 + (dist / pinchStartDist - 1) / 10;
+        applyZoom(factor, anchorY);
+      }
+    };
+    const resetPinch = () => {
+      pinchStartDist = 0;
+    };
+    container.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    container.addEventListener("touchstart", onTouchStart, {
+      passive: false
+    });
+    container.addEventListener("touchmove", onTouchMove, {
+      passive: false
+    });
+    container.addEventListener("touchend", resetPinch);
+    container.addEventListener("touchcancel", resetPinch);
+    return () => {
+      container.removeEventListener("wheel", onWheel);
+      container.removeEventListener("touchstart", onTouchStart);
+      container.removeEventListener("touchmove", onTouchMove);
+      container.removeEventListener("touchend", resetPinch);
+      container.removeEventListener("touchcancel", resetPinch);
+    };
+  }, [applyZoom]);
+
+  // 右下角工具栏缩放：以可视区中心为锚点，缩放后中心内容不漂移
+  const zoomIn = useCallback(() => {
+    const container = containerRef.current;
+    if (container) {
+      applyZoom(ZOOM_STEP, container.clientHeight / 2);
+    }
+  }, [applyZoom]);
+  const zoomOut = useCallback(() => {
+    const container = containerRef.current;
+    if (container) {
+      applyZoom(1 / ZOOM_STEP, container.clientHeight / 2);
+    }
+  }, [applyZoom]);
+
+  // 滚动到指定页（容器内滚动，避免 scrollIntoView 影响整页）
+  const scrollToPage = useCallback(pageNum => {
+    const container = containerRef.current;
+    const wrapper = wrapperRefs.current[pageNum - 1];
+    if (!container || !wrapper) {
+      return;
+    }
+    container.scrollTop = wrapper.offsetTop - container.offsetTop;
+  }, []);
+
+  // url 携带 #page=N 时，文档加载且目标页高度就绪后自动定位。
+  // 懒加载下页面高度异步出现（getPage → setDisplay），故轮询等待目标页高度 > 0 再滚动，
+  // 超时（约 3s）放弃，避免目标页不存在（页码越界）时无限循环
+  useEffect(() => {
+    const target = targetPageRef.current;
+    if (!doc || target <= 0) {
+      return;
+    }
+    let tries = 0;
+    const timer = window.setInterval(() => {
+      const wrapper = wrapperRefs.current[target - 1];
+      if (wrapper && wrapper.offsetHeight > 0) {
+        scrollToPage(target);
+        window.clearInterval(timer);
+        return;
+      }
+      tries += 1;
+      if (tries > 30) {
+        window.clearInterval(timer);
+      }
+    }, 100);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [doc, scrollToPage]);
+  const getCurrentPage = useCallback(() => {
+    return visiblePages.size ? Math.min(...visiblePages) : 0;
+  }, [visiblePages]);
+  useImperativeHandle(ref, () => ({
+    scrollToPage,
+    getCurrentPage,
+    getDocument: () => docRef.current
+  }), [scrollToPage, getCurrentPage]);
+
+  // 页面列表（占位高度由 PageItem 自算，wrapper 仅作滚动定位锚点）
+  const pageWrappers = useMemo(() => {
+    if (!doc || pageCount === 0) {
+      return null;
+    }
+    const items = [];
+    for (let i = 1; i <= pageCount; i++) {
+      items.push(/*#__PURE__*/React.createElement("div", {
+        key: i,
+        ref: el => {
+          wrapperRefs.current[i - 1] = el;
+        },
+        "data-page": i - 1,
+        style: {
+          marginBottom: gap
+        }
+      }, /*#__PURE__*/React.createElement(PageItem, {
+        doc: doc,
+        pageNum: i,
+        scale: zoom,
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        visible: visiblePages.has(i)
+      })));
+    }
+    return items;
+  }, [doc, pageCount, zoom, containerWidth, containerHeight, visiblePages, lazy, gap]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      position: "relative",
+      height,
+      background: "#f0f2f5"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      height: "100%",
+      overflow: "auto",
+      // 允许平移但双指缩放由组件接管，避免浏览器默认页面缩放
+      touchAction: "pan-x pan-y"
+    }
+  }, !doc && !error && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 32,
+      textAlign: "center",
+      color: "#999"
+    }
+  }, "\u52A0\u8F7D\u4E2D..."), error && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 32,
+      textAlign: "center",
+      color: "#f5222d"
+    }
+  }, "PDF \u52A0\u8F7D\u5931\u8D25\uFF1A", String((error === null || error === void 0 ? void 0 : error.message) || error)), pageWrappers), doc && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      right: 12,
+      bottom: 12,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      gap: 4,
+      userSelect: "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 4,
+      padding: "0 0.06rem",
+      background: "#fff",
+      borderRadius: 4,
+      boxShadow: "0 0.02rem 0.08rem rgba(0, 0, 0, 0.15)"
+    }
+  }, /*#__PURE__*/React.createElement(_Icon, {
+    type: "suoxiao1",
+    title: "\u7F29\u5C0F",
+    onClick: zoomOut,
+    style: {
+      cursor: "pointer",
+      fontSize: 16,
+      color: "#333"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      minWidth: 40,
+      textAlign: "center",
+      fontSize: 12,
+      color: "#666"
+    }
+  }, Math.round(zoom * 100), "%"), /*#__PURE__*/React.createElement(_Icon, {
+    type: "fangda1",
+    title: "\u653E\u5927",
+    onClick: zoomIn,
+    style: {
+      cursor: "pointer",
+      fontSize: 16,
+      color: "#333"
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12,
+      color: "#999"
+    }
+  }, "\u652F\u6301\u53CC\u6307 / Ctrl+\u6EDA\u8F6E\u7F29\u653E")));
+});
+PdfViewer.displayName = "PdfViewer";
+export default PdfViewer;