chore(ui): enhance channel selector with status avatars and UI improvements

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.
This commit is contained in:
Apple\Apple
2025-06-19 16:05:50 +08:00
parent fb4ff63bad
commit 67546f4b2a
4 changed files with 144 additions and 59 deletions

View File

@@ -49,7 +49,7 @@ func FetchUpstreamRatios(c *gin.Context) {
req.Timeout = 10
}
// build upstream list from ids + custom
// build upstream list from ids
var upstreams []dto.UpstreamDTO
if len(req.ChannelIDs) > 0 {
// convert []int64 -> []int for model function