Backend
- controller/ratio_sync.go
• Parse /api/pricing response and convert to ratio / price maps.
• Introduce confidence heuristic (model_ratio = 37.5 && completion_ratio = 1) to flag unreliable data.
• Include confidence map when building differences and filter “same”/empty entries.
- dto/ratio_sync.go
• Add `ID` to UpstreamDTO, `upstreams` to UpstreamRequest, and `Confidence` to DifferenceItem.
Frontend
- ChannelSelectorModal.js
• Re-implement with table layout, pagination, search, endpoint-type selector and mobile support.
- UpstreamRatioSync.js
• Send full upstream objects, add ratio-type filter, confidence badges/tooltips, retain endpoints.
• Leverage ChannelSelectorModal’s pagination reset.
- ChannelsTable.js – fix tag color for disabled status.
- en.json – add translations for new UI labels.
Motivation
These changes let users sync model ratios / prices from different upstream endpoints and visually identify potentially unreliable data, improving operational safety and flexibility.
* Moved `GroupRatioSettings` component inside the existing Tabs as a new **Group Ratios** tab.
* Removed the standalone `Card` that previously wrapped `GroupRatioSettings`.
* Re-formatted JSX props for `ModelRatioSettings` and `GroupRatioSettings` to improve readability.
* Consolidates all ratio-related settings into a single tabbed view for a cleaner and more consistent UI.
• HeaderBar
- Added dynamic unread badge; click now opens NoticeModal on “System Announcements” tab
- Passes `defaultTab` and `unreadKeys` props to NoticeModal for contextual behaviour
• NoticeModal
- Introduced Tabs inside the modal title with Lucide icons (Bell, Megaphone)
- Displays in-app notice (markdown) and system announcements separately
- Highlights unread announcements with “shine” text animation
- Accepts new props `defaultTab`, `unreadKeys` to control initial tab and highlight logic
• CSS (index.css)
- Implemented `sweep-shine` keyframes and `.shine-text` utility for left-to-right glow
- Added dark-mode variant for better contrast
- Ensured cross-browser support with standard `background-clip`
Overall, users now see an unread counter, are directed to new announcements automatically, and benefit from an eye-catching glow effect that works in both light and dark themes.
Restructure payment settings into a separate tab for better organization and user experience. The changes include:
1. Create dedicated Payment components in the Setting directory structure
2. Move payment-related settings from SystemSetting to PaymentSetting
3. Add proper i18n support with useTranslation hook
4. Split payment settings into GeneralPayment and PaymentGateway components
5. Fix internationalization issues in placeholder text
6. Update navigation with CreditCard icon for payment tab
This refactoring improves code maintainability by following the established project pattern of having specialized setting components in their own directories.
- Change message from "已与上游倍率完全一致，无需同步" to "未找到差异化倍率，无需同步"
- Update English translation to "No differential ratio found, no synchronization is required"
- Improve user experience clarity for upstream ratio synchronization status
Summary
1. Add model name search box
• Introduce Semi UI `Input` with `IconSearch` prefix next to the “Apply Sync” button.
• Support case-insensitive fuzzy matching of model names.
• Real-time filtering, pagination and bulk-select logic now work on filtered data.
2. Improve empty state handling
• Add `hasSynced` flag to distinguish “not synced yet” from “synced with no differences”.
• Display messages:
– “Please select sync channels” when no sync has been performed.
– “No differences found” when a sync completed with zero discrepancies.
– “No matching model found” when search yields no results.
3. UI tweaks
• Replace lucide-react `Search` icon with Semi UI `IconSearch` for visual consistency.
• Keep responsive width and clearable input for better usability.
Why
These changes allow admins to quickly locate specific models and provide accurate feedback on the sync status, greatly improving the usability of the Upstream Ratio Sync page.
Summary
1. Consider “both unset” as identical
• When both localValue and upstreamValue are nil, mark upstreamValue as "same" to avoid showing “Not set”.
2. Exclude fully-synced upstream channels from result
• Scan `differences` to detect channels that contain at least one divergent value.
• Remove channels whose every ratio is either `"same"` or `nil`, so the frontend only receives actionable discrepancies.
Why
These changes reduce visual noise in the Upstream Ratio Sync table, making it easier for admins to focus on models requiring attention. No functional regressions or breaking API changes are introduced.
Summary
• Added new Ratio tab in Settings for managing all ratio-related configurations (group & model multipliers).
• Created `RatioSetting` component to host GroupRatio, ModelRatio, Visual Editor and Unset-Models panels.
• Moved ratio components to `web/src/pages/Setting/Ratio/` directory:
– `GroupRatioSettings.js`
– `ModelRatioSettings.js`
– `ModelSettingsVisualEditor.js`
– `ModelRationNotSetEditor.js`
• Updated imports in `RatioSetting.js` to use the new path.
• Updated main Settings router (`web/src/pages/Setting/index.js`) to include the new “Ratio Settings” tab.
• Pruned `OperationSetting.js`:
– Removed ratio-specific cards, tabs and unused imports.
– Reduced state to only the keys required by its child components.
– Deleted obsolete fields (`StreamCacheQueueLength`, `CheckSensitiveOnCompletionEnabled`, `StopOnSensitiveEnabled`).
• Added boolean handling simplification in `OperationSetting.js`.
• Adjusted helper import list and removed unused translation hook.
Why
Separating ratio-related settings improves UX clarity, reduces cognitive load in the Operation Settings panel and keeps the codebase modular and easier to maintain.
BREAKING CHANGE
The file paths for ratio components have changed. Any external imports referencing the old `Operation` directory must update to the new `Ratio` path.
* backend
- model: add `Remark` field (varchar 255, `json:"remark,omitempty"`); AutoMigrate handles schema change automatically
- controller:
* accept `remark` on user create/update endpoints
* hide remark from regular users (`GetSelf`) by zero-ing the field before JSON marshalling
* clarify inline comment explaining the omitempty behaviour
* frontend (React / Semi UI)
- AddUser.js & EditUser.js: add “Remark” input for admins
- UsersTable.js:
* remove standalone “Remark” column
* show remark as a truncated Tag next to username with Tooltip for full text
* import Tooltip component
- i18n: reuse existing translations where applicable
This commit enables administrators to label users with private notes while ensuring those notes are never exposed to the users themselves.
Summary:
Refactored the `Detail` page to deliver a more consistent and compact visual experience when displaying empty states.
Key changes:
1. Introduced a reusable `ILLUSTRATION_SIZE` constant (96 × 96) to ensure all `IllustrationConstruction` / `IllustrationConstructionDark` icons render at a uniform, reduced size.
2. Applied the new size to every `Empty` component instance within the file.
3. Ensured Empty‐state content (title, description, icon) is centrally aligned for better readability.
4. Updated the Uptime panel’s empty description text for greater clarity.
These adjustments improve UI cohesion, reduce visual noise, and make empty messages easier to scan.
Backend
• controller/uptime_kuma.go
- Added Group field to Monitor struct to carry publicGroupList.name.
- Extended status page parsing to capture group Name and inject it into each monitor.
- Re-worked fetchGroupData loop: aggregate all sub-groups, drop unnecessary pre-allocation/breaks.
Frontend
• web/src/pages/Detail/index.js
- renderMonitorList now buckets monitors by the new group field and renders a lightweight header per subgroup.
- Fallback gracefully when group is empty to preserve previous single-list behaviour.
Other
• Expanded anonymous struct definition for statusData.PublicGroupList to include ID/Name, enabling JSON unmarshalling of group names.
Result
Custom CategoryName continues to work while each uptime group’s internal sub-groups are now clearly displayed in the UI, providing finer-grained visibility without impacting performance or existing validation logic.
Backend
• Introduced `validateExpiredTime` helper in `controller/redemption.go`; reused in both Add & Update endpoints to enforce “expiry time must not be earlier than now”, eliminating duplicated checks
• Removed `RedemptionCodeStatusExpired` constant and all related references – expiry is now determined exclusively by the `expired_time` field for simpler, safer state management
• Simplified `DeleteInvalidRedemptions`: deletes codes that are `used` / `disabled` or `enabled` but already expired, without relying on extra status codes
• Controller no longer mutates `status` when listing or fetching redemption codes; clients derive expiry status from timestamp
Frontend
• Added reusable `isExpired` helper in `RedemptionsTable.js`; leveraged for:
– status rendering (orange “Expired” tag)
– action-menu enable/disable logic
– row styling
• Removed duplicated inline expiry logic, improving readability and performance
• Adjusted toolbar layout: on small screens the “Clear invalid codes” button now wraps onto its own line, while “Add” & “Copy” remain grouped
Result
The codebase is now more maintainable, secure, and performant with no redundant constants, centralized validation, and cleaner UI behaviour across devices.
- Add informative header section to TokensTable with Key icon and description
- Replace generic eye icon with semantic Ticket icon in RedemptionsTable header
- Import additional UI components (Divider, Typography) for better layout structure
- Improve user experience with contextual information about token and redemption functionality
- Maintain consistent styling and layout between both table components
The changes provide users with clear understanding of each table's purpose:
- Tokens: "令牌用于API访问认证，可以设置额度限制和模型权限" with Key icon
- Redemptions: "兑换码可以批量生成和分发，适合用于推广活动或批量充值" with Ticket icon
Front-end enhancements around “Add custom models”:
• EditChannel.js / EditTagModal.js
– Skip models that already exist instead of blocking the action.
– Collect actually inserted items and display:
• Success toast: “Added N models: model1, model2 …”
• Info toast when no new model detected.
– Keeps UX smooth while preserving deduplication logic.
• i18n
– en.json: added keys
• "已新增 {{count}} 个模型：{{list}}"
• "未发现新增模型"
– Fixed a broken JSON string containing smart quotes to maintain valid syntax.
Result:
Users can bulk-paste model names; duplicates are silently ignored and the UI clearly lists what was incrementally appended. All messages are fully internationalised.
Closes#1218
- Change success message from "通知设置已更新" to "设置保存成功"
- Change error message from "更新通知设置失败" to "设置保存失败"
- Makes messages more generic since the function saves multiple types of settings (notification, pricing, IP logging) not just notification settings
- Add IP field to Log model with database index and default empty value
- Implement conditional IP recording based on user setting in RecordConsumeLog and RecordErrorLog
- Add UserSettingRecordIpLog constant and update user settings API to handle record_ip_log field
- Create dedicated "IP记录" tab in personal settings under "其他设置" section
- Add IP column to logs table with help tooltip explaining recording conditions
- Make IP column visible to all users (not admin-only) with proper filtering for consume/error log types
- Restrict display of use_time and retry columns to consume and error log types only
- Update personal settings UI structure: rename "通知设置" to "其他设置" to accommodate new functionality
- Add proper translation support and maintain consistent styling across components
The IP logging feature is disabled by default and only records client IP addresses
for consume (type 2) and error (type 5) logs when explicitly enabled by users
in their personal settings.
Summary
• Centralized uptime status definition via `uptimeStatusMap`, containing color / label / text for each status.
• Generated `uptimeLegendData`, `getUptimeStatusColor`, `getUptimeStatusText` directly from the map, removing multiple switch-case blocks.
UI Improvements
1. Added statuses 2 (High Latency) & 3 (Maintenance) with dedicated colors.
2. Relocated status legend to a styled footer wrapped in a borderless sub-Card; header now only shows title + refresh button.
3. Footer (and its negative margin) renders only when `uptimeData` is present, preventing empty legend display.
4. Applied rounded, blurred badge style and always-on shadow to legend container for clearer separation.
Maintenance
• Simplified code paths, reduced duplication, and improved readability without breaking existing functionality.
Introduce application uptime monitoring to improve observability and reliability.
• Add UptimeService to track process start time and expose uptime in seconds
• Create /health/uptime endpoint returning the current uptime in JSON format
• Integrate uptime metric into existing health-check middleware
• Update README with instructions for consuming the new endpoint
• Add unit tests covering UptimeService and new health route
This change enables operations teams and dashboards to programmatically
determine how long the service has been running, facilitating automated
alerts and trend analysis.
- Add SettingsAnnouncements component with full CRUD operations for system announcements
* Support multiple announcement types (default, ongoing, success, warning, error)
* Include publish date, content, type classification and additional notes
* Implement batch operations and pagination for better data management
* Add real-time preview with relative time display and date formatting
- Add SettingsFAQ component for comprehensive FAQ management
* Support question-answer pairs with rich text content
* Include full editing, deletion and creation capabilities
* Implement batch delete operations and paginated display
* Add validation for complete Q&A information
- Integrate announcement and FAQ modules into DashboardSetting
* Add unified configuration interface in admin console
* Implement auto-refresh functionality for real-time updates
* Add loading states and error handling for better UX
- Enhance backend API support in controller and setting modules
* Add validation functions for console settings
* Include time and sorting utilities for announcement management
* Extend API endpoints for announcement and FAQ data persistence
- Improve frontend infrastructure
* Add new translation keys for internationalization support
* Update utility functions for date/time formatting
* Enhance CSS styles for better component presentation
* Add icons and visual improvements for announcements and FAQ sections
This implementation provides administrators with comprehensive tools to manage
system-wide announcements and user FAQ content through an intuitive console interface.
- Remove system name display from homepage title
- Replace with unified gateway branding: "统一的大模型接口网关"
- Add subtitle highlighting key benefits: price, stability, no subscription
- Implement language-specific title rendering:
- English: Two-line layout ("The Unified" / "LLMs API Gateway")
- Chinese: Single-line layout for better readability
- Increase title font sizes for better visual hierarchy
- Adjust vertical padding for improved centering
- Enhance overall visual appeal and user experience
This update modernizes the homepage presentation and provides better
localization support for different language preferences.
- Convert copy button to Input suffix for cleaner UI design
- Add responsive grid layout for balance cards and preset amounts
- Mobile (< md): single column layout for better readability
- Desktop (>= md): multi-column layout for space efficiency
- Implement bottom fixed payment panel on mobile devices
- Fixed positioning for easy access to payment options
- Includes custom amount input and payment method buttons
- Auto-hide on desktop to maintain original layout
- Improve mobile payment flow with sticky bottom controls
- Add proper spacing to prevent content overlap with fixed elements
- Maintain consistent functionality across all breakpoints
This update significantly improves the mobile user experience by making
payment controls easily accessible without scrolling, while preserving
the desktop layout and functionality.
- Replace local isDarkMode state with global useTheme hook in TopUp component
- Replace local isDarkMode state with global useTheme hook in PersonalSetting component
- Remove redundant theme detection useEffect hooks that caused state inconsistency
- Update theme condition checks from isDarkMode to theme === 'dark'
- Fix issue where components showed dark gradients in light mode due to theme state mismatch
- Clean up trailing commas in import statements
This ensures all components stay synchronized with the global theme system managed by HeaderBar's theme toggle button.
- Add speed test tag with gauge icon for each API route
- Integrate tcptest.cn service for API endpoint performance testing
- Implement handleSpeedTest callback to open speed test in new tab
- Add Tag component import from @douyinfe/semi-ui
- Use Gauge icon with white circular tag styling
- Position speed test tag before API route for better visibility
- URL encoding handles special characters for proper test URL generation
- Remove unused IconTestScoreStroked import and clean up comments
The speed test feature allows users to quickly test API endpoint
performance by clicking a small circular tag that opens the
tcptest.cn speed testing service with the encoded API URL.
- **Code Organization & Architecture:**
- Restructured component with clear sections (Hooks, Constants, Helper Functions, etc.)
- Added comprehensive code organization comments for better maintainability
- Extracted reusable helper functions and constants for better separation of concerns
- **Performance Optimizations:**
- Implemented extensive use of useCallback and useMemo hooks for expensive operations
- Optimized data processing pipeline with dedicated processing functions
- Memoized chart configurations, performance metrics, and grouped stats data
- Cached helper functions like getTrendSpec, handleCopyUrl, and modal handlers
- **UI/UX Enhancements:**
- Added Empty state component with construction illustrations for better UX
- Implemented responsive grid layout with conditional API info section visibility
- Enhanced button styling with consistent rounded design and hover effects
- Added mini trend charts to statistics cards for visual data representation
- Improved form field consistency with reusable createFormField helper
- **Feature Improvements:**
- Added self-use mode detection to conditionally hide/show API information section
- Enhanced chart configurations with centralized CHART_CONFIG constant
- Improved time handling with dedicated helper functions (getTimeInterval, getInitialTimestamp)
- Added comprehensive performance metrics calculation (RPM/TPM trends)
- Implemented advanced data aggregation and processing workflows
- **Code Quality & Maintainability:**
- Extracted complex data processing logic into dedicated functions
- Added proper prop destructuring and state organization
- Implemented consistent naming conventions and helper utilities
- Enhanced error handling and loading states management
- Added comprehensive JSDoc-style comments for better code documentation
- **Technical Debt Reduction:**
- Replaced repetitive form field definitions with reusable components
- Consolidated chart update logic into centralized updateChartSpec function
- Improved data flow with better state management patterns
- Reduced code duplication through strategic use of helper functions
This refactor significantly improves component performance, maintainability, and user experience while maintaining backward compatibility and existing functionality.
Add consistent empty state handling across all table components to improve
user experience when search/filter results are empty.
Changes:
- Import Empty component and IllustrationNoResult/IllustrationNoResultDark from @douyinfe/semi-ui
- Add empty prop to Table components with "搜索无结果" message
- Support both light and dark theme illustrations
- Apply internationalization support for empty state text
Affected files:
- web/src/components/table/MjLogsTable.js
- web/src/components/table/LogsTable.js
- web/src/components/table/ChannelsTable.js
- web/src/components/table/RedemptionsTable.js
- web/src/components/table/TaskLogsTable.js
- web/src/components/table/TokensTable.js
- web/src/components/table/UsersTable.js
- web/src/components/table/ModelPricing.js
This ensures consistent UX across all table components when no data
matches the current search or filter criteria.
- Import IconCopy from semi-icons for copy functionality
- Replace onClick handler with suffix copy button to fix disabled input issue
- Use borderless tertiary button as input suffix for better alignment
- Update notification messages formatting (colon spacing)
- Ensure password copying works even when input field is disabled
- Fix input field display issues in password reset confirmation page
* Replace `readOnly` with `disabled={true}` for proper field state
* Improve URL parameter parsing and state management
* Add proper null checks and fallback values
- Enhance user experience and error handling
* Add validation for invalid reset links
* Display appropriate error messages and placeholders
* Add debug logging for troubleshooting
* Improve button states and loading indicators
- Improve password reset form validation
* Add proper email input validation with error messages
* Enhance user feedback for empty email submissions
- Add missing English translations
* Add i18n support for new UI text strings
* Ensure proper internationalization coverage
The password reset confirmation page now correctly displays email addresses
from URL parameters and prevents user input as intended. Error handling
has been improved to provide better user guidance when reset links are
invalid or malformed.
Fixes: Password reset input fields showing empty and allowing user input
when they should display email/password and be read-only.
- Replace Banner with full-screen Spin component for better loading UX
- Add English translation for "正在跳转..." ("Redirecting...")
- Integrate i18next translation hook in Chat page component
- Remove unused useEffect import for cleaner code
The Chat page now shows a centered full-screen loading spinner instead of
a banner when redirecting, providing a more consistent and professional
user experience. The loading text is now properly internationalized and
will display "Redirecting..." in English and "正在跳转..." in Chinese.
- 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
Improve the model list section in PersonalSetting component with the following enhancements:
- Add category-based tabs for filtering models by provider (OpenAI, Anthropic, etc.)
- Implement skeleton loading states using Semi UI components
- Add empty state illustrations when no models are available
- Use Semi UI design tokens for consistent styling
- Optimize display for both expanded and collapsed model lists
- Simplify some button text labels for better UI consistency
- Refactored system initialization page using TailwindCSS 3 and SemiUI components
- Changed layout from step navigation to single page display for all configurations
- Modified top area from vertical to more compact horizontal layout
- Updated gradient color scheme from blue/purple to orange/pink
- Fixed form field name duplication issues and optimized Form implementation
- Changed usage mode selection from three-column grid to vertical layout
- Replaced usage mode card icons from settings to more appropriate Layers icon
- Added specific prompts for different database types (SQLite/MySQL/PostgreSQL)
- Removed configuration summary section while keeping the initialization button
- Fixed useSetupCheck issue by using SetupCheck as a direct component for proper redirection
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
- Replace showNotice with Semi Modal component for better UI consistency
- Add "Close Today" and "Close" actions for flexible notice control
- Improve markdown rendering with marked.parse
- Add responsive modal size based on device type
- Implement max height with scrollable content (60vh)
- Style scrollbar to match Semi design system
- Remove old notice caching logic for more reliable notifications
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.
BREAKING CHANGE: None
- UI Improvements:
- Add gradient backgrounds to card headers
- Enhance visual hierarchy with decorative elements
- Improve button styles with rounded corners and icons
- Standardize input field sizes and styles
- Add consistent border radius to components
- Code Optimizations:
- Remove unused imports (IconHelpCircle, IconKey, IconPlus)
- Remove unused showWarning import
- Remove unused loadChannelModels import
- Remove unused useRef and useParams hooks
- Clean up whitespace and formatting
- Style Enhancements:
- Convert static colors to gradient backgrounds
- Add floating circle decorations for visual interest
- Improve text contrast with white text on gradient backgrounds
- Add semi-transparent white backgrounds to icons
- Standardize card header layouts
- Accessibility:
- Improve text contrast ratios
- Maintain consistent visual hierarchy
- Add relative positioning for better overlay handling
This refactor focuses on modernizing the UI while maintaining all existing functionality. The changes are purely presentational and do not affect the component's behavior.
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.
- Replace simple form layout with sophisticated card-based design system
- Implement bank card-style wallet display with gradient backgrounds and decorative elements
- Integrate real user data from UserContext (username, quota, usage stats, user role, group)
- Add personalized color schemes using stringToColor for unique user identification
- Implement comprehensive responsive design for mobile, tablet, and desktop devices
- Add skeleton loading states for all data-dependent components and API calls
- Replace basic Input with InputNumber component for amount input with built-in validation (min: 1)
- Add official brand icons for payment methods (Alipay, WeChat) using react-icons/si
- Integrate Semi UI Banner component for better warning notifications
- Implement real-time data synchronization between local state and UserContext
- Add sophisticated loading states with proper error handling and user feedback
- Clean up all code comments and remove unused imports, functions, and state variables
- Enhance visual hierarchy with proper spacing, shadows, and modern typography
- Add glass-morphism effects and backdrop filters for premium visual experience
- Improve accessibility with proper text truncation and responsive font sizing
This update transforms the TopUp page from a basic form into a professional,
modern payment interface that provides excellent user experience across all devices
while maintaining full functionality and adding comprehensive data validation.
