Commit Graph

2 Commits

Author SHA1 Message Date
t0ng7u
f5a0b92756 💄 refactor(CardTable): proper empty-state handling & pagination visibility on mobile
• Imported Semi-UI `Empty` component.
• Detect when `dataSource` is empty on mobile card view:
  – Renders supplied `empty` placeholder (`tableProps.empty`) or a default `<Empty description="No Data" />`.
  – Suppresses the mobile `Pagination` component to avoid blank pages.
• Pagination now renders only when `dataSource.length > 0`, preserving UX parity with desktop tables.
2025-07-19 02:35:01 +08:00
t0ng7u
3c1652ff9d 📱 feat(ui): Introduce responsive CardTable with mobile card view, dynamic skeletons & pagination
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.
2025-07-19 02:27:57 +08:00