gitea-admin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2026-11-11 21:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: group tools filter and layout (#7431)

Browse Source 
* fix(proxy): group filter

* refactor(proxy): improve layout and structure of proxy render components

* refactor(proxy): remove unnecessary flushSync calls in proxy-group-tools

* feat(proxy): debounce filter input in ProxyGroupTools

* refactor(base-search-box): initialize lastSearchStateRef with current state

* refactor(proxy): remove debug console.log in proxy-groups

* refactor(proxy): improve scrolling behavior in proxy groups

* refactor(proxy): improve scroll position restoration logic

* chore(proxy): reset proxy group tools layout

* style(proxy): adjust margins and spacing in proxy components

* refactor(proxy): remove commented out ProxyGroupTools component
This commit is contained in:
oomeow
2026-07-11 07:38:32 +00:00
committed by GitHub
parent 562828e14d
commit 1847002ebe
5 changed files with 195 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/proxy/proxy-render.tsx
+101 -80
View File
@@ -106,94 +106,115 @@ export const ProxyRender = memo(function ProxyRender(props: RenderProps) {
onHeadState?.(group.name, { open: !headState?.open })
}}
>
{enable_group_icon && group.icon?.trim().startsWith('http') && (
<img
src={iconCachePath === '' ? group.icon : iconCachePath}
alt="group icon"
width="32px"
style={{ marginRight: '12px', borderRadius: '6px' }}
/>
)}
{enable_group_icon && group.icon?.trim().startsWith('data') && (
<img
src={group.icon}
alt="group icon"
width="32px"
style={{ marginRight: '12px', borderRadius: '6px' }}
/>
)}
{enable_group_icon && group.icon?.trim().startsWith('<svg') && (
<img
src={`data:image/svg+xml;base64,${btoa(group.icon)}`}
alt="group icon"
width="32px"
/>
)}
<ListItemText
primary={<StyledPrimary>{group.name}</StyledPrimary>}
secondary={
<Box sx={{ width: '100%' }}>
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
{enable_group_icon && group.icon?.trim().startsWith('http') && (
<img
src={iconCachePath === '' ? group.icon : iconCachePath}
alt="group icon"
width="32px"
style={{ marginRight: '12px', borderRadius: '6px' }}
/>
)}
{enable_group_icon && group.icon?.trim().startsWith('data') && (
<img
src={group.icon}
alt="group icon"
width="32px"
style={{ marginRight: '12px', borderRadius: '6px' }}
/>
)}
{enable_group_icon && group.icon?.trim().startsWith('<svg') && (
<img
src={`data:image/svg+xml;base64,${btoa(group.icon)}`}
alt="group icon"
width="32px"
/>
)}
<ListItemText
sx={{ flex: '0 1 auto', minWidth: 0 }}
primary={<StyledPrimary>{group.name}</StyledPrimary>}
secondary={
<Box
sx={{
display: 'flex',
alignItems: 'center',
pt: '2px',
overflow: 'hidden',
whiteSpace: 'nowrap',
}}
>
<Box
component="span"
sx={{
marginTop: '2px',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
<StyledTypeBox>{group.type}</StyledTypeBox>
<StyledSubtitle sx={{ color: 'text.secondary' }}>
{group.now}
</StyledSubtitle>
</Box>
</Box>
}
slotProps={{
secondary: {
component: 'div',
sx: {
display: 'flex',
alignItems: 'center',
color: '#ccc',
},
},
}}
/>
<Box
sx={{
display: 'flex',
alignItems: 'center',
pt: '2px',
overflow: 'hidden',
whiteSpace: 'nowrap',
}}
>
<Box
component="span"
sx={{
marginTop: '2px',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
<StyledTypeBox>{group.type}</StyledTypeBox>
<StyledSubtitle sx={{ color: 'text.secondary' }}>
{group.now}
</StyledSubtitle>
</Box>
</Box>
}
slotProps={{
secondary: {
component: 'div',
sx: { display: 'flex', alignItems: 'center', color: '#ccc' },
},
}}
/>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<ProxyGroupTools
url={group.testUrl}
groupName={group.name}
headState={headState!}
onLocation={() => onLocation(group)}
onCheckDelay={() => onCheckAll(group.name)}
onHeadState={(p) => onHeadState(group.name, p)}
/>
<Tooltip title={t('proxies.page.labels.proxyCount')} arrow>
<div
style={{
minWidth: '50px',
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
flex: '1 1 auto',
minWidth: 0,
}}
>
<Chip
size="small"
label={`${group.all.length}`}
sx={{
mr: 1,
backgroundColor: (theme) =>
alpha(theme.palette.primary.main, 0.1),
color: (theme) => theme.palette.primary.main,
}}
<ProxyGroupTools
url={group.testUrl}
groupName={group.name}
headState={headState!}
onLocation={() => onLocation(group)}
onCheckDelay={() => onCheckAll(group.name)}
onHeadState={(p) => onHeadState(group.name, p)}
/>
</div>
</Tooltip>
{headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
<Tooltip title={t('proxies.page.labels.proxyCount')} arrow>
<div
style={{
minWidth: '50px',
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
}}
>
<Chip
size="small"
label={`${group.all.length}`}
sx={{
mr: 1,
backgroundColor: (theme) =>
alpha(theme.palette.primary.main, 0.1),
color: (theme) => theme.palette.primary.main,
}}
/>
</div>
</Tooltip>
{headState?.open ? (
<ExpandLessRounded />
) : (
<ExpandMoreRounded />
)}
</Box>
</Box>
</Box>
</ListItemButton>
</div>