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

src/page/mod-codes/index.tsx

@@ -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>