onixbyte/delta-force-guide-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Zihlu Wang
2026-04-02 10:42:36 +08:00
parent 86b743dcc0
commit 370d787c16
4 changed files with 231 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -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",
pnpm-lock.yaml
Generated
+20
View File
@@ -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
src/data/modification-codes.json
+82 -1
View File
@@ -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
}
]
src/page/mod-codes/index.tsx
+92 -7
View File
@@ -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
})
}, [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,
})
}, [activeTag, keyword])
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,8 +188,25 @@ 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) => (
<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>
@@ -150,6 +231,7 @@ export default function ModCodes() {
{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) => (
@@ -166,6 +248,9 @@ export default function ModCodes() {
</article>
))}
</div>
</div>
))}
</div>
{filtered.length === 0 ? (
<div className="bg-white border rounded-xl p-6 text-center text-gray-600">