@zjlab-fe/data-hub-ui 0.31.0 → 0.32.0

package/dist/types/components/data-table/action-cell.d.ts

@@ -0,0 +1,7 @@
+import type { TableRowAction } from './types';
+type ActionCellProps<T> = {
+    record: T;
+    actions: TableRowAction<T>[];
+};
+export default function ActionCell<T>({ record, actions }: ActionCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/data-table/demo/index.d.ts

@@ -0,0 +1 @@
+export default function Demo(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/data-table/demo/mockApi.d.ts

@@ -0,0 +1,45 @@
+import type { FilterValue } from 'antd/es/table/interface';
+import type { DocumentRecord, DocumentStatus } from './mockData';
+export type ListQueryParams = {
+    current: number;
+    pageSize: number;
+    sorter?: {
+        field: string;
+        order: 'ascend' | 'descend';
+    } | null;
+    filters?: Record<string, FilterValue | null>;
+    keyword?: string;
+};
+export type ListQueryResult = {
+    list: DocumentRecord[];
+    total: number;
+};
+export type CreateDocumentInput = {
+    name: string;
+    status?: DocumentStatus;
+    modelVersion?: string;
+};
+export type UpdateDocumentInput = {
+    id: string;
+    name?: string;
+    status?: DocumentStatus;
+    modelVersion?: string;
+};
+/** 列表查询：筛选 → 关键词 → 排序 → 分页 */
+export declare function listDocuments(params: ListQueryParams): Promise<ListQueryResult>;
+/** 新增 */
+export declare function createDocument(input: CreateDocumentInput): Promise<DocumentRecord>;
+/** 更新 */
+export declare function updateDocument(input: UpdateDocumentInput): Promise<DocumentRecord>;
+/** 删除 */
+export declare function deleteDocument(id: string): Promise<{
+    id: string;
+}>;
+/** 批量删除 */
+export declare function deleteDocuments(ids: string[]): Promise<{
+    ids: string[];
+}>;
+/** Demo 重置内存库（便于反复演示） */
+export declare function resetDocuments(): Promise<{
+    total: number;
+}>;

package/dist/types/components/data-table/demo/mockData.d.ts

@@ -0,0 +1,13 @@
+export type DocumentStatus = 'parsing' | 'parsed' | 'failed';
+export type DocumentRecord = {
+    id: string;
+    docNo: string;
+    name: string;
+    status: DocumentStatus;
+    updatedAt: string;
+    modelVersion: string;
+};
+export declare const statusLabelMap: Record<DocumentStatus, string>;
+export declare const statusTypeMap: Record<DocumentStatus, 'running' | 'success' | 'failed'>;
+/** 初始种子数据（只读）；运行时 CRUD 在 mockApi 的内存库中进行 */
+export declare const seedDocuments: DocumentRecord[];

package/dist/types/components/data-table/index.d.ts

@@ -0,0 +1,4 @@
+import type { DataTableProps } from './types';
+declare function DataTable<T extends object>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default DataTable;
+export type { DataTableColumn, DataTableProps, RowSelectionConfig, RowTextExpandConfig, TableRowAction, } from './types';

package/dist/types/components/data-table/types.d.ts

@@ -0,0 +1,60 @@
+import type { TableProps } from 'antd';
+import type { ColumnType } from 'antd/es/table';
+import type { Key, ReactNode } from 'react';
+export type TableRowAction<T> = {
+    key: string;
+    label: string;
+    onClick: (record: T) => void;
+    disabled?: boolean | ((record: T) => boolean);
+    visible?: boolean | ((record: T) => boolean);
+    render?: (record: T) => ReactNode;
+};
+export type RowSelectionConfig<T> = {
+    selectedRowKeys?: Key[];
+    onChange: (keys: Key[], rows: T[]) => void;
+    preserveSelectedRowKeys?: boolean;
+};
+/** 列定义；ellipsisExpand / showTitleOnHover 为列级可选能力 */
+export type DataTableColumn<T> = ColumnType<T> & {
+    /** 该列参与行点击展开截断（需同时开启 rowTextExpand） */
+    ellipsisExpand?: boolean;
+    /**
+     * hover 时用原生 title 展示单元格文本。
+     * 仅对无自定义 render 的列生效；有 render 时由外部自行处理。
+     */
+    showTitleOnHover?: boolean;
+};
+/** 行文本展开配置；不传或 false 时关闭 */
+export type RowTextExpandConfig = {
+    /** 是否允许多行同时展开；默认 true */
+    multiple?: boolean;
+    /** 展开后最大高度（px）；默认 200 */
+    expandedMaxHeight?: number;
+};
+export type DataTableProps<T extends object> = {
+    rowKey: string | ((record: T) => Key);
+    columns: DataTableColumn<T>[];
+    actions?: TableRowAction<T>[] | null;
+    actionColumnTitle?: string;
+    actionColumnWidth?: number;
+    dataSource?: T[];
+    loading?: boolean;
+    pagination?: {
+        current: number;
+        pageSize: number;
+        total: number;
+    } | false;
+    onChange?: TableProps<T>['onChange'];
+    rowSelection?: RowSelectionConfig<T>;
+    defaultPageSize?: number;
+    showSizeChanger?: boolean;
+    showQuickJumper?: boolean;
+    className?: string;
+    /** 表格最小宽度；小于该宽度时横向滚动。默认 920 */
+    minWidth?: number | string;
+    /**
+     * 点击行展开标记了 ellipsisExpand 的列文本。
+     * 默认关闭；传 true 或配置对象开启。
+     */
+    rowTextExpand?: boolean | RowTextExpandConfig;
+};

package/dist/types/components/file-uploader/components/icons.d.ts

@@ -4,3 +4,4 @@ export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function PauseIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ResumeIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function RetryIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function TipIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -38,6 +38,8 @@ export { default as CorpusCard } from './components/corpus-card';
 export { default as ModelCard } from './components/model-card';
 export type { ModelCardProps } from './components/model-card';
 export type { CorpusCardProps, ProcessTemplateListItem, ProcessTemplateLabel, LabelTypeColor, } from './components/corpus-card';
+export { default as DataTable } from './components/data-table';
+export type { DataTableProps, DataTableColumn, TableRowAction, RowSelectionConfig, RowTextExpandConfig, } from './components/data-table';
 export { default as SDKModal } from './components/SDK-modal';
 export { default as TagView } from './components/tag-view';
 export { default as TagGroupFilter } from './components/tag-group-filter';

package/es/components/data-table/action-cell.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from 'antd';
+import { dataTableActionCell, dataTableActionDivider, dataTableActionLink } from './action-cell.module.scss.js';
+
+function resolveDisabled(disabled, record) {
+    if (disabled === undefined) {
+        return false;
+    }
+    if (typeof disabled === 'boolean') {
+        return disabled;
+    }
+    return disabled(record);
+}
+function resolveVisible(visible, record) {
+    if (visible === undefined) {
+        return true;
+    }
+    if (typeof visible === 'boolean') {
+        return visible;
+    }
+    return visible(record);
+}
+function ActionCell({ record, actions }) {
+    const visibleActions = actions.filter((action) => resolveVisible(action.visible, record));
+    return (jsx("div", { className: dataTableActionCell, onClick: (event) => {
+            event.stopPropagation();
+        }, children: visibleActions.map((action, index) => (jsxs("span", { children: [index > 0 ? jsx("span", { className: dataTableActionDivider }) : null, action.render ? (action.render(record)) : (jsx(Button, { type: "link", className: dataTableActionLink, disabled: resolveDisabled(action.disabled, record), onClick: (event) => {
+                        event.stopPropagation();
+                        action.onClick(record);
+                    }, children: action.label }))] }, action.key))) }));
+}
+
+export { ActionCell as default };

package/es/components/data-table/action-cell.module.scss.js

@@ -0,0 +1,29 @@
+var style = document.createElement('style');
+style.textContent = `.action-cell-module__dataTableActionCell___pjPHA {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.action-cell-module__dataTableActionDivider___WBN1r {
+  display: inline-block;
+  width: 1px;
+  height: 12px;
+  margin: 0 8px;
+  background: rgba(0, 0, 0, 0.06);
+  vertical-align: middle;
+}
+
+.action-cell-module__dataTableActionLink___4upQI {
+  padding: 0;
+  height: 22px;
+  line-height: 22px;
+  font-size: 14px;
+  color: #1775fe;
+}`;
+document.head.appendChild(style);
+
+var dataTableActionCell = "action-cell-module__dataTableActionCell___pjPHA";var dataTableActionDivider = "action-cell-module__dataTableActionDivider___WBN1r";var dataTableActionLink = "action-cell-module__dataTableActionLink___4upQI";
+var styles = {"dataTableActionCell":"action-cell-module__dataTableActionCell___pjPHA","dataTableActionDivider":"action-cell-module__dataTableActionDivider___WBN1r","dataTableActionLink":"action-cell-module__dataTableActionLink___4upQI"};
+
+export { dataTableActionCell, dataTableActionDivider, dataTableActionLink, styles as default };

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

@@ -0,0 +1,166 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Table, Empty } from 'antd';
+import ActionCell from './action-cell.js';
+import { dataTable, dataTableRowClickable, truncateText, truncateTextExpanded } from './index.module.scss.js';
+
+const DEFAULT_MIN_WIDTH = 920;
+const DEFAULT_EXPAND_MAX_HEIGHT = 200;
+function resolveRowKey(rowKey, record) {
+    if (typeof rowKey === 'function') {
+        return rowKey(record);
+    }
+    return record[rowKey];
+}
+function formatCssSize(value) {
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function isInteractiveRowClickTarget(target) {
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    return Boolean(target.closest('.ant-checkbox-wrapper, .ant-table-selection-column, button, a, .ant-btn, input, textarea, select'));
+}
+function isRenderedCell(content) {
+    return (Boolean(content) &&
+        typeof content === 'object' &&
+        !React.isValidElement(content) &&
+        ('props' in content || 'children' in content));
+}
+function toTitleText(value) {
+    if (value === null || value === undefined) {
+        return undefined;
+    }
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    return undefined;
+}
+function TruncateText({ content, expanded, title, }) {
+    const textRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!expanded && textRef.current) {
+            textRef.current.scrollTop = 0;
+        }
+    }, [expanded]);
+    return (jsx("div", { ref: textRef, title: title, className: [truncateText, expanded ? truncateTextExpanded : ''].filter(Boolean).join(' '), children: content }));
+}
+function DataTable(props) {
+    var _a, _b;
+    const { rowKey, columns, actions, actionColumnTitle = '操作', actionColumnWidth = 188, dataSource, loading = false, pagination: controlledPagination, onChange, rowSelection, defaultPageSize = 10, showSizeChanger = false, showQuickJumper = true, className, minWidth = DEFAULT_MIN_WIDTH, rowTextExpand, } = props;
+    const expandEnabled = Boolean(rowTextExpand);
+    const expandMultiple = typeof rowTextExpand === 'object' ? ((_a = rowTextExpand.multiple) !== null && _a !== void 0 ? _a : true) : true;
+    const expandMaxHeight = typeof rowTextExpand === 'object'
+        ? ((_b = rowTextExpand.expandedMaxHeight) !== null && _b !== void 0 ? _b : DEFAULT_EXPAND_MAX_HEIGHT)
+        : DEFAULT_EXPAND_MAX_HEIGHT;
+    const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
+    const toggleRowExpand = (record) => {
+        if (!expandEnabled) {
+            return;
+        }
+        const key = resolveRowKey(rowKey, record);
+        setExpandedRowKeys((prev) => {
+            const isExpanded = prev.includes(key);
+            if (isExpanded) {
+                return prev.filter((item) => item !== key);
+            }
+            if (expandMultiple) {
+                return [...prev, key];
+            }
+            return [key];
+        });
+    };
+    const mergedColumns = React.useMemo(() => {
+        const enhancedColumns = columns.map((column) => {
+            const needsTruncate = expandEnabled && Boolean(column.ellipsisExpand);
+            const needsTitle = Boolean(column.showTitleOnHover) && !column.render;
+            if (!needsTruncate && !needsTitle) {
+                return column;
+            }
+            const originalRender = column.render;
+            return Object.assign(Object.assign({}, column), { render: (value, record, index) => {
+                    var _a;
+                    const rendered = originalRender ? originalRender(value, record, index) : value;
+                    const titleText = needsTitle ? toTitleText(value) : undefined;
+                    const wrapContent = (node) => {
+                        if (needsTruncate) {
+                            const key = resolveRowKey(rowKey, record);
+                            const expanded = expandedRowKeys.includes(key);
+                            return jsx(TruncateText, { content: node, expanded: expanded, title: titleText });
+                        }
+                        if (titleText !== undefined) {
+                            return jsx("span", { title: titleText, children: node });
+                        }
+                        return node;
+                    };
+                    if (isRenderedCell(rendered)) {
+                        return Object.assign(Object.assign({}, rendered), { children: wrapContent((_a = rendered.children) !== null && _a !== void 0 ? _a : null) });
+                    }
+                    return wrapContent(rendered);
+                } });
+        });
+        if (actions === null || !actions || actions.length === 0) {
+            return enhancedColumns;
+        }
+        return [
+            ...enhancedColumns,
+            {
+                key: '__actions__',
+                title: actionColumnTitle,
+                width: actionColumnWidth,
+                render: (_, record) => jsx(ActionCell, { record: record, actions: actions }),
+            },
+        ];
+    }, [actions, actionColumnTitle, actionColumnWidth, columns, expandEnabled, expandedRowKeys, rowKey]);
+    const resolvedRowSelection = React.useMemo(() => {
+        var _a;
+        if (!rowSelection) {
+            return undefined;
+        }
+        return {
+            selectedRowKeys: rowSelection.selectedRowKeys,
+            preserveSelectedRowKeys: (_a = rowSelection.preserveSelectedRowKeys) !== null && _a !== void 0 ? _a : true,
+            onChange: rowSelection.onChange,
+            columnWidth: '40px',
+        };
+    }, [rowSelection]);
+    const paginationConfig = React.useMemo(() => {
+        if (controlledPagination === false) {
+            return false;
+        }
+        if (controlledPagination) {
+            return Object.assign(Object.assign({}, controlledPagination), { showSizeChanger,
+                showQuickJumper });
+        }
+        return {
+            defaultPageSize,
+            showSizeChanger,
+            showQuickJumper,
+        };
+    }, [controlledPagination, defaultPageSize, showSizeChanger, showQuickJumper]);
+    const handleTableChange = (...args) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(...args);
+    };
+    const tableClassName = [dataTable, expandEnabled ? dataTableRowClickable : '', className]
+        .filter(Boolean)
+        .join(' ');
+    const tableStyle = Object.assign({ ['--data-table-min-width']: formatCssSize(minWidth) }, (expandEnabled
+        ? {
+            ['--data-table-expand-max-height']: formatCssSize(expandMaxHeight),
+        }
+        : {}));
+    return (jsx(Table, { className: tableClassName, style: tableStyle, rowKey: rowKey, columns: mergedColumns, dataSource: dataSource !== null && dataSource !== void 0 ? dataSource : [], loading: loading, rowSelection: resolvedRowSelection, bordered: false, pagination: paginationConfig, onChange: handleTableChange, onRow: expandEnabled
+            ? (record) => ({
+                onClick: (event) => {
+                    if (isInteractiveRowClickTarget(event.target)) {
+                        return;
+                    }
+                    toggleRowExpand(record);
+                },
+            })
+            : undefined, locale: {
+            emptyText: jsx(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE, description: "\u6682\u65E0\u6570\u636E" }),
+        } }));
+}
+
+export { DataTable as default };

package/es/components/data-table/index.module.scss.js

@@ -0,0 +1,61 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__dataTable___ztDZM {
+  --data-table-min-width: 920px;
+  --data-table-expand-max-height: 200px;
+}
+.index-module__dataTable___ztDZM .ant-table-content {
+  overflow-x: auto;
+}
+.index-module__dataTable___ztDZM .ant-table table {
+  min-width: var(--data-table-min-width);
+}
+.index-module__dataTable___ztDZM .ant-table-thead > tr > th,
+.index-module__dataTable___ztDZM .ant-table-tbody > tr > td {
+  height: 55px;
+  min-height: 55px;
+}
+.index-module__dataTable___ztDZM .ant-pagination-item,
+.index-module__dataTable___ztDZM .ant-pagination-prev,
+.index-module__dataTable___ztDZM .ant-pagination-next,
+.index-module__dataTable___ztDZM .ant-pagination-jump-prev,
+.index-module__dataTable___ztDZM .ant-pagination-jump-next {
+  min-width: 32px;
+  height: 32px;
+  line-height: 30px;
+  border-radius: 2px;
+}
+.index-module__dataTable___ztDZM .ant-pagination-prev .ant-pagination-item-link,
+.index-module__dataTable___ztDZM .ant-pagination-next .ant-pagination-item-link {
+  border-radius: 2px;
+}
+.index-module__dataTable___ztDZM .ant-table-wrapper .ant-pagination.ant-pagination {
+  margin: 16px 0 0;
+}
+.index-module__dataTableRowClickable___hbgb0 .ant-table-tbody > tr {
+  cursor: pointer;
+}
+.index-module__truncateText___Suq2y {
+  max-height: 48px;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: max-height 0.3s;
+  word-break: break-all;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.index-module__truncateTextExpanded___ENrxt {
+  max-height: var(--data-table-expand-max-height);
+  overflow-y: auto;
+  display: block;
+  line-clamp: unset;
+  -webkit-line-clamp: unset;
+}`;
+document.head.appendChild(style);
+
+var dataTable = "index-module__dataTable___ztDZM";var dataTableRowClickable = "index-module__dataTableRowClickable___hbgb0";var truncateText = "index-module__truncateText___Suq2y";var truncateTextExpanded = "index-module__truncateTextExpanded___ENrxt";
+var styles = {"dataTable":"index-module__dataTable___ztDZM","dataTableRowClickable":"index-module__dataTableRowClickable___hbgb0","truncateText":"index-module__truncateText___Suq2y","truncateTextExpanded":"index-module__truncateTextExpanded___ENrxt"};
+
+export { dataTable, dataTableRowClickable, styles as default, truncateText, truncateTextExpanded };

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function UploadIcon(props) {
     return (jsx("svg", Object.assign({ width: "34", height: "31", viewBox: "0 0 34 31", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsxs("g", { id: "\u00E4\u00B8\u008A\u00E4\u00BC\u00A0\u00E6\u008F\u0092\u00E5\u009B\u00BE", children: [jsx("path", { id: "Vector", d: "M26 8.66665V29.7043C26.0013 29.867 25.9705 30.0284 25.9094 30.1792C25.8483 30.33 25.7581 30.4672 25.6439 30.5831C25.5297 30.699 25.3938 30.7913 25.244 30.8547C25.0941 30.918 24.9332 30.9512 24.7705 30.9523H1.22943C0.903577 30.9523 0.591055 30.823 0.360528 30.5927C0.130002 30.3624 0.000328142 30.05 0 29.7241V1.22819C0 0.563332 0.553428 0 1.23562 0H17.3333V7.42856C17.3333 7.75692 17.4638 8.07184 17.6959 8.30402C17.9281 8.53621 18.243 8.66665 18.5714 8.66665H26ZM26 6.19047H19.8095V0.00371423L26 6.19047Z", fill: "#B9D6FF" }), jsxs("g", { id: "Group 1000006993", children: [jsx("circle", { id: "Ellipse 87", cx: "26", cy: "23", r: "8", fill: "#1775FE" }), jsx("path", { id: "Vector_2", d: "M26.4545 24.315V27.5714H25.5455V24.315L24.3034 25.2023L23.775 24.4625L26 22.8732L28.225 24.4625L27.6966 25.2023L26.4545 24.315ZM31 24.4545C31 25.7098 29.9825 26.7273 28.7273 26.7273H27.3636V25.8182H28.7273C29.0749 25.8184 29.4094 25.6858 29.6625 25.4476C29.9156 25.2094 30.0682 24.8835 30.0891 24.5365C30.11 24.1896 29.9976 23.8477 29.7749 23.5808C29.5522 23.314 29.236 23.1422 28.8909 23.1007L28.4568 23.0489L28.4918 22.6127C28.4973 22.5455 28.5 22.4775 28.5 22.4091C28.5 21.0284 27.3807 19.9091 26 19.9091C25.4245 19.9091 24.8666 20.1077 24.4205 20.4712C23.9744 20.8347 23.6672 21.3409 23.5509 21.9045L23.4955 22.175L23.2295 22.2507C22.8492 22.3591 22.5146 22.5885 22.2763 22.9042C22.038 23.2198 21.9091 23.6045 21.9091 24C21.9091 24.4822 22.1006 24.9447 22.4416 25.2856C22.7826 25.6266 23.2451 25.8182 23.7273 25.8182H24.6364V26.7273H23.7273C22.2211 26.7273 21 25.5061 21 24C21 22.8655 21.6989 21.8682 22.7239 21.4632C22.9292 20.753 23.3598 20.1288 23.9506 19.6846C24.5415 19.2403 25.2607 19.0001 26 19C27.8414 19 29.3416 20.4598 29.4068 22.2852C29.8687 22.4302 30.2723 22.7187 30.5588 23.1089C30.8453 23.499 30.9999 23.9705 31 24.4545Z", fill: "white" })] })] }) })));
@@ -18,5 +18,8 @@ function ResumeIcon() {
 function RetryIcon() {
     return (jsx("svg", { width: "20", height: "20", viewBox: "4 4 16 16", fill: "currentColor", children: jsx("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }) }));
 }
+function TipIcon() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": true, children: [jsx("circle", { cx: "12", cy: "12", r: "9", strokeWidth: "1.5" }), jsx("path", { d: "M12 16v-5M12 8h.01", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}
 
-export { CloseIcon, FileIcon, PauseIcon, ResumeIcon, RetryIcon, UploadIcon as default };
+export { CloseIcon, FileIcon, PauseIcon, ResumeIcon, RetryIcon, TipIcon, UploadIcon as default };

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

@@ -15,6 +15,23 @@ function useStyle() {
   color: var(--uploader-text);
 }
 
+.uploader-network-tip {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  margin: -0.75rem 0 0.75rem;
+  color: #87909e;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.uploader-network-tip-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  color: #87909e;
+}
+
 
 
 `;

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

@@ -8,6 +8,7 @@ import { UploaderFileListLayout } from './uploader-file-list.js';
 import { UploaderFileItem } from './uploader-file-item.js';
 import { UploaderProgressBar } from './uploader-progress-bar.js';
 import { useUpload } from '../hooks/use-upload.js';
+import { TipIcon } from './icons.js';
 
 useStyle();
 useStyle$1();
@@ -48,7 +49,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 }), 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, 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))) })] }));
 }
 
 export { Uploader };

package/es/index.js

@@ -34,6 +34,7 @@ export { default as RadioCard } from './components/radio-card/index.js';
 export { default as OperatorChain } from './components/operator-chain/index.js';
 export { default as CorpusCard } from './components/corpus-card/index.js';
 export { default as ModelCard } from './components/model-card/index.js';
+export { default as DataTable } from './components/data-table/index.js';
 export { default as SDKModal } from './components/SDK-modal/index.js';
 export { default as TagView } from './components/tag-view/index.js';
 export { default as TagGroupFilter } from './components/tag-group-filter/index.js';