feat: add firearm page for display firearms

src/page/firearms/index.tsx

@@ -1,9 +1,7 @@
-import { useEffect, useMemo, useState } from "react"
-import { Link } from "react-router-dom"
+import { useEffect, useState } from "react"
 import { FirearmApi } from "@/api"
 import { Firearm, FirearmType } from "@/types"
-import { setFirearmsPage } from "@/store/firearms-slice"
-import { useAppDispatch, useAppSelector } from "@/store"
+import { Card, Col, Pagination, Row, Tag, Typography } from "antd"
 
 const firearmTypeText: Record<FirearmType, string> = {
   RIFLE: "步枪",
@@ -17,171 +15,72 @@ const firearmTypeText: Record<FirearmType, string> = {
 }
 
 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)
-    }
+  const [page, setPage] = useState<number>(1)
+  const [firearms, setFirearms] = useState<Firearm[]>([])
+  const [total, setTotal] = useState<number>(0)
 
+  useEffect(() => {
     FirearmApi.getFirearms({
-      page,
-      size: pageSize,
-      sortBy: "name",
+      page: page - 1,
+      size: 12,
+      sortBy: "id",
       direction: "ASC",
+    }).then((pagedData) => {
+      setFirearms(pagedData.items)
+      setTotal(pagedData.totalElements)
     })
-      .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])
+  }, [page])
 
   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 className="mb-6">
+        <Row gutter={[16, 16]}>
+          {firearms.map((firearm) => (
+            <Col key={firearm.id} xs={24} md={12} lg={8}>
+              <Card
+                title={firearm.name}
+                variant="outlined"
+                styles={{
+                  header: { minHeight: 56 },
+                }}
+              >
+                <div className="flex flex-col gap-3">
+                  <div className="flex items-center justify-between">
+                    <Tag color="blue">{firearmTypeText[firearm.type]}</Tag>
+                    <Typography.Text type="secondary">ID: {firearm.id}</Typography.Text>
+                  </div>
+                  <Typography.Text>
+                    <strong>解锁等级：</strong>
+                    {firearm.level}
+                  </Typography.Text>
+                  <Typography.Paragraph className="!mb-0" type="secondary" ellipsis={{ rows: 3 }}>
+                    {firearm.review || "暂无描述"}
+                  </Typography.Paragraph>
+                </div>
+              </Card>
+            </Col>
+          ))}
+          {firearms.length === 0 && (
+            <Col span={24}>
+              <Card>
+                <Typography.Text type="secondary">暂无武器数据</Typography.Text>
+              </Card>
+            </Col>
+          )}
+        </Row>
       </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 className="flex justify-end">
+        <Pagination
+          align="end"
+          current={page}
+          pageSize={12}
+          total={total}
+          onChange={(nextPage) => {
+            setPage(nextPage)
+          }}
+          showSizeChanger={false}
+        />
       </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>
+    </>
   )
 }