From e0e90ac60016d4340387cd6af08bbe8685025c1e Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Mon, 13 Jul 2026 09:50:34 +0800 Subject: [PATCH] fix: remove @tanstack/react-virtual --- package.json | 1 - pnpm-lock.yaml | 20 ---- src/components/VirtualServerList.tsx | 159 --------------------------- src/pages/Server.tsx | 29 ++++- src/test/pages/Server.test.tsx | 5 +- 5 files changed, 25 insertions(+), 189 deletions(-) delete mode 100644 src/components/VirtualServerList.tsx diff --git a/package.json b/package.json index 8784e82..4a373f7 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "@tanstack/react-query": "5.101.0", "@tanstack/react-query-devtools": "5.101.0", "@tanstack/react-table": "8.21.3", - "@tanstack/react-virtual": "^3.14.5", "@types/d3-geo": "3.1.0", "@types/luxon": "3.7.1", "class-variance-authority": "0.7.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8ae0e5f..439e576 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -59,9 +59,6 @@ importers: '@tanstack/react-table': specifier: 8.21.3 version: 8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7) - '@tanstack/react-virtual': - specifier: ^3.14.5 - version: 3.14.5(react-dom@19.2.7(react@19.2.7))(react@19.2.7) '@types/d3-geo': specifier: 3.1.0 version: 3.1.0 @@ -1120,19 +1117,10 @@ packages: react: '>=16.8' react-dom: '>=16.8' - '@tanstack/react-virtual@3.14.5': - resolution: {integrity: sha512-4EKRXh7zBLkbKbFmG3AUVkircuHd+7OdT1pocJSepxtfBd3qnrJgJ5rtPkRYyo9fmyVb2+pI2xPy5oYvMLQy6A==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - '@tanstack/table-core@8.21.3': resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==} engines: {node: '>=12'} - '@tanstack/virtual-core@3.17.3': - resolution: {integrity: sha512-8Np/TFELpI0ySuJoVmjvOrQYXH/8sTX0Biv9szhFhY39xOdAAY+smrMxjxOum/ux3eM8MUJQsEJ0/R0UpvC8dw==} - '@testing-library/dom@10.4.1': resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==} engines: {node: '>=18'} @@ -3031,16 +3019,8 @@ snapshots: react: 19.2.7 react-dom: 19.2.7(react@19.2.7) - '@tanstack/react-virtual@3.14.5(react-dom@19.2.7(react@19.2.7))(react@19.2.7)': - dependencies: - '@tanstack/virtual-core': 3.17.3 - react: 19.2.7 - react-dom: 19.2.7(react@19.2.7) - '@tanstack/table-core@8.21.3': {} - '@tanstack/virtual-core@3.17.3': {} - '@testing-library/dom@10.4.1': dependencies: '@babel/code-frame': 7.29.7 diff --git a/src/components/VirtualServerList.tsx b/src/components/VirtualServerList.tsx deleted file mode 100644 index ef62b17..0000000 --- a/src/components/VirtualServerList.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { useWindowVirtualizer } from "@tanstack/react-virtual"; -import { useEffect, useState } from "react"; -import ServerCard from "@/components/ServerCard"; -import ServerCardInline from "@/components/ServerCardInline"; -import type { NezhaServer } from "@/types/nezha-api"; - -type VirtualServerListProps = { - now: number; - servers: NezhaServer[]; - inline: boolean; -}; - -const CARD_ROW_GAP = 8; -const CARD_COLUMNS_BREAKPOINT = 768; - -function useCardColumnCount(enabled: boolean) { - const [columnCount, setColumnCount] = useState(() => { - if (!enabled || typeof window === "undefined") return 1; - return window.innerWidth >= CARD_COLUMNS_BREAKPOINT ? 2 : 1; - }); - - useEffect(() => { - if (!enabled) { - setColumnCount(1); - return; - } - - const updateColumnCount = () => { - setColumnCount(window.innerWidth >= CARD_COLUMNS_BREAKPOINT ? 2 : 1); - }; - - updateColumnCount(); - window.addEventListener("resize", updateColumnCount); - - return () => { - window.removeEventListener("resize", updateColumnCount); - }; - }, [enabled]); - - return columnCount; -} - -export default function VirtualServerList({ - inline, - now, - servers, -}: VirtualServerListProps) { - if (inline) { - return ; - } - - return ; -} - -function VirtualCardServerList({ - now, - servers, -}: { - now: number; - servers: NezhaServer[]; -}) { - const columnCount = useCardColumnCount(true); - const rowCount = Math.ceil(servers.length / columnCount); - - const virtualizer = useWindowVirtualizer({ - count: rowCount, - estimateSize: () => 150, - gap: CARD_ROW_GAP, - overscan: 6, - }); - - const virtualItems = virtualizer.getVirtualItems(); - - return ( -
-
- {virtualItems.map((virtualRow) => { - const rowStart = virtualRow.index * columnCount; - const row = servers.slice(rowStart, rowStart + columnCount); - - return ( -
- {row.map((serverInfo) => ( - - ))} -
- ); - })} -
-
- ); -} - -function VirtualInlineServerList({ - now, - servers, -}: { - now: number; - servers: NezhaServer[]; -}) { - const virtualizer = useWindowVirtualizer({ - count: servers.length, - estimateSize: () => 86, - gap: CARD_ROW_GAP, - overscan: 8, - }); - - const virtualItems = virtualizer.getVirtualItems(); - - return ( -
-
- {virtualItems.map((virtualRow) => { - const serverInfo = servers[virtualRow.index]; - if (!serverInfo) return null; - - return ( -
- -
- ); - })} -
-
- ); -} diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx index a81b53f..20cc1a9 100644 --- a/src/pages/Server.tsx +++ b/src/pages/Server.tsx @@ -13,9 +13,10 @@ import { useTranslation } from "react-i18next"; import GlobalMap from "@/components/GlobalMap"; import GroupSwitch from "@/components/GroupSwitch"; import { Loader } from "@/components/loading/Loader"; +import ServerCard from "@/components/ServerCard"; +import ServerCardInline from "@/components/ServerCardInline"; import ServerOverview from "@/components/ServerOverview"; import { ServiceTracker } from "@/components/ServiceTracker"; -import VirtualServerList from "@/components/VirtualServerList"; import { SORT_TYPES } from "@/context/sort-context"; import { useSort } from "@/hooks/use-sort"; import { useStatus } from "@/hooks/use-status"; @@ -580,11 +581,27 @@ export default function Servers({ {!hasServers ? ( ) : filteredServers.length > 0 ? ( - + inline === "1" ? ( +
+ {filteredServers.map((serverInfo) => ( + + ))} +
+ ) : ( +
+ {filteredServers.map((serverInfo) => ( + + ))} +
+ ) ) : ( )} diff --git a/src/test/pages/Server.test.tsx b/src/test/pages/Server.test.tsx index 55f8653..1410718 100644 --- a/src/test/pages/Server.test.tsx +++ b/src/test/pages/Server.test.tsx @@ -424,7 +424,7 @@ describe("Servers page", () => { }); }); - it("virtualizes large server lists instead of rendering every card", () => { + it("renders every card in large server lists without virtualization", () => { const servers = Array.from({ length: 2000 }, (_, index) => createServer({ id: index + 1, name: `server-${index + 1}` }), ); @@ -437,8 +437,7 @@ describe("Servers page", () => { expect(screen.getByTestId("server-overview")).toHaveTextContent( "2000:2000:0", ); - expect(screen.getAllByTestId("server-card").length).toBeLessThan(2000); - expect(screen.getAllByTestId("server-card").length).toBeGreaterThan(0); + expect(screen.getAllByTestId("server-card")).toHaveLength(2000); }); it("toggles map and service tracker controls when service data exists", async () => {