openxiangda-cli 2.0.0-alpha.58 → 2.0.0-alpha.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda-cli",
-  "version": "2.0.0-alpha.58",
+  "version": "2.0.0-alpha.60",
   "description": "Thin application-level CLI for OpenXiangda 2.0.",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,9 +23,9 @@
   ],
   "dependencies": {
     "@oclif/core": "4.13.3",
-    "openxiangda-contracts": "2.0.0-alpha.27",
-    "openxiangda-devkit-core": "2.0.0-alpha.34",
-    "openxiangda-mcp": "2.0.0-alpha.34"
+    "openxiangda-contracts": "2.0.0-alpha.28",
+    "openxiangda-devkit-core": "2.0.0-alpha.36",
+    "openxiangda-mcp": "2.0.0-alpha.36"
   },
   "devDependencies": {
     "tsx": "4.23.12",

package/template/apps/server/package.json

@@ -15,7 +15,7 @@
     "@nestjs/common": "11.1.29",
     "@nestjs/core": "11.1.29",
     "@nestjs/platform-fastify": "11.1.29",
-    "openxiangda-nest": "2.0.0-alpha.32",
+    "openxiangda-nest": "2.0.0-alpha.34",
     "reflect-metadata": "0.2.2",
     "rxjs": "7.8.2"
   },

package/template/apps/web/e2e/instruments.spec.ts

@@ -8,6 +8,7 @@ import {
 import {
   instrumentFields,
 } from '../src/fields';
+import * as XLSX from 'xlsx';
 
 const declaredInstrumentFields = new Set(
   instrumentFields.filter(field => !field.system).map(field => field.key)
@@ -15,6 +16,28 @@ const declaredInstrumentFields = new Set(
 const collegeId = '11111111-1111-4111-8111-111111111111';
 const userId = '22222222-2222-4222-8222-222222222222';
 const departmentId = '33333333-3333-4333-8333-333333333333';
+const minimalDocx = Buffer.from(
+  'UEsDBAoAAAAIABJvFV15bjPX6AAAAK0BAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbH1QyU7DMBD9FWuuKHHggBCK0wPLETiUDxjZk8SqN3nc0v49Tlt6QIXjzFv1+tXeO7GjzDYGBbdtB4KCjsaGScHn+rV5AMEFg0EXAyk4EMNq6NeHRCyqNrCCuZT0KCXrmTxyGxOFiowxeyz1zJNMqDc4kbzrunupYygUSlMWDxj6Zxpx64p42df3qUcmxyCeTsQlSwGm5KzGUnG5C+ZXSnNOaKvyyOHZJr6pBJBXExbk74Cz7r0Ok60h8YG5vKGvLPkVs5Em6q2vyvZ/mys94zhaTRf94pZy1MRcF/euvSAebfjpL49zD99QSwMECgAAAAAAEm8VXQAAAAAAAAAAAAAAAAYAAABfcmVscy9QSwMECgAAAAgAEm8VXZv9N+qtAAAAKQEAAAsAAABfcmVscy8ucmVsc43POw7CMAwG4KtE3mlaBoRQ0y4IqSsqB7ASN61oHkrCo7cnAwNFDIy2f3+W6/ZpZnanECdnBVRFCYysdGqyWsClP232wGJCq3B2lgQsFKFt6jPNmPJKHCcfWTZsFDCm5A+cRzmSwVg4TzZPBhcMplwGzT3KK2ri27Lc8fBpwNpknRIQOlUB6xdP/9huGCZJRydvhmz6ceIrkWUMmpKAhwuKq3e7yCzwpuarF5sXUEsDBAoAAAAAABJvFV0AAAAAAAAAAAAAAAAFAAAAd29yZC9QSwMECgAAAAgAEm8VXZ1FWubkAAAAWwEAABEAAAB3b3JkL2RvY3VtZW50LnhtbEVQwW7DIAz9FcR9JY26qYqS9NbbtErbtF1pcBOkgBF4Zd3Xz6SKenn2s/2eDe3h183iCjFZ9J3cbiopwA9orB87+flxfNpLkUh7o2f00MkbJHno29wYHH4ceBJs4FOTOzkRhUapNEzgdNpgAM+9C0aniWkcVcZoQsQBUmJ/N6u6ql6U09bLYnlGcysxFIgFqH9jl2+r/Wi0+GK5OEW4WsitKt2CccFFk2Cg0yIM4/ufyOWqbV3v+FG5mTh/3nOu7gOvOnKVMHB9dx+JdpzoQc9IhO7BZ7isXbUsXfep9Xb1+Jf+H1BLAQIUAAoAAAAIABJvFV15bjPX6AAAAK0BAAATAAAAAAAAAAAAAAAAAAAAAABbQ29udGVudF9UeXBlc10ueG1sUEsBAhQACgAAAAAAEm8VXQAAAAAAAAAAAAAAAAYAAAAAAAAAAAAQAAAAGQEAAF9yZWxzL1BLAQIUAAoAAAAIABJvFV2b/TfqrQAAACkBAAALAAAAAAAAAAAAAAAAAD0BAABfcmVscy8ucmVsc1BLAQIUAAoAAAAAABJvFV0AAAAAAAAAAAAAAAAFAAAAAAAAAAAAEAAAABMCAAB3b3JkL1BLAQIUAAoAAAAIABJvFV2dRVrm5AAAAFsBAAARAAAAAAAAAAAAAAAAADYCAAB3b3JkL2RvY3VtZW50LnhtbFBLBQYAAAAABQAFACABAABJAwAAAAA=',
+  'base64'
+);
+
+function previewWorkbook() {
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(
+    workbook,
+    XLSX.utils.aoa_to_sheet([
+      ['仪器编码', '仪器名称'],
+      ['INS-PREVIEW-001', '透射电子显微镜'],
+    ]),
+    '仪器清单'
+  );
+  XLSX.utils.book_append_sheet(
+    workbook,
+    XLSX.utils.aoa_to_sheet([['第二个工作表'], ['预览正常']]),
+    '维护记录'
+  );
+  return XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' }) as Buffer;
+}
 
 function expectDeclaredInstrumentQuery(request: Request) {
   const body = request.postDataJSON() as {
@@ -728,6 +751,268 @@ test('keeps the production warning visible when current-user fails closed', asyn
   await expect(page.getByText('无法读取平台当前用户')).toBeVisible();
 });
 
+test('previews images in a lightbox and documents in focused new windows', async ({
+  page,
+  context,
+}) => {
+  test.setTimeout(60_000);
+  const image = Buffer.from(
+    'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+    'base64'
+  );
+  const spreadsheet = previewWorkbook();
+  const pdf = Buffer.from(
+    '%PDF-1.4\n1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj\n2 0 obj<</Type/Pages/Kids[3 0 R]/Count 1>>endobj\n3 0 obj<</Type/Page/Parent 2 0 R/MediaBox[0 0 300 200]>>endobj\ntrailer<</Root 1 0 R>>\n%%EOF'
+  );
+  const files = new Map([
+    [
+      'preview-image',
+      {
+        name: '显微镜照片.png',
+        type: 'image/png',
+        body: image,
+        previewType: 'image',
+        renderMode: 'inline',
+        canPreview: true,
+        unsupportedReason: '',
+      },
+    ],
+    [
+      'preview-docx',
+      {
+        name: '设备说明书.docx',
+        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        body: minimalDocx,
+        previewType: 'office',
+        renderMode: 'docx-html',
+        canPreview: true,
+        unsupportedReason: '',
+      },
+    ],
+    [
+      'preview-xlsx',
+      {
+        name: '仪器清单.xlsx',
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        body: spreadsheet,
+        previewType: 'spreadsheet',
+        renderMode: 'excel-client',
+        canPreview: true,
+        unsupportedReason: '',
+      },
+    ],
+    [
+      'preview-pdf',
+      {
+        name: '验收报告.pdf',
+        type: 'application/pdf',
+        body: pdf,
+        previewType: 'pdf',
+        renderMode: 'pdfjs',
+        canPreview: true,
+        unsupportedReason: '',
+      },
+    ],
+    [
+      'preview-doc',
+      {
+        name: '旧版说明书.doc',
+        type: 'application/msword',
+        body: Buffer.from('legacy-word-file'),
+        previewType: 'download',
+        renderMode: 'download',
+        canPreview: false,
+        unsupportedReason: '该旧版 Office 格式暂不支持在线预览，请下载后打开',
+      },
+    ],
+  ]);
+  const byName = new Map([...files].map(([id, file]) => [file.name, id]));
+  const inlineReads: string[] = [];
+  await context.route('**/mock-upload/**', route =>
+    route.fulfill({ status: 200, body: '' })
+  );
+  await context.route('**/service/**', async route => {
+    const request = route.request();
+    const url = new URL(request.url());
+    if (url.pathname.endsWith('/dev-sessions/current')) {
+      await route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            environment: { id: 'test-id', key: 'preproduction' },
+            principal: {
+              userId,
+              roleCodes: ['school_admin'],
+              capabilityCodes: [],
+              isAppSuperAdmin: true,
+            },
+          },
+        }),
+      });
+      return;
+    }
+    if (url.pathname.endsWith('/files/uploads/initiate')) {
+      const input = request.postDataJSON() as {
+        fileName: string;
+        fileSize: number;
+        contentType: string;
+      };
+      const id = byName.get(input.fileName)!;
+      await route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            schemaVersion: 'openxiangda.data-file-upload-plan/v2',
+            resourceCode: 'instruments',
+            fieldCode: input.contentType.startsWith('image/') ? 'image' : 'attachments',
+            file: {
+              schemaVersion: 'openxiangda.data-file-ref/v2',
+              id,
+              name: input.fileName,
+              size: input.fileSize,
+              contentType: input.contentType,
+            },
+            uploadMethod: 'PUT',
+            uploadUrl: `${url.origin}/mock-upload/${id}`,
+            headers: {},
+            expiresAt: '2026-08-21T18:00:00.000Z',
+          },
+        }),
+      });
+      return;
+    }
+    const complete = url.pathname.match(/\/files\/(preview-[^/]+)\/complete$/);
+    if (complete) {
+      const id = complete[1]!;
+      const file = files.get(id)!;
+      await route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            schemaVersion: 'openxiangda.data-file-ref/v2',
+            id,
+            name: file.name,
+            size: file.body.length,
+            contentType: file.type,
+          },
+        }),
+      });
+      return;
+    }
+    const preview = url.pathname.match(/\/files\/(preview-[^/]+)\/preview$/);
+    if (preview) {
+      const id = preview[1]!;
+      const file = files.get(id)!;
+      await route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            schemaVersion: 'openxiangda.data-file-preview/v2',
+            resourceCode: 'instruments',
+            file: {
+              schemaVersion: 'openxiangda.data-file-ref/v2',
+              id,
+              name: file.name,
+              size: file.body.length,
+              contentType: file.type,
+            },
+            extension: file.name.split('.').pop(),
+            previewType: file.previewType,
+            renderMode: file.renderMode,
+            previewSurface: file.previewType === 'image' ? 'media' : 'document',
+            previewProvider: 'browser',
+            canPreview: file.canPreview,
+            canDownload: true,
+            ...(file.unsupportedReason
+              ? { unsupportedReason: file.unsupportedReason }
+              : {}),
+          },
+        }),
+      });
+      return;
+    }
+    const content = url.pathname.match(/\/files\/(preview-[^/]+)\/content$/);
+    if (content) {
+      const id = content[1]!;
+      const file = files.get(id)!;
+      if (url.searchParams.get('disposition') === 'inline') inlineReads.push(id);
+      await route.fulfill({
+        status: 200,
+        contentType: file.type,
+        body: file.body,
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, body: '{}' });
+  });
+
+  await page.goto('/instruments/new');
+  const fileFields = page.locator('.oxa-file-field');
+  const imageInput = fileFields.nth(0).locator('input[type="file"]').first();
+  const attachmentInput = fileFields.nth(1).locator('input[type="file"]').first();
+  await imageInput.setInputFiles({
+    name: '显微镜照片.png',
+    mimeType: 'image/png',
+    buffer: image,
+  });
+  for (const [name, mimeType, buffer] of [
+    ['设备说明书.docx', files.get('preview-docx')!.type, minimalDocx],
+    ['仪器清单.xlsx', files.get('preview-xlsx')!.type, spreadsheet],
+    ['验收报告.pdf', 'application/pdf', pdf],
+    ['旧版说明书.doc', 'application/msword', files.get('preview-doc')!.body],
+  ] as const) {
+    await attachmentInput.setInputFiles({ name, mimeType, buffer });
+    await expect(page.getByText(name, { exact: true })).toBeVisible();
+  }
+
+  await page.getByRole('button', { name: '预览显微镜照片.png' }).click();
+  await expect(page.locator('.ant-image-preview-img')).toBeVisible();
+  await page.keyboard.press('Escape');
+
+  const docxPagePromise = context.waitForEvent('page');
+  await page.getByRole('button', { name: '预览设备说明书.docx' }).click();
+  const docxPage = await docxPagePromise;
+  await expect(docxPage.getByText('OpenXiangda Word Preview')).toBeVisible();
+  await docxPage.close();
+
+  const xlsxPagePromise = context.waitForEvent('page');
+  await page.getByRole('button', { name: '预览仪器清单.xlsx' }).click();
+  const xlsxPage = await xlsxPagePromise;
+  await expect(xlsxPage.getByText('透射电子显微镜')).toBeVisible();
+  await xlsxPage.getByText('维护记录', { exact: true }).click();
+  await expect(xlsxPage.getByText('预览正常')).toBeVisible();
+  await xlsxPage.close();
+
+  const pdfPagePromise = context.waitForEvent('page');
+  await page.getByRole('button', { name: '预览验收报告.pdf' }).click();
+  const pdfPage = await pdfPagePromise;
+  await expect(pdfPage.locator('iframe[title="验收报告.pdf PDF 预览"]')).toBeVisible();
+  await pdfPage.close();
+
+  const legacyPagePromise = context.waitForEvent('page');
+  await page.getByRole('button', { name: '预览旧版说明书.doc' }).click();
+  const legacyPage = await legacyPagePromise;
+  await expect(
+    legacyPage.getByText('该旧版 Office 格式暂不支持在线预览，请下载后打开')
+  ).toBeVisible();
+  await expect(legacyPage.getByRole('link', { name: '下载文件' })).toBeVisible();
+  await legacyPage.close();
+
+  expect(inlineReads).toEqual(
+    expect.arrayContaining([
+      'preview-image',
+      'preview-docx',
+      'preview-xlsx',
+      'preview-pdf',
+    ])
+  );
+  expect(inlineReads).not.toContain('preview-doc');
+});
+
 async function installProductionRuntimeMeta(page: Page) {
   await page.route('**/view/instrument-center/**', async route => {
     if (route.request().resourceType() !== 'document') {

package/template/apps/web/package.json

@@ -15,10 +15,12 @@
     "@refinedev/core": "5.0.12",
     "antd": "6.4.3",
     "dayjs": "1.11.18",
-    "openxiangda-contracts": "2.0.0-alpha.27",
+    "docx-preview": "0.3.7",
+    "openxiangda-contracts": "2.0.0-alpha.28",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "react-router-dom": "7.8.2"
+    "react-router-dom": "7.8.2",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
     "@playwright/test": "1.62.1",

package/template/apps/web/scripts/check.mjs

@@ -20,7 +20,7 @@ const lines = files.reduce(
   0
 );
 if (files.length > 18) throw new Error(`WEB_SOURCE_FILE_BUDGET_EXCEEDED:${files.length}>18`);
-if (lines > 3_900) throw new Error(`WEB_BUSINESS_LOC_BUDGET_EXCEEDED:${lines}>3900`);
+if (lines > 4_300) throw new Error(`WEB_BUSINESS_LOC_BUDGET_EXCEEDED:${lines}>4300`);
 const source = files.map(file => readFileSync(file, 'utf8')).join('\n');
 for (const marker of ['@umijs/', 'openxiangda-' + 'admin', 'openxiangda-' + 'user', 'instrument_query', 'instrument_save', 'function.invoke', 'role' + '-session', 'college-' + 'am', 'user-' + 'wang', 'dept-' + 'am-test']) {
   if (source.includes(marker)) throw new Error(`WEB_FORBIDDEN_MARKER:${marker}`);

package/template/apps/web/scripts/verify-build.mjs

@@ -13,8 +13,20 @@ const gzip = javascript.reduce(
   (bytes, file) => bytes + gzipSync(readFileSync(file), { level: 9 }).byteLength,
   0
 );
-if (gzip > 600_000) throw new Error(`WEB_JS_GZIP_BUDGET_EXCEEDED:${gzip}>600000`);
+if (gzip > 750_000) throw new Error(`WEB_JS_GZIP_BUDGET_EXCEEDED:${gzip}>750000`);
 if (names.some(name => name.endsWith('.map'))) throw new Error('WEB_SOURCE_MAP_FORBIDDEN');
 const html = readFileSync(join(dist, 'index.html'), 'utf8');
 if (!html.includes('<div id="root"></div>')) throw new Error('WEB_ROOT_MISSING');
-process.stdout.write(`Verified Vite build: ${total} bytes, ${gzip} gzip bytes.\n`);
+const initialNames = [
+  ...html.matchAll(/(?:src|href)="\.\/assets\/([^"]+\.js)"/g),
+].map(match => match[1]);
+const initialGzip = [...new Set(initialNames)].reduce((bytes, name) => {
+  const file = join(assets, name);
+  return bytes + gzipSync(readFileSync(file), { level: 9 }).byteLength;
+}, 0);
+if (initialGzip > 600_000) {
+  throw new Error(`WEB_INITIAL_JS_GZIP_BUDGET_EXCEEDED:${initialGzip}>600000`);
+}
+process.stdout.write(
+  `Verified Vite build: ${total} bytes, ${gzip} total gzip bytes, ${initialGzip} initial gzip bytes.\n`
+);

package/template/apps/web/src/FilePreviewPage.tsx

@@ -0,0 +1,303 @@
+import {
+  CloseOutlined,
+  DownloadOutlined,
+  FileExcelOutlined,
+  FileImageOutlined,
+  FilePdfOutlined,
+  FileWordOutlined,
+  PaperClipOutlined,
+} from '@ant-design/icons';
+import { Alert, Button, Empty, Result, Segmented, Spin, Typography } from 'antd';
+import type { DataFilePreview } from 'openxiangda-contracts/browser';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import {
+  dataFileContentUrl,
+  fetchDataFileBlob,
+  loadDataFilePreview,
+} from './platform-client';
+import { formatManagedFileSize } from './components/platform-fields/AttachmentFileList';
+
+const MAX_SPREADSHEET_ROWS = 5_000;
+const MAX_SPREADSHEET_COLUMNS = 200;
+
+function DocxDocument({ blob }: { blob: Blob }) {
+  const styleRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    let active = true;
+    const body = bodyRef.current;
+    const style = styleRef.current;
+    if (!body || !style) return;
+    body.replaceChildren();
+    style.replaceChildren();
+    setError('');
+    void import('docx-preview')
+      .then(({ renderAsync }) =>
+        renderAsync(blob, body, style, {
+          className: 'oxa-docx-document',
+          inWrapper: true,
+          ignoreFonts: false,
+          ignoreHeight: false,
+          ignoreWidth: false,
+          renderChanges: false,
+          renderHeaders: true,
+          renderFooters: true,
+        })
+      )
+      .catch(reason => {
+        if (active) {
+          setError(reason instanceof Error ? reason.message : String(reason));
+        }
+      });
+    return () => {
+      active = false;
+      body.replaceChildren();
+      style.replaceChildren();
+    };
+  }, [blob]);
+  if (error) {
+    return <Alert message="Word 文档解析失败" description={error} type="error" showIcon />;
+  }
+  return (
+    <div className="oxa-docx-preview">
+      <div ref={styleRef} />
+      <div ref={bodyRef} />
+    </div>
+  );
+}
+
+function SpreadsheetDocument({ blob }: { blob: Blob }) {
+  const [sheetName, setSheetName] = useState('');
+  const [sheets, setSheets] = useState<Record<string, unknown[][]>>({});
+  const [error, setError] = useState('');
+  useEffect(() => {
+    let active = true;
+    setError('');
+    setSheets({});
+    void Promise.all([blob.arrayBuffer(), import('xlsx')])
+      .then(([buffer, XLSX]) => {
+        const workbook = XLSX.read(buffer, {
+          type: 'array',
+          cellFormula: false,
+          cellHTML: false,
+          cellText: true,
+        });
+        if (!active) return;
+        setSheets(
+          Object.fromEntries(
+            workbook.SheetNames.slice(0, 50).map(name => [
+              name,
+              (
+                XLSX.utils.sheet_to_json<unknown[]>(workbook.Sheets[name]!, {
+                  header: 1,
+                  raw: false,
+                  blankrows: false,
+                  defval: '',
+                }) as unknown[][]
+              )
+                .slice(0, MAX_SPREADSHEET_ROWS)
+                .map(row => row.slice(0, MAX_SPREADSHEET_COLUMNS)),
+            ])
+          )
+        );
+        setSheetName(workbook.SheetNames[0] || '');
+      })
+      .catch(reason => {
+        if (active) {
+          setError(reason instanceof Error ? reason.message : String(reason));
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [blob]);
+  const rows = sheets[sheetName] || [];
+  if (error) {
+    return <Alert message="Excel 文件解析失败" description={error} type="error" showIcon />;
+  }
+  const sheetNames = Object.keys(sheets);
+  if (!sheetNames.length) return <Spin description="正在解析 Excel 文件" />;
+  return (
+    <div className="oxa-spreadsheet-preview">
+      {sheetNames.length > 1 && (
+        <Segmented
+          block
+          onChange={value => setSheetName(String(value))}
+          options={sheetNames}
+          value={sheetName}
+        />
+      )}
+      <div className="oxa-spreadsheet-scroll">
+        {rows.length ? (
+          <table>
+            <tbody>
+              {rows.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  <th>{rowIndex + 1}</th>
+                  {row.map((cell, columnIndex) => (
+                    <td key={columnIndex}>{String(cell ?? '')}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <Empty description="当前工作表没有可显示的数据" />
+        )}
+      </div>
+      {(rows.length >= MAX_SPREADSHEET_ROWS ||
+        rows.some(row => row.length >= MAX_SPREADSHEET_COLUMNS)) && (
+        <Alert
+          banner
+          message={`为保证浏览器稳定，仅展示前 ${MAX_SPREADSHEET_ROWS} 行、${MAX_SPREADSHEET_COLUMNS} 列`}
+          type="warning"
+        />
+      )}
+    </div>
+  );
+}
+
+function PreviewBody({ preview, blob }: { preview: DataFilePreview; blob?: Blob }) {
+  const objectUrl = useMemo(() => (blob ? URL.createObjectURL(blob) : ''), [blob]);
+  useEffect(
+    () => () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    },
+    [objectUrl]
+  );
+  if (!preview.canPreview || preview.renderMode === 'download') {
+    return (
+      <Empty
+        description={
+          <div>
+            <Typography.Text strong>当前文件无法在线预览</Typography.Text>
+            <br />
+            <Typography.Text type="secondary">
+              {preview.unsupportedReason || '请下载后使用本地应用打开'}
+            </Typography.Text>
+          </div>
+        }
+      />
+    );
+  }
+  if (!blob) return <Spin description="正在读取文件内容" />;
+  if (preview.previewType === 'image') {
+    return <img alt={preview.file.name} className="oxa-preview-image" src={objectUrl} />;
+  }
+  if (preview.renderMode === 'pdfjs') {
+    return (
+      <iframe
+        className="oxa-preview-frame"
+        src={objectUrl}
+        title={`${preview.file.name} PDF 预览`}
+      />
+    );
+  }
+  if (preview.renderMode === 'docx-html') return <DocxDocument blob={blob} />;
+  if (
+    preview.renderMode === 'excel-client' ||
+    preview.renderMode === 'excel-basic'
+  ) {
+    return <SpreadsheetDocument blob={blob} />;
+  }
+  return (
+    <Empty description={preview.unsupportedReason || '当前文件没有可用的预览器'} />
+  );
+}
+
+function previewIcon(preview?: DataFilePreview) {
+  if (preview?.previewType === 'image') return <FileImageOutlined />;
+  if (preview?.previewType === 'pdf') return <FilePdfOutlined />;
+  if (preview?.previewType === 'spreadsheet') return <FileExcelOutlined />;
+  if (preview?.previewType === 'office') return <FileWordOutlined />;
+  return <PaperClipOutlined />;
+}
+
+export function FilePreviewPage() {
+  const { resourceCode = '', fileId = '' } = useParams();
+  const [preview, setPreview] = useState<DataFilePreview>();
+  const [blob, setBlob] = useState<Blob>();
+  const [error, setError] = useState('');
+  useEffect(() => {
+    let active = true;
+    setPreview(undefined);
+    setBlob(undefined);
+    setError('');
+    if (!resourceCode || !fileId) {
+      setError('OPENXIANGDA_NATIVE_DATA_FILE_PREVIEW_PATH_INVALID');
+      return () => {
+        active = false;
+      };
+    }
+    void loadDataFilePreview(resourceCode, fileId)
+      .then(async metadata => {
+        if (!active) return;
+        setPreview(metadata);
+        document.title = `${metadata.file.name} - 文件预览`;
+        if (metadata.canPreview && metadata.renderMode !== 'download') {
+          const content = await fetchDataFileBlob(resourceCode, fileId);
+          if (active) setBlob(content);
+        }
+      })
+      .catch(reason => {
+        if (active) setError(reason instanceof Error ? reason.message : String(reason));
+      });
+    return () => {
+      active = false;
+    };
+  }, [fileId, resourceCode]);
+
+  const downloadUrl =
+    resourceCode && fileId
+      ? dataFileContentUrl(resourceCode, fileId, 'attachment')
+      : '';
+  return (
+    <div className="oxa-file-preview-page">
+      <header className="oxa-file-preview-toolbar">
+        <div className="oxa-file-preview-title">
+          {previewIcon(preview)}
+          <div>
+            <strong>{preview?.file.name || '文件预览'}</strong>
+            <span>
+              {preview
+                ? `${preview.extension.toUpperCase() || '文件'} · ${formatManagedFileSize(preview.file.size)} · 只读预览`
+                : '正在加载预览信息'}
+            </span>
+          </div>
+        </div>
+        <div>
+          {downloadUrl && (
+            <Button href={downloadUrl} icon={<DownloadOutlined />}>
+              下载文件
+            </Button>
+          )}
+          <Button icon={<CloseOutlined />} onClick={() => window.close()}>
+            关闭
+          </Button>
+        </div>
+      </header>
+      <main className="oxa-file-preview-body">
+        {error ? (
+          <Result
+            status="error"
+            title="文件预览加载失败"
+            subTitle={error}
+            extra={
+              downloadUrl ? (
+                <Button href={downloadUrl} icon={<DownloadOutlined />} type="primary">
+                  下载文件
+                </Button>
+              ) : undefined
+            }
+          />
+        ) : preview ? (
+          <PreviewBody blob={blob} preview={preview} />
+        ) : (
+          <Spin description="正在确认文件权限与预览能力" />
+        )}
+      </main>
+    </div>
+  );
+}