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

Chore: update dependencies and connection info scroll y

Browse Source
This commit is contained in:
Dreamacro 2022-05-01 18:54:52 +08:00
parent b023c451f3
commit a928672ba1
6 changed files with 444 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -26,9 +26,9 @@
}, },
"devDependencies": { "devDependencies": {
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.6",
"@types/node": "^17.0.29", "@types/node": "^17.0.30",
"@types/react": "^18.0.8", "@types/react": "^18.0.8",
"@types/react-dom": "^18.0.2", "@types/react-dom": "^18.0.3",
"@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5", "@types/react-window": "^1.8.5",
"@typescript-eslint/eslint-plugin": "^5.21.0", "@typescript-eslint/eslint-plugin": "^5.21.0",
@ -45,7 +45,7 @@
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.5.0",
"sass": "^1.51.0", "sass": "^1.51.0",
"type-fest": "^2.12.2", "type-fest": "^2.12.2",
"typescript": "^4.6.3", "typescript": "^4.6.4",
"vite": "^2.9.6", "vite": "^2.9.6",
"vite-plugin-pwa": "^0.12.0", "vite-plugin-pwa": "^0.12.0",
"vite-plugin-windicss": "^1.8.4", "vite-plugin-windicss": "^1.8.4",
@ -54,7 +54,7 @@
}, },
"dependencies": { "dependencies": {
"@react-hookz/web": "^13.3.0", "@react-hookz/web": "^13.3.0",
"@tanstack/react-table": "^8.0.0-alpha.56", "@tanstack/react-table": "^8.0.0-alpha.58",
"axios": "^0.27.2", "axios": "^0.27.2",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"dayjs": "^1.11.1", "dayjs": "^1.11.1",

815
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

3
src/components/Drawer/index.tsx
View File

@ -8,6 +8,7 @@ import { BaseComponentProps } from '@models/BaseProps'
interface DrawerProps extends BaseComponentProps { interface DrawerProps extends BaseComponentProps {
visible?: boolean visible?: boolean
width?: number width?: number
bodyClassName?: string
containerRef?: RefObject<HTMLElement> containerRef?: RefObject<HTMLElement>
} }
@ -24,7 +25,7 @@ export function Drawer (props: DrawerProps) {
const container = ( const container = (
<div className={classnames(props.className, 'absolute inset-0 pointer-events-none z-9999')}> <div className={classnames(props.className, 'absolute inset-0 pointer-events-none z-9999')}>
<Card className={classnames(cardStyle, { 'translate-x-0': props.visible })} style={{ width: props.width ?? 400 }}>{props.children}</Card> <Card className={classnames(cardStyle, props.bodyClassName, { 'translate-x-0': props.visible })} style={{ width: props.width ?? 400 }}>{props.children}</Card>
</div> </div>
) )

26
src/containers/App.tsx
View File

@ -1,5 +1,5 @@
import classnames from 'classnames' import classnames from 'classnames'
import { Route, Navigate, Routes, useLocation } from 'react-router-dom' import { Route, Navigate, Routes, useLocation, Outlet } from 'react-router-dom'
// import Overview from '@containers/Overview' // import Overview from '@containers/Overview'
import Connections from '@containers/Connections' import Connections from '@containers/Connections'
@ -29,20 +29,26 @@ export default function App () {
{ path: '/settings', name: 'Settings', element: <Settings /> }, { path: '/settings', name: 'Settings', element: <Settings /> },
] ]
return ( const layout = (
<div className={classnames('app', { 'not-clashx': !isClashX() })}> <div className={classnames('app', { 'not-clashx': !isClashX() })}>
<SideBar routes={routes} /> <SideBar routes={routes} />
<div className="page-container"> <div className="page-container">
<Routes> <Outlet />
<Route path="/" element={<Navigate to={{ pathname: '/proxies', search: location.search }} replace />} />
{
routes.map(
route => <Route path={route.path} key={route.path} element={route.element} />,
)
}
</Routes>
</div> </div>
<ExternalControllerModal /> <ExternalControllerModal />
</div> </div>
) )
return (
<Routes>
<Route path="/" element={layout}>
<Route path="/" element={<Navigate to={{ pathname: '/proxies', search: location.search }} replace />} />
{
routes.map(
route => <Route path={route.path} key={route.path} element={route.element} />,
)
}
</Route>
</Routes>
)
} }

2
src/containers/Connections/Info/index.tsx
View File

@ -16,7 +16,7 @@ export function ConnectionInfo (props: ConnectionsInfoProps) {
const t = useMemo(() => translation('Connections').t, [translation]) const t = useMemo(() => translation('Connections').t, [translation])
return ( return (
<div className={classnames(props.className, 'text-sm flex flex-col')}> <div className={classnames(props.className, 'text-sm flex flex-col overflow-y-auto')}>
<div className="flex my-3"> <div className="flex my-3">
<span className="font-bold w-20">{t('info.id')}</span> <span className="font-bold w-20">{t('info.id')}</span>
<span className="font-mono">{props.connection.id}</span> <span className="font-mono">{props.connection.id}</span>

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

@ -100,19 +100,19 @@ export default function Connections () {
const intersection = useIntersectionObserver(pinRef, { threshold: [1] }) const intersection = useIntersectionObserver(pinRef, { threshold: [1] })
const columns = useMemo( const columns = useMemo(
() => table.createColumns([ () => table.createColumns([
table.createDataColumn(Columns.Host, { minWidth: 260, width: 260, header: t(`columns.${Columns.Host}`) }), table.createDataColumn(Columns.Host, { minSize: 260, size: 260, header: t(`columns.${Columns.Host}`) }),
table.createDataColumn(Columns.Network, { minWidth: 80, width: 80, header: t(`columns.${Columns.Network}`) }), table.createDataColumn(Columns.Network, { minSize: 80, size: 80, header: t(`columns.${Columns.Network}`) }),
table.createDataColumn(Columns.Type, { minWidth: 100, width: 100, header: t(`columns.${Columns.Type}`) }), table.createDataColumn(Columns.Type, { minSize: 100, size: 100, header: t(`columns.${Columns.Type}`) }),
table.createDataColumn(Columns.Chains, { minWidth: 200, width: 200, header: t(`columns.${Columns.Chains}`) }), table.createDataColumn(Columns.Chains, { minSize: 200, size: 200, header: t(`columns.${Columns.Chains}`) }),
table.createDataColumn(Columns.Rule, { minWidth: 140, width: 140, header: t(`columns.${Columns.Rule}`) }), table.createDataColumn(Columns.Rule, { minSize: 140, size: 140, header: t(`columns.${Columns.Rule}`) }),
table.createDataColumn(Columns.Process, { minWidth: 100, width: 100, header: t(`columns.${Columns.Process}`), cell: cell => cell.value ? basePath(cell.value) : '-' }), table.createDataColumn(Columns.Process, { minSize: 100, size: 100, header: t(`columns.${Columns.Process}`), cell: cell => cell.value ? basePath(cell.value) : '-' }),
table.createDataColumn( table.createDataColumn(
row => [row.speed.upload, row.speed.download], row => [row.speed.upload, row.speed.download],
{ {
id: Columns.Speed, id: Columns.Speed,
header: t(`columns.${Columns.Speed}`), header: t(`columns.${Columns.Speed}`),
minWidth: 200, minSize: 200,
width: 200, size: 200,
sortDescFirst: true, sortDescFirst: true,
sortingFn (rowA, rowB) { sortingFn (rowA, rowB) {
const speedA = rowA.original?.speed ?? { upload: 0, download: 0 } const speedA = rowA.original?.speed ?? { upload: 0, download: 0 }
@ -124,14 +124,14 @@ export default function Connections () {
cell: cell => formatSpeed(cell.value[0], cell.value[1]), cell: cell => formatSpeed(cell.value[0], cell.value[1]),
}, },
), ),
table.createDataColumn(Columns.Upload, { minWidth: 100, width: 100, header: t(`columns.${Columns.Upload}`), cell: cell => formatTraffic(cell.value) }), table.createDataColumn(Columns.Upload, { minSize: 100, size: 100, header: t(`columns.${Columns.Upload}`), cell: cell => formatTraffic(cell.value) }),
table.createDataColumn(Columns.Download, { minWidth: 100, width: 100, header: t(`columns.${Columns.Download}`), cell: cell => formatTraffic(cell.value) }), table.createDataColumn(Columns.Download, { minSize: 100, size: 100, header: t(`columns.${Columns.Download}`), cell: cell => formatTraffic(cell.value) }),
table.createDataColumn(Columns.SourceIP, { minWidth: 140, width: 140, header: t(`columns.${Columns.SourceIP}`), filterFn: 'equals' }), table.createDataColumn(Columns.SourceIP, { minSize: 140, size: 140, header: t(`columns.${Columns.SourceIP}`), filterFn: 'equals' }),
table.createDataColumn( table.createDataColumn(
Columns.Time, Columns.Time,
{ {
minWidth: 120, minSize: 120,
width: 120, size: 120,
header: t(`columns.${Columns.Time}`), header: t(`columns.${Columns.Time}`),
cell: cell => fromNow(new Date(cell.value), lang), cell: cell => fromNow(new Date(cell.value), lang),
sortingFn: (rowA, rowB) => (rowB.original?.time ?? 0) - (rowA.original?.time ?? 0), sortingFn: (rowA, rowB) => (rowB.original?.time ?? 0) - (rowA.original?.time ?? 0),
@ -223,7 +223,7 @@ export default function Connections () {
shadow: scrolled && column.id === Columns.Host, shadow: scrolled && column.id === Columns.Host,
}) })
!props.style && (props.style = {}) !props.style && (props.style = {})
props.style.width = header.getWidth() props.style.width = header.getSize()
}), }),
)} )}
ref={column.id === Columns.Host ? pinRef : undefined} ref={column.id === Columns.Host ? pinRef : undefined}
@ -266,7 +266,7 @@ export default function Connections () {
(props: BaseComponentProps) => produce(props, props => { (props: BaseComponentProps) => produce(props, props => {
!props.style && (props.style = {}) !props.style && (props.style = {})
props.className = classname props.className = classname
props.style.width = cell.column.getWidth() props.style.width = cell.column.getSize()
}), }),
)} )}
key={cell.column.id}> key={cell.column.id}>
@ -305,7 +305,7 @@ export default function Connections () {
</div> </div>
</Card> </Card>
<Modal title={t('closeAll.title')} show={visible} onClose={hide} onOk={handleCloseConnections}>{t('closeAll.content')}</Modal> <Modal title={t('closeAll.title')} show={visible} onClose={hide} onOk={handleCloseConnections}>{t('closeAll.content')}</Modal>
<Drawer containerRef={cardRef} visible={drawerState.visible} width={450}> <Drawer containerRef={cardRef} bodyClassName="flex flex-col" visible={drawerState.visible} width={450}>
<div className="flex h-8 justify-between items-center"> <div className="flex h-8 justify-between items-center">
<span className="font-bold pl-3">{t('info.title')}</span> <span className="font-bold pl-3">{t('info.title')}</span>
<Icon type="close" size={16} className="cursor-pointer" onClick={() => setDrawerState('visible', false)} /> <Icon type="close" size={16} className="cursor-pointer" onClick={() => setDrawerState('visible', false)} />