wood/clash-and-dashboard
1
0
Fork 0
mirror of https://github.com/woodchen-ink/clash-and-dashboard.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix: global mode should show all groups

Browse Source
This commit is contained in:
Dreamacro 2022-01-25 22:49:35 +08:00
parent c27f57eb1f
commit ad9a6addf4
5 changed files with 75 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/containers/Connections/index.tsx
View File

@ -209,12 +209,6 @@ export default function Connections () {
selectedID: '', selectedID: '',
connection: {} as Partial<Connection>, connection: {} as Partial<Connection>,
}) })
function handleConnectionSelected (id: string) {
setDrawerState({
visible: true,
selectedID: id,
})
}
function handleConnectionClosed () { function handleConnectionClosed () {
setDrawerState(d => { d.connection.completed = true }) setDrawerState(d => { d.connection.completed = true })
client.closeConnection(drawerState.selectedID) client.closeConnection(drawerState.selectedID)
@ -234,6 +228,66 @@ export default function Connections () {
} }
}, [data, drawerState.selectedID, latestConntion, setDrawerState]) }, [data, drawerState.selectedID, latestConntion, setDrawerState])
const scrolled = useMemo(() => scrollX > 0, [scrollX])
const headers = useMemo(() => headerGroup.headers.map((column, idx) => {
const realColumn = column as unknown as TableColumn<FormatConnection>
const id = realColumn.id
return (
<div
{...realColumn.getHeaderProps()}
className={classnames('connections-th', {
resizing: realColumn.isResizing,
fixed: realColumn.id === Columns.Host,
shadow: scrolled && realColumn.id === Columns.Host,
})}
key={id}>
<div {...realColumn.getSortByToggleProps()}>
{column.render('Header')}
{
realColumn.isSorted
? realColumn.isSortedDesc ? ' ↓' : ' ↑'
: null
}
</div>
{ idx !== headerGroup.headers.length - 1 &&
<div {...realColumn.getResizerProps()} className="connections-resizer" />
}
</div>
)
}), [headerGroup.headers, scrolled])
const content = useMemo(
() => rows.map(row => {
prepareRow(row)
return (
<div
{...row.getRowProps()}
className="cursor-default connections-item select-none"
key={row.original.id}
onClick={() => setDrawerState({ visible: true, selectedID: row.original.id })}>
{
row.cells.map(cell => {
const classname = classnames(
'connections-block',
{ 'text-center': shouldCenter.has(cell.column.id), completed: row.original.completed },
{
fixed: cell.column.id === Columns.Host,
shadow: scrollX > 0 && cell.column.id === Columns.Host,
},
)
return (
<div {...cell.getCellProps()} className={classname} key={cell.column.id}>
{ renderCell(cell)}
</div>
)
})
}
</div>
)
}),
[prepareRow, renderCell, rows, scrollX, setDrawerState],
)
return ( return (
<div className="page"> <div className="page">
<Header title={t('title')}> <Header title={t('title')}>
@ -247,63 +301,11 @@ export default function Connections () {
<Card ref={cardRef} className="connections-card relative"> <Card ref={cardRef} className="connections-card relative">
<div {...getTableProps()} className="flex flex-col flex-1 w-full overflow-auto" style={{ flexBasis: 0 }} ref={tableRef}> <div {...getTableProps()} className="flex flex-col flex-1 w-full overflow-auto" style={{ flexBasis: 0 }} ref={tableRef}>
<div {...headerGroup.getHeaderGroupProps()} className="connections-header"> <div {...headerGroup.getHeaderGroupProps()} className="connections-header">
{ { headers }
headerGroup.headers.map((column, idx) => {
const realColumn = column as unknown as TableColumn<FormatConnection>
const id = realColumn.id
return (
<div
{...realColumn.getHeaderProps()}
className={classnames('connections-th', {
resizing: realColumn.isResizing,
fixed: scrollX > 0 && realColumn.id === Columns.Host,
})}
key={id}>
<div {...realColumn.getSortByToggleProps()}>
{column.render('Header')}
{
realColumn.isSorted
? realColumn.isSortedDesc ? ' ↓' : ' ↑'
: null
}
</div>
{ idx !== headerGroup.headers.length - 1 &&
<div {...realColumn.getResizerProps()} className="connections-resizer" />
}
</div>
)
})
}
</div> </div>
<div {...getTableBodyProps()} className="flex-1"> <div {...getTableBodyProps()} className="flex-1">
{ { content }
rows.map(row => {
prepareRow(row)
return (
<div
{...row.getRowProps()}
className="cursor-default connections-item select-none"
key={row.original.id}
onClick={() => handleConnectionSelected(row.original.id)}>
{
row.cells.map(cell => {
const classname = classnames(
'connections-block',
{ 'text-center': shouldCenter.has(cell.column.id), completed: row.original.completed },
{ fixed: scrollX > 0 && cell.column.id === Columns.Host },
)
return (
<div {...cell.getCellProps()} className={classname} key={cell.column.id}>
{ renderCell(cell)}
</div>
)
})
}
</div>
)
})
}
</div> </div>
</div> </div>
</Card> </Card>

8
src/containers/Connections/style.scss
View File

@ -28,7 +28,9 @@
position: sticky !important; position: sticky !important;
left: 0; left: 0;
z-index: 99; z-index: 99;
box-shadow: inset -9px 0 8px -14px $color-black; &.shadow {
box-shadow: inset -9px 0 8px -14px $color-black;
}
} }
} }
@ -92,7 +94,9 @@
left: 0; left: 0;
z-index: 998; z-index: 998;
background-color: $color-white; background-color: $color-white;
box-shadow: inset -9px 0 8px -14px $color-black; &.shadow {
box-shadow: inset -9px 0 8px -14px $color-black;
}
} }
} }
} }

8
src/containers/Proxies/components/Group/style.scss
View File

@ -5,14 +5,6 @@
color: $color-black-light; color: $color-black-light;
} }
.proxies-group-item {
border-bottom: 1px solid $color-gray;
&:last-child {
border-bottom: none;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.proxy-group { .proxy-group {
flex-direction: column; flex-direction: column;

6
src/containers/Proxies/index.tsx
View File

@ -35,7 +35,7 @@ function ProxyGroups () {
const { t } = translation('Proxies') const { t } = translation('Proxies')
const list = useMemo( const list = useMemo(
() => general.mode === 'global' ? [global] : groups, () => general.mode === 'global' ? [global, ...groups] : groups,
[general, groups, global], [general, groups, global],
) )
@ -52,10 +52,10 @@ function ProxyGroups () {
</Checkbox> </Checkbox>
</Header> </Header>
<Card className="my-2.5 p-0 md:my-4"> <Card className="my-2.5 p-0 md:my-4">
<ul className="list-none"> <ul className="list-none divide-y divide-gray-300">
{ {
list.map(p => ( list.map(p => (
<li className="proxies-group-item" key={p.name}> <li key={p.name}>
<Group config={p} /> <Group config={p} />
</li> </li>
)) ))

11
src/lib/helper.ts
View File

@ -1,3 +1,5 @@
import { floor } from 'lodash-es'
// eslint-disable-next-line @typescript-eslint/no-empty-function // eslint-disable-next-line @typescript-eslint/no-empty-function
export function noop () {} export function noop () {}
@ -12,11 +14,6 @@ export function partition<T> (arr: T[], fn: (arg: T) => boolean): [T[], T[]] {
export function formatTraffic (num: number) { export function formatTraffic (num: number) {
const s = ['B', 'KB', 'MB', 'GB', 'TB'] const s = ['B', 'KB', 'MB', 'GB', 'TB']
let idx = 0 const exp = Math.floor(Math.log(num || 1) / Math.log(1024))
while (~~(num / 1024) && idx < s.length) { return `${floor(num / Math.pow(1024, exp), 2).toFixed(2)} ${s?.[exp] ?? ''}`
num /= 1024
idx++
}
return `${idx === 0 ? num : num.toFixed(2)} ${s[idx]}`
} }