@file-viewer/renderer-pdf 2.1.1 → 2.1.3

package/dist/pdf.js

@@ -1,6 +1,6 @@
 import { getDocument, GlobalWorkerOptions, PDFWorker as PdfJsWorker, PixelsPerInch, } from 'pdfjs-dist/legacy/build/pdf.mjs';
 import { EventBus, GenericL10n, PDFFindController, PDFLinkService, PDFViewer, } from 'pdfjs-dist/legacy/web/pdf_viewer.mjs';
-import { registerFileViewerSearchProvider, registerFileViewerZoomProvider, unregisterFileViewerSearchProvider, unregisterFileViewerZoomProvider, createFileViewerZoomChangeEmitter, buildPrintPageStyle, formatCssPixels, DEFAULT_PDF_RANGE_CHUNK_SIZE, } from '@file-viewer/core';
+import { registerFileViewerSearchProvider, registerFileViewerZoomProvider, unregisterFileViewerSearchProvider, unregisterFileViewerZoomProvider, createFileViewerZoomChangeEmitter, createFileViewerTranslator, buildPrintPageStyle, formatCssPixels, DEFAULT_PDF_RANGE_CHUNK_SIZE, resolveFileViewerLocale, } from '@file-viewer/core';
 import { DEFAULT_FILE_VIEWER_PDF_WORKER_PATH, resolveFileViewerPdfAssetUrls, } from '@file-viewer/core/assets';
 import { pdfViewerStyle } from './pdfStyles.js';
 export const DEFAULT_FILE_VIEWER_PDF_WORKER_URL = DEFAULT_FILE_VIEWER_PDF_WORKER_PATH;
@@ -23,6 +23,20 @@ const createStyle = (documentRef) => {
 .pdf-page-thumb--thumbnail{width:46px;height:60px;overflow:hidden;background:#fff}
 .pdf-page-thumb--thumbnail img{display:block;width:100%;height:100%;object-fit:contain}
 .pdf-page-thumb--thumbnail span{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}
+@media (max-width:720px){
+  .pdf-toolbar{flex-wrap:nowrap;gap:6px;min-height:44px;padding:5px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
+  .pdf-toolbar::-webkit-scrollbar{display:none}
+  .pdf-toolbar-group{flex:0 0 auto;height:32px;gap:4px;padding:0 4px;border-radius:7px}
+  .pdf-toolbar-group--zoom{margin-left:0}
+  .pdf-icon-button,.pdf-scale-button{height:26px;border-radius:5px}
+  .pdf-icon-button{width:26px;font-size:16px}
+  .pdf-scale-button{width:54px;font-size:12px}
+  .pdf-page-meter{min-width:52px;font-size:12px}
+  .pdf-page-meter strong{font-size:13px}
+  .pdf-rotation-meter{min-width:30px;font-size:12px}
+  .pdf-nav-pane{width:min(82vw,280px);max-width:calc(100% - 52px)}
+  .pdfViewer{padding:12px 8px 22px}
+}
 `;
     return style;
 };
@@ -75,14 +89,14 @@ const waitForPaint = (view) => new Promise(resolve => {
 const resolvePdfWorkerUrl = (options, documentUrl) => {
     return resolveFileViewerPdfAssetUrls(options, documentUrl).workerUrl;
 };
-const buildOutlineItems = (items, prefix = 'outline') => items.map((item, index) => {
+const buildOutlineItems = (items, prefix = 'outline', getFallbackTitle = index => `Outline ${index + 1}`) => items.map((item, index) => {
     const id = `${prefix}-${index}`;
     const children = Array.isArray(item.items)
-        ? buildOutlineItems(item.items, id)
+        ? buildOutlineItems(item.items, id, getFallbackTitle)
         : [];
     return {
         id,
-        title: item.title || `目录 ${index + 1}`,
+        title: item.title || getFallbackTitle(index),
         dest: item.dest || null,
         items: children,
         expanded: index < 4,
@@ -92,15 +106,25 @@ export default async function renderPdf(buffer, target, context) {
     var _a, _b;
     const documentRef = target.ownerDocument || document;
     const targetWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : null);
+    const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
+    const resolvedLocale = resolveFileViewerLocale(context === null || context === void 0 ? void 0 : context.options);
     if (!targetWindow) {
-        throw new Error('PDF preview requires a browser window');
+        throw new Error(t('pdf.error.browserWindow'));
     }
     const options = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.pdf;
     const navigationEnabled = (options === null || options === void 0 ? void 0 : options.navigation) !== false;
     const toolbarVisible = (options === null || options === void 0 ? void 0 : options.toolbar) !== false;
     const thumbnailsEnabled = (options === null || options === void 0 ? void 0 : options.thumbnails) === true;
     const zoomEmitter = createFileViewerZoomChangeEmitter();
-    let navVisible = (options === null || options === void 0 ? void 0 : options.navigation) === false ? false : (options === null || options === void 0 ? void 0 : options.defaultNavigationVisible) !== false;
+    const isCompactViewport = () => {
+        const width = target.clientWidth || targetWindow.innerWidth || 0;
+        return width > 0 && width <= 720;
+    };
+    let navVisible = (options === null || options === void 0 ? void 0 : options.navigation) === false
+        ? false
+        : typeof (options === null || options === void 0 ? void 0 : options.defaultNavigationVisible) === 'boolean'
+            ? options.defaultNavigationVisible
+            : !isCompactViewport();
     let navMode = 'pages';
     let loadStatus = 'loading';
     let errorMessage = '';
@@ -135,28 +159,29 @@ export default async function renderPdf(buffer, target, context) {
     root.dataset.viewerSearchProvider = 'pdf';
     root.dataset.viewerZoomProvider = 'pdf';
     const toolbar = createElement(documentRef, 'div', 'pdf-toolbar');
-    const navToggleButton = createButton(documentRef, 'pdf-icon-button', '切换导航窗格');
+    const navToggleButton = createButton(documentRef, 'pdf-icon-button', t('pdf.toolbar.toggleNavigation'));
     navToggleButton.setAttribute('aria-pressed', String(navVisible));
     navToggleButton.append(createElement(documentRef, 'span', 'pdf-panel-icon'));
     const pageGroup = createElement(documentRef, 'div', 'pdf-toolbar-group');
-    const previousPageButton = createButton(documentRef, 'pdf-icon-button', '上一页', '‹');
+    const previousPageButton = createButton(documentRef, 'pdf-icon-button', t('pdf.toolbar.previousPage'), '‹');
     const pageMeter = createElement(documentRef, 'span', 'pdf-page-meter');
     const pageMeterCurrent = createElement(documentRef, 'strong', undefined, '1');
     const pageMeterTotal = createElement(documentRef, 'span', undefined, '/ -');
     pageMeter.append(pageMeterCurrent, pageMeterTotal);
-    const nextPageButton = createButton(documentRef, 'pdf-icon-button', '下一页', '›');
+    const nextPageButton = createButton(documentRef, 'pdf-icon-button', t('pdf.toolbar.nextPage'), '›');
     pageGroup.append(previousPageButton, pageMeter, nextPageButton);
     const zoomGroup = createElement(documentRef, 'div', 'pdf-toolbar-group pdf-toolbar-group--zoom');
-    const zoomOutButton = createButton(documentRef, 'pdf-icon-button', '缩小', '−');
+    const zoomOutButton = createButton(documentRef, 'pdf-icon-button', t('pdf.toolbar.zoomOut'), '−');
     const scaleButton = createElement(documentRef, 'button', 'pdf-scale-button', '100%');
     scaleButton.type = 'button';
-    scaleButton.title = '适合宽度';
-    const zoomInButton = createButton(documentRef, 'pdf-icon-button', '放大', '+');
+    scaleButton.title = t('pdf.toolbar.fitWidth');
+    scaleButton.setAttribute('aria-label', t('pdf.toolbar.fitWidth'));
+    const zoomInButton = createButton(documentRef, 'pdf-icon-button', t('pdf.toolbar.zoomIn'), '+');
     zoomGroup.append(zoomOutButton, scaleButton, zoomInButton);
     const rotateGroup = createElement(documentRef, 'div', 'pdf-toolbar-group pdf-toolbar-group--rotate');
-    const rotateLeftButton = createButton(documentRef, 'pdf-icon-button', '向左旋转', '↺');
+    const rotateLeftButton = createButton(documentRef, 'pdf-icon-button', t('pdf.toolbar.rotateLeft'), '↺');
     const rotationMeter = createElement(documentRef, 'span', 'pdf-rotation-meter', `${currentRotation}°`);
-    const rotateRightButton = createButton(documentRef, 'pdf-icon-button', '向右旋转', '↻');
+    const rotateRightButton = createButton(documentRef, 'pdf-icon-button', t('pdf.toolbar.rotateRight'), '↻');
     rotateGroup.append(rotateLeftButton, rotationMeter, rotateRightButton);
     if (navigationEnabled) {
         toolbar.append(navToggleButton);
@@ -165,16 +190,16 @@ export default async function renderPdf(buffer, target, context) {
     const content = createElement(documentRef, 'div', 'pdf-content');
     const navPane = createElement(documentRef, 'aside', 'pdf-nav-pane');
     const navHead = createElement(documentRef, 'div', 'pdf-nav-head');
-    const navTitle = createElement(documentRef, 'span', undefined, '页面导航');
-    const navCount = createElement(documentRef, 'strong', undefined, '0 页');
+    const navTitle = createElement(documentRef, 'span', undefined, t('pdf.nav.pagesTitle'));
+    const navCount = createElement(documentRef, 'strong', undefined, t('pdf.nav.pageCount', { count: 0 }));
     navHead.append(navTitle, navCount);
     const navTabs = createElement(documentRef, 'div', 'pdf-nav-tabs');
     navTabs.setAttribute('role', 'tablist');
-    navTabs.setAttribute('aria-label', 'PDF 导航类型');
-    const pagesTab = createButton(documentRef, '', '页面');
-    const outlineTab = createButton(documentRef, '', '目录');
-    pagesTab.textContent = '页面';
-    outlineTab.textContent = '目录';
+    navTabs.setAttribute('aria-label', t('pdf.nav.typeLabel'));
+    const pagesTab = createButton(documentRef, '', t('pdf.nav.pagesTab'));
+    const outlineTab = createButton(documentRef, '', t('pdf.nav.outlineTab'));
+    pagesTab.textContent = t('pdf.nav.pagesTab');
+    outlineTab.textContent = t('pdf.nav.outlineTab');
     pagesTab.setAttribute('role', 'tab');
     outlineTab.setAttribute('role', 'tab');
     navTabs.append(pagesTab, outlineTab);
@@ -184,7 +209,7 @@ export default async function renderPdf(buffer, target, context) {
     const container = createElement(documentRef, 'div', 'pdf-wrapper');
     container.dataset.viewerScrollContainer = 'true';
     const pdfViewerRoot = createElement(documentRef, 'div', 'pdfViewer');
-    const stateNode = createElement(documentRef, 'div', 'pdf-state', '正在加载 PDF...');
+    const stateNode = createElement(documentRef, 'div', 'pdf-state', t('pdf.state.loading'));
     container.append(pdfViewerRoot, stateNode);
     viewport.append(container);
     content.append(navPane, viewport);
@@ -234,7 +259,7 @@ export default async function renderPdf(buffer, target, context) {
                 else {
                     thumb.textContent = String(page);
                 }
-                button.append(thumb, createElement(documentRef, 'span', 'pdf-page-label', `第 ${page} 页`));
+                button.append(thumb, createElement(documentRef, 'span', 'pdf-page-label', t('pdf.nav.pageLabel', { page })));
                 button.addEventListener('click', () => goToPage(page));
                 navList.append(button);
             }
@@ -258,7 +283,7 @@ export default async function renderPdf(buffer, target, context) {
             navList.append(button);
         });
         if (!entries.length) {
-            navList.append(createElement(documentRef, 'div', 'pdf-outline-empty', '当前 PDF 没有可用目录'));
+            navList.append(createElement(documentRef, 'div', 'pdf-outline-empty', t('pdf.nav.outlineEmpty')));
         }
     };
     const paintPdfThumbnail = (pageNumber, thumb) => {
@@ -270,7 +295,7 @@ export default async function renderPdf(buffer, target, context) {
         }
         const image = documentRef.createElement('img');
         image.src = imageUrl;
-        image.alt = `第 ${pageNumber} 页缩略图`;
+        image.alt = t('pdf.thumbnail.alt', { page: pageNumber });
         image.loading = 'lazy';
         thumb.replaceChildren(image);
         return true;
@@ -357,6 +382,7 @@ export default async function renderPdf(buffer, target, context) {
         void renderPdfThumbnail(pageNumber);
     };
     const syncUi = () => {
+        root.classList.toggle('pdf-shell--compact', isCompactViewport());
         root.classList.toggle('pdf-shell--nav-hidden', !navigationEnabled || !navVisible);
         root.classList.toggle('pdf-shell--toolbar-hidden', !toolbarVisible);
         navToggleButton.classList.toggle('pdf-icon-button--active', navVisible);
@@ -366,8 +392,10 @@ export default async function renderPdf(buffer, target, context) {
         outlineTab.classList.toggle('active', navMode === 'outline');
         pagesTab.setAttribute('aria-selected', navMode === 'pages' ? 'true' : 'false');
         outlineTab.setAttribute('aria-selected', navMode === 'outline' ? 'true' : 'false');
-        navTitle.textContent = navMode === 'pages' ? '页面导航' : '目录导航';
-        navCount.textContent = navMode === 'pages' ? `${pageCount} 页` : `${outlineCount()} 项`;
+        navTitle.textContent = navMode === 'pages' ? t('pdf.nav.pagesTitle') : t('pdf.nav.outlineTitle');
+        navCount.textContent = navMode === 'pages'
+            ? t('pdf.nav.pageCount', { count: pageCount })
+            : t('pdf.nav.itemCount', { count: outlineCount() });
         pageMeterCurrent.textContent = String(currentPage);
         pageMeterTotal.textContent = `/ ${pageCount || '-'}`;
         scaleButton.textContent = scaleText();
@@ -378,7 +406,7 @@ export default async function renderPdf(buffer, target, context) {
         zoomInButton.disabled = !canZoomIn();
         stateNode.hidden = loadStatus === 'ready';
         stateNode.classList.toggle('pdf-state--error', loadStatus === 'error');
-        stateNode.textContent = loadStatus === 'error' ? errorMessage : '正在加载 PDF...';
+        stateNode.textContent = loadStatus === 'error' ? errorMessage : t('pdf.state.loading');
         renderNavList();
     };
     const writeLegacyCompatiblePageDimensions = () => {
@@ -711,7 +739,7 @@ export default async function renderPdf(buffer, target, context) {
                 return;
             }
             outlineItems = Array.isArray(outline)
-                ? buildOutlineItems(outline)
+                ? buildOutlineItems(outline, 'outline', index => t('pdf.nav.outlineFallbackTitle', { index: index + 1 }))
                 : [];
             syncUi();
         }
@@ -730,7 +758,7 @@ export default async function renderPdf(buffer, target, context) {
         var _a, _b;
         const pdfDocument = pdfContext.document;
         if (!pdfDocument) {
-            throw new Error('PDF 尚未加载完成，请稍后再试');
+            throw new Error(t('pdf.error.notLoaded'));
         }
         const page = await pdfDocument.getPage(Math.min(Math.max(pageNumber, 1), pdfDocument.numPages));
         const viewport = page.getViewport({
@@ -755,12 +783,12 @@ export default async function renderPdf(buffer, target, context) {
         var _a, _b;
         const pdfDocument = pdfContext.document;
         if (!pdfDocument) {
-            throw new Error('PDF 尚未加载完成，请稍后再试');
+            throw new Error(t('pdf.error.notLoaded'));
         }
         const pagesHtml = [];
         for (let pageNumber = 1; pageNumber <= pdfDocument.numPages; pageNumber += 1) {
             if (destroyed) {
-                throw new Error('PDF 已卸载，无法继续打印');
+                throw new Error(t('pdf.error.unloaded'));
             }
             const page = await pdfDocument.getPage(pageNumber);
             const baseViewport = page.getViewport({
@@ -777,12 +805,12 @@ export default async function renderPdf(buffer, target, context) {
             const canvas = documentRef.createElement('canvas');
             const canvasContext = canvas.getContext('2d');
             if (!canvasContext) {
-                throw new Error('当前浏览器无法创建 PDF 打印画布');
+                throw new Error(t('pdf.error.canvasUnavailable'));
             }
             canvas.width = Math.ceil(renderViewport.width);
             canvas.height = Math.ceil(renderViewport.height);
             await page.render({ canvas, canvasContext, viewport: renderViewport }).promise;
-            const pageTitle = `${exportOptions.title} - 第 ${pageNumber} 页`;
+            const pageTitle = t('pdf.export.pageTitle', { title: exportOptions.title, page: pageNumber });
             const pageStyle = [
                 `--viewer-print-page-width:${formatCssPixels(pageWidth)}`,
                 `--viewer-print-page-height:${formatCssPixels(pageHeight)}`,
@@ -825,7 +853,7 @@ export default async function renderPdf(buffer, target, context) {
                 eventBus,
                 linkService: pdfLinkService,
                 findController: pdfFindController,
-                l10n: new GenericL10n('zh-CN'),
+                l10n: new GenericL10n(resolvedLocale),
                 enableAutoLinking: false,
             });
             pdfContext.viewer = pdfViewer;
@@ -859,7 +887,7 @@ export default async function renderPdf(buffer, target, context) {
             });
             eventBus.on('pagerendered', scheduleLegacyPageDimensionPatch);
             if (!(context === null || context === void 0 ? void 0 : context.streamUrl) && !buffer.byteLength) {
-                throw new Error('PDF 缺少可读取的数据源');
+                throw new Error(t('pdf.error.missingSource'));
             }
             const worker = createPdfWorker();
             const pdfAssets = resolveFileViewerPdfAssetUrls(options, documentRef.URL || documentRef.baseURI);
@@ -914,7 +942,7 @@ export default async function renderPdf(buffer, target, context) {
                 return;
             }
             loadStatus = 'error';
-            errorMessage = error instanceof Error ? error.message : 'PDF 加载失败';
+            errorMessage = error instanceof Error ? error.message : t('pdf.error.loadFailed');
             syncUi();
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-pdf",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "private": false,
   "type": "module",
   "description": "Standalone PDF renderer plugin for Flyfish File Viewer powered by PDF.js.",
@@ -54,7 +54,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "^2.1.1",
+    "@file-viewer/core": "^2.1.3",
     "pdfjs-dist": "^6.0.227"
   },
   "devDependencies": {