feat: add firearm management features
- Implemented API for fetching firearms and firearm details. - Created a new page for displaying the list of firearms with search and filter options. - Added Redux slice for managing firearms state. - Integrated Redux Persist for state persistence. - Updated routing to include firearms page. - Removed obsolete modification codes data. - Enhanced UI with responsive grid layout for firearms display. - Added utility functions for handling URL query parameters.
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import { FirearmApi } from "@/api"
|
||||
import { Firearm, FirearmType } from "@/types"
|
||||
import { setFirearmsPage } from "@/store/firearms-slice"
|
||||
import { useAppDispatch, useAppSelector } from "@/store"
|
||||
|
||||
const firearmTypeText: Record<FirearmType, string> = {
|
||||
RIFLE: "步枪",
|
||||
SUB_MACHINE_GUN: "冲锋枪",
|
||||
SHOTGUN: "霰弹枪",
|
||||
LIGHT_MACHINE_GUN: "轻机枪",
|
||||
DESIGNATED_MARKSMAN_RIFLE: "射手步枪",
|
||||
SNIPER_RIFLE: "狙击步枪",
|
||||
PISTOL: "手枪",
|
||||
SPECIAL: "特殊",
|
||||
}
|
||||
|
||||
export default function FirearmsPage() {
|
||||
const pageSize = 12
|
||||
const dispatch = useAppDispatch()
|
||||
const firearmsState = useAppSelector((state) => state.firearms)
|
||||
const firearms = firearmsState.items
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true)
|
||||
const [isRefreshing, setIsRefreshing] = useState<boolean>(false)
|
||||
const [loadError, setLoadError] = useState<string | null>(null)
|
||||
const [keyword, setKeyword] = useState<string>("")
|
||||
const [activeType, setActiveType] = useState<"全部" | FirearmType>("全部")
|
||||
const [currentPage, setCurrentPage] = useState<number>(firearmsState.page)
|
||||
|
||||
const fetchFirearms = (page: number, forceRefresh = false) => {
|
||||
if (!forceRefresh && firearms.length > 0 && page === firearmsState.page) {
|
||||
setIsLoading(false)
|
||||
setLoadError(null)
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setLoadError(null)
|
||||
|
||||
if (forceRefresh) {
|
||||
setIsRefreshing(true)
|
||||
}
|
||||
|
||||
FirearmApi.getFirearms({
|
||||
page,
|
||||
size: pageSize,
|
||||
sortBy: "name",
|
||||
direction: "ASC",
|
||||
})
|
||||
.then((page) => {
|
||||
dispatch(setFirearmsPage(page))
|
||||
})
|
||||
.catch(() => {
|
||||
setLoadError("武器列表加载失败，请确认后端服务是否已启动。")
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
setIsRefreshing(false)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchFirearms(currentPage, false)
|
||||
}, [currentPage, dispatch])
|
||||
|
||||
useEffect(() => {
|
||||
if (firearmsState.page !== currentPage) {
|
||||
setCurrentPage(firearmsState.page)
|
||||
}
|
||||
}, [currentPage, firearmsState.page])
|
||||
|
||||
const filteredFirearms = useMemo(() => {
|
||||
const trimmed = keyword.trim().toLowerCase()
|
||||
return firearms.filter((item) => {
|
||||
const matchKeyword = !trimmed || item.name.toLowerCase().includes(trimmed)
|
||||
const matchType = activeType === "全部" || item.type === activeType
|
||||
return matchKeyword && matchType
|
||||
})
|
||||
}, [activeType, firearms, keyword])
|
||||
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<div className="space-y-4 px-1">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="text-sm text-gray-600">先选择武器，再进入该武器的改枪码列表。</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchFirearms(currentPage, true)}
|
||||
disabled={isRefreshing}
|
||||
className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{isRefreshing ? "刷新中..." : "强制刷新"}
|
||||
</button>
|
||||
</div>
|
||||
{isLoading ? <p className="text-sm text-gray-500">正在加载武器列表...</p> : null}
|
||||
{loadError ? <p className="text-sm text-red-600">{loadError}</p> : null}
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 max-w-2xl">
|
||||
<label className="block">
|
||||
<span className="block text-sm font-medium text-gray-700 mb-1">按武器名称搜索</span>
|
||||
<input
|
||||
value={keyword}
|
||||
onChange={(event) => setKeyword(event.target.value)}
|
||||
placeholder="例如：M4A1"
|
||||
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"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="block text-sm font-medium text-gray-700 mb-1">武器类别</span>
|
||||
<select
|
||||
value={activeType}
|
||||
onChange={(event) => setActiveType(event.target.value as "全部" | FirearmType)}
|
||||
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"
|
||||
>
|
||||
<option value="全部">全部</option>
|
||||
{Object.entries(firearmTypeText).map(([type, text]) => (
|
||||
<option key={type} value={type}>{text}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredFirearms.map((item) => (
|
||||
<article key={item.id} className="bg-white border rounded-xl p-4 shadow-sm space-y-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<h2 className="text-lg font-semibold text-gray-900">{item.name}</h2>
|
||||
<span className="text-xs rounded-full bg-gray-100 text-gray-700 px-2 py-1">
|
||||
{firearmTypeText[item.type]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 text-xs text-gray-600">
|
||||
{item.level ? (
|
||||
<span className="rounded-full bg-gray-100 px-2 py-1">{item.level}</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{item.review ? (
|
||||
<p className="text-sm text-gray-600 whitespace-pre-line">{item.review}</p>
|
||||
) : null}
|
||||
|
||||
<Link
|
||||
to={`/mod-codes?firearmId=${encodeURIComponent(item.id)}`}
|
||||
className="inline-flex items-center justify-center rounded-lg border border-blue-300 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-100">
|
||||
查看改枪码
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!isLoading && filteredFirearms.length === 0 ? (
|
||||
<div className="bg-white border rounded-xl p-6 text-center text-gray-600">
|
||||
未找到匹配的武器，请尝试其他关键字或类别。
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2">
|
||||
<p className="text-sm text-gray-600">
|
||||
第 {firearmsState.page + 1} / {Math.max(firearmsState.totalPages, 1)} 页，共 {firearmsState.totalElements} 条
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isLoading || currentPage <= 0}
|
||||
onClick={() => setCurrentPage((page) => Math.max(page - 1, 0))}
|
||||
className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isLoading || firearmsState.totalPages === 0 || currentPage >= firearmsState.totalPages - 1}
|
||||
onClick={() => setCurrentPage((page) => page + 1)}
|
||||
className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,267 +0,0 @@
|
||||
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 = {
|
||||
id: string
|
||||
weapon: string
|
||||
code: string
|
||||
mode?: string
|
||||
tags: string[]
|
||||
note?: string
|
||||
price?: number
|
||||
}
|
||||
|
||||
const MOD_CODES: ModCode[] = (rawModCodes as ModCodeSource[]).map((item, index) => ({
|
||||
id: `mod-${index + 1}`,
|
||||
weapon: item.weapon,
|
||||
code: item["modification-code"],
|
||||
mode: item.mode,
|
||||
tags: item.tags ?? [],
|
||||
note: item.note,
|
||||
price: item.price,
|
||||
}))
|
||||
|
||||
export default function ModCodes() {
|
||||
const [activeTag, setActiveTag] = useState<string>("全部")
|
||||
const [activeWeapon, setActiveWeapon] = useState<string>("全部")
|
||||
const [activeMode, setActiveMode] = useState<string>("全部")
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null)
|
||||
const [copyErrorId, setCopyErrorId] = useState<string | null>(null)
|
||||
|
||||
const handleCopy = async (item: ModCode) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(item.code)
|
||||
setCopyErrorId(null)
|
||||
setCopiedId(item.id)
|
||||
window.setTimeout(() => {
|
||||
setCopiedId((current) => (current === item.id ? null : current))
|
||||
}, 1500)
|
||||
} catch {
|
||||
setCopiedId(null)
|
||||
setCopyErrorId(item.id)
|
||||
window.setTimeout(() => {
|
||||
setCopyErrorId((current) => (current === item.id ? null : current))
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
|
||||
const allWeapons = useMemo(() => {
|
||||
const weapons = new Set<string>()
|
||||
MOD_CODES.forEach((item) => weapons.add(item.weapon))
|
||||
return ["全部", ...Array.from(weapons)]
|
||||
}, [])
|
||||
|
||||
const allModes = useMemo(() => {
|
||||
const modes = new Set<string>()
|
||||
MOD_CODES.forEach((item) => {
|
||||
if (item.mode) {
|
||||
modes.add(item.mode)
|
||||
}
|
||||
})
|
||||
return ["全部", ...Array.from(modes)]
|
||||
}, [])
|
||||
|
||||
const allTags = useMemo(() => {
|
||||
const tags = new Set<string>()
|
||||
MOD_CODES.forEach((item) => {
|
||||
item.tags.forEach((tag) => tags.add(tag))
|
||||
})
|
||||
return ["全部", ...Array.from(tags)]
|
||||
}, [])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return MOD_CODES.filter((item) => {
|
||||
const matchWeapon = activeWeapon === "全部" || item.weapon === activeWeapon
|
||||
const matchMode = activeMode === "全部" || item.mode === activeMode
|
||||
const matchTag = activeTag === "全部" || item.tags.includes(activeTag)
|
||||
return matchWeapon && matchMode && matchTag
|
||||
})
|
||||
}, [activeMode, activeWeapon, activeTag])
|
||||
|
||||
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 筛选。</p>
|
||||
|
||||
<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>
|
||||
<select
|
||||
value={activeMode}
|
||||
onChange={(event) => setActiveMode(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"
|
||||
>
|
||||
{allModes.map((mode) => (
|
||||
<option key={mode} value={mode}>{mode}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActiveTag("全部")
|
||||
setActiveWeapon("全部")
|
||||
setActiveMode("全部")
|
||||
}}
|
||||
className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
清空筛选
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allTags.map((tag) => {
|
||||
const selected = tag === activeTag
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
onClick={() => setActiveTag(tag)}
|
||||
className={`rounded-full px-3 py-1 text-sm border transition ${
|
||||
selected
|
||||
? "border-blue-600 bg-blue-600 text-white"
|
||||
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
#{tag}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<div className="bg-white border rounded-xl p-6 text-center text-gray-600">
|
||||
未找到匹配的改枪码，请尝试其他 tag 或关键字。
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user