3c1652ff9d
1. Add `web/src/components/common/ui/CardTable.js` • Renders Semi-UI `Table` on desktop; on mobile, transforms each row into a rounded `Card`. • Supports all standard `Table` props, including `rowSelection`, `scroll`, `pagination`, etc. • Adds mobile pagination via Semi-UI `Pagination`. • Implements a 500 ms minimum, active Skeleton loader that mimics real column layout (including operation-button row). 2. Replace legacy `Table` with `CardTable` • Updated all major data pages: Channels, MJ-Logs, Redemptions, Tokens, Task-Logs, Usage-Logs and Users. • Removed unused `Table` imports; kept behaviour on desktop unchanged. 3. UI polish • Right-aligned operation buttons and sensitive fields (e.g., token keys) inside mobile cards. • Improved Skeleton placeholders to better reflect actual UI hierarchy and preserve the active animation. These changes dramatically improve the mobile experience while retaining full functionality on larger screens.
97 lines
2.3 KiB
JavaScript
97 lines
2.3 KiB
JavaScript
import React, { useMemo } from 'react';
|
|
import { Empty } from '@douyinfe/semi-ui';
|
|
import CardTable from '../../common/ui/CardTable.js';
|
|
import {
|
|
IllustrationNoResult,
|
|
IllustrationNoResultDark,
|
|
} from '@douyinfe/semi-illustrations';
|
|
import { getMjLogsColumns } from './MjLogsColumnDefs.js';
|
|
|
|
const MjLogsTable = (mjLogsData) => {
|
|
const {
|
|
logs,
|
|
loading,
|
|
activePage,
|
|
pageSize,
|
|
logCount,
|
|
compactMode,
|
|
visibleColumns,
|
|
handlePageChange,
|
|
handlePageSizeChange,
|
|
copyText,
|
|
openContentModal,
|
|
openImageModal,
|
|
isAdminUser,
|
|
t,
|
|
COLUMN_KEYS,
|
|
} = mjLogsData;
|
|
|
|
// Get all columns
|
|
const allColumns = useMemo(() => {
|
|
return getMjLogsColumns({
|
|
t,
|
|
COLUMN_KEYS,
|
|
copyText,
|
|
openContentModal,
|
|
openImageModal,
|
|
isAdminUser,
|
|
});
|
|
}, [
|
|
t,
|
|
COLUMN_KEYS,
|
|
copyText,
|
|
openContentModal,
|
|
openImageModal,
|
|
isAdminUser,
|
|
]);
|
|
|
|
// Filter columns based on visibility settings
|
|
const getVisibleColumns = () => {
|
|
return allColumns.filter((column) => visibleColumns[column.key]);
|
|
};
|
|
|
|
const visibleColumnsList = useMemo(() => {
|
|
return getVisibleColumns();
|
|
}, [visibleColumns, allColumns]);
|
|
|
|
const tableColumns = useMemo(() => {
|
|
return compactMode
|
|
? visibleColumnsList.map(({ fixed, ...rest }) => rest)
|
|
: visibleColumnsList;
|
|
}, [compactMode, visibleColumnsList]);
|
|
|
|
return (
|
|
<CardTable
|
|
columns={tableColumns}
|
|
dataSource={logs}
|
|
rowKey='key'
|
|
loading={loading}
|
|
scroll={compactMode ? undefined : { x: 'max-content' }}
|
|
className="rounded-xl overflow-hidden"
|
|
size="middle"
|
|
empty={
|
|
<Empty
|
|
image={
|
|
<IllustrationNoResult style={{ width: 150, height: 150 }} />
|
|
}
|
|
darkModeImage={
|
|
<IllustrationNoResultDark style={{ width: 150, height: 150 }} />
|
|
}
|
|
description={t('搜索无结果')}
|
|
style={{ padding: 30 }}
|
|
/>
|
|
}
|
|
pagination={{
|
|
currentPage: activePage,
|
|
pageSize: pageSize,
|
|
total: logCount,
|
|
pageSizeOptions: [10, 20, 50, 100],
|
|
showSizeChanger: true,
|
|
onPageSizeChange: handlePageSizeChange,
|
|
onPageChange: handlePageChange,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default MjLogsTable;
|