oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱 feat(ui): Introduce responsive CardTable with mobile card view, dynamic skeletons & pagination

Browse Source 
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.
This commit is contained in:
t0ng7u
2025-07-19 02:27:57 +08:00
parent 97a9c8627c
commit 301909e3e5
8 changed files with 185 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/table/channels/ChannelsTable.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import { Table, Empty } from '@douyinfe/semi-ui';
import { Empty } from '@douyinfe/semi-ui';
import CardTable from '../../common/ui/CardTable.js';
import {
IllustrationNoResult,
IllustrationNoResultDark
@@ -96,7 +97,7 @@ const ChannelsTable = (channelsData) => {
}, [compactMode, visibleColumnsList]);
return (
<Table
<CardTable
columns={tableColumns}
dataSource={channels}
scroll={compactMode ? undefined : { x: 'max-content' }}

5
web/src/components/table/mj-logs/MjLogsTable.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import { Table, Empty } from '@douyinfe/semi-ui';
import { Empty } from '@douyinfe/semi-ui';
import CardTable from '../../common/ui/CardTable.js';
import {
IllustrationNoResult,
IllustrationNoResultDark,
@@ -60,7 +61,7 @@ const MjLogsTable = (mjLogsData) => {
}, [compactMode, visibleColumnsList]);
return (
<Table
<CardTable
columns={tableColumns}
dataSource={logs}
rowKey='key'

5
web/src/components/table/redemptions/RedemptionsTable.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo, useState } from 'react';
import { Table, Empty } from '@douyinfe/semi-ui';
import { Empty } from '@douyinfe/semi-ui';
import CardTable from '../../common/ui/CardTable.js';
import {
IllustrationNoResult,
IllustrationNoResultDark
@@ -74,7 +75,7 @@ const RedemptionsTable = (redemptionsData) => {
return (
<>
<Table
<CardTable
columns={tableColumns}
dataSource={redemptions}
scroll={compactMode ? undefined : { x: 'max-content' }}

5
web/src/components/table/task-logs/TaskLogsTable.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import { Table, Empty } from '@douyinfe/semi-ui';
import { Empty } from '@douyinfe/semi-ui';
import CardTable from '../../common/ui/CardTable.js';
import {
IllustrationNoResult,
IllustrationNoResultDark,
@@ -57,7 +58,7 @@ const TaskLogsTable = (taskLogsData) => {
}, [compactMode, visibleColumnsList]);
return (
<Table
<CardTable
columns={tableColumns}
dataSource={logs}
rowKey='key'

5
web/src/components/table/tokens/TokensTable.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import { Table, Empty } from '@douyinfe/semi-ui';
import { Empty } from '@douyinfe/semi-ui';
import CardTable from '../../common/ui/CardTable.js';
import {
IllustrationNoResult,
IllustrationNoResultDark,
@@ -66,7 +67,7 @@ const TokensTable = (tokensData) => {
}, [compactMode, columns]);
return (
<Table
<CardTable
columns={tableColumns}
dataSource={tokens}
scroll={compactMode ? undefined : { x: 'max-content' }}

5
web/src/components/table/usage-logs/UsageLogsTable.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import { Table, Empty, Descriptions } from '@douyinfe/semi-ui';
import { Empty, Descriptions } from '@douyinfe/semi-ui';
import CardTable from '../../common/ui/CardTable.js';
import {
IllustrationNoResult,
IllustrationNoResultDark,
@@ -63,7 +64,7 @@ const LogsTable = (logsData) => {
};
return (
<Table
<CardTable
columns={tableColumns}
{...(hasExpandableRows() && {
expandedRowRender: expandRowRender,

5
web/src/components/table/users/UsersTable.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo, useState } from 'react';
import { Table, Empty } from '@douyinfe/semi-ui';
import { Empty } from '@douyinfe/semi-ui';
import CardTable from '../../common/ui/CardTable.js';
import {
IllustrationNoResult,
IllustrationNoResultDark
@@ -104,7 +105,7 @@ const UsersTable = (usersData) => {
return (
<>
<Table
<CardTable
columns={tableColumns}
dataSource={users}
scroll={compactMode ? undefined : { x: 'max-content' }}