feat: add create and edit modals for firearms management

src/page/firearms/index.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 import { FirearmApi } from "@/api"
+import FirearmCreateModal from "@/components/firearm-create-modal"
+import FirearmEditModal from "@/components/firearm-edit-modal"
 import { useAppSelector } from "@/store"
 import { Firearm, FirearmType } from "@/types"
-import { Button, Card, Col, Pagination, Row, Select, Tag, Typography } from "antd"
+import { Button, Card, Col, Pagination, Popconfirm, Row, Select, Tag, Typography, App } from "antd"
 
 const firearmTypeText: Record<FirearmType, string> = {
   RIFLE: "步枪",
@@ -25,13 +27,17 @@ function asDps(fireRate: number, damage: number) {
 
 export default function FirearmsPage() {
   const user = useAppSelector((state) => state.auth.user)
+  const { message } = App.useApp()
   const [page, setPage] = useState<number>(1)
   const [typeFilter, setTypeFilter] = useState<FirearmTypeFilter>(allTypeValue)
   const [firearms, setFirearms] = useState<Firearm[]>([])
   const [total, setTotal] = useState<number>(0)
+  const [createModalOpen, setCreateModalOpen] = useState(false)
+  const [editingFirearm, setEditingFirearm] = useState<Firearm | null>(null)
+  const [deletingId, setDeletingId] = useState<number | null>(null)
 
-  useEffect(() => {
-    FirearmApi.getFirearms({
+  const loadFirearms = useCallback(() => {
+    return FirearmApi.getFirearms({
       page: page - 1,
       size: 12,
       sortBy: "id",
@@ -43,9 +49,37 @@ export default function FirearmsPage() {
     })
   }, [page, typeFilter])
 
+  useEffect(() => {
+    loadFirearms()
+  }, [loadFirearms])
+
+  async function handleDelete(firearm: Firearm) {
+    setDeletingId(firearm.id)
+    try {
+      await FirearmApi.removeFirearm(firearm.id)
+      message.success("武器删除成功")
+      if (firearms.length === 1 && page > 1) {
+        setPage(page - 1)
+      } else {
+        loadFirearms()
+      }
+    } catch {
+      message.error("武器删除失败，请稍后重试")
+    } finally {
+      setDeletingId(null)
+    }
+  }
+
   return (
     <>
-      <div className="mb-4 flex justify-end">
+      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          {user && (
+            <Button type="primary" onClick={() => setCreateModalOpen(true)}>
+              新建武器
+            </Button>
+          )}
+        </div>
         <Select<FirearmTypeFilter>
           className="w-full sm:w-64"
           value={typeFilter}
@@ -70,9 +104,23 @@ export default function FirearmsPage() {
                 title={firearm.name}
                 extra={
                   user ? (
-                    <Button type="link" size="small">
-                      编辑
-                    </Button>
+                    <div className="flex items-center gap-1">
+                      <Button type="link" size="small" onClick={() => setEditingFirearm(firearm)}>
+                        编辑
+                      </Button>
+                      <Popconfirm
+                        title="确认删除武器"
+                        description={`确定要删除 ${firearm.name} 吗？该操作不可撤销。`}
+                        okText="删除"
+                        cancelText="取消"
+                        okButtonProps={{ danger: true, loading: deletingId === firearm.id }}
+                        onConfirm={() => handleDelete(firearm)}
+                      >
+                        <Button type="link" danger size="small" loading={deletingId === firearm.id}>
+                          删除
+                        </Button>
+                      </Popconfirm>
+                    </div>
                   ) : null
                 }
                 variant="outlined"
@@ -136,6 +184,25 @@ export default function FirearmsPage() {
           showSizeChanger={false}
         />
       </div>
+
+      <FirearmCreateModal
+        open={createModalOpen}
+        onCancel={() => setCreateModalOpen(false)}
+        onSuccess={() => {
+          setCreateModalOpen(false)
+          loadFirearms()
+        }}
+      />
+
+      <FirearmEditModal
+        open={!!editingFirearm}
+        firearm={editingFirearm}
+        onCancel={() => setEditingFirearm(null)}
+        onSuccess={() => {
+          setEditingFirearm(null)
+          loadFirearms()
+        }}
+      />
     </>
   )
 }