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,38 @@
|
||||
import { Direction, Firearm, FirearmType, Page, PageQueryParams } from "@/types"
|
||||
import { WebClient } from "@/shared/web-client"
|
||||
import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
|
||||
|
||||
interface FirearmParams extends PageQueryParams {
|
||||
type?: FirearmType
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询武器列表
|
||||
*
|
||||
* @param params 分页查询参数¬
|
||||
*/
|
||||
export async function getFirearms(params?: FirearmParams): Promise<Page<Firearm>> {
|
||||
let uri = "/firearms"
|
||||
const urlSearchParam = asUrlSearchParam(params)
|
||||
|
||||
if (params?.type) {
|
||||
urlSearchParam.append("type", params.type)
|
||||
}
|
||||
|
||||
if (urlSearchParam.size > 0) {
|
||||
uri = uri.concat("?", urlSearchParam.toString())
|
||||
}
|
||||
|
||||
const { data } = await WebClient.get<Page<Firearm>>(uri)
|
||||
return data
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 ID 查询武器
|
||||
*
|
||||
* @param id 武器 ID
|
||||
*/
|
||||
export async function getFirearm(id: number): Promise<Firearm> {
|
||||
const { data } = await WebClient.get<Firearm>(`/firearms/${id}`)
|
||||
return data
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * as FirearmApi from "./firearm-api"
|
||||
export * as ModificationApi from "./modification-api"
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Modification, Page, PageQueryParams } from "@/types"
|
||||
import { WebClient } from "@/shared/web-client"
|
||||
import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
|
||||
|
||||
interface ModificationParams extends PageQueryParams {
|
||||
firearmId?: string
|
||||
}
|
||||
|
||||
export async function getModifications(params?: ModificationParams): Promise<Page<Modification>> {
|
||||
let uri = "/modifications"
|
||||
const urlSearchParams = asUrlSearchParam(params)
|
||||
if (params?.firearmId) {
|
||||
urlSearchParams.append("firearmId", "" + params.firearmId)
|
||||
}
|
||||
if (urlSearchParams.size > 0) {
|
||||
uri = uri.concat("?", urlSearchParams.toString())
|
||||
}
|
||||
const { data } = await WebClient.get<Page<Modification>>(uri)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getModification(id: number): Promise<Modification> {
|
||||
const { data } = await WebClient.get<Modification>(`/modifications/${id}`)
|
||||
return data
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
[
|
||||
{
|
||||
"weapon": "SCAR-H战斗步枪",
|
||||
"modification-code": "6JJE3180BB9B3KKCCH41C",
|
||||
"mode": "烽火地带",
|
||||
"tags": ["精锐制式券", "突击步枪", "稳定"],
|
||||
"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
|
||||
},
|
||||
{
|
||||
"weapon": "AWM狙击步枪",
|
||||
"modification-code": "6JAS7DG0BB9B3KKCCH41C",
|
||||
"mode": "烽火地带",
|
||||
"tags": [],
|
||||
"note": "",
|
||||
"price": 899872
|
||||
},
|
||||
{
|
||||
"weapon": "MCX LT突击步枪",
|
||||
"modification-code": "6JJGQFS0BB9B3KKCCH41C",
|
||||
"mode": "烽火地带",
|
||||
"tags": ["稳定", "常规"],
|
||||
"note": "中距离机密局好用的突击步枪",
|
||||
"price": 474581
|
||||
},
|
||||
{
|
||||
"weapon": "KC17突击步枪",
|
||||
"modification-code": "6JJGQQ40BB9B3KKCCH41C",
|
||||
"mode": "烽火地带",
|
||||
"tags": ["性价比"],
|
||||
"note": "性价比很高",
|
||||
"price": 373532
|
||||
}
|
||||
]
|
||||
@@ -8,4 +8,27 @@ html, body {
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mod-codes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.mod-codes-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.mod-codes-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.mod-codes-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,12 @@ export default function HeroLayout() {
|
||||
</h1>
|
||||
</div>
|
||||
<nav className="flex space-x-8">
|
||||
<Link
|
||||
to="/firearms"
|
||||
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
||||
>
|
||||
武器列表
|
||||
</Link>
|
||||
<Link
|
||||
to="/mod-codes"
|
||||
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
||||
|
||||
+8
-1
@@ -1,8 +1,11 @@
|
||||
import { StrictMode } from "react"
|
||||
import { createRoot } from "react-dom/client"
|
||||
import { RouterProvider } from "react-router-dom"
|
||||
import { Provider } from "react-redux"
|
||||
import { PersistGate } from "redux-persist/integration/react"
|
||||
import "@/init"
|
||||
import router from "@/router"
|
||||
import store, { persistor } from "@/store"
|
||||
import "./index.css"
|
||||
|
||||
/**
|
||||
@@ -11,6 +14,10 @@ import "./index.css"
|
||||
*/
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
<Provider store={store}>
|
||||
<PersistGate loading={null} persistor={persistor}>
|
||||
<RouterProvider router={router} />
|
||||
</PersistGate>
|
||||
</Provider>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -25,7 +25,11 @@ const router = createBrowserRouter(
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
lazy: lazy(() => import("@/page/mod-codes")),
|
||||
lazy: lazy(() => import("@/page/firearms")),
|
||||
},
|
||||
{
|
||||
path: "firearms",
|
||||
lazy: lazy(() => import("@/page/firearms")),
|
||||
},
|
||||
{
|
||||
path: "mod-codes",
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import axios from "axios"
|
||||
import dayjs from "dayjs"
|
||||
|
||||
const WebClient = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL,
|
||||
timeout: dayjs.duration({ seconds: 10 }).asMilliseconds(),
|
||||
})
|
||||
|
||||
export { WebClient }
|
||||
@@ -0,0 +1,42 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit"
|
||||
import { Firearm, Page } from "@/types"
|
||||
|
||||
interface FirearmsState {
|
||||
items: Firearm[]
|
||||
page: number
|
||||
size: number
|
||||
totalPages: number
|
||||
totalElements: number
|
||||
}
|
||||
|
||||
const initialState: FirearmsState = {
|
||||
items: [],
|
||||
page: 0,
|
||||
size: 12,
|
||||
totalPages: 0,
|
||||
totalElements: 0,
|
||||
}
|
||||
|
||||
const firearmsSlice = createSlice({
|
||||
name: "firearms",
|
||||
initialState,
|
||||
reducers: {
|
||||
setFirearmsPage(state, action: PayloadAction<Page<Firearm>>) {
|
||||
state.items = action.payload.items
|
||||
state.page = action.payload.page
|
||||
state.size = action.payload.size
|
||||
state.totalPages = action.payload.totalPages
|
||||
state.totalElements = action.payload.totalElements
|
||||
},
|
||||
clearFirearms(state) {
|
||||
state.items = []
|
||||
state.page = 0
|
||||
state.size = 12
|
||||
state.totalPages = 0
|
||||
state.totalElements = 0
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const { setFirearmsPage, clearFirearms } = firearmsSlice.actions
|
||||
export const firearmsReducer = firearmsSlice.reducer
|
||||
@@ -0,0 +1,48 @@
|
||||
import { configureStore, combineReducers } from "@reduxjs/toolkit"
|
||||
import { useDispatch, useSelector } from "react-redux"
|
||||
import {
|
||||
persistStore,
|
||||
persistReducer,
|
||||
FLUSH,
|
||||
REHYDRATE,
|
||||
PAUSE,
|
||||
PERSIST,
|
||||
PURGE,
|
||||
REGISTER,
|
||||
} from "redux-persist"
|
||||
import createWebStorage from "redux-persist/es/storage/createWebStorage"
|
||||
import { firearmsReducer } from "./firearms-slice"
|
||||
|
||||
const storage = createWebStorage(import.meta.env.VITE_REDUX_STORAGE ?? "local")
|
||||
|
||||
const persistConfig = {
|
||||
key: "root",
|
||||
storage,
|
||||
whitelist: ["firearms"],
|
||||
}
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
firearms: firearmsReducer
|
||||
})
|
||||
|
||||
const persistedReducer = persistReducer(persistConfig, rootReducer)
|
||||
|
||||
const store = configureStore({
|
||||
reducer: persistedReducer,
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({
|
||||
serializableCheck: {
|
||||
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
|
||||
},
|
||||
}),
|
||||
})
|
||||
|
||||
export const persistor = persistStore(store)
|
||||
|
||||
export default store
|
||||
export type RootState = ReturnType<typeof rootReducer>
|
||||
export type AppDispatch = typeof store.dispatch
|
||||
export type AppStore = typeof store
|
||||
|
||||
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
|
||||
export const useAppSelector = useSelector.withTypes<RootState>()
|
||||
@@ -0,0 +1,45 @@
|
||||
export type Direction = "ASC" | "DESC"
|
||||
|
||||
export type FirearmType =
|
||||
| "RIFLE"
|
||||
| "SUB_MACHINE_GUN"
|
||||
| "SHOTGUN"
|
||||
| "LIGHT_MACHINE_GUN"
|
||||
| "DESIGNATED_MARKSMAN_RIFLE"
|
||||
| "SNIPER_RIFLE"
|
||||
| "PISTOL"
|
||||
| "SPECIAL"
|
||||
|
||||
export interface Page<T> {
|
||||
items: T[]
|
||||
page: number
|
||||
size: number
|
||||
totalElements: number
|
||||
totalPages: number
|
||||
}
|
||||
|
||||
export interface Firearm {
|
||||
id: number
|
||||
name: string
|
||||
type: FirearmType
|
||||
level: string
|
||||
review: string
|
||||
}
|
||||
|
||||
export interface Modification {
|
||||
id: number
|
||||
firearmId: number
|
||||
name: string
|
||||
code: string
|
||||
tags: string[]
|
||||
note: string
|
||||
author: string
|
||||
videoUrl: string
|
||||
}
|
||||
|
||||
export interface PageQueryParams {
|
||||
page?: number
|
||||
size?: number
|
||||
sortBy?: string
|
||||
direction?: Direction
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * as QueryParamUtils from "./query-param-utils"
|
||||
@@ -0,0 +1,23 @@
|
||||
import { PageQueryParams } from "@/types"
|
||||
|
||||
export function asUrlSearchParam(pageQueryParams?: PageQueryParams) {
|
||||
const urlSearchParams = new URLSearchParams()
|
||||
|
||||
if (pageQueryParams?.page) {
|
||||
urlSearchParams.append("page", "" + pageQueryParams.page)
|
||||
}
|
||||
|
||||
if (pageQueryParams?.size) {
|
||||
urlSearchParams.append("size", "" + pageQueryParams.size)
|
||||
}
|
||||
|
||||
if (pageQueryParams?.sortBy) {
|
||||
urlSearchParams.append("sortBy", pageQueryParams.sortBy)
|
||||
}
|
||||
|
||||
if (pageQueryParams?.direction) {
|
||||
urlSearchParams.append("direction", pageQueryParams.direction)
|
||||
}
|
||||
|
||||
return urlSearchParams
|
||||
}
|
||||
Vendored
+1
@@ -1,6 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_REDUX_STORAGE: "local" | "session"
|
||||
readonly VITE_API_BASE_URL: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
|
||||
Reference in New Issue
Block a user