Chore: update dependencies and connection info scroll y

2025-07-18 14:01:56 +08:00 · 2022-05-01 18:54:52 +08:00 · 2022-05-01 18:54:52 +08:00 · a928672ba1
commit a928672ba1
parent b023c451f3
6 changed files with 444 additions and 442 deletions
--- a/package.json
+++ b/package.json
@ -26,9 +26,9 @@
    },
    "devDependencies": {
        "@types/lodash-es": "^4.17.6",
-        "@types/node": "^17.0.29",
+        "@types/node": "^17.0.30",
        "@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-window": "^1.8.5",
        "@typescript-eslint/eslint-plugin": "^5.21.0",
@ -45,7 +45,7 @@
        "eslint-plugin-react-hooks": "^4.5.0",
        "sass": "^1.51.0",
        "type-fest": "^2.12.2",
-        "typescript": "^4.6.3",
+        "typescript": "^4.6.4",
        "vite": "^2.9.6",
        "vite-plugin-pwa": "^0.12.0",
        "vite-plugin-windicss": "^1.8.4",
@ -54,7 +54,7 @@
    },
    "dependencies": {
        "@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",
        "classnames": "^2.3.1",
        "dayjs": "^1.11.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@ -8,6 +8,7 @@ import { BaseComponentProps } from '@models/BaseProps'
 interface DrawerProps extends BaseComponentProps {
    visible?: boolean
    width?: number
+    bodyClassName?: string
    containerRef?: RefObject<HTMLElement>
 }

@ -24,7 +25,7 @@ export function Drawer (props: DrawerProps) {

    const container = (
        <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>
    )

--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@ -1,5 +1,5 @@
 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 Connections from '@containers/Connections'
@ -29,20 +29,26 @@ export default function App () {
        { path: '/settings', name: 'Settings', element: <Settings /> },
    ]

-    return (
+    const layout = (
        <div className={classnames('app', { 'not-clashx': !isClashX() })}>
            <SideBar routes={routes} />
            <div className="page-container">
-                <Routes>
-                    <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>
+                <Outlet />
            </div>
            <ExternalControllerModal />
        </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>
+    )
 }
--- a/src/containers/Connections/Info/index.tsx
+++ b/src/containers/Connections/Info/index.tsx
@ -16,7 +16,7 @@ export function ConnectionInfo (props: ConnectionsInfoProps) {
    const t = useMemo(() => translation('Connections').t, [translation])

    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">
                <span className="font-bold w-20">{t('info.id')}</span>
                <span className="font-mono">{props.connection.id}</span>
--- a/src/containers/Connections/index.tsx
+++ b/src/containers/Connections/index.tsx
@ -100,19 +100,19 @@ export default function Connections () {
    const intersection = useIntersectionObserver(pinRef, { threshold: [1] })
    const columns = useMemo(
        () => table.createColumns([
-            table.createDataColumn(Columns.Host, { minWidth: 260, width: 260, header: t(`columns.${Columns.Host}`) }),
-            table.createDataColumn(Columns.Network, { minWidth: 80, width: 80, header: t(`columns.${Columns.Network}`) }),
-            table.createDataColumn(Columns.Type, { minWidth: 100, width: 100, header: t(`columns.${Columns.Type}`) }),
-            table.createDataColumn(Columns.Chains, { minWidth: 200, width: 200, header: t(`columns.${Columns.Chains}`) }),
-            table.createDataColumn(Columns.Rule, { minWidth: 140, width: 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.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(
                row => [row.speed.upload, row.speed.download],
                {
                    id: Columns.Speed,
                    header: t(`columns.${Columns.Speed}`),
-                    minWidth: 200,
-                    width: 200,
+                    minSize: 200,
+                    size: 200,
                    sortDescFirst: true,
                    sortingFn (rowA, rowB) {
                        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]),
                },
            ),
-            table.createDataColumn(Columns.Upload, { minWidth: 100, width: 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.SourceIP, { minWidth: 140, width: 140, header: t(`columns.${Columns.SourceIP}`), filterFn: 'equals' }),
+            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.SourceIP, { minSize: 140, size: 140, header: t(`columns.${Columns.SourceIP}`), filterFn: 'equals' }),
            table.createDataColumn(
                Columns.Time,
                {
-                    minWidth: 120,
-                    width: 120,
+                    minSize: 120,
+                    size: 120,
                    header: t(`columns.${Columns.Time}`),
                    cell: cell => fromNow(new Date(cell.value), lang),
                    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,
                        })
                        !props.style && (props.style = {})
-                        props.style.width = header.getWidth()
+                        props.style.width = header.getSize()
                    }),
                )}
                ref={column.id === Columns.Host ? pinRef : undefined}
@ -266,7 +266,7 @@ export default function Connections () {
                                    (props: BaseComponentProps) => produce(props, props => {
                                        !props.style && (props.style = {})
                                        props.className = classname
-                                        props.style.width = cell.column.getWidth()
+                                        props.style.width = cell.column.getSize()
                                    }),
                                )}
                                key={cell.column.id}>
@ -305,7 +305,7 @@ export default function Connections () {
                </div>
            </Card>
            <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">
                    <span className="font-bold pl-3">{t('info.title')}</span>
                    <Icon type="close" size={16} className="cursor-pointer" onClick={() => setDrawerState('visible', false)} />