feat: add create and edit modals for firearms management
This commit is contained in:
@@ -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 { 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()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user