diff --git a/src/page/firearms/index.tsx b/src/page/firearms/index.tsx index 5095d06..3062959 100644 --- a/src/page/firearms/index.tsx +++ b/src/page/firearms/index.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react" import { FirearmApi } from "@/api" import { Firearm, FirearmType } from "@/types" -import { Card, Col, Pagination, Row, Tag, Typography } from "antd" +import { Card, Col, Pagination, Row, Select, Tag, Typography } from "antd" const firearmTypeText: Record = { RIFLE: "步枪", @@ -14,8 +14,12 @@ const firearmTypeText: Record = { SPECIAL: "特殊", } +const allTypeValue = "ALL" +type FirearmTypeFilter = FirearmType | typeof allTypeValue + export default function FirearmsPage() { const [page, setPage] = useState(1) + const [typeFilter, setTypeFilter] = useState(allTypeValue) const [firearms, setFirearms] = useState([]) const [total, setTotal] = useState(0) @@ -25,14 +29,32 @@ export default function FirearmsPage() { size: 12, sortBy: "id", direction: "ASC", + type: typeFilter === allTypeValue ? undefined : typeFilter, }).then((pagedData) => { setFirearms(pagedData.items) setTotal(pagedData.totalElements) }) - }, [page]) + }, [page, typeFilter]) return ( <> +
+ + className="w-full sm:w-64" + value={typeFilter} + options={[ + { value: allTypeValue, label: "全部类型" }, + ...Object.entries(firearmTypeText).map(([value, label]) => ({ + value, + label, + })), + ]} + onChange={(nextType) => { + setPage(1) + setTypeFilter(nextType) + }} + /> +
{firearms.map((firearm) => ( @@ -47,13 +69,12 @@ export default function FirearmsPage() {
{firearmTypeText[firearm.type]} - ID: {firearm.id}
- 解锁等级: + 武器输出等级: {firearm.level} - + {firearm.review || "暂无描述"}