feat: add create and edit modals for firearms management

This commit is contained in:
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>
)
}
+91
View File
@@ -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>
)
}
+75 -8
View File
@@ -1,9 +1,11 @@
import { useEffect, useState } from "react" import { useCallback, useEffect, useState } from "react"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import { FirearmApi } from "@/api" import { FirearmApi } from "@/api"
import FirearmCreateModal from "@/components/firearm-create-modal"
import FirearmEditModal from "@/components/firearm-edit-modal"
import { useAppSelector } from "@/store" import { useAppSelector } from "@/store"
import { Firearm, FirearmType } from "@/types" 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> = { const firearmTypeText: Record<FirearmType, string> = {
RIFLE: "步枪", RIFLE: "步枪",
@@ -25,13 +27,17 @@ function asDps(fireRate: number, damage: number) {
export default function FirearmsPage() { export default function FirearmsPage() {
const user = useAppSelector((state) => state.auth.user) const user = useAppSelector((state) => state.auth.user)
const { message } = App.useApp()
const [page, setPage] = useState<number>(1) const [page, setPage] = useState<number>(1)
const [typeFilter, setTypeFilter] = useState<FirearmTypeFilter>(allTypeValue) const [typeFilter, setTypeFilter] = useState<FirearmTypeFilter>(allTypeValue)
const [firearms, setFirearms] = useState<Firearm[]>([]) const [firearms, setFirearms] = useState<Firearm[]>([])
const [total, setTotal] = useState<number>(0) 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(() => { const loadFirearms = useCallback(() => {
FirearmApi.getFirearms({ return FirearmApi.getFirearms({
page: page - 1, page: page - 1,
size: 12, size: 12,
sortBy: "id", sortBy: "id",
@@ -43,9 +49,37 @@ export default function FirearmsPage() {
}) })
}, [page, typeFilter]) }, [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 ( 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> <Select<FirearmTypeFilter>
className="w-full sm:w-64" className="w-full sm:w-64"
value={typeFilter} value={typeFilter}
@@ -70,9 +104,23 @@ export default function FirearmsPage() {
title={firearm.name} title={firearm.name}
extra={ extra={
user ? ( user ? (
<Button type="link" size="small"> <div className="flex items-center gap-1">
<Button type="link" size="small" onClick={() => setEditingFirearm(firearm)}>
</Button>
</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 ) : null
} }
variant="outlined" variant="outlined"
@@ -136,6 +184,25 @@ export default function FirearmsPage() {
showSizeChanger={false} showSizeChanger={false}
/> />
</div> </div>
<FirearmCreateModal
open={createModalOpen}
onCancel={() => setCreateModalOpen(false)}
onSuccess={() => {
setCreateModalOpen(false)
loadFirearms()
}}
/>
<FirearmEditModal
open={!!editingFirearm}
firearm={editingFirearm}
onCancel={() => setEditingFirearm(null)}
onSuccess={() => {
setEditingFirearm(null)
loadFirearms()
}}
/>
</> </>
) )
} }