- Redesign modal layout from single column to responsive two-column grid
- Add new user information fields: display name, user group, invitation code,
invitation count, invitation quota, and remarks
- Implement Badge components with color-coded categories for better visual hierarchy:
* Primary (blue): basic identity info (username, display name)
* Success (green): positive/earning info (balance, invitation quota)
* Warning (orange): usage/consumption info (used quota, request count)
* Tertiary (gray): supplementary info (user group, invitation details, remarks)
- Optimize spacing and typography for better readability:
* Reduce row spacing from 24px to 16px
* Decrease font size from 16px to 14px for values
* Adjust label margins from 4px to 2px
- Implement conditional rendering for optional fields
- Add proper text wrapping for long remarks content
- Reduce overall modal height while maintaining information clarity
This update significantly improves the user experience by presenting
comprehensive user information in a more organized and visually appealing format.
Summary
1. CardTable
• Added collapsible “Details / Collapse” section on mobile cards using Semi-UI Button + Collapsible with chevron icons.
• Integrated i18n (`useTranslation`) for the toggle labels.
• Restored original variable-width skeleton placeholders (50 % / 60 % / 70 % …) for more natural loading states.
2. UsageLogsColumnDefs
• Wrapped each `Tag` inside a native `<span>` when used as Tooltip trigger, removing `findDOMNode` deprecation warnings in React StrictMode.
Impact
• Cleaner, shorter rows on small screens with optional expansion.
• Fully translated UI controls.
• No more console noise in development & CI caused by StrictMode warnings.
Summary
• Swapped out the obsolete `<Spin>` loader for a modern, animated Semi-UI `<Skeleton>` implementation in `UsageLogsActions.jsx`.
Details
1. Added animated Skeleton placeholders mirroring real Tag sizes (108 × 26, 65 × 26, 64 × 26).
2. Introduced `showSkeleton` state with 500 ms minimum display to eliminate flicker.
3. Leveraged existing `showStat` flag to decide when real data is ready.
4. Ensured only the three Tags are under loading state - `CompactModeToggle` renders immediately.
5. Adopted CardTable‐style `Skeleton` pattern (`loading` + `placeholder`) for consistency.
6. Removed all references to the original `Spin` component.
Outcome
A smoother and more consistent loading experience across devices, aligning UI behaviour with the project’s latest Skeleton standards.
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.
Summary
-------
Introduce a reusable compact-mode toggle component and greatly improve the CardPro header for small screens. Removes duplicated code, adds i18n support, and refines overall responsiveness.
Details
-------
🎨 UI / Components
• Create `common/ui/CompactModeToggle.js`
– Provides a single source of truth for switching between “Compact list” and “Adaptive list”
– Automatically hides itself on mobile devices via `useIsMobile()`
• Refactor table modules to use the new component
– `Users`, `Tokens`, `Redemptions`, `Channels`, `TaskLogs`, `MjLogs`, `UsageLogs`
– Deletes legacy in-file toggle buttons & reduces repetition
📱 CardPro improvements
• Hide `actionsArea` and `searchArea` on mobile, showing a single “Show Actions / Hide Actions” toggle button
• Add i18n: texts are now pulled from injected `t()` function (`显示操作项` / `隐藏操作项` etc.)
• Extend PropTypes to accept the `t` prop; supply a safe fallback
• Minor cleanup: remove legacy DOM observers & flag CSS, simplify logic
🔧 Integration
• Pass the `t` translation function to every `CardPro` usage across table pages
• Remove temporary custom class hooks after logic simplification
Benefits
--------
✓ Consistent, DRY compact-mode handling across the entire dashboard
✓ Better mobile experience with decluttered headers
✓ Full translation support for newly added strings
✓ Easier future maintenance (single compact toggle, unified CardPro API)
