feat: add @tanstack/react-virtual for improved virtual scrolling and enhance modification codes with additional weapon data and filtering options

2026-04-02 10:42:36 +08:00
parent 86b743dcc0
commit 370d787c16
4 changed files with 231 additions and 44 deletions
@@ -13,6 +13,7 @@
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-virtual": "^3.13.23",
    "dayjs": "^1.11.20",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
@@ -11,6 +11,9 @@ importers:
      '@tailwindcss/vite':
        specifier: ^4.2.2
        version: 4.2.2(vite@8.0.1(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1))
+      '@tanstack/react-virtual':
+        specifier: ^3.13.23
+        version: 3.13.23(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      dayjs:
        specifier: ^1.11.20
        version: 1.11.20
@@ -439,6 +442,15 @@ packages:
    peerDependencies:
      vite: ^5.2.0 || ^6 || ^7 || ^8

+  '@tanstack/react-virtual@3.13.23':
+    resolution: {integrity: sha512-XnMRnHQ23piOVj2bzJqHrRrLg4r+F86fuBcwteKfbIjJrtGxb4z7tIvPVAe4B+4UVwo9G4Giuz5fmapcrnZ0OQ==}
+    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/virtual-core@3.13.23':
+    resolution: {integrity: sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==}
+
  '@tybys/wasm-util@0.10.1':
    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}

@@ -961,6 +973,14 @@ snapshots:
      tailwindcss: 4.2.2
      vite: 8.0.1(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)

+  '@tanstack/react-virtual@3.13.23(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.23
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@tanstack/virtual-core@3.13.23': {}
+
  '@tybys/wasm-util@0.10.1':
    dependencies:
      tslib: 2.8.1
@@ -4,6 +4,87 @@
    "modification-code": "6JJE3180BB9B3KKCCH41C",
    "mode": "烽火地带",
    "tags": ["精锐制式券", "突击步枪", "稳定"],
-    "note": "精锐火力券提供的 SCAR-H"
+    "note": "精锐火力券提供的 SCAR-H",
+    "price": 445295
+  },
+  {
+    "weapon": "M4A1突击步枪",
+    "modification-code": "6JAS9U80BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["稳定", "突击步枪", "倍镜"],
+    "note": "带有三倍镜的稳定版 M4A1，全套价格左右。",
+    "price": 400000
+  },
+  {
+    "weapon": "M4A1突击步枪",
+    "modification-code": "6J9D8SO0BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["突击步枪", "性价比"],
+    "note": "性价比改装稳定版 M4A1。",
+    "price": 242638
+  },
+  {
+    "weapon": "MK4冲锋枪",
+    "modification-code": "6IVR0N40BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["超绝腰射", "三连发"],
+    "note": "超绝三连发腰射 MK4，近距离火力十足",
+    "price": 538686
+  },
+  {
+    "weapon": "MK4冲锋枪",
+    "modification-code": "6J7283O0BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["超绝腰射", "全自动"],
+    "note": "超绝全自动腰射 MK4，见到人瞄准好之后左键按到死",
+    "price": 466836
+  },
+  {
+    "weapon": "M7战斗步枪",
+    "modification-code": "6IVH3HC0BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["半改", "蓝管", "稳定"],
+    "note": "半改稳定 M7",
+    "price": 620597
+  },
+  {
+    "weapon": "M7战斗步枪",
+    "modification-code": "6J2QBQK0BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["倍镜", "职业选手", "消音"],
+    "note": "需要较高控枪水平的满改 M7",
+    "price": 891030
+  },
+  {
+    "weapon": "M7战斗步枪",
+    "modification-code": "6J2QC080BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["稳定"],
+    "note": "S8 赛季幻影版满改稳定 M7，51操控",
+    "price": 1039234
+  },
+  {
+    "weapon": "M7战斗步枪",
+    "modification-code": "6J2QC4O0BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["稳定"],
+    "note": "S8 赛季隐袭版满改稳定 M7，49操控",
+    "price": 1064418
+  },
+  {
+    "weapon": "MK47突击步枪",
+    "modification-code": "6JAV6A80BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["突袭", "大口径", "消音"],
+    "note": "S8 赛季余烬MK47，携带消音器",
+    "price": 862384
+  },
+  {
+    "weapon": "MK47突击步枪",
+    "modification-code": "6JAV6SS0BB9B3KKCCH41C",
+    "mode": "烽火地带",
+    "tags": ["突袭", "稳定"],
+    "note": "幻影余烬主宰者MK47",
+    "price": 864227
  }
 ]
@@ -1,12 +1,30 @@
-import { useMemo, useState } from "react"
+import { useMemo, useState, useEffect, useLayoutEffect, useRef } from "react"
+import { useWindowVirtualizer } from "@tanstack/react-virtual"
 import rawModCodes from "@/data/modification-codes.json"

+function useColumnCount() {
+  const getCount = () => {
+    if (window.innerWidth >= 1024) return 4
+    if (window.innerWidth >= 768) return 3
+    if (window.innerWidth >= 640) return 2
+    return 1
+  }
+  const [cols, setCols] = useState(getCount)
+  useEffect(() => {
+    const handler = () => setCols(getCount())
+    window.addEventListener("resize", handler)
+    return () => window.removeEventListener("resize", handler)
+  }, [])
+  return cols
+}
+
 type ModCodeSource = {
  weapon: string
  "modification-code": string
  mode?: string
  tags?: string[]
  note?: string
+  price?: number
 }

 type ModCode = {
@@ -16,6 +34,7 @@ type ModCode = {
  mode?: string
  tags: string[]
  note?: string
+  price?: number
 }

 const MOD_CODES: ModCode[] = (rawModCodes as ModCodeSource[]).map((item, index) => ({
@@ -25,11 +44,13 @@ const MOD_CODES: ModCode[] = (rawModCodes as ModCodeSource[]).map((item, index)
  mode: item.mode,
  tags: item.tags ?? [],
  note: item.note,
+  price: item.price,
 }))

 export default function ModCodes() {
  const [keyword, setKeyword] = useState("")
  const [activeTag, setActiveTag] = useState<string>("全部")
+  const [activeWeapon, setActiveWeapon] = useState<string>("全部")
  const [copiedId, setCopiedId] = useState<string | null>(null)
  const [copyErrorId, setCopyErrorId] = useState<string | null>(null)

@@ -50,6 +71,12 @@ export default function ModCodes() {
    }
  }

+  const allWeapons = useMemo(() => {
+    const weapons = new Set<string>()
+    MOD_CODES.forEach((item) => weapons.add(item.weapon))
+    return ["全部", ...Array.from(weapons)]
+  }, [])
+
  const allTags = useMemo(() => {
    const tags = new Set<string>()
    MOD_CODES.forEach((item) => {
@@ -61,6 +88,7 @@ export default function ModCodes() {
  const filtered = useMemo(() => {
    const q = keyword.trim().toLowerCase()
    return MOD_CODES.filter((item) => {
+      const matchWeapon = activeWeapon === "全部" || item.weapon === activeWeapon
      const matchTag = activeTag === "全部" || item.tags.includes(activeTag)
      const matchKeyword =
        q.length === 0 ||
@@ -68,18 +96,53 @@ export default function ModCodes() {
        item.code.toLowerCase().includes(q) ||
        (item.mode?.toLowerCase().includes(q) ?? false) ||
        item.tags.some((tag) => tag.toLowerCase().includes(q))
-      return matchTag && matchKeyword
+      return matchWeapon && matchTag && matchKeyword
    })
-  }, [activeTag, keyword])
+  }, [activeWeapon, activeTag, keyword])
+
+  const colCount = useColumnCount()
+
+  const rows = useMemo<ModCode[][]>(() => {
+    const result: ModCode[][] = []
+    for (let i = 0; i < filtered.length; i += colCount) {
+      result.push(filtered.slice(i, i + colCount))
+    }
+    return result
+  }, [filtered, colCount])
+
+  const listRef = useRef<HTMLDivElement>(null)
+  const scrollMarginRef = useRef(0)
+  useLayoutEffect(() => {
+    scrollMarginRef.current = listRef.current?.offsetTop ?? 0
+  })
+
+  const rowVirtualizer = useWindowVirtualizer({
+    count: rows.length,
+    estimateSize: () => 220,
+    overscan: 3,
+    scrollMargin: scrollMarginRef.current,
+  })

  return (
    <section className="space-y-6">
      <div className="space-y-4 px-1">
        <p className="text-sm text-gray-600">
-          支持按 tag 与关键字筛选。关键字可匹配枪械名称、改枪码或 tag。
+          支持按武器、tag 与关键字筛选。关键字可匹配枪械名称、改枪码或 tag。
        </p>

-        <div className="grid gap-3 md:grid-cols-2">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <label className="block">
+            <span className="block text-sm font-medium text-gray-700 mb-1">武器筛选</span>
+            <select
+              value={activeWeapon}
+              onChange={(event) => setActiveWeapon(event.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 bg-white"
+            >
+              {allWeapons.map((weapon) => (
+                <option key={weapon} value={weapon}>{weapon}</option>
+              ))}
+            </select>
+          </label>
          <label className="block">
            <span className="block text-sm font-medium text-gray-700 mb-1">关键字查找</span>
            <input
@@ -95,6 +158,7 @@ export default function ModCodes() {
              onClick={() => {
                setKeyword("")
                setActiveTag("全部")
+                setActiveWeapon("全部")
              }}
              className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
            >
@@ -124,46 +188,67 @@ export default function ModCodes() {
        </div>
      </div>

-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-        {filtered.map((item) => (
-          <article key={item.id} className="bg-white border rounded-xl p-4 shadow-sm space-y-3">
-            <div className="flex items-center justify-between gap-3">
-              <h2 className="text-lg font-semibold text-gray-900">{item.weapon}</h2>
-              {item.mode ? (
-                <span className="text-xs rounded-full bg-gray-100 text-gray-700 px-2 py-1">
-                  {item.mode}
-                </span>
-              ) : (
-                <span className="text-xs text-gray-500">ID: {item.id}</span>
-              )}
-            </div>
-            <div className="rounded-lg bg-gray-900 text-green-300 px-3 py-2 font-mono text-sm break-all flex items-center justify-between gap-3">
-              <span>{item.code}</span>
-              <button
-                type="button"
-                onClick={() => handleCopy(item)}
-                className="shrink-0 rounded-md bg-green-400/10 border border-green-400/40 text-green-200 px-2 py-1 text-xs hover:bg-green-400/20"
-              >
-                {copiedId === item.id ? "已复制" : "复制改枪码"}
-              </button>
-            </div>
-            {copyErrorId === item.id ? (
-              <p className="text-xs text-red-600">复制失败，请手动选中复制。</p>
-            ) : null}
-            {item.note ? <p className="text-sm text-gray-600">{item.note}</p> : null}
-            <div className="flex flex-wrap gap-2">
-              {item.tags.map((tag) => (
-                <button
-                  key={`${item.id}-${tag}`}
-                  type="button"
-                  onClick={() => setActiveTag(tag)}
-                  className="text-xs rounded-full bg-blue-50 text-blue-700 px-2 py-1 hover:bg-blue-100"
-                >
-                  #{tag}
-                </button>
+      <div
+        ref={listRef}
+        style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }}
+      >
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+          <div
+            key={virtualRow.index}
+            data-index={virtualRow.index}
+            ref={rowVirtualizer.measureElement}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`,
+            }}
+          >
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 pb-4">
+              {rows[virtualRow.index].map((item) => (
+                <article key={item.id} className="bg-white border rounded-xl p-4 shadow-sm space-y-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <h2 className="text-lg font-semibold text-gray-900">{item.weapon}</h2>
+                    {item.mode ? (
+                      <span className="text-xs rounded-full bg-gray-100 text-gray-700 px-2 py-1">
+                        {item.mode}
+                      </span>
+                    ) : (
+                      <span className="text-xs text-gray-500">ID: {item.id}</span>
+                    )}
+                  </div>
+                  <div className="rounded-lg bg-gray-900 text-green-300 px-3 py-2 font-mono text-sm break-all flex items-center justify-between gap-3">
+                    <span>{item.code}</span>
+                    <button
+                      type="button"
+                      onClick={() => handleCopy(item)}
+                      className="shrink-0 rounded-md bg-green-400/10 border border-green-400/40 text-green-200 px-2 py-1 text-xs hover:bg-green-400/20"
+                    >
+                      {copiedId === item.id ? "已复制" : "复制改枪码"}
+                    </button>
+                  </div>
+                  {copyErrorId === item.id ? (
+                    <p className="text-xs text-red-600">复制失败，请手动选中复制。</p>
+                  ) : null}
+                  {item.price ? <p className="text-sm text-gray-900 font-medium">$ {item.price.toLocaleString()}</p> : null}
+                  {item.note ? <p className="text-sm text-gray-600">{item.note}</p> : null}
+                  <div className="flex flex-wrap gap-2">
+                    {item.tags.map((tag) => (
+                      <button
+                        key={`${item.id}-${tag}`}
+                        type="button"
+                        onClick={() => setActiveTag(tag)}
+                        className="text-xs rounded-full bg-blue-50 text-blue-700 px-2 py-1 hover:bg-blue-100"
+                      >
+                        #{tag}
+                      </button>
+                    ))}
+                  </div>
+                </article>
              ))}
            </div>
-          </article>
+          </div>
        ))}
      </div>