@zjlab-fe/data-hub-ui 0.24.0 → 0.25.0

package/dist/types/components/file-preview/interface.d.ts

@@ -1,6 +1,10 @@
 export interface IFilePreviewProps {
+    /** 文件扩展名，如果传入了该值，则以该扩展名的格式展示，否则按照filePath的扩展名展示 */
+    ext?: string;
     /** 文件url */
     filePath?: string;
+    /** 自定义HTTP请求头，比如：认证信息 */
+    httpHeaders?: Record<string, string>;
     /**
      * 已有数据，展示成Table
      */

package/dist/types/components/file-preview/markdown-preview/cdn-loader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 从 esm.sh CDN 动态加载 ESM 模块，带缓存
+ * @param name - npm 包名
+ * @param version - 版本号（如 '7' 表示 7.x latest）
+ */
+export declare function loadPlugin<T = any>(name: string, version: string): Promise<T>;

package/dist/types/components/file-preview/markdown-preview/load-mathjax.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 从 CDN 加载全局 MathJax 脚本
+ * 配置支持 $...$ 和 $$...$$ 行内/块级公式
+ */
+export declare function loadMathjax(): Promise<void>;
+/**
+ * 在指定容器内对 MathJax 公式重新排版
+ * 通常在 DOM 更新后调用
+ */
+export declare function typesetMathjax(container: HTMLElement): Promise<void>;

package/dist/types/components/file-preview/markdown-preview/rehype-math-to-text.d.ts

@@ -0,0 +1,8 @@
+/**
+ * remark 插件：将 remark-math 解析的 math/inlineMath mdast 节点转回
+ * 带 $ 定界符的 text 节点，供全局 MathJax 后处理渲染
+ *
+ * 必须在 remark-rehype 转换之前执行，因为 mdast→hAST 阶段
+ * 无法识别 math 节点类型，会静默丢弃
+ */
+export declare function remarkMathToText(): (tree: any) => void;

package/dist/types/components/file-preview/markdown-preview/use-markdown-plugins.d.ts

@@ -0,0 +1,14 @@
+export interface MarkdownPlugins {
+    rehypeRaw: any;
+    remarkGfm: any;
+    remarkMath: any;
+    rehypeKatex: any;
+}
+interface UsePluginsResult {
+    plugins: MarkdownPlugins | null;
+    loading: boolean;
+    error: Error | null;
+}
+/** 从 CDN 异步加载 markdown 渲染所需的 unified 插件 */
+export declare function useMarkdownPlugins(): UsePluginsResult;
+export {};

package/dist/types/components/file-preview/util.d.ts

@@ -5,4 +5,4 @@ export declare function appendAsset(assetUrlArr: string[]): Promise<unknown>;
  * @param {string} fileUrl - 文件地址
  * @returns {Promise<string>} 解码后的正常字符串
  */
-export declare function fetchFileWithAutoCode(fileUrl: string): Promise<string>;
+export declare function fetchFileWithAutoCode(fileUrl: string, httpHeaders?: Record<string, string>): Promise<string>;

package/es/components/file-preview/excel-preview/index.js

@@ -34,7 +34,7 @@ function getEncoding(blob) {
 function ExcelPreview(props) {
     var _a;
     const ref = useRef(null);
-    const ext = getFileExt(props.filePath);
+    const ext = props.ext || getFileExt(props.filePath);
     const [csvData, setCsvData] = useState();
     const [csvContainerHeight, setCsvContainerHeight] = useState();
     const [csvContainerWidth, setCsvContainerWidth] = useState();
@@ -45,7 +45,11 @@ function ExcelPreview(props) {
             'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/xlsx/0.18.5/dist/xlsx.full.min.js',
             'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/papaparse/5.5.2/papaparse.min.js',
         ]).then(() => __awaiter(this, void 0, void 0, function* () {
-            fetch(props.filePath)
+            const fetchOptions = {};
+            if (props.httpHeaders) {
+                fetchOptions.headers = props.httpHeaders;
+            }
+            fetch(props.filePath, fetchOptions)
                 .then((response) => __awaiter(this, void 0, void 0, function* () {
                 if (ext === 'csv') {
                     const blob = yield response.blob();

package/es/components/file-preview/img-preview/index.js

@@ -1,7 +1,48 @@
 import { jsx } from 'react/jsx-runtime';
 import { wrap, img } from './index.module.scss.js';
+import { useState, useRef, useEffect } from 'react';
 
 function ImgPreview(props) {
+    const { filePath, httpHeaders } = props;
+    const [imgSrc, setImgSrc] = useState('');
+    const objectUrlRef = useRef('');
+    useEffect(() => {
+        if (!filePath) {
+            return;
+        }
+        if (!httpHeaders || Object.keys(httpHeaders).length === 0) {
+            setImgSrc(filePath);
+            return;
+        }
+        const controller = new AbortController();
+        fetch(filePath, {
+            headers: httpHeaders,
+            signal: controller.signal,
+        })
+            .then((res) => {
+            if (!res.ok) {
+                throw new Error(`HTTP ${res.status}`);
+            }
+            return res.blob();
+        })
+            .then((blob) => {
+            const url = URL.createObjectURL(blob);
+            objectUrlRef.current = url;
+            setImgSrc(url);
+        })
+            .catch((e) => {
+            var _a;
+            if (e.name !== 'AbortError') {
+                (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        });
+        return () => {
+            controller.abort();
+            if (objectUrlRef.current) {
+                URL.revokeObjectURL(objectUrlRef.current);
+            }
+        };
+    }, []);
     // eslint-disable-next-line
     const onError = (e) => {
         var _a;
@@ -12,7 +53,7 @@ function ImgPreview(props) {
         var _a;
         (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
     };
-    return (jsx("div", { className: wrap, children: jsx("img", { src: props.filePath, onError: onError, onLoad: onLoad, className: img }) }));
+    return (jsx("div", { className: wrap, children: imgSrc && jsx("img", { src: imgSrc, onError: onError, onLoad: onLoad, className: img }) }));
 }
 
 export { ImgPreview as default };

package/es/components/file-preview/index.js

@@ -43,7 +43,7 @@ function InnerFilePreview(props) {
         result = jsx(JsonPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
     }
     else if (filePath) {
-        const ext = getFileExt(filePath).toLowerCase();
+        const ext = props.ext || getFileExt(filePath).toLowerCase();
         const spin = (jsx("div", { className: spinWrap, children: jsx(Spin, {}) }));
         let innerPreview = null;
         let canPreview = true;

package/es/components/file-preview/json-preview/index.js

@@ -83,7 +83,7 @@ function JsonPreview(props) {
                     value = props.jsonConfig.data;
                 }
                 else {
-                    value = yield fetchFileWithAutoCode(props.filePath);
+                    value = yield fetchFileWithAutoCode(props.filePath, props.httpHeaders);
                 }
                 try {
                     const json = typeof value === 'string' ? JSON.parse(value) : value;

package/es/components/file-preview/markdown-preview/index.js

@@ -5,8 +5,9 @@ import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
-import rehypeMathjax from 'rehype-mathjax';
 import { fetchFileWithAutoCode } from '../util.js';
+import { typesetMathjax } from './load-mathjax.js';
+import { remarkMathToText } from './rehype-math-to-text.js';
 import { wrap } from './index.module.scss.js';
 
 function processMarkdownImages(input) {
@@ -24,6 +25,18 @@ function processMarkdownImages(input) {
         }
     });
 }
+/** 将 \(...\) 和 \[...\] 转换为 remark-math 能识别的 $/$$ 定界符 */
+function normalizeMathDelimiters(input) {
+    return (input
+        // \[...\] → $$...$$ (块级公式，跨行)
+        .replace(/\\\[([\s\S]*?)\\\]/g, (_, inner) => {
+        return `$$\n${inner.trim()}\n$$`;
+    })
+        // \(...\) → $...$ (行内公式，单行)
+        .replace(/\\\(([^\n]*?)\\\)/g, (_, inner) => {
+        return `$${inner.trim()}$`;
+    }));
+}
 function MDPreview(props) {
     const ref = useRef(null);
     const [content, setContent] = useState('');
@@ -32,10 +45,11 @@ function MDPreview(props) {
             // 测试vditor预览大小超过1MB的markdown文件非常耗时(超过10s)
             var _a, _b;
             try {
-                let result = yield fetchFileWithAutoCode(props.filePath);
+                let result = yield fetchFileWithAutoCode(props.filePath, props.httpHeaders);
                 // const start = new Date().getTime();
                 // console.log('+++ start', start);
                 result = processMarkdownImages(result);
+                result = normalizeMathDelimiters(result);
                 // const end = new Date().getTime();
                 // console.log('+++ end', end);
                 // console.log(`processMarkdownImages time: ${end - start}ms`);
@@ -47,7 +61,12 @@ function MDPreview(props) {
             }
         }))();
     }, []);
-    return (jsx("div", { ref: ref, style: { height: '100%', overflow: 'auto' }, className: wrap, children: content ? (jsx(ReactMarkdown, { className: "markdown-body", remarkPlugins: [remarkMath, remarkGfm], rehypePlugins: [rehypeRaw, rehypeMathjax], children: content })) : null }));
+    useEffect(() => {
+        if (content && ref.current) {
+            typesetMathjax(ref.current);
+        }
+    }, [content]);
+    return (jsx("div", { ref: ref, style: { height: '100%', overflow: 'auto' }, className: wrap, children: content ? (jsx(ReactMarkdown, { className: "markdown-body", remarkPlugins: [remarkMath, remarkGfm, remarkMathToText], rehypePlugins: [rehypeRaw], children: content })) : null }));
 }
 
 export { MDPreview as default };

package/es/components/file-preview/markdown-preview/load-mathjax.js

@@ -0,0 +1,76 @@
+import { __awaiter } from 'tslib';
+
+let loaded = false;
+let loading = null;
+/**
+ * 从 CDN 加载全局 MathJax 脚本
+ * 配置支持 $...$ 和 $$...$$ 行内/块级公式
+ */
+function loadMathjax() {
+    var _a;
+    // 宿主项目已自行配置并加载全局 MathJax，直接复用
+    if ((_a = window.MathJax) === null || _a === void 0 ? void 0 : _a.typesetPromise) {
+        loaded = true;
+        return Promise.resolve();
+    }
+    if (loaded)
+        return Promise.resolve();
+    if (loading)
+        return loading;
+    loading = new Promise((resolve, reject) => {
+        // 先写入 MathJax 配置
+        const scriptConfig = document.createElement('script');
+        scriptConfig.textContent = `
+      window.MathJax = {
+        tex: {
+          inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
+          displayMath: [['$$', '$$'], ['\\\\[', '\\\\]']],
+          processEscapes: true
+        },
+        options: {
+          enableMenu: false,
+          ignoreHtmlClass: 'no-mathjax',
+          processHtmlClass: 'mathjax-process'
+        },
+        startup: {
+          pageReady: function () {
+            return MathJax.startup.defaultPageReady();
+          }
+        }
+      };
+    `;
+        document.head.appendChild(scriptConfig);
+        // 加载 MathJax 核心脚本
+        const script = document.createElement('script');
+        script.src =
+            'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/mathjax/3.2.2/es5/tex-mml-chtml.js';
+        script.async = true;
+        script.onload = () => {
+            loaded = true;
+            resolve();
+        };
+        script.onerror = () => reject(new Error('Failed to load MathJax from CDN'));
+        document.head.appendChild(script);
+    });
+    return loading;
+}
+/**
+ * 在指定容器内对 MathJax 公式重新排版
+ * 通常在 DOM 更新后调用
+ */
+function typesetMathjax(container) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        try {
+            yield loadMathjax();
+            if ((_a = window.MathJax) === null || _a === void 0 ? void 0 : _a.typesetPromise) {
+                yield window.MathJax.typesetPromise([container]);
+            }
+        }
+        catch (_b) {
+            // 静默失败，不阻塞渲染
+        }
+    });
+}
+
+export { loadMathjax, typesetMathjax };

package/es/components/file-preview/markdown-preview/rehype-math-to-text.js

@@ -0,0 +1,28 @@
+import { visit } from 'unist-util-visit';
+
+/**
+ * remark 插件：将 remark-math 解析的 math/inlineMath mdast 节点转回
+ * 带 $ 定界符的 text 节点，供全局 MathJax 后处理渲染
+ *
+ * 必须在 remark-rehype 转换之前执行，因为 mdast→hAST 阶段
+ * 无法识别 math 节点类型，会静默丢弃
+ */
+function remarkMathToText() {
+    // eslint-disable-next-line
+    return (tree) => {
+        // eslint-disable-next-line
+        visit(tree, (node) => {
+            if (node.type === 'math' || node.type === 'inlineMath') {
+                const delimiter = node.type === 'inlineMath' ? '$' : '$$';
+                node.type = 'text';
+                node.value = `${delimiter}${node.value}${delimiter}`;
+                // 清除 remark-math 设置的 hAST 提示（hName, hProperties, hChildren）
+                // 否则 remark-rehype 仍会按 <code> 元素渲染，而不是纯文本
+                delete node.data;
+                delete node.meta;
+            }
+        });
+    };
+}
+
+export { remarkMathToText };

package/es/components/file-preview/parquet-preview/index.js

@@ -21,7 +21,7 @@ function ParquetPreview(props) {
         (() => __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c, _d;
             try {
-                const resp = yield fetch(props.filePath);
+                const resp = yield fetch(props.filePath, { headers: props.httpHeaders });
                 const parquetUint8Array = new Uint8Array(yield resp.arrayBuffer());
                 // const start = new Date().getTime();
                 ffiTable = readParquet(parquetUint8Array).intoFFI();

package/es/components/file-preview/pdf-preview/index.js

@@ -61,7 +61,7 @@ function roundToDivide(x, div) {
     return r === 0 ? x : Math.round(x - r + div);
 }
 function PdfPreview(props) {
-    const { filePath } = props;
+    const { filePath, httpHeaders } = props;
     const pdfContainer = useRef(null);
     const pageSize = 3;
     const lastScrollTop = useRef(0);
@@ -192,6 +192,7 @@ function PdfPreview(props) {
                 url: filePath,
                 cMapUrl: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/pdfjs-dist/4.7.76/cmaps/',
                 cMapPacked: true,
+                httpHeaders,
             })
                 // eslint-disable-next-line
                 .promise.then((doc) => {

package/es/components/file-preview/txt-preview/index.js

@@ -9,7 +9,7 @@ function TxtPreview(props) {
         (() => __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
             try {
-                const result = yield fetchFileWithAutoCode(props.filePath);
+                const result = yield fetchFileWithAutoCode(props.filePath, props.httpHeaders);
                 setContent(result);
                 (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
             }

package/es/components/file-preview/util.js

@@ -59,9 +59,9 @@ function appendAsset(assetUrlArr) {
  * @param {string} fileUrl - 文件地址
  * @returns {Promise<string>} 解码后的正常字符串
  */
-function fetchFileWithAutoCode(fileUrl) {
+function fetchFileWithAutoCode(fileUrl, httpHeaders) {
     return __awaiter(this, void 0, void 0, function* () {
-        const response = yield fetch(fileUrl);
+        const response = yield fetch(fileUrl, { headers: httpHeaders });
         if (!response.ok)
             throw new Error(`请求失败：${response.status}`);
         const arrayBuffer = yield response.arrayBuffer();