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

Chore: update dependencies

Browse Source
This commit is contained in:
Dreamacro 2022-05-28 09:13:08 +08:00
parent e252f85aa8
commit 930d3d54e4
4 changed files with 1002 additions and 929 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.npmrc Normal file
View File

@ -0,0 +1 @@
strict-peer-dependencies=false

36
package.json
View File

@ -26,15 +26,15 @@
}, },
"devDependencies": { "devDependencies": {
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.6",
"@types/node": "^17.0.30", "@types/node": "^17.0.35",
"@types/react": "^18.0.8", "@types/react": "^18.0.9",
"@types/react-dom": "^18.0.3", "@types/react-dom": "^18.0.5",
"@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.26.0",
"@typescript-eslint/parser": "^5.21.0", "@typescript-eslint/parser": "^5.26.0",
"@vitejs/plugin-react": "^1.3.1", "@vitejs/plugin-react": "^1.3.2",
"eslint": "^8.14.0", "eslint": "^8.16.0",
"eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0", "eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-standard-with-typescript": "^21.0.1", "eslint-config-standard-with-typescript": "^21.0.1",
@ -43,24 +43,24 @@
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0", "eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.5.0",
"sass": "^1.51.0", "sass": "^1.52.1",
"type-fest": "^2.12.2", "type-fest": "^2.13.0",
"typescript": "^4.6.4", "typescript": "^4.7.2",
"vite": "^2.9.6", "vite": "^2.9.9",
"vite-plugin-pwa": "^0.12.0", "vite-plugin-pwa": "^0.12.0",
"vite-plugin-windicss": "^1.8.4", "vite-plugin-windicss": "^1.8.4",
"vite-tsconfig-paths": "^3.4.1", "vite-tsconfig-paths": "^3.5.0",
"windicss": "^3.5.1" "windicss": "^3.5.4"
}, },
"dependencies": { "dependencies": {
"@react-hookz/web": "^13.3.0", "@react-hookz/web": "^14.2.2",
"@tanstack/react-table": "^8.0.0-alpha.58", "@tanstack/react-table": "^8.0.0-beta.2",
"axios": "^0.27.2", "axios": "^0.27.2",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"dayjs": "^1.11.1", "dayjs": "^1.11.2",
"eventemitter3": "^4.0.7", "eventemitter3": "^4.0.7",
"immer": "^9.0.12", "immer": "^9.0.14",
"jotai": "^1.6.5", "jotai": "^1.6.7",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"neverthrow": "^4.3.1", "neverthrow": "^4.3.1",
"react": "^18.1.0", "react": "^18.1.0",

1825
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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

@ -1,7 +1,6 @@
import { useIntersectionObserver, useSyncedRef, useUnmountEffect } from '@react-hookz/web/esm' import { useIntersectionObserver, useSyncedRef, useUnmountEffect } from '@react-hookz/web/esm'
import { useTableInstance, createTable, getSortedRowModelSync, getColumnFilteredRowModelSync, getCoreRowModelSync } from '@tanstack/react-table' import { useTableInstance, createTable, getSortedRowModel, getFilteredRowModel, getCoreRowModel } from '@tanstack/react-table'
import classnames from 'classnames' import classnames from 'classnames'
import produce from 'immer'
import { groupBy } from 'lodash-es' import { groupBy } from 'lodash-es'
import { useMemo, useLayoutEffect, useRef, useState, useEffect } from 'react' import { useMemo, useLayoutEffect, useRef, useState, useEffect } from 'react'
@ -10,7 +9,6 @@ import { fromNow } from '@lib/date'
import { basePath, formatTraffic } from '@lib/helper' import { basePath, formatTraffic } from '@lib/helper'
import { useObject, useVisible } from '@lib/hook' import { useObject, useVisible } from '@lib/hook'
import * as API from '@lib/request' import * as API from '@lib/request'
import { BaseComponentProps } from '@models'
import { useClient, useConnectionStreamReader, useI18n } from '@stores' import { useClient, useConnectionStreamReader, useI18n } from '@stores'
import { Devices } from './Devices' import { Devices } from './Devices'
@ -100,13 +98,13 @@ export default function Connections () {
const pinRef = useRef<HTMLTableCellElement>(null) const pinRef = useRef<HTMLTableCellElement>(null)
const intersection = useIntersectionObserver(pinRef, { threshold: [1] }) const intersection = useIntersectionObserver(pinRef, { threshold: [1] })
const columns = useMemo( const columns = useMemo(
() => table.createColumns([ () => [
table.createDataColumn(Columns.Host, { minSize: 260, size: 260, header: t(`columns.${Columns.Host}`) }), table.createDataColumn(Columns.Host, { minSize: 260, size: 260, header: t(`columns.${Columns.Host}`) }),
table.createDataColumn(Columns.Network, { minSize: 80, size: 80, header: t(`columns.${Columns.Network}`) }), table.createDataColumn(Columns.Network, { minSize: 80, size: 80, header: t(`columns.${Columns.Network}`) }),
table.createDataColumn(Columns.Type, { minSize: 100, size: 100, header: t(`columns.${Columns.Type}`) }), table.createDataColumn(Columns.Type, { minSize: 100, size: 100, header: t(`columns.${Columns.Type}`) }),
table.createDataColumn(Columns.Chains, { minSize: 200, size: 200, header: t(`columns.${Columns.Chains}`) }), table.createDataColumn(Columns.Chains, { minSize: 200, size: 200, header: t(`columns.${Columns.Chains}`) }),
table.createDataColumn(Columns.Rule, { minSize: 140, size: 140, header: t(`columns.${Columns.Rule}`) }), table.createDataColumn(Columns.Rule, { minSize: 140, size: 140, header: t(`columns.${Columns.Rule}`) }),
table.createDataColumn(Columns.Process, { minSize: 100, size: 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.getValue() ? basePath(cell.getValue()!) : '-' }),
table.createDataColumn( table.createDataColumn(
row => [row.speed.upload, row.speed.download], row => [row.speed.upload, row.speed.download],
{ {
@ -122,11 +120,11 @@ export default function Connections () {
? speedA.upload - speedB.upload ? speedA.upload - speedB.upload
: speedA.download - speedB.download : speedA.download - speedB.download
}, },
cell: cell => formatSpeed(cell.value[0], cell.value[1]), cell: cell => formatSpeed(cell.getValue()[0], cell.getValue()[1]),
}, },
), ),
table.createDataColumn(Columns.Upload, { minSize: 100, size: 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.getValue()) }),
table.createDataColumn(Columns.Download, { minSize: 100, size: 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.getValue()) }),
table.createDataColumn(Columns.SourceIP, { minSize: 140, size: 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,
@ -134,11 +132,11 @@ export default function Connections () {
minSize: 120, minSize: 120,
size: 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.getValue()), lang),
sortingFn: (rowA, rowB) => (rowB.original?.time ?? 0) - (rowA.original?.time ?? 0), sortingFn: (rowA, rowB) => (rowB.original?.time ?? 0) - (rowA.original?.time ?? 0),
}, },
), ),
]), ],
[lang, t], [lang, t],
) )
@ -166,16 +164,14 @@ export default function Connections () {
const instance = useTableInstance(table, { const instance = useTableInstance(table, {
data, data,
columns, columns,
getCoreRowModel: getCoreRowModelSync(), getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModelSync(), getSortedRowModel: getSortedRowModel(),
getColumnFilteredRowModel: getColumnFilteredRowModelSync(), getFilteredRowModel: getFilteredRowModel(),
initialState: { initialState: {
sorting: [{ id: Columns.Time, desc: false }], sorting: [{ id: Columns.Time, desc: false }],
}, },
columnResizeMode: 'onChange', columnResizeMode: 'onChange',
enableColumnResizing: true, enableColumnResizing: true,
autoResetSorting: false,
autoResetColumnFilters: false,
}) })
const headerGroup = instance.getHeaderGroups()[0] const headerGroup = instance.getHeaderGroups()[0]
@ -184,7 +180,7 @@ export default function Connections () {
const [device, setDevice] = useState('') const [device, setDevice] = useState('')
function handleDeviceSelected (label: string) { function handleDeviceSelected (label: string) {
setDevice(label) setDevice(label)
instance.setColumnFilterValue(Columns.SourceIP, label || undefined) instance.getColumn(Columns.SourceIP).setFilterValue(label || undefined)
} }
// click item // click item
@ -218,20 +214,15 @@ export default function Connections () {
const id = column.id const id = column.id
return ( return (
<th <th
{...header.getHeaderProps( className={classnames('connections-th', {
(props: BaseComponentProps) => produce(props, props => { resizing: column.getIsResizing(),
props.className = classnames('connections-th', { fixed: column.id === Columns.Host,
resizing: column.getIsResizing(), shadow: scrolled && column.id === Columns.Host,
fixed: column.id === Columns.Host, })}
shadow: scrolled && column.id === Columns.Host, style={{ width: header.getSize() }}
})
!props.style && (props.style = {})
props.style.width = header.getSize()
}),
)}
ref={column.id === Columns.Host ? pinRef : undefined} ref={column.id === Columns.Host ? pinRef : undefined}
key={id}> key={id}>
<div {...column.getToggleSortingProps()}> <div onClick={column.getToggleSortingHandler()}>
{header.renderHeader()} {header.renderHeader()}
{ {
column.getIsSorted() !== false column.getIsSorted() !== false
@ -240,7 +231,10 @@ export default function Connections () {
} }
</div> </div>
{ idx !== headerGroup.headers.length - 1 && { idx !== headerGroup.headers.length - 1 &&
<div {...header.getResizerProps()} className="connections-resizer" /> <div
onMouseDown={header.getResizeHandler()}
onTouchStart={header.getResizeHandler()}
className="connections-resizer" />
} }
</th> </th>
) )
@ -249,7 +243,6 @@ export default function Connections () {
const content = instance.getRowModel().rows.map(row => { const content = instance.getRowModel().rows.map(row => {
return ( return (
<tr <tr
{...row.getRowProps()}
className="cursor-default select-none" className="cursor-default select-none"
key={row.original?.id} key={row.original?.id}
onClick={() => setDrawerState({ visible: true, selectedID: row.original?.id })}> onClick={() => setDrawerState({ visible: true, selectedID: row.original?.id })}>
@ -265,13 +258,8 @@ export default function Connections () {
) )
return ( return (
<td <td
{...cell.getCellProps( className={classname}
(props: BaseComponentProps) => produce(props, props => { style={{ width: cell.column.getSize() }}
!props.style && (props.style = {})
props.className = classname
props.style.width = cell.column.getSize()
}),
)}
key={cell.column.id}> key={cell.column.id}>
{ cell.renderCell() } { cell.renderCell() }
</td> </td>
@ -294,14 +282,13 @@ export default function Connections () {
{ devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> } { devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> }
<Card ref={cardRef} className="connections-card relative"> <Card ref={cardRef} className="connections-card relative">
<div className="overflow-auto min-h-full min-w-full"> <div className="overflow-auto min-h-full min-w-full">
<table {...instance.getTableProps()}> <table>
<thead> <thead>
<tr {...headerGroup.getHeaderGroupProps()} className="connections-header"> <tr className="connections-header">
{ headers } { headers }
</tr> </tr>
</thead> </thead>
<tbody>
<tbody {...instance.getTableBodyProps()}>
{ content } { content }
</tbody> </tbody>
</table> </table>