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

1825
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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

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