• SettingsAnnouncements.js
– Placeholder now states “Supports Markdown/HTML” for both small & expanded editors
– Success/alert messages unified to use Chinese quotation marks
• SettingsFAQ.js
– Answer textarea placeholder updated with Markdown/HTML support note
– Unified success/alert messages punctuation
These tweaks clarify rich-text support and keep UI copy consistent.
* Added `Tooltip` component and ellipsis style for “question” & “answer” columns
* Keeps table compact while showing full content on hover
* Updated success messages punctuation for consistency
* 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
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.
Add reverse-chronological sorting for the announcements list so that the newest
items appear first in the dashboard.
No API changes; this only affects front-end display and user notifications.
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.
This commit relocates the DataDashboard settings component from the Operation section to the Dashboard section for better logical organization. The changes include:
- Remove DataDashboard import and component from OperationSetting.js
- Add DataDashboard component to DashboardSetting.js
- Update import path from Operation to Dashboard directory
- Add DataExport related state management in DashboardSetting
This restructuring improves the application's information architecture by grouping related dashboard visualization settings together.
- 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
- 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.
Add visual status indicators and improve user experience for the upstream ratio sync channel selector modal.
Features:
- Add status-based avatar indicators for channels (enabled/disabled/auto-disabled)
- Implement search functionality with text highlighting
- Add endpoint configuration input for each channel
- Optimize component structure with reusable ChannelInfo component
UI Improvements:
- Custom styling for transfer component items
- Hide scrollbars for cleaner appearance in transfer lists
- Responsive layout adjustments for channel information display
- Color-coded avatars: green (enabled), red (disabled), amber (auto-disabled), grey (unknown)
Code Quality:
- Extract channel status configuration to constants
- Create reusable ChannelInfo component to reduce code duplication
- Implement proper search filtering for both channel names and URLs
- Add consistent styling classes for transfer demo components
Files modified:
- web/src/components/settings/ChannelSelectorModal.js
- web/src/pages/Setting/Ratio/UpstreamRatioSync.js
- web/src/index.css
This enhancement provides better visual feedback for channel status and improves the overall user experience when selecting channels for ratio synchronization.
Remove all custom channel functionality from the upstream ratio sync feature to simplify the codebase and focus on database-stored channels only.
Changes:
- Remove custom channel UI components and related state management
- Remove custom channel testing and validation logic
- Simplify ChannelSelectorModal by removing custom channel input fields
- Update API payload to only include channel_ids, removing custom_channels
- Remove custom channel processing logic from backend controller
- Update import path for DEFAULT_ENDPOINT constant
Files modified:
- web/src/pages/Setting/Ratio/UpstreamRatioSync.js
- web/src/components/settings/ChannelSelectorModal.js
- controller/ratio_sync.go
This change streamlines the ratio synchronization workflow by focusing solely on pre-configured database channels, reducing complexity and potential maintenance overhead.
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
• 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:
• ConsoleSetting
- Introduce `ApiInfoEnabled`, `UptimeKumaEnabled`, `AnnouncementsEnabled`, `FAQEnabled` (default true).
• misc.GetStatus
- Refactor to build response map dynamically.
- Return the four *_enabled flags.
- Only append `api_info`, `announcements`, `faq` when their respective flags are true.
Frontend:
• Detail page
- Remove all `self_use_mode_enabled` checks.
- Render API, Announcement, FAQ and Uptime panels based on the new *_enabled flags.
• Dashboard → Settings
- Added `Switch` controls in:
· SettingsAPIInfo.js
· SettingsAnnouncements.js
· SettingsFAQ.js
· SettingsUptimeKuma.js
- Each switch persists its state via `/api/option` to the corresponding
`console_setting.<panel>_enabled` key and reflects current status on load.
- DashboardSetting.js now initialises and refreshes the four *_enabled keys so
child components receive accurate panel states.
Fixes:
• Switches previously defaulted to “on” because *_enabled keys were missing.
They are now included, ensuring correct visual state when panels are disabled.
No breaking changes; existing functionality remains untouched aside from the
new per-panel visibility control.
Backend
- Introduce `setting/console_setting` package that defines `ConsoleSetting` struct with JSON tags and validation rules.
- Register the new module with `config.GlobalConfig` to enable automatic injection/export of configuration values.
- Remove legacy `setting/console.go` and the manual `OptionMap` hooks; clean up `model/option.go`.
- Add `controller/console_migrate.go` providing `/api/option/migrate_console_setting` endpoint for one-off data migration.
- Update controllers (`misc`, `option`, `uptime_kuma`) and router to consume namespaced keys `console_setting.*`.
Frontend
- Refactor dashboard pages (`SettingsAPIInfo`, `SettingsAnnouncements`, `SettingsFAQ`, `SettingsUptimeKuma`) and detail page to read/write the new keys.
- Simplify `DashboardSetting.js` state to only include namespaced options.
BREAKING CHANGE: All console-related option keys are now stored under `console_setting.*`. Run the migration endpoint once after deployment to preserve existing data.
- Replace `showTotal` with `formatPageText` in Dashboard table components
- Unify pagination text format to match table components pattern
- Update SettingsAnnouncements.js, SettingsAPIInfo.js, and SettingsFAQ.js
- Change from "共 X 条记录，显示第 Y-Z 条" to "第 Y - Z 条，共 X 条" format
- Ensure consistent user experience across all table components
This change improves UI consistency by standardizing the pagination
text format across Dashboard and table components.
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.
- **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.
