Replaced every instance of
<div className="mt-[64px]">
with
<div className="mt-[64px] px-2">
to provide uniform horizontal padding across pages. No functional changes—visual layout improvement only.
• Added read-only Base URL input that shows `status.server_address` (fallback `window.location.origin`) and copies value on click.
• Embedded `ScrollList` as input `suffix`; auto-cycles common endpoints every 3 s and allows manual selection.
• Introduced `API_ENDPOINTS` array in `web/src/constants/common.constant.js` for centralized endpoint management.
• Implemented custom CSS to hide ScrollList wheel indicators / scrollbars for a cleaner look.
• Created two blurred colour spheres behind the banner (`blur-ball-indigo`, `blur-ball-teal`) with light-/dark-mode opacity tweaks and lower vertical placement.
• Increased letter-spacing for Chinese heading via conditional `tracking-wide` / `md:tracking-wider` classes to improve readability.
• Misc: updated imports, helper functions, and responsive sizes to keep UI consistent across devices.
* Added “Expand Edit” button with `Maximize2` icon to open a large modal editor
* Introduced full-screen `TextArea` modal; content syncs back to main form via Form API
* Switched to correct `TextArea` import from Semi UI to fix invalid element error
* Implemented ellipsis & `Tooltip` for “content” and “extra” columns to keep table concise
* Added state management (`showContentModal`, `formApiRef`) and related handlers
* Updated success messages & punctuation for consistency
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.
- Create a new DrawingSetting component for managing drawing-related configurations
- Add a dedicated "Drawing Settings" tab with Palette icon in the settings page
- Remove drawing settings section from the OperationSetting component
- Update import path to use Drawing directory instead of Operation directory
- Improve UI organization by separating drawing settings from general operations
- Add icons to each settings tab to enhance visual recognition
- Import necessary Lucide React icons (Settings, Calculator, Gauge, Shapes, etc.)
- Create consistent tab styling with icons aligned next to text
- Reorder tabs to place "Other Settings" as the last option
- Improve overall settings page UI with better visual hierarchy
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.
- **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.
- Added a new GeneralSetting struct to manage configurable docs link
- Removed hardcoded ChatLink and ChatLink2 variables across multiple files
- Updated frontend components to dynamically render docs link from status
- Simplified chat and link-related logic in various components
- Added a warning modal for quota per unit setting in operation settings
- Added internationalization (i18n) support across various components, enabling dynamic language switching and improved user experience.
- Updated multiple components to utilize translation functions for labels, buttons, and messages, ensuring consistent language display.
- Enhanced the user interface by refining text elements in the ChannelsTable, LogsTable, and various settings pages, improving clarity and accessibility.
- Adjusted CSS styles for better responsiveness and layout consistency across different screen sizes.
