feat: add create and edit modals for firearms management

2026-04-21 23:40:00 +08:00
parent 16db0eb0ee
commit 745c98bc20
4 changed files with 291 additions and 8 deletions
@@ -0,0 +1,58 @@
+import { useState } from "react"
+import { App, Form, Modal } from "antd"
+import { FirearmApi } from "@/api"
+import FirearmForm from "@/components/firearm-form"
+import { AddFirearmRequest, Firearm } from "@/types"
+
+interface FirearmCreateModalProps {
+  open: boolean
+  onCancel: () => void
+  onSuccess: (firearm: Firearm) => void
+}
+
+function normalizeRequest(values: AddFirearmRequest): AddFirearmRequest {
+  return {
+    ...values,
+    review: values.review?.trim() || null,
+  }
+}
+
+export default function FirearmCreateModal({ open, onCancel, onSuccess }: FirearmCreateModalProps) {
+  const { message } = App.useApp()
+  const [form] = Form.useForm<AddFirearmRequest>()
+  const [loading, setLoading] = useState(false)
+
+  async function onFinish(values: AddFirearmRequest) {
+    setLoading(true)
+    try {
+      const firearm = await FirearmApi.addFirearm(normalizeRequest(values))
+      message.success("武器创建成功")
+      form.resetFields()
+      onSuccess(firearm)
+    } catch {
+      message.error("武器创建失败，请稍后重试")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal
+      title="新建武器"
+      open={open}
+      onCancel={onCancel}
+      onOk={() => form.submit()}
+      okText="创建"
+      cancelText="取消"
+      confirmLoading={loading}
+      destroyOnHidden
+      afterOpenChange={(visible) => {
+        if (!visible) {
+          form.resetFields()
+        }
+      }}>
+      <FirearmForm form={form} onFinish={onFinish} />
+    </Modal>
+  )
+}
+
@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react"
+import { App, Form, Modal } from "antd"
+import { FirearmApi } from "@/api"
+import FirearmForm from "@/components/firearm-form"
+import { AddFirearmRequest, Firearm } from "@/types"
+
+interface FirearmEditModalProps {
+  open: boolean
+  firearm: Firearm | null
+  onCancel: () => void
+  onSuccess: (firearm: Firearm) => void
+}
+
+function normalizeRequest(values: AddFirearmRequest): AddFirearmRequest {
+  return {
+    ...values,
+    review: values.review?.trim() || null,
+  }
+}
+
+export default function FirearmEditModal({ open, firearm, onCancel, onSuccess }: FirearmEditModalProps) {
+  const { message } = App.useApp()
+  const [form] = Form.useForm<AddFirearmRequest>()
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!open || !firearm) {
+      return
+    }
+
+    const { id: _id, ...editableValues } = firearm
+    form.setFieldsValue(editableValues)
+  }, [open, firearm, form])
+
+  async function onFinish(values: AddFirearmRequest) {
+    if (!firearm) {
+      return
+    }
+
+    setLoading(true)
+    try {
+      const updated = await FirearmApi.editFirearm(firearm.id, normalizeRequest(values))
+      message.success("武器更新成功")
+      onSuccess(updated)
+    } catch {
+      message.error("武器更新失败，请稍后重试")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal
+      title="编辑武器"
+      open={open}
+      onCancel={onCancel}
+      onOk={() => form.submit()}
+      okText="保存"
+      cancelText="取消"
+      confirmLoading={loading}
+      destroyOnHidden
+    >
+      <FirearmForm form={form} onFinish={onFinish} />
+    </Modal>
+  )
+}
+
@@ -0,0 +1,91 @@
+import { Form, Input, InputNumber, Select } from "antd"
+import { AddFirearmRequest, FirearmType } from "@/types"
+
+const firearmTypeText: Record<FirearmType, string> = {
+  RIFLE: "步枪",
+  SUB_MACHINE_GUN: "冲锋枪",
+  SHOTGUN: "霰弹枪",
+  LIGHT_MACHINE_GUN: "轻机枪",
+  DESIGNATED_MARKSMAN_RIFLE: "射手步枪",
+  SNIPER_RIFLE: "狙击步枪",
+  PISTOL: "手枪",
+  SPECIAL: "特殊",
+}
+
+interface FirearmFormProps {
+  form: ReturnType<typeof Form.useForm<AddFirearmRequest>>[0]
+  onFinish: (values: AddFirearmRequest) => void
+}
+
+export default function FirearmForm({ form, onFinish }: FirearmFormProps) {
+  return (
+    <Form<AddFirearmRequest> form={form} layout="vertical" onFinish={onFinish} requiredMark={false}>
+      <Form.Item<AddFirearmRequest>
+        name="name"
+        label="武器名称"
+        rules={[{ required: true, message: "请输入武器名称" }]}
+      >
+        <Input placeholder="请输入武器名称" />
+      </Form.Item>
+
+      <Form.Item<AddFirearmRequest>
+        name="type"
+        label="武器类型"
+        rules={[{ required: true, message: "请选择武器类型" }]}
+      >
+        <Select
+          placeholder="请选择武器类型"
+          options={Object.entries(firearmTypeText).map(([value, label]) => ({
+            value,
+            label,
+          }))}
+        />
+      </Form.Item>
+
+      <Form.Item<AddFirearmRequest>
+        name="level"
+        label="武器输出等级"
+        rules={[{ required: true, message: "请输入武器输出等级" }]}
+      >
+        <Input placeholder="例如：T0" />
+      </Form.Item>
+
+      <Form.Item<AddFirearmRequest>
+        name="calibre"
+        label="子弹口径"
+        rules={[{ required: true, message: "请输入子弹口径" }]}
+      >
+        <Input placeholder="例如：5.56x45mm" />
+      </Form.Item>
+
+      <Form.Item<AddFirearmRequest>
+        name="fireRate"
+        label="射速（每分钟发数）"
+        rules={[{ required: true, message: "请输入射速" }]}
+      >
+        <InputNumber className="w-full" min={1} precision={0} placeholder="请输入射速" />
+      </Form.Item>
+
+      <Form.Item<AddFirearmRequest>
+        name="armourDamage"
+        label="甲伤"
+        rules={[{ required: true, message: "请输入甲伤" }]}
+      >
+        <InputNumber className="w-full" min={0} precision={0} placeholder="请输入甲伤" />
+      </Form.Item>
+
+      <Form.Item<AddFirearmRequest>
+        name="bodyDamage"
+        label="肉伤"
+        rules={[{ required: true, message: "请输入肉伤" }]}
+      >
+        <InputNumber className="w-full" min={0} precision={0} placeholder="请输入肉伤" />
+      </Form.Item>
+
+      <Form.Item<AddFirearmRequest> name="review" label="描述">
+        <Input.TextArea rows={4} placeholder="可选：补充武器特点或使用建议" />
+      </Form.Item>
+    </Form>
+  )
+}
+
@@ -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">
+                    <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()
+        }}
+      />
    </>
  )
 }