Stev_Wang
073d210a92
React 19 + Vite 6 + Router 7 + TanStack Query + Zustand；Semi 二次封装与 Remix 图标统一出口；顶部模块 + 左侧功能菜单布局、Cloud Blue 主题、登录页与 401/403/404/500 页面；请求层含 token 注入、单飞刷新与统一错误提示。
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { Table } from '@douyinfe/semi-ui-19';
|
|
import type { TableProps } from '@douyinfe/semi-ui-19/lib/es/table/interface';
|
|
import type { ReactNode } from 'react';
|
|
|
|
import { PageEmpty } from './PageEmpty.js';
|
|
|
|
export interface DataTableProps<T extends Record<string, unknown>> {
|
|
columns: NonNullable<TableProps<T>['columns']>;
|
|
dataSource: T[];
|
|
loading?: boolean;
|
|
rowKey?: TableProps<T>['rowKey'];
|
|
pagination?: TableProps<T>['pagination'];
|
|
empty?: ReactNode;
|
|
size?: TableProps<T>['size'];
|
|
scroll?: TableProps<T>['scroll'];
|
|
className?: string;
|
|
onRow?: TableProps<T>['onRow'];
|
|
}
|
|
|
|
/**
|
|
* 列表表格统一封装：加载态 + 空态 + 行 key 约定。
|
|
* 业务页只负责列定义与数据，不重复写 Empty / loading。
|
|
*/
|
|
export function DataTable<T extends Record<string, unknown>>({
|
|
columns,
|
|
dataSource,
|
|
loading = false,
|
|
rowKey = 'id',
|
|
pagination = false,
|
|
empty,
|
|
size = 'middle',
|
|
scroll,
|
|
className,
|
|
onRow,
|
|
}: DataTableProps<T>): ReactNode {
|
|
return (
|
|
<Table<T>
|
|
className={`lx-data-table${className === undefined ? '' : ` ${className}`}`}
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
loading={loading}
|
|
rowKey={rowKey}
|
|
pagination={pagination}
|
|
size={size}
|
|
scroll={scroll}
|
|
onRow={onRow}
|
|
empty={empty ?? <PageEmpty />}
|
|
/>
|
|
);
|
|
}
|