@file-viewer/renderer-data 2.1.2 → 2.1.4

package/dist/data.js

@@ -1,4 +1,5 @@
 import { resolveFileViewerDataSqlWasmUrl } from '@file-viewer/core/assets';
+import { createFileViewerTranslator } from '@file-viewer/core';
 const dataStyle = `
 .data-viewer{min-height:100%;padding:28px;background:#eef1f4;color:#132235}
 .data-card{max-width:1080px;margin:0 auto;overflow:hidden;border:1px solid rgba(15,23,42,.08);border-radius:8px;background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.12)}
@@ -24,7 +25,6 @@ const fontMimeMap = {
     woff: 'font/woff',
     woff2: 'font/woff2',
 };
-const sampleText = 'Flyfish Viewer 轻量预览 AaBbCc 1234567890';
 const createStyle = (documentRef) => {
     const style = documentRef.createElement('style');
     style.textContent = dataStyle;
@@ -86,27 +86,27 @@ const getWindowSqlWasmOverride = (documentRef) => {
     return documentRef.defaultView?.__FLYFISH_DATA_SQL_WASM_URL__ ||
         (typeof window !== 'undefined' ? window.__FLYFISH_DATA_SQL_WASM_URL__ : undefined);
 };
-const renderFont = async (documentRef, buffer, type) => {
+const renderFont = async (documentRef, buffer, type, t) => {
     const family = `FlyfishPreviewFont-${Date.now()}-${Math.random().toString(36).slice(2)}`;
     const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
     const FontFaceConstructor = ownerWindow?.FontFace || (typeof FontFace !== 'undefined' ? FontFace : undefined);
     if (!FontFaceConstructor) {
-        throw new Error('当前浏览器不支持 FontFace API');
+        throw new Error(t('data.error.fontFaceUnsupported'));
     }
     const face = new FontFaceConstructor(family, buffer);
     await face.load();
     documentRef.fonts?.add(face);
     return {
-        title: '字体文件预览',
+        title: t('data.title.font'),
         fontFamily: family,
         summary: [
-            { label: '格式', value: type.toUpperCase() },
-            { label: '大小', value: formatBytes(buffer.byteLength) },
-            { label: '渲染方式', value: 'Browser FontFace API' },
+            { label: t('data.label.format'), value: type.toUpperCase() },
+            { label: t('data.label.size'), value: formatBytes(buffer.byteLength) },
+            { label: t('data.label.rendering'), value: 'Browser FontFace API' },
         ],
     };
 };
-const renderSqlite = async (documentRef, buffer, context) => {
+const renderSqlite = async (documentRef, buffer, context, t) => {
     const { default: initSqlJs } = await import('sql.js');
     const sqlWasmUrl = resolveFileViewerDataSqlWasmUrl(context?.options?.data, [
         getWindowSqlWasmOverride(documentRef),
@@ -121,11 +121,11 @@ const renderSqlite = async (documentRef, buffer, context) => {
             ? db.exec(`select * from "${firstTable.replace(/"/g, '""')}" limit 30`)[0]
             : null;
         return {
-            title: 'SQLite 数据库预览',
+            title: t('data.title.sqlite'),
             summary: [
-                { label: '对象数', value: String(tables.length) },
-                { label: '示例表', value: firstTable || '-' },
-                { label: '渲染方式', value: 'sql.js WASM' },
+                { label: t('data.label.objects'), value: String(tables.length) },
+                { label: t('data.label.sampleTable'), value: firstTable || '-' },
+                { label: t('data.label.rendering'), value: 'sql.js WASM' },
             ],
             rows: rows
                 ? makeRows(rows.values.map((values) => Object.fromEntries(rows.columns.map((column, index) => [column, values[index]]))))
@@ -136,7 +136,7 @@ const renderSqlite = async (documentRef, buffer, context) => {
         db.close();
     }
 };
-const renderParquet = async (buffer) => {
+const renderParquet = async (buffer, t) => {
     const { parquetMetadataAsync, parquetReadObjects } = await import('hyparquet');
     const file = {
         byteLength: buffer.byteLength,
@@ -145,16 +145,16 @@ const renderParquet = async (buffer) => {
     const metadata = await parquetMetadataAsync(file);
     const rows = await parquetReadObjects({ file, rowFormat: 'object', rowEnd: 30 });
     return {
-        title: 'Parquet 列式数据预览',
+        title: t('data.title.parquet'),
         summary: [
-            { label: '行数', value: metadata.num_rows?.toString?.() || '-' },
-            { label: '列数', value: String(metadata.schema?.filter(item => item.name).length || 0) },
-            { label: '渲染方式', value: 'hyparquet' },
+            { label: t('data.label.rows'), value: metadata.num_rows?.toString?.() || '-' },
+            { label: t('data.label.columns'), value: String(metadata.schema?.filter(item => item.name).length || 0) },
+            { label: t('data.label.rendering'), value: 'hyparquet' },
         ],
         rows: makeRows(rows),
     };
 };
-const renderAvro = async (buffer) => {
+const renderAvro = async (buffer, t) => {
     const avro = await import('avsc/etc/browser/avsc.js');
     const decoder = avro.createBlobDecoder(new Blob([buffer]));
     const rows = [];
@@ -172,26 +172,26 @@ const renderAvro = async (buffer) => {
         decoder.on('error', reject);
     });
     return {
-        title: 'Avro 对象容器预览',
+        title: t('data.title.avro'),
         summary: [
-            { label: '示例行', value: String(rows.length) },
-            { label: 'Schema', value: schema ? '已读取' : '未读取' },
-            { label: '渲染方式', value: 'avsc' },
+            { label: t('data.label.sampleRows'), value: String(rows.length) },
+            { label: 'Schema', value: schema ? t('data.value.schemaRead') : t('data.value.schemaUnread') },
+            { label: t('data.label.rendering'), value: 'avsc' },
         ],
         rows: makeRows(rows),
         text: schema.slice(0, 6000),
     };
 };
-const renderWasm = async (buffer) => {
+const renderWasm = async (buffer, t) => {
     const module = await WebAssembly.compile(buffer.slice(0));
     const imports = WebAssembly.Module.imports(module);
     const exports = WebAssembly.Module.exports(module);
     return {
-        title: 'WebAssembly 模块预览',
+        title: t('data.title.wasm'),
         summary: [
-            { label: '导入', value: String(imports.length) },
-            { label: '导出', value: String(exports.length) },
-            { label: '渲染方式', value: 'WebAssembly.Module' },
+            { label: t('data.label.imports'), value: String(imports.length) },
+            { label: t('data.label.exports'), value: String(exports.length) },
+            { label: t('data.label.rendering'), value: 'WebAssembly.Module' },
         ],
         rows: makeRows([
             ...imports.map(item => ({ kind: 'import', module: item.module, name: item.name, type: item.kind })),
@@ -199,51 +199,51 @@ const renderWasm = async (buffer) => {
         ]),
     };
 };
-const renderPostScriptLike = async (buffer, type) => ({
-    title: type === 'eps' ? 'EPS 矢量文件摘要' : 'Illustrator 文件摘要',
+const renderPostScriptLike = async (buffer, type, t) => ({
+    title: type === 'eps' ? t('data.title.eps') : t('data.title.ai'),
     summary: [
-        { label: 'Magic', value: readMagic(buffer).replace(/\s/g, ' ') },
-        { label: '大小', value: formatBytes(buffer.byteLength) },
-        { label: '说明', value: type === 'ai' ? '非 PDF-compatible AI 按摘要展示' : 'PostScript 摘要展示' },
+        { label: t('data.label.magic'), value: readMagic(buffer).replace(/\s/g, ' ') },
+        { label: t('data.label.size'), value: formatBytes(buffer.byteLength) },
+        { label: t('data.label.note'), value: type === 'ai' ? t('data.note.aiSummary') : t('data.note.postscriptSummary') },
     ],
     text: extractReadableText(buffer),
 });
-const renderWebArchive = async (buffer) => ({
-    title: 'WebArchive 摘要预览',
+const renderWebArchive = async (buffer, t) => ({
+    title: t('data.title.webarchive'),
     summary: [
-        { label: '容器', value: readMagic(buffer).startsWith('bplist') ? 'Binary plist' : 'WebArchive' },
-        { label: '大小', value: formatBytes(buffer.byteLength) },
-        { label: '说明', value: '安全提取可读片段，不执行网页脚本' },
+        { label: t('data.label.container'), value: readMagic(buffer).startsWith('bplist') ? 'Binary plist' : 'WebArchive' },
+        { label: t('data.label.size'), value: formatBytes(buffer.byteLength) },
+        { label: t('data.label.note'), value: t('data.note.webarchive') },
     ],
     text: extractReadableText(buffer),
 });
-const buildPreview = async (documentRef, buffer, type, context) => {
+const buildPreview = async (documentRef, buffer, type, context, t) => {
     if (type in fontMimeMap) {
-        return renderFont(documentRef, buffer, type);
+        return renderFont(documentRef, buffer, type, t);
     }
     if (type === 'sqlite') {
-        return renderSqlite(documentRef, buffer, context);
+        return renderSqlite(documentRef, buffer, context, t);
     }
     if (type === 'parquet') {
-        return renderParquet(buffer);
+        return renderParquet(buffer, t);
     }
     if (type === 'avro') {
-        return renderAvro(buffer);
+        return renderAvro(buffer, t);
     }
     if (type === 'wasm') {
-        return renderWasm(buffer);
+        return renderWasm(buffer, t);
     }
     if (type === 'ai' || type === 'eps') {
-        return renderPostScriptLike(buffer, type);
+        return renderPostScriptLike(buffer, type, t);
     }
     if (type === 'webarchive') {
-        return renderWebArchive(buffer);
+        return renderWebArchive(buffer, t);
     }
     return {
-        title: '数据资产摘要',
+        title: t('data.title.summary'),
         summary: [
-            { label: '格式', value: type.toUpperCase() },
-            { label: '大小', value: formatBytes(buffer.byteLength) },
+            { label: t('data.label.format'), value: type.toUpperCase() },
+            { label: t('data.label.size'), value: formatBytes(buffer.byteLength) },
         ],
         text: extractReadableText(buffer),
     };
@@ -282,7 +282,7 @@ const appendRows = (documentRef, parent, rows) => {
     wrap.appendChild(table);
     parent.appendChild(wrap);
 };
-const renderPreviewDom = (documentRef, preview, type) => {
+const renderPreviewDom = (documentRef, preview, type, t) => {
     const root = createElement(documentRef, 'div', 'data-viewer');
     const card = createElement(documentRef, 'section', 'data-card');
     const header = createElement(documentRef, 'header', 'data-header');
@@ -290,7 +290,7 @@ const renderPreviewDom = (documentRef, preview, type) => {
     card.appendChild(header);
     appendSummary(documentRef, card, preview.summary);
     if (preview.fontFamily) {
-        const fontPreview = createElement(documentRef, 'div', 'font-preview', sampleText);
+        const fontPreview = createElement(documentRef, 'div', 'font-preview', t('data.font.sample'));
         fontPreview.style.fontFamily = preview.fontFamily;
         card.appendChild(fontPreview);
     }
@@ -298,7 +298,7 @@ const renderPreviewDom = (documentRef, preview, type) => {
         const imageWrap = createElement(documentRef, 'div', 'asset-image');
         const image = createElement(documentRef, 'img');
         image.src = preview.image;
-        image.alt = '资产预览';
+        image.alt = t('data.image.alt');
         imageWrap.appendChild(image);
         card.appendChild(imageWrap);
     }
@@ -312,6 +312,7 @@ const renderPreviewDom = (documentRef, preview, type) => {
 export default async function renderDataAsset(buffer, target, type = 'bin', context) {
     const documentRef = target.ownerDocument || document;
     const normalizedType = type.toLowerCase();
+    const t = createFileViewerTranslator(context?.options);
     if (normalizedType === 'ai' && readMagic(buffer, 5) === '%PDF-' && context?.renderNestedBuffer) {
         const rendered = await context.renderNestedBuffer(buffer, 'pdf', target, context);
         if (rendered) {
@@ -320,10 +321,10 @@ export default async function renderDataAsset(buffer, target, type = 'bin', cont
     }
     if (normalizedType === 'psd') {
         const { default: renderPsdAsset } = await import('./psd.js');
-        return renderPsdAsset(buffer, target);
+        return renderPsdAsset(buffer, target, context);
     }
-    const preview = await buildPreview(documentRef, buffer, normalizedType, context);
-    const root = renderPreviewDom(documentRef, preview, normalizedType);
+    const preview = await buildPreview(documentRef, buffer, normalizedType, context, t);
+    const root = renderPreviewDom(documentRef, preview, normalizedType, t);
     target.replaceChildren(createStyle(documentRef), root);
     return {
         $el: root,

package/dist/psd.d.ts

@@ -1,2 +1,2 @@
-import { type FileViewerRenderedInstance } from '@file-viewer/core';
-export default function renderPsdAsset(buffer: ArrayBuffer, target: HTMLDivElement): Promise<FileViewerRenderedInstance>;
+import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-viewer/core';
+export default function renderPsdAsset(buffer: ArrayBuffer, target: HTMLDivElement, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/psd.js

@@ -1,4 +1,4 @@
-import { createFileViewerZoomChangeEmitter, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
+import { createFileViewerTranslator, createFileViewerZoomChangeEmitter, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
 const psdStyle = `
 .psd-viewer{display:grid;height:100%;min-height:460px;grid-template-rows:auto minmax(0,1fr);--psd-bg:#eef1f4;--psd-surface:#fff;--psd-border:rgba(15,23,42,.1);--psd-text:#132235;--psd-muted:#64748b;--psd-accent:#0f766e;background:var(--psd-bg);color:var(--psd-text);box-sizing:border-box}
 .psd-toolbar{position:sticky;top:0;z-index:2;display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:1px solid var(--psd-border);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-sizing:border-box}
@@ -106,8 +106,9 @@ const flattenLayers = (documentRef, layers, depth = 0, path = '') => {
 const clampZoom = (value) => {
     return Math.min(4, Math.max(0.1, Number(value.toFixed(2))));
 };
-export default async function renderPsdAsset(buffer, target) {
+export default async function renderPsdAsset(buffer, target, context) {
     const documentRef = target.ownerDocument || document;
+    const t = createFileViewerTranslator(context?.options);
     const { readPsd } = await import('ag-psd');
     const psd = readPsd(buffer, { useImageData: true });
     const compositeCanvas = toCanvas(documentRef, psd.canvas || psd.imageData);
@@ -120,14 +121,14 @@ export default async function renderPsdAsset(buffer, target) {
     root.dataset.viewerZoomProvider = 'psd';
     const toolbar = createElement(documentRef, 'div', 'psd-toolbar');
     const title = createElement(documentRef, 'div', 'psd-title');
-    title.append(createElement(documentRef, 'strong', undefined, 'PSD 图层预览'), createElement(documentRef, 'span', undefined, `${psd.width || 0} x ${psd.height || 0} · ${layers.length} layers · ag-psd`));
+    title.append(createElement(documentRef, 'strong', undefined, t('psd.title')), createElement(documentRef, 'span', undefined, `${psd.width || 0} x ${psd.height || 0} · ${layers.length} layers · ag-psd`));
     const actions = createElement(documentRef, 'div', 'psd-actions');
     const zoomOut = createElement(documentRef, 'button', undefined, '-');
     const zoomLabel = createElement(documentRef, 'span', undefined, '100%');
     const zoomIn = createElement(documentRef, 'button', undefined, '+');
-    const reset = createElement(documentRef, 'button', undefined, '适合');
-    const showAll = createElement(documentRef, 'button', undefined, '全显');
-    const hideAll = createElement(documentRef, 'button', undefined, '全隐');
+    const reset = createElement(documentRef, 'button', undefined, t('psd.action.fit'));
+    const showAll = createElement(documentRef, 'button', undefined, t('psd.action.showAll'));
+    const hideAll = createElement(documentRef, 'button', undefined, t('psd.action.hideAll'));
     [zoomOut, zoomIn, reset, showAll, hideAll].forEach(button => {
         button.type = 'button';
     });
@@ -136,7 +137,7 @@ export default async function renderPsdAsset(buffer, target) {
     const layout = createElement(documentRef, 'div', 'psd-layout');
     const sidebar = createElement(documentRef, 'aside', 'psd-sidebar');
     const sidebarHeader = createElement(documentRef, 'div', 'psd-sidebar-header');
-    sidebarHeader.append(createElement(documentRef, 'span', undefined, '图层'), createElement(documentRef, 'span', undefined, `${drawableLayers.length} 可重绘`));
+    sidebarHeader.append(createElement(documentRef, 'span', undefined, t('psd.layers.title')), createElement(documentRef, 'span', undefined, t('psd.layers.redrawable', { count: drawableLayers.length })));
     const list = createElement(documentRef, 'ul', 'psd-layer-list');
     sidebar.append(sidebarHeader, list);
     const stage = createElement(documentRef, 'main', 'psd-stage');
@@ -169,7 +170,7 @@ export default async function renderPsdAsset(buffer, target) {
         });
     };
     if (!layers.length) {
-        list.appendChild(createElement(documentRef, 'li', 'psd-empty', '未发现可展示图层，使用合成图预览。'));
+        list.appendChild(createElement(documentRef, 'li', 'psd-empty', t('psd.layers.empty')));
     }
     layers.forEach(layer => {
         const item = createElement(documentRef, 'li', 'psd-layer');
@@ -188,7 +189,7 @@ export default async function renderPsdAsset(buffer, target) {
             redraw();
         });
         const copy = createElement(documentRef, 'div');
-        copy.append(createElement(documentRef, 'strong', undefined, layer.name), createElement(documentRef, 'span', undefined, `${layer.left},${layer.top} · ${layer.width} x ${layer.height}${layer.hidden ? ' · hidden' : ''}`));
+        copy.append(createElement(documentRef, 'strong', undefined, layer.name), createElement(documentRef, 'span', undefined, `${layer.left},${layer.top} · ${layer.width} x ${layer.height}${layer.hidden ? ` · ${t('psd.layers.hidden')}` : ''}`));
         item.append(checkbox, copy);
         list.appendChild(item);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-data",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "private": false,
   "type": "module",
   "description": "Standalone data asset renderer plugin for Flyfish File Viewer with PSD, SQLite, Parquet, Avro, WASM, font, AI/EPS, and WebArchive previews.",
@@ -57,7 +57,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "^2.1.2",
+    "@file-viewer/core": "^2.1.4",
     "ag-psd": "^30.1.1",
     "avsc": "^5.7.9",
     "hyparquet": "^1.26.0",