- Add click-to-navigate functionality on balance cards in both Detail and TokensTable components
- Implement navigation to '/console/topup' when clicking on current balance
- Add useNavigate hook and necessary imports
- Keep consistent navigation behavior across components
Components affected:
- web/src/pages/Detail/index.js
- web/src/components/TokensTable.js
This commit introduces the following changes:
- Add i18n support to the Loading component
- Import useTranslation hook from react-i18next
- Replace hardcoded Chinese text with translation keys
- Support dynamic content interpolation for loading prompts
- Use {{name}} variable in translation template
Technical details:
- Added: import { useTranslation } from 'react-i18next'
- Modified: Loading text from static Chinese to i18n keys
- Translation keys added:
- "加载中..."
- "加载{{name}}中..."
File changed: web/src/components/Loading.js
This commit introduces the following changes:
- Create a reusable NoticeModal component to handle system announcements
- Extract notice functionality from Home and HeaderBar components
- Add loading and empty states using Semi UI illustrations
- Implement "close for today" feature with localStorage
- Support both light and dark mode for empty state illustrations
- Add proper error handling and loading states
- Improve code reusability and maintainability
Breaking changes: None
Related components: HeaderBar.js, Home/index.js, NoticeModal.js
- Replace emoji icons with Semi Design Avatar components
- Standardize statistics cards layout across TokensTable and LogsTable
- Remove informational text banners for cleaner interface
- Implement consistent grid layout for metric cards
- Add elevated shadow effect to white Avatar for better contrast
Changes include:
- Convert emoji indicators to Semi Icons (MoneyExchangeStroked, Pulse, Typograph)
- Unify card styling with rounded corners and hover shadows
- Implement responsive grid layout (1 column on mobile, 3 columns on desktop)
- Standardize typography and spacing across all stat cards
- Apply Semi Design's elevated shadow to improve white Avatar visibility
This commit implements a comprehensive UI/UX overhaul of the ModelPricing component,
focusing on improved aesthetics and responsiveness while maintaining existing API logic.
Key improvements:
- Redesigned status card with gradient background and floating elements
- Implemented responsive grid layout for pricing metrics
- Enhanced visual hierarchy with Semi UI components
- Added smooth transitions and hover effects
- Optimized spacing and typography for better readability
- Unified design language with PersonalSettings component
- Integrated Tailwind CSS 3.0 utility classes
- Added decorative elements for visual interest
- Improved mobile responsiveness across all breakpoints
- Enhanced accessibility with proper contrast ratios
The redesign follows modern UI/UX best practices while maintaining consistency
with the application's design system.
- Add success notification when testing a single channel
- Only show notification for individual channel test, not for batch model testing
- Include channel name and response time in the notification message
- Keep error notifications for both single and batch testing scenarios
This improves user feedback when manually testing channel connectivity.
This commit improves the ChannelsTable component with enhanced UI and functionality:
UI Improvements:
- Refactor operation column layout with primary actions exposed
- Move secondary actions (delete, copy) to dropdown menu
- Unify button styles with theme='light' and size="small"
- Add !rounded-full design to all buttons
- Add appropriate icons (IconStop, IconPlay etc.)
Column Settings Modal:
- Replace inline styles with Tailwind CSS
- Add rounded corners design
- Optimize button layout and styling
- Improve responsive design
Batch Operations:
- Unify dropdown button styles with !rounded-full
- Replace inline styles with Tailwind w-full
- Maintain semantic button types (warning/secondary/danger)
- Improve visual hierarchy
Model Testing Enhancement:
- Add comprehensive model testing modal
- Implement batch testing functionality
- Add model search and filtering
- Add real-time test status indicators
- Show response time for successful tests
- Add test queue management system
- Implement graceful test cancellation
Other Improvements:
- Optimize responsive layout for mobile devices
- Add i18n support for all new features
- Improve error handling and user feedback
- Enhance performance with optimized state management
- Unify input field styles with size="large" for consistent appearance
- Replace account binding sections with Semi UI Card components for better visual hierarchy
- Redesign invitation statistics cards with responsive layout and Card components
- Enhance security settings with structured Card layout and improved visual design
- Complete i18n internationalization for all text strings and placeholders
- Optimize main profile card responsive design following TopUp page patterns
- Update avatar component to display first two characters with animated border
- Improve user role display with three-tier system (Super Admin/Admin/User)
- Enhance tag visibility with white background for better contrast on purple gradient
- Implement dynamic colors for model tags using stringToColor function
- Add hover effects and improved accessibility across all components
- Maintain consistent design language throughout the interface
This refactor significantly improves the user experience with modern UI patterns,
better responsiveness, and enhanced visual appeal while maintaining all existing
functionality.
Add loading indicators to improve user experience during authentication processes:
- Implement loading states for all login and registration buttons
- Add try/catch/finally structure to properly handle async operations
- Create wrapper functions for OAuth redirect operations
- Set loading state for verification code submission
- Update modal confirmation buttons with loading state
- Add proper error handling with user feedback
- Split generic loading state into specific state variables
This change enhances user experience by providing clear visual feedback
during authentication actions.
When resizing from medium screens to desktop view in the console section,
the sidebar previously failed to appear automatically. This commit fixes
the issue by simplifying the logic to always show the sidebar when in
desktop mode and in console pages, regardless of previous screen size.
This commit introduces a new component `AuthRedirect` which checks
if a user is already logged in.
If the user is logged in and attempts to access the /login or /register
pages, they will be redirected to the /console page. Otherwise, the
respective authentication form (Login or Register) will be rendered.
The `App.js` file has been updated to utilize this new `AuthRedirect`
component for the /login and /register routes.
Previously, when an unauthenticated user clicked the "Console" navigation
link, the application would first attempt to navigate to '/console'.
This would then trigger a redirect to '/login', causing a brief flicker
between the two pages.
This commit modifies the `renderNavLinks` function in `HeaderBar.js`
to proactively check the user's authentication status. If the user is
not logged in and clicks the "Console" link, the navigation target
is directly set to '/login', avoiding the intermediate redirect and
eliminating the flickering effect.
The `handleNavLinkClick` function in `HeaderBar.js` was previously
forcing the sidebar to be visible for all non-'home' navigation links
on non-mobile devices. This interfered with the intended logic in
`StyleContext` which controls sidebar visibility based on the current
route.
This commit modifies `handleNavLinkClick` to:
- Only apply specific style dispatches (setting inner padding and sider
to false) for the 'home' link, which may have unique layout requirements.
- Remove the logic that unconditionally set sidebar visibility and inner
padding for other navigation links.
- Continue to close the mobile menu загрязнения (`setMobileMenuOpen(false)`) on any nav link click.
This change ensures that `StyleContext` is the single source of truth
for determining sidebar visibility based on the route, resolving an
issue where clicking a non-console link Pferde (e.g., 'Pricing', 'About')
would incorrectly display the sidebar, especially when the link was
clicked Pferde a second time while already on that page.
