frontend(ChannelsTable):
• Do not render type-filter Tabs when `enableTagMode` is true, preventing UI/logic conflicts in tag aggregation view.
• Adjust API query construction:
– Append `type=` param only when NOT in tag mode and selected tab ≠ 'all'.
– Applies to both `loadChannels` and `searchChannels`.
• Result: UI stays clean in tag view, and backend receives correct parameters across modes.
No other functionality affected.
feat(api):
• Add optional `type` query param to `/api/channel` endpoint for type-specific pagination
• Return `type_counts` map with counts for each channel type
• Implement `GetChannelsByType`, `CountChannelsByType`, `CountChannelsGroupByType` in `model/channel.go`
feat(frontend):
• Introduce type Tabs in `ChannelsTable` to switch between channel types
• Tabs show dynamic counts using backend `type_counts`; “All” is computed from sum
• Persist active type, reload data on tab change (with proper query params)
perf(frontend):
• Use a request counter (`useRef`) to discard stale responses when tabs switch quickly
• Move all `useMemo` hooks to top level to satisfy React Hook rules
• Remove redundant local type counting fallback when backend data present
ui:
• Remove icons from response-time tags for cleaner look
• Use Semi-UI native arrow controls for Tabs; custom arrow code deleted
chore:
• Minor refactor & comments for clarity
• Ensure ESLint Hook rules pass
Result: Channel list now supports fast, accurate type filtering with correct counts, improved concurrency safety, and cleaner UI.
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.
Improve UX by hiding the vertical scrollbar inside the announcement (NoticeModal)
while keeping the content scrollable.
Changes
• NoticeModal.js
- Introduce `notice-content-scroll` class to the content wrapper.
- Remove inline custom scrollbar styling for cleaner code.
• index.css
- Add `.notice-content-scroll` to the global hidden-scrollbar rules, ensuring
scrollbars are hidden across browsers.
Result
Users can still scroll through long announcements, but no scrollbar is shown,
giving the modal a cleaner and more consistent appearance.
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.
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
- 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.
Fix the search button loading state to be consistent with other table components.
The search button now properly shows loading animation when the table data is
being fetched.
Changes:
- Update search button loading prop from `loading={searching}` to
`loading={loading || searching}` in TokensTable.js
- This ensures loading state is shown both when searching with keywords
(searching=true) and when loading default data (loading=true)
- Aligns with the behavior of other table components like ChannelsTable,
UsersTable, and RedemptionsTable
Before: Search button only showed loading when searching with keywords
After: Search button shows loading for all table data fetch operations
* Removed `size="middle"` and `centered` props from the column-selector
`Modal` in `ChannelsTable.js` to match the visual style used in
`LogsTable`.
* Re-added `size="middle"` to the main `Table` component to preserve the
original table sizing.
* Ensures consistent UI/UX across both channel and log column settings
modals.
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 IconForward import from @douyinfe/semi-icons
- Add Route icon import from lucide-react
- Update model redirection indicator in LogsTable component
The Route icon better represents the concept of model redirection
compared to the generic forward arrow, providing clearer visual
context for users when models are mapped to different upstream models.
- Hide scrollbars for .semi-layout, .semi-layout-content, and .semi-sider
- Set scrollbar width and height to 0 for webkit browsers
- Add cross-browser scrollbar hiding support (webkit, firefox, IE/Edge)
- Change Content container overflow from 'auto' to 'hidden' on desktop
- Remove redundant scrollbar styling (thumb, hover, track styles)
This ensures that all semi-layout related components have no visible
scrollbars and prevents vertical scrolling functionality entirely.
Files modified:
- web/src/index.css
- web/src/components/layout/PageLayout.js
- 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 min-w-[120px] class to Form.Select component for log type filtering
- Remove redundant min-width constraint from parent div container
- Ensure consistent dropdown width across different screen sizes
- Improve UI consistency and readability for log type selection
- Move Form.Select (log type selector) from grid layout to action button row
- Position log type selector on the left side of the action button area
- Keep action buttons (Query, Reset, Column Settings) aligned to the right
- Implement responsive design with sm: breakpoint (640px)
- Mobile: vertical stacking with full-width elements
- Desktop: horizontal layout with proper spacing
- Add min-width constraint (140px) for log type selector
- Remove extra padding-top from button area for cleaner spacing
- Maintain accessibility and usability across all screen sizes
This change improves the UI layout by better utilizing horizontal space
and providing a more intuitive grouping of form controls and actions.
- **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.
- Remove colorful gradient backgrounds from dashboard panel headers in Detail page
- Replace custom header styling with default Semi-UI card title styling
- Remove background images and gradient overlays from all authentication pages
- Simplify authentication page layouts with clean gray backgrounds
- Update title text colors from white to dark gray for better contrast
- Remove unnecessary z-index layering and complex positioning
- Clean up unused background image imports
This change creates a more professional and consistent visual appearance
across the application by removing distracting visual elements.
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.
- Replace IconList with Tags icon from lucide-react for better semantic representation
- Update renderTagType function to use Tags icon instead of list icon
- Remove unused IconList import from semi-icons
- Improve visual clarity for tag aggregation feature in channels table
The Tags icon better represents the concept of multiple tags being aggregated
together, providing more intuitive user experience in the channels management
interface.
- Add semantic icons to ChannelsTable.js for channel status, response time, and quota display
- Add status and quota icons to TokensTable.js for better visual distinction
- Add status and quota icons to RedemptionsTable.js for redemption code management
- Add role, status, and statistics icons to UsersTable.js for user management
- Import appropriate lucide-react icons for each table component
- Enhance UI consistency and user experience across all table interfaces
Icons added include:
- Status indicators: CheckCircle, XCircle, AlertCircle, HelpCircle
- Performance metrics: Zap, Timer, Clock, AlertTriangle, TestTube
- Financial data: Coins, DollarSign
- User roles: User, Shield, Crown
- Activity tracking: Activity, Users, UserPlus
This improves visual clarity and makes table data more intuitive to understand.
Fix inconsistent loading state behavior where search buttons in ChannelsTable,
RedemptionsTable, and UsersTable didn't display loading animation when tables
were loading data, unlike LogsTable which handled this correctly.
Changes:
- Fix ChannelsTable searchChannels function to properly manage loading state
- Move setSearching(true) to function start and use try-finally pattern
- Ensure loading state is set for both search and load operations
- Update search button loading prop in ChannelsTable: loading={searching} → loading={loading || searching}
- Update search button loading prop in RedemptionsTable: loading={searching} → loading={loading || searching}
- Update search button loading prop in UsersTable: loading={searching} → loading={loading || searching}
This ensures search buttons show loading state consistently when:
- Table is loading data (initial load, pagination, operations)
- Search operation is in progress
All table components now provide unified UX behavior matching LogsTable,
preventing duplicate clicks and clearly indicating system state to users.
- Refactor LogsTable, MjLogsTable, TokensTable, UsersTable, and ChannelsTable to use Semi-UI Form components
- Replace individual input state management with centralized Form API
- Add form validation and consistent form handling across all tables
- Implement auto-search functionality with proper state update timing
- Add reset functionality to clear all search filters
- Improve responsive layout design for better mobile experience
- Remove duplicate form initial values and consolidate form logic
- Remove column visibility feature from ChannelsTable to simplify UI
- Standardize search form structure and styling across all table components
- Fix state update timing issues in search functionality
- Add proper form submission handling with loading states
BREAKING CHANGE: Form state management has been completely rewritten.
All table components now use Form API instead of individual useState hooks.
Column visibility settings for ChannelsTable have been removed.
- Refactor Form component to use Semi Design best practices
- Remove duplicate initValues configuration for DatePicker
- Add real-time value change monitoring with onValueChange
- Implement auto-search functionality for log type selector changes
- Fix state synchronization issues causing stale values in search requests
- Optimize form layout with proper vertical layout configuration
- Enhance user experience with placeholders, clear buttons, and search icons
- Remove logType parameter passing to prevent async state update conflicts
- Ensure all form controls use latest values from formApi instead of stale state
- Add proper validation triggers and error handling configuration
- Improve reset button logic with proper timing for form state updates
The changes resolve the issue where users needed to select log type twice
for the search request to use the correct value, and ensure all form
interactions provide immediate and accurate results.
