@zjlab-fe/data-hub-ui 0.32.6 → 0.33.1

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

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { Table } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import i18next from 'i18next';
 import { cell, textContent, pagination, table, downloadTip } from './index.module.scss.js';
+import { useLocale } from '../../../locale/index.js';
 
 const DEFAULT_MAX_LINES = 3;
 function getScrollHeight(containerHeight) {
@@ -49,7 +49,8 @@ function getTextWidth(text, style = {}) {
 function DataTable(props) {
     const { maxLines = DEFAULT_MAX_LINES, containerWidth = window.innerWidth - 24 } = props;
     const headerTextWidth = useRef([]);
-    const locale = i18next.resolvedLanguage || localStorage.getItem('i18nextLng') || 'zh';
+    const { locale } = useLocale();
+    const texts = locale.FilePreview;
     if (headerTextWidth.current.length === 0) {
         props.head.forEach((item) => {
             headerTextWidth.current.push(getTextWidth(item));
@@ -82,7 +83,7 @@ function DataTable(props) {
         onChange: props.onPageChange,
         showTotal: () => {
             if (props.total && props.total > props.data.length) {
-                return (jsxs("div", { className: downloadTip, children: [jsx(InfoCircleOutlined, {}), ' ', locale === 'zh' ? '请下载查看完整内容' : 'Please download to view the full content'] }));
+                return (jsxs("div", { className: downloadTip, children: [jsx(InfoCircleOutlined, {}), " ", texts.downloadFullContent] }));
             }
             else {
                 return null;

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

@@ -10,12 +10,13 @@ import ParquetPreview from './parquet-preview/index.js';
 import TablePreview from './table-preview/index.js';
 import { Spin, Modal } from 'antd';
 import { useState, useEffect } from 'react';
-import i18next from 'i18next';
 import { wrap, spinWrap, modalWrap } from './index.module.scss.js';
+import { useLocale } from '../../locale/index.js';
 
 function InnerFilePreview(props) {
     var _a, _b, _c;
-    const locale = i18next.resolvedLanguage || localStorage.getItem('i18nextLng') || 'zh';
+    const { locale } = useLocale();
+    const texts = locale.FilePreview;
     const { filePath, tableConfig, jsonConfig } = props;
     const [isError, setIsError] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
@@ -34,7 +35,7 @@ function InnerFilePreview(props) {
     };
     let result = null;
     if (isError) {
-        result = jsx("div", { className: wrap, children: locale === 'zh' ? '获取文件失败' : 'Failed to get file' });
+        result = jsx("div", { className: wrap, children: texts.failedToGetFile });
     }
     else if (tableConfig) {
         result = jsx(TablePreview, Object.assign({}, props, { onSuccess: onSuccess }));
@@ -89,7 +90,7 @@ function InnerFilePreview(props) {
             result = (jsxs(Fragment, { children: [isLoading && spin, innerPreview] }));
         }
         else {
-            result = (jsxs("div", { className: wrap, children: [locale === 'zh' ? '暂不支持' : 'Not supported', "\u00A0", ext, "\u00A0", locale === 'zh' ? '文件预览' : 'file preview'] }));
+            result = (jsxs("div", { className: wrap, children: [texts.notSupported, "\u00A0", ext, "\u00A0", texts.filePreview] }));
         }
     }
     if (props.openInModal) {

package/es/components/file-uploader/components/uploader-drop-zone.js

@@ -5,11 +5,13 @@ import { useDropZone } from './hooks/use-drop-zone.js';
 import { useFileValidation } from './hooks/use-file-validation.js';
 import useStyle from './theme.css.js';
 import useStyle$1 from './uploader-drop-zone.css.js';
+import { useLocale } from '../../../locale/index.js';
 
 useStyle();
 useStyle$1();
 function UploaderDropZone(props) {
-    const { accept = '', maxSize, maxFiles, directory = false, disabled = false, dragAreaDescription = '点击或拖拽上传文件', icon, classNames, onDrop, fileValidation, onError, } = props;
+    const { locale } = useLocale();
+    const { accept = '', maxSize, maxFiles, directory = false, disabled = false, dragAreaDescription, icon, classNames, onDrop, fileValidation, onError, } = props;
     const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
     const inputRef = useRef(null);
     const { processFiles } = useFileValidation({ maxSize, maxFiles, fileValidation, onDrop, onError });
@@ -70,7 +72,7 @@ function UploaderDropZone(props) {
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsx("div", { className: `upload-drop-zone-container ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, children: jsxs("div", { onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: open, className: dragAreaClass, children: [jsx("input", { ref: inputRef, type: "file", multiple: !maxFiles || maxFiles > 1, accept: accept, onChange: handleFileSelect, className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.input, style: { display: 'none' } }), renderIcon(), jsx("p", { className: `upload-description ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.description) || ''}`, children: dragAreaDescription })] }) }));
+    return (jsx("div", { className: `upload-drop-zone-container ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, children: jsxs("div", { onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: open, className: dragAreaClass, children: [jsx("input", { ref: inputRef, type: "file", multiple: !maxFiles || maxFiles > 1, accept: accept, onChange: handleFileSelect, className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.input, style: { display: 'none' } }), renderIcon(), jsx("p", { className: `upload-description ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.description) || ''}`, children: dragAreaDescription !== null && dragAreaDescription !== void 0 ? dragAreaDescription : locale.FileUploaderV2.dropHint })] }) }));
 }
 
 export { UploaderDropZone };

package/es/components/file-uploader/components/uploader-file-item.js

@@ -3,6 +3,7 @@ import { UploadStatus } from '../constants.js';
 import { CircleProgress } from './circle-progress.js';
 import { FileIcon, PauseIcon, ResumeIcon, RetryIcon, CloseIcon } from './icons.js';
 import { UploadingStatus } from './uploading-status.js';
+import { useLocale } from '../../../locale/index.js';
 import useStyle from './theme.css.js';
 import useStyle$1 from './uploader-file-item.css.js';
 
@@ -10,6 +11,8 @@ useStyle();
 useStyle$1();
 function UploaderFileItem(props) {
     const { file, classNames, onCancel, onRemove, onPause, onResume, onRetry } = props;
+    const { locale } = useLocale();
+    const texts = locale.FileUploaderV2;
     const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
     const isFailed = file.status === UploadStatus.FAILED;
     const isSuccess = file.status === UploadStatus.SUCCESS;
@@ -29,21 +32,21 @@ function UploaderFileItem(props) {
     const getStatusText = () => {
         switch (file.status) {
             case UploadStatus.PENDING:
-                return '等待上传';
+                return texts.waiting;
             case UploadStatus.PREPARING:
-                return '准备中';
+                return texts.preparing;
             case UploadStatus.UPLOADING:
-                return jsx(UploadingStatus, {}); // Will render UploadingStatus component instead
+                return jsx(UploadingStatus, {});
             case UploadStatus.PAUSED:
-                return '已暂停';
+                return texts.paused;
             case UploadStatus.MERGING:
-                return '合并中';
+                return texts.merging;
             case UploadStatus.SUCCESS:
-                return '上传成功';
+                return texts.success;
             case UploadStatus.FAILED:
-                return '上传失败';
+                return texts.failed;
             case UploadStatus.CANCELLED:
-                return '已取消';
+                return texts.cancelled;
             default:
                 return file.status;
         }
@@ -60,7 +63,7 @@ function UploaderFileItem(props) {
             return 'cancelled';
         return 'uploading';
     };
-    return (jsxs("div", { className: `upload-file-item ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, "data-status": getStatusAttribute(), children: [jsxs("div", { className: `upload-file-info ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.info) || ''}`, children: [jsx("div", { className: `upload-file-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx(FileIcon, {}) }), jsxs("span", { className: `upload-file-name ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.name) || ''}`, children: [file.fileName, file.relativePath && (jsx("span", { className: `upload-file-path ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.relativePath) || ''}`, children: file.relativePath }))] })] }), jsxs("div", { className: `upload-file-status ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.status) || ''}`, children: [jsx("span", { className: `upload-status-text ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.statusText) || ''}`, children: getStatusText() }), jsx("div", { className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.progress, children: jsx(CircleProgress, { percent: file.progress, isFailed: isFailed, isSuccess: isSuccess }) }), showPause && (jsx("button", { className: `upload-action-btn upload-pause-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.pauseBtn) || ''}`, onClick: () => onPause === null || onPause === void 0 ? void 0 : onPause(file.id), title: "\u6682\u505C\u4E0A\u4F20", children: jsx(PauseIcon, {}) })), showResume && (jsx("button", { className: `upload-action-btn upload-resume-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.resumeBtn) || ''}`, onClick: () => onResume === null || onResume === void 0 ? void 0 : onResume(file.id), title: "\u7EE7\u7EED\u4E0A\u4F20", children: jsx(ResumeIcon, {}) })), showRetry && (jsx("button", { className: `upload-action-btn upload-retry-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.retryBtn) || ''}`, onClick: () => onRetry === null || onRetry === void 0 ? void 0 : onRetry(file.id), title: "\u91CD\u8BD5\u4E0A\u4F20", children: jsx(RetryIcon, {}) }))] }), jsx("button", { className: `upload-action-btn upload-close-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.closeBtn) || ''}`, onClick: handleClose, title: isFailed || isSuccess ? '移除' : '取消上传', children: jsx(CloseIcon, {}) })] }));
+    return (jsxs("div", { className: `upload-file-item ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, "data-status": getStatusAttribute(), children: [jsxs("div", { className: `upload-file-info ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.info) || ''}`, children: [jsx("div", { className: `upload-file-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx(FileIcon, {}) }), jsxs("span", { className: `upload-file-name ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.name) || ''}`, children: [file.fileName, file.relativePath && (jsx("span", { className: `upload-file-path ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.relativePath) || ''}`, children: file.relativePath }))] })] }), jsxs("div", { className: `upload-file-status ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.status) || ''}`, children: [jsx("span", { className: `upload-status-text ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.statusText) || ''}`, children: getStatusText() }), jsx("div", { className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.progress, children: jsx(CircleProgress, { percent: file.progress, isFailed: isFailed, isSuccess: isSuccess }) }), showPause && (jsx("button", { className: `upload-action-btn upload-pause-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.pauseBtn) || ''}`, onClick: () => onPause === null || onPause === void 0 ? void 0 : onPause(file.id), title: texts.pause, children: jsx(PauseIcon, {}) })), showResume && (jsx("button", { className: `upload-action-btn upload-resume-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.resumeBtn) || ''}`, onClick: () => onResume === null || onResume === void 0 ? void 0 : onResume(file.id), title: texts.resume, children: jsx(ResumeIcon, {}) })), showRetry && (jsx("button", { className: `upload-action-btn upload-retry-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.retryBtn) || ''}`, onClick: () => onRetry === null || onRetry === void 0 ? void 0 : onRetry(file.id), title: texts.retry, children: jsx(RetryIcon, {}) }))] }), jsx("button", { className: `upload-action-btn upload-close-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.closeBtn) || ''}`, onClick: handleClose, title: isFailed || isSuccess ? texts.remove : texts.cancelUpload, children: jsx(CloseIcon, {}) })] }));
 }
 
 export { UploaderFileItem };

package/es/components/file-uploader/components/uploader-file-list.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useUpload } from '../hooks/use-upload.js';
+import { useLocale } from '../../../locale/index.js';
 import useStyle from './theme.css.js';
 import useStyle$1 from './uploader-file-list.css.js';
 
@@ -17,13 +18,15 @@ useStyle$1();
  * ```
  */
 function UploaderFileListLayout(props) {
-    const { classNames, emptyText = '暂无文件', children } = props;
+    const { classNames, emptyText, children } = props;
+    const { locale } = useLocale();
+    const resolvedEmptyText = emptyText !== null && emptyText !== void 0 ? emptyText : locale.FileUploaderV2.empty;
     const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
     const { files } = useUpload();
     if (files.length === 0) {
-        return jsx("div", { className: `upload-file-list-empty ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.empty) || ''}`, children: emptyText });
+        return (jsx("div", { className: `upload-file-list-empty ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.empty) || ''}`, children: resolvedEmptyText }));
     }
-    return (jsxs("div", { className: `upload-file-list-wrapper ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, children: [jsxs("div", { className: `upload-file-list-title ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.title) || ''}`, children: ["\u5F53\u524D\u4E0A\u4F20 (", files.length, ")"] }), jsx("div", { className: `upload-file-list ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.listWrapper) || ''}`, children: children })] }));
+    return (jsxs("div", { className: `upload-file-list-wrapper ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, children: [jsxs("div", { className: `upload-file-list-title ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.title) || ''}`, children: [locale.FileUploaderV2.currentUpload, " (", files.length, ")"] }), jsx("div", { className: `upload-file-list ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.listWrapper) || ''}`, children: children })] }));
 }
 
 export { UploaderFileListLayout };

package/es/components/file-uploader/components/uploader.js

@@ -6,6 +6,7 @@ import { DEFAULT_MAX_FILE_SIZE } from '../constants.js';
 import { UploaderDropZone } from './uploader-drop-zone.js';
 import { UploaderFileListLayout } from './uploader-file-list.js';
 import { UploaderFileItem } from './uploader-file-item.js';
+import { useLocale } from '../../../locale/index.js';
 import { UploaderProgressBar } from './uploader-progress-bar.js';
 import { useUpload } from '../hooks/use-upload.js';
 import { TipIcon } from './icons.js';
@@ -40,7 +41,8 @@ useStyle$1();
  * ```
  */
 function Uploader(props) {
-    const { handlers, runtime, dragAreaDescription = '点击或拖拽上传文件', accept = '', directory = false, maxFiles, maxSize = DEFAULT_MAX_FILE_SIZE, // 10GB default
+    const { locale } = useLocale();
+    const { handlers, runtime, dragAreaDescription, accept = '', directory = false, maxFiles, maxSize = DEFAULT_MAX_FILE_SIZE, // 10GB default
     classNames, onDropZoneError, fileValidation, showProgressBar = true, } = props;
     const SemanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
     const { files, addFiles, startAll, cancel, removeFile, retry } = useUpload();
@@ -49,7 +51,7 @@ function Uploader(props) {
         startAll();
     }, [startAll]);
     const handleAddFiles = useCallback((dropped) => addFiles(dropped, { handlers }, runtime), [addFiles, handlers, runtime]);
-    return (jsxs("div", { className: `styled-uploader-container ${(SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.container) || ''}`, children: [jsx(UploaderDropZone, { accept: accept, directory: directory, maxFiles: maxFiles, maxSize: maxSize, dragAreaDescription: dragAreaDescription, onDrop: handleAddFiles, onError: onDropZoneError, fileValidation: fileValidation, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.dragZone }), jsxs("div", { className: "uploader-network-tip", children: [jsx("span", { className: "uploader-network-tip-icon", children: jsx(TipIcon, {}) }), jsx("span", { children: "\u4E0A\u4F20\u5931\u8D25\u591A\u4E3A\u7F51\u7EDC\u95EE\u9898\uFF0C\u8BF7\u518D\u6B21\u8FDB\u884C\u4E0A\u4F20\uFF08\u540C\u540D\u6587\u4EF6\u4F1A\u8FDB\u884C\u8986\u76D6\uFF09" })] }), showProgressBar && jsx(UploaderProgressBar, {}), jsx(UploaderFileListLayout, { classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileList, children: files.map((file) => (jsx(UploaderFileItem, { file: file, onCancel: cancel, onRemove: removeFile, onRetry: retry, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileItem }, file.id))) })] }));
+    return (jsxs("div", { className: `styled-uploader-container ${(SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.container) || ''}`, children: [jsx(UploaderDropZone, { accept: accept, directory: directory, maxFiles: maxFiles, maxSize: maxSize, dragAreaDescription: dragAreaDescription !== null && dragAreaDescription !== void 0 ? dragAreaDescription : locale.FileUploaderV2.dropHint, onDrop: handleAddFiles, onError: onDropZoneError, fileValidation: fileValidation, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.dragZone }), jsxs("div", { className: "uploader-network-tip", children: [jsx("span", { className: "uploader-network-tip-icon", children: jsx(TipIcon, {}) }), jsx("span", { children: locale.FileUploaderV2.uploadFailedTip })] }), showProgressBar && jsx(UploaderProgressBar, {}), jsx(UploaderFileListLayout, { classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileList, children: files.map((file) => (jsx(UploaderFileItem, { file: file, onCancel: cancel, onRemove: removeFile, onRetry: retry, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileItem }, file.id))) })] }));
 }
 
 export { Uploader };

package/es/components/file-uploader/components/uploading-status.js

@@ -1,19 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
+import { useLocale } from '../../../locale/index.js';
 import useStyle from './uploading-status.css.js';
 
 useStyle();
-const UPLOADING_MESSAGES = [
-    '上传中',
-    '传输数据中',
-    '正在处理',
-    '上传进行中',
-    '传输中，请稍候',
-    '文件上传中',
-    '数据传输中',
-    '上传处理中',
-];
+function useUploadingMessages() {
+    const { locale } = useLocale();
+    const texts = locale.FileUploaderV2;
+    return [
+        texts.uploading,
+        texts.transferring,
+        texts.processing,
+        texts.uploadingInProgress,
+        texts.transferringWait,
+        texts.fileUploading,
+        texts.dataTransferring,
+        texts.uploadProcessing,
+    ];
+}
 function UploadingStatus({ interval = 10000, className = '' }) {
+    const uploadingMessages = useUploadingMessages();
     const [messageIndex, setMessageIndex] = useState(0);
     const [animationState, setAnimationState] = useState('slide-in');
     const [dots, setDots] = useState('.');
@@ -26,7 +32,7 @@ function UploadingStatus({ interval = 10000, className = '' }) {
                 setAnimationState('slide-up');
                 // Change message after slide-up completes
                 setTimeout(() => {
-                    setMessageIndex((prev) => (prev + 1) % UPLOADING_MESSAGES.length);
+                    setMessageIndex((prev) => (prev + 1) % uploadingMessages.length);
                     setAnimationState('slide-in');
                     scheduleNextChange(); // Schedule next change
                 }, 400); // Match animation duration
@@ -49,7 +55,7 @@ function UploadingStatus({ interval = 10000, className = '' }) {
         }, 500); // Change dots every 500ms
         return () => clearInterval(dotsTimer);
     }, []);
-    return (jsxs("span", { className: `uploading-status ${className}`, children: [jsx("span", { className: `uploading-status-text ${animationState}`, children: UPLOADING_MESSAGES[messageIndex] }), jsx("span", { className: "uploading-dots", children: dots })] }));
+    return (jsxs("span", { className: `uploading-status ${className}`, children: [jsx("span", { className: `uploading-status-text ${animationState}`, children: uploadingMessages[messageIndex] }), jsx("span", { className: "uploading-dots", children: dots })] }));
 }
 
 export { UploadingStatus };

package/es/components/header/index.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from 'antd';
 import { wrap, logo } from './index.module.scss.js';
+import { useLocale } from '../../locale/index.js';
 
 function Header(props) {
     const { showLogin } = props;
-    return (jsxs("div", { className: wrap, children: [jsx("img", { src: "https://www.unpkg.com/@zjlab-fe/fe-assets/logo-white.png", className: logo }), showLogin && jsx(Button, { ghost: true, children: "\u767B\u5F55" })] }));
+    const { locale } = useLocale();
+    return (jsxs("div", { className: wrap, children: [jsx("img", { src: "https://www.unpkg.com/@zjlab-fe/fe-assets/logo-white.png", className: logo }), showLogin && jsx(Button, { ghost: true, children: locale.Header.login })] }));
 }
 
 export { Header as default };

package/es/components/input-tag/index.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { Tag, Input } from 'antd';
+import { useLocale } from '../../locale/index.js';
 
 /**
  * 输入标签
@@ -8,7 +9,9 @@ import { Tag, Input } from 'antd';
  * @returns
  */
 function InputTag(props) {
-    const { value, onChange, placeholder = '请输入关键字', valueType, deduplicated = true, size, maxLength, disabled, } = props;
+    const { value, onChange, placeholder, valueType, deduplicated = true, size, maxLength, disabled } = props;
+    const { locale } = useLocale();
+    const resolvedPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : locale.InputTag.placeholder;
     const [innerValue, setInnerValue] = useState([]);
     const [inputKey, setInputKey] = useState(1);
     const inputRef = useRef(null);
@@ -59,7 +62,7 @@ function InputTag(props) {
     if ((innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0) {
         prefix = innerValue.map((one, index) => (jsx(Tag, { closeIcon: !disabled, onClose: () => onclose(index), children: one }, index)));
     }
-    return (jsx(Input, { disabled: disabled, size: size, ref: inputRef, placeholder: placeholder, prefix: prefix, onPressEnter: onPressEnter, maxLength: maxLength }, inputKey));
+    return (jsx(Input, { disabled: disabled, size: size, ref: inputRef, placeholder: resolvedPlaceholder, prefix: prefix, onPressEnter: onPressEnter, maxLength: maxLength }, inputKey));
 }
 
 export { InputTag as default };

package/es/components/limit-credit-modal/index.js

@@ -1,36 +1,55 @@
+import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Modal, Space, Button } from 'antd';
 import { isPublicNetwork } from '@zjlab-fe/util';
 import { createRoot } from 'react-dom/client';
+import { useLocale } from '../../locale/index.js';
+import { useDataHubModal } from '../../locale/modalHolder.js';
 
-const LimitCreditModal = (props) => {
+function handleApply() {
     const isPublic = isPublicNetwork();
-    const handleOk = () => {
-        if (isPublic) {
-            window.open('https://alidocs.dingtalk.com/notable/share/form/v018oLl952Q1vXkzlap_dv19yqvsgs3oebp3pcjys_1qX0QQ0?source=link');
-        }
-        else {
-            window.open('https://alidocs.dingtalk.com/notable/share/form/v011X3lE5jKezRB4lJb_dv19yqvsgs3oebp3pcjys_1qX0QQ0?source=link');
-        }
-    };
-    return (jsx(Modal, Object.assign({}, props, { 
-        // classNames={{
-        //   content: 'modal-content-layout',
-        //   header: 'modal-title-font modal-title-layout',
-        //   body: 'modal-content-font modal-body-layout',
-        //   footer: 'modal-footer-layout',
-        // }}
-        title: jsx("div", { style: { textAlign: 'center', width: '100%' }, children: "\u63D0\u793A" }), footer: jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: jsxs(Space, { children: [jsx(Button, { onClick: props.onCancel, children: "\u53D6\u6D88" }), jsx(Button, { type: "primary", onClick: handleOk, children: "\u7533\u8BF7" })] }) }), children: jsx("div", { className: "modal-content-font", style: { textAlign: 'center' }, children: "\u989D\u5EA6\u5DF2\u7528\u5C3D\uFF0C\u8BF7\u70B9\u51FB\u7533\u8BF7\u3002" }) })));
+    if (isPublic) {
+        window.open('https://alidocs.dingtalk.com/notable/share/form/v018oLl952Q1vXkzlap_dv19yqvsgs3oebp3pcjys_1qX0QQ0?source=link');
+    }
+    else {
+        window.open('https://alidocs.dingtalk.com/notable/share/form/v011X3lE5jKezRB4lJb_dv19yqvsgs3oebp3pcjys_1qX0QQ0?source=link');
+    }
+}
+const LimitCreditModal = (props) => {
+    const { open, onCancel } = props, rest = __rest(props, ["open", "onCancel"]);
+    const { locale } = useLocale();
+    const texts = locale.LimitCreditModal;
+    return (jsx(Modal, Object.assign({}, rest, { open: open, onCancel: onCancel, title: jsx("div", { style: { textAlign: 'center', width: '100%' }, children: texts.title }), footer: jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: jsxs(Space, { children: [jsx(Button, { onClick: onCancel, children: texts.cancel }), jsx(Button, { type: "primary", onClick: handleApply, children: texts.apply })] }) }), children: jsx("div", { className: "modal-content-font", style: { textAlign: 'center' }, children: texts.content }) })));
 };
-LimitCreditModal.open = () => {
+LimitCreditModal.open = (props) => {
     const div = document.createElement('div');
     document.body.appendChild(div);
     const root = createRoot(div);
     const destroy = () => {
+        var _a;
+        (_a = props === null || props === void 0 ? void 0 : props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
         root.unmount();
         div.remove();
     };
     root.render(jsx(LimitCreditModal, { open: true, onCancel: destroy }));
+    return { destroy };
 };
+function useLimitCreditModal() {
+    const { locale } = useLocale();
+    const modal = useDataHubModal();
+    return (props) => {
+        const texts = locale.LimitCreditModal;
+        return modal.confirm({
+            title: jsx("div", { style: { textAlign: 'center', width: '100%' }, children: texts.title }),
+            content: (jsx("div", { className: "modal-content-font", style: { textAlign: 'center' }, children: texts.content })),
+            icon: null,
+            okText: texts.apply,
+            cancelText: texts.cancel,
+            onOk: handleApply,
+            onCancel: props === null || props === void 0 ? void 0 : props.onCancel,
+            footer: (originNode) => jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: originNode }),
+        });
+    };
+}
 
-export { LimitCreditModal as default };
+export { LimitCreditModal as default, useLimitCreditModal };

package/es/components/menu/index.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { "side-menu" as side_menu, "menu-content" as menu_content, "menu-content-contain" as menu_content_contain, "menu-content-title" as menu_content_title, "menu-content-subcontain" as menu_content_subcontain, icon, "trigger-icon" as trigger_icon, "menu-content-item" as menu_content_item, active, expanded, "link-type" as link_type } from './index.module.scss.js';
 import { Layout, Tooltip } from 'antd';
+import { useLocale } from '../../locale/index.js';
 
 const { Sider } = Layout;
 /**
@@ -17,6 +18,8 @@ const { Sider } = Layout;
  */
 const MainLayoutSider = (props) => {
     const { menus, collapsed: propsCollapsed = false, onCollapse, onClick: propsonClick, onSelect, selectedKeys, } = props;
+    const { locale } = useLocale();
+    const texts = locale.Menu;
     useNavigate();
     const location = useLocation();
     const [internalCollapsed, setInternalCollapsed] = useState(propsCollapsed);
@@ -38,8 +41,8 @@ const MainLayoutSider = (props) => {
                 const newCollapsed = !internalCollapsed;
                 setInternalCollapsed(newCollapsed);
                 onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(newCollapsed);
-            }, children: [internalCollapsed ? jsx(MenuUnfoldOutlined, {}) : jsx(MenuFoldOutlined, {}), !internalCollapsed && jsx("span", { style: { marginLeft: '8px' }, children: "\u6536\u8D77\u5BFC\u822A" })] }));
-        return internalCollapsed ? (jsx(Tooltip, { placement: "right", title: "\u5C55\u5F00\u5BFC\u822A", children: triggerIcon })) : (triggerIcon);
+            }, children: [internalCollapsed ? jsx(MenuUnfoldOutlined, {}) : jsx(MenuFoldOutlined, {}), !internalCollapsed && jsx("span", { style: { marginLeft: '8px' }, children: texts.collapseNav })] }));
+        return internalCollapsed ? (jsx(Tooltip, { placement: "right", title: texts.expandNav, children: triggerIcon })) : (triggerIcon);
     };
     const onMenuClick = (item) => {
         propsonClick === null || propsonClick === void 0 ? void 0 : propsonClick(item);

package/es/components/notion-editor/code-block/languages.js

@@ -1,7 +1,7 @@
 const LANGUAGES = {
     // plain: { name: 'text', aliases: ['text', 'txt'] },
     nginx: { name: 'Nginx' },
-    text: { name: '纯文本', aliases: ['plaintext', 'txt'] },
+    text: { name: 'Plain Text', aliases: ['plaintext', 'txt'] },
     javascript: { name: 'JavaScript', aliases: ['js'] },
     typescript: { name: 'TypeScript', aliases: ['ts'] },
     jsx: { name: 'JSX' },

package/es/components/notion-editor/index.js

@@ -1,12 +1,13 @@
 import { __awaiter } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useCallback, useEffect, useMemo, useImperativeHandle } from 'react';
 import { createReactBlockSpec, useCreateBlockNote, FormattingToolbarController, FormattingToolbar, getFormattingToolbarItems, BasicTextStyleButton } from '@blocknote/react';
 import { Extension } from '@tiptap/core';
 import { TextSelection } from 'prosemirror-state';
 import { BlockNoteSchema, defaultStyleSpecs, defaultInlineContentSpecs, defaultBlockSpecs } from '@blocknote/core';
 import { BlockNoteView } from '@blocknote/mantine';
-import { zh } from '@blocknote/core/locales';
+import { en, zh } from '@blocknote/core/locales';
+import { useLocale } from '../../locale/index.js';
 import '@blocknote/core/fonts/inter.css';
 import '@blocknote/mantine/style.css';
 import useStyle from './index.scss.js';
@@ -26,7 +27,13 @@ const CustomFileBlock = createReactBlockSpec({
     },
     content: 'none',
 }, {
-    render: ({ block }) => (jsxs("div", { className: "data-hub-ui-custom-file-block", onClick: () => window.open(block.props.url, '_blank'), children: [jsx("div", { className: "data-hub-ui-custom-file-block__icon", children: "\uD83D\uDCC4" }), jsx("div", { className: "data-hub-ui-custom-file-block__info", children: jsx("div", { className: "data-hub-ui-custom-file-block__name", children: block.props.name || '未命名文件' }) })] })),
+    render: ({ block }) => {
+        const FileBlockView = () => {
+            const { locale } = useLocale();
+            return (jsxs("div", { className: "data-hub-ui-custom-file-block", onClick: () => window.open(block.props.url, '_blank'), children: [jsx("div", { className: "data-hub-ui-custom-file-block__icon", children: "\uD83D\uDCC4" }), jsx("div", { className: "data-hub-ui-custom-file-block__info", children: jsx("div", { className: "data-hub-ui-custom-file-block__name", children: block.props.name || locale.NotionEditor.unnamedFile }) })] }));
+        };
+        return jsx(FileBlockView, {});
+    },
 });
 // 创建自定义 Schema，替换默认 file 和 codeBlock 块
 const schema = BlockNoteSchema.create({
@@ -70,7 +77,7 @@ const getInlineText = (content) => {
         .join('')
         .trim();
 };
-const getHeadingTocItems = (blocks) => {
+const getHeadingTocItems = (blocks, unnamedTitle) => {
     const tocItems = [];
     const walkBlocks = (items) => {
         items.forEach((block) => {
@@ -79,7 +86,7 @@ const getHeadingTocItems = (blocks) => {
                 tocItems.push({
                     id: block.id,
                     level: Math.min(Math.max(level, 1), 6),
-                    title: getInlineText(block.content) || '未命名标题',
+                    title: getInlineText(block.content) || unnamedTitle,
                 });
             }
             if (Array.isArray(block.children) && block.children.length > 0) {
@@ -108,7 +115,10 @@ const parseCopyPasteBlocks = (plainText, docId) => {
     }
 };
 const NotionEditor = forwardRef(({ initContent, editable = false, className = '', docId, onChange, onImageUpload, onFileUpload, onImageUploadByUrl, }, ref) => {
-    const placeholder = '输入 "/" 快速插入内容';
+    const { locale } = useLocale();
+    const texts = locale.NotionEditor;
+    const blockNoteDict = locale.locale === 'en' ? en : zh;
+    const placeholder = texts.placeholder;
     const docIdRef = useRef(docId);
     const containerRef = useRef(null);
     const [tocCollapsed, setTocCollapsed] = useState(false);
@@ -127,7 +137,7 @@ const NotionEditor = forwardRef(({ initContent, editable = false, className = ''
         return URL.createObjectURL(file);
     }), [onImageUpload, onFileUpload]);
     const editor = useCreateBlockNote({
-        dictionary: Object.assign(Object.assign({}, zh), { placeholders: Object.assign(Object.assign({}, zh.placeholders), { default: placeholder, emptyDocument: placeholder }) }),
+        dictionary: Object.assign(Object.assign({}, blockNoteDict), { placeholders: Object.assign(Object.assign({}, blockNoteDict.placeholders), { default: placeholder, emptyDocument: placeholder }) }),
         initialContent: Array.isArray(initContent) && initContent.length > 0 ? initContent : undefined,
         schema: schema,
         setIdAttribute: true,
@@ -221,22 +231,33 @@ const NotionEditor = forwardRef(({ initContent, editable = false, className = ''
     useEffect(() => {
         if (editor) {
             editor.isEditable = editable;
+            if (window.location.hash) {
+                const id = window.location.hash.split('#')[1];
+                if (id) {
+                    setTimeout(() => {
+                        var _a;
+                        // 将 hash 中指定 id 对应的 block 滚动到可视范围内
+                        const target = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.data-hub-ui-blocknote-editor [data-id="${CSS.escape(id)}"]`);
+                        target === null || target === void 0 ? void 0 : target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }, 500);
+                }
+            }
         }
     }, [editor, editable]);
     const handleChange = useCallback(() => {
         if (editor) {
             const blocks = editor.document;
-            setTocItems(getHeadingTocItems(blocks));
+            setTocItems(getHeadingTocItems(blocks, texts.unnamedTitle));
             onChange === null || onChange === void 0 ? void 0 : onChange(blocks);
         }
-    }, [editor, onChange]);
+    }, [editor, onChange, texts.unnamedTitle]);
     useEffect(() => {
         if (editor) {
-            setTocItems(getHeadingTocItems(editor.document));
+            setTocItems(getHeadingTocItems(editor.document, texts.unnamedTitle));
         }
-    }, [editor]);
+    }, [editor, texts.unnamedTitle]);
     const showToc = tocItems.length > 0;
-    const tocTitle = useMemo(() => (tocCollapsed ? '展开目录' : '收起目录'), [tocCollapsed]);
+    const tocTitle = useMemo(() => (tocCollapsed ? texts.expandToc : texts.collapseToc), [tocCollapsed, texts.expandToc, texts.collapseToc]);
     const handleTocItemClick = useCallback((blockId) => {
         var _a;
         const target = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.data-hub-ui-blocknote-editor [data-id="${CSS.escape(blockId)}"]`);
@@ -254,7 +275,7 @@ const NotionEditor = forwardRef(({ initContent, editable = false, className = ''
         focus: () => editor === null || editor === void 0 ? void 0 : editor.focus(),
         isEmpty: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.isEmpty) !== null && _a !== void 0 ? _a : true; },
     }));
-    return (jsxs("div", { ref: containerRef, className: `data-hub-ui-blocknote-editor-wrapper ${tocCollapsed ? 'is-toc-collapsed' : ''} ${className}`, children: [jsx(BlockNoteView, { editor: editor, formattingToolbar: false, onChange: handleChange, theme: "light", className: "data-hub-ui-blocknote-editor", children: jsx(FormattingToolbarController, { formattingToolbar: () => (jsxs(FormattingToolbar, { children: [getFormattingToolbarItems(), jsx(BasicTextStyleButton, { basicTextStyle: "code" })] })) }) }), showToc && (jsxs("aside", { className: `data-hub-ui-blocknote-toc ${tocCollapsed ? 'is-collapsed' : ''}`, children: [jsxs("button", { type: "button", className: "data-hub-ui-blocknote-toc__toggle", "aria-label": tocTitle, "aria-expanded": !tocCollapsed, onClick: () => setTocCollapsed((value) => !value), children: [jsx("span", { children: "\u76EE\u5F55" }), jsx("span", { className: "data-hub-ui-blocknote-toc__toggle-icon", children: tocCollapsed ? '‹' : '›' })] }), !tocCollapsed && (jsx("nav", { className: "data-hub-ui-blocknote-toc__list", "aria-label": "\u6587\u6863\u76EE\u5F55", children: tocItems.map((item) => (jsx("button", { type: "button", className: "data-hub-ui-blocknote-toc__item", style: { '--toc-level': item.level }, title: item.title, onClick: () => handleTocItemClick(item.id), children: item.title }, item.id))) }))] }))] }));
+    return (jsxs("div", { ref: containerRef, className: `data-hub-ui-blocknote-editor-wrapper ${tocCollapsed ? 'is-toc-collapsed' : ''} ${className}`, children: [jsx(BlockNoteView, { editor: editor, formattingToolbar: false, onChange: handleChange, theme: "light", className: "data-hub-ui-blocknote-editor", children: jsx(FormattingToolbarController, { formattingToolbar: () => (jsxs(FormattingToolbar, { children: [getFormattingToolbarItems(), jsx(BasicTextStyleButton, { basicTextStyle: "code" })] })) }) }), showToc && (jsxs("aside", { className: `data-hub-ui-blocknote-toc ${tocCollapsed ? 'is-collapsed' : ''}`, children: [jsxs("button", { type: "button", className: "data-hub-ui-blocknote-toc__toggle", "aria-label": tocTitle, "aria-expanded": !tocCollapsed, onClick: () => setTocCollapsed((value) => !value), children: [jsx("span", { children: texts.tocLabel }), jsx("span", { className: "data-hub-ui-blocknote-toc__toggle-icon", children: tocCollapsed ? '‹' : '›' })] }), !tocCollapsed && (jsx("nav", { className: "data-hub-ui-blocknote-toc__list", "aria-label": texts.toc, children: tocItems.map((item) => (jsx("button", { type: "button", className: "data-hub-ui-blocknote-toc__item", style: { '--toc-level': item.level }, title: item.title, onClick: () => handleTocItemClick(item.id), children: item.title }, item.id))) }))] }))] }));
 });
 NotionEditor.displayName = 'NotionEditor';
 

package/es/components/operator-chain/components/AddButton.js

@@ -3,13 +3,15 @@ import { Divider, Dropdown, Tooltip } from 'antd';
 import { PlusCircleOutlined } from '@ant-design/icons';
 import { "divider-block" as divider_block, "card-divider" as card_divider } from '../index.module.scss.js';
 import VirtualDropdown from './VirtualDropdown.js';
+import { useLocale } from '../../../locale/index.js';
 
 function AddButton({ menu, isEdit, onClick }) {
+    const { locale } = useLocale();
     return (jsx("div", { className: divider_block, children: jsx(Divider, { className: card_divider, style: {
                 borderColor: '#1775FE',
                 margin: '0',
                 padding: '0 10px 0 10px',
-            }, children: jsx(Dropdown, { popupRender: () => jsx(VirtualDropdown, { menu: menu || [], onItemClick: onClick }), trigger: ['click'], children: jsx(Tooltip, { placement: "topLeft", title: '添加算子', children: jsx("span", { onClick: (e) => e.preventDefault(), style: {
+            }, children: jsx(Dropdown, { popupRender: () => jsx(VirtualDropdown, { menu: menu || [], onItemClick: onClick }), trigger: ['click'], children: jsx(Tooltip, { placement: "topLeft", title: locale.OperatorChain.addOperator, children: jsx("span", { onClick: (e) => e.preventDefault(), style: {
                             color: '#1775FE',
                             cursor: isEdit ? 'pointer' : 'not-allowed',
                             height: '16px',

package/es/components/operator-chain/components/IOCard.js

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { iocard, "iocard-body" as iocard_body, active } from '../index.module.scss.js';
+import { useLocale } from '../../../locale/index.js';
 
 function IOCard({ isActive, onClick, id }) {
-    return (jsx("div", { className: iocard, children: jsx("div", { className: `${iocard_body}  ${isActive ? active : ''}`, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id || ''), children: jsx("div", { children: id === 'IMPORT' ? '输入数据集' : '输出数据集' }) }) }));
+    const { locale } = useLocale();
+    const texts = locale.OperatorChain;
+    return (jsx("div", { className: iocard, children: jsx("div", { className: `${iocard_body}  ${isActive ? active : ''}`, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id || ''), children: jsx("div", { children: id === 'IMPORT' ? texts.inputDataset : texts.outputDataset }) }) }));
 }
 
 export { IOCard as default };

package/es/components/operator-chain/components/VirtualDropdown.js

@@ -2,11 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useState, useRef } from 'react';
 import { Input, Select } from 'antd';
 import { "filter-popup" as filter_popup, "filter-popup-top" as filter_popup_top, "virtual-dropdown-container" as virtual_dropdown_container, "virtual-dropdown-content" as virtual_dropdown_content, "virtual-dropdown-items" as virtual_dropdown_items, "virtual-dropdown-item" as virtual_dropdown_item } from '../index.module.scss.js';
+import { useLocale } from '../../../locale/index.js';
 
 const { Search } = Input;
 const ITEM_HEIGHT = 32;
 const FIXED_HEIGHT = 420;
 function VirtualDropdown({ menu, onItemClick, onSelect, onInputChange }) {
+    const { locale } = useLocale();
+    const texts = locale.OperatorChain;
     const [scrollTop, setScrollTop] = useState(0);
     const [selectedType, setSelectedType] = useState('');
     const [searchValue, setSearchValue] = useState('');
@@ -24,8 +27,8 @@ function VirtualDropdown({ menu, onItemClick, onSelect, onInputChange }) {
             value: Number(value),
         }));
         // 添加默认的"全部"选项
-        return [{ label: '全部类型', value: '' }, ...options];
-    }, [menu]);
+        return [{ label: texts.allTypes, value: '' }, ...options];
+    }, [menu, texts.allTypes]);
     const visibleCount = Math.ceil(FIXED_HEIGHT / ITEM_HEIGHT);
     const startIndex = Math.floor(scrollTop / ITEM_HEIGHT);
     const endIndex = Math.min(startIndex + visibleCount, menu.length);
@@ -48,7 +51,7 @@ function VirtualDropdown({ menu, onItemClick, onSelect, onInputChange }) {
         return typeMatch && searchMatch;
     });
     const visibleItems = filteredMenu.slice(startIndex, endIndex);
-    return (jsxs("div", { className: filter_popup, children: [jsxs("div", { className: filter_popup_top, children: [jsx(Select, { placeholder: "\u9009\u62E9\u7C7B\u578B", style: { width: 140 }, allowClear: true, onChange: handleSelectChange, options: typeOptions, defaultValue: '' }), jsx(Search, { placeholder: "\u641C\u7D22\u7B97\u5B50", style: { width: 200 }, allowClear: true, onChange: handleInputChange })] }), jsx("div", { ref: containerRef, onScroll: handleScroll, className: virtual_dropdown_container, style: {
+    return (jsxs("div", { className: filter_popup, children: [jsxs("div", { className: filter_popup_top, children: [jsx(Select, { placeholder: texts.selectType, style: { width: 140 }, allowClear: true, onChange: handleSelectChange, options: typeOptions, defaultValue: '' }), jsx(Search, { placeholder: texts.searchOperator, style: { width: 200 }, allowClear: true, onChange: handleInputChange })] }), jsx("div", { ref: containerRef, onScroll: handleScroll, className: virtual_dropdown_container, style: {
                     maxHeight: FIXED_HEIGHT,
                 }, children: jsx("div", { className: virtual_dropdown_content, style: { height: filteredMenu.length * ITEM_HEIGHT }, children: jsx("div", { className: virtual_dropdown_items, style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => (jsx("div", { onClick: () => onItemClick(item.id), className: virtual_dropdown_item, children: item.title || item.id }, item.id))) }) }) })] }));
 }