@zjlab-fe/data-hub-ui 0.31.1 → 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/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/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';