Set a minimum width of 200px for progress components in both MjLogsTable.js and TaskLogsTable.js to ensure consistent display and prevent them from becoming too narrow when table resizes.
Enhance table scrollbar visual design with lighter and thinner styling for better user experience.
Changes:
- Add custom scrollbar styling for .semi-table-body
- Set scrollbar dimensions to 6px width/height
- Apply lighter color using rgba(var(--semi-grey-2), 0.3) with 30% opacity
- Add hover effect with 50% opacity for better interaction feedback
- Use 2px border radius for smoother appearance
- Keep scrollbar track transparent for clean look
- Utilize Semi Design color variables for theme consistency
The new scrollbar design provides a more elegant and less intrusive horizontal scrolling experience across all data tables.
Fix the last column (operation/detail columns) to the right side across all table components to improve user experience and ensure important actions remain visible during horizontal scrolling.
Changes:
- ChannelsTable.js: Fix operation column to right
- UsersTable.js: Fix operation column to right
- TokensTable.js: Fix operation column to right
- RedemptionsTable.js: Fix operation column to right
- LogsTable.js: Fix details column to right
- MjLogsTable.js: Fix fail reason column to right
- TaskLogsTable.js: Fix fail reason column to right
All tables now have their rightmost column fixed using Semi Design's `fixed: 'right'` property, ensuring critical information and actions are always accessible regardless of table scroll position.
- Consolidate 8 individual stat cards into 4 grouped cards:
* Account Data (Current Balance, Historical Consumption)
* Usage Statistics (Request Count, Statistics Count)
* Resource Consumption (Statistics Quota, Statistics Tokens)
* Performance Metrics (Average RPM, Average TPM)
- Add gradient header backgrounds with white text for card titles:
* Blue gradient for Account Data
* Green gradient for Usage Statistics
* Yellow gradient for Resource Consumption
* Pink gradient for Performance Metrics
- Implement mini trend charts using real API data:
* Replace mock data with actual time-series data from API
* Hide x and y axes to show pure trend lines
* Display trends only for metrics with available historical data
* Remove trend charts for Current Balance, Historical Consumption, and Request Count
- Merge model analysis charts into single card:
* Combine "Model Consumption Distribution" and "Model Call Count Ratio"
* Use responsive grid layout (vertical on mobile, horizontal on desktop)
* Update card title to "Model Data Analysis"
- Optimize chart configurations:
* Hide axes, legends, and tooltips for mini trend charts
* Maintain color consistency between metrics and trend lines
* Improve performance by processing all trend data in single API call
