* 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.
• 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.
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
Enhance the UI of payment method selection area with responsive layouts:
- Use 2-column grid when exactly 2 payment methods are present
- Use 3-column grid for 3 payment methods
- Use compact card layout for more than 3 payment methods
- Full-width button for single payment method
This improves the visual balance across different device sizes and payment provider configurations, ensuring buttons fill their grid cells appropriately with the w-full class.
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.
Problem
Semi UI’s Tabs calls `focus()` on the active tab during mount, causing the browser to scroll the page to that element.
Using the bare `preventScroll` shorthand was not picked up reliably, so the page still jumped to the Tabs’ position on first render.
Changes
• Updated both Tabs instances in `web/src/pages/Detail/index.js` to `preventScroll={true}` instead of the shorthand prop.
• Ensures the prop is explicitly interpreted as boolean `true`, converting the internal call to `focus({ preventScroll: true })`.
Result
The `Detail` page now stays at its original scroll position after load, eliminating the unexpected auto-scroll behavior.
The initial render of the `Detail` page was jumping to the first `Tabs` component because Semi UI calls `focus()` on the active tab, which triggers the browser’s default scroll-into-view behavior.
Changes made
• Added `preventScroll` to the chart-selector `Tabs` (type="button").
• Added `preventScroll` to the uptime-monitor `Tabs` (type="card").
These flags convert the internal `focus()` call to `focus({ preventScroll: true })`, allowing the page to stay at its current position after load.
No functional logic is changed other than disabling the unwanted scroll; UI and user interactions remain the same.
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.
The “Batch Create” secret-key input in Channel Edit previously used a TextArea
with a hard-coded `minHeight`, which caused an extra scrollbar and blank space
on the right side of the field.
This change:
• Removes the fixed `minHeight` in favour of `autosize={{ minRows: 6, maxRows: 6 }}`
• Keeps the field’s rounded appearance while letting it grow/shrink with
content, improving usability on both desktop and mobile
No other components or global styles are 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.
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:
• 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.
