feat: add create and edit modals for modifications management

This commit is contained in:
2026-04-23 16:12:48 +08:00
parent abc4c68a0f
commit 2fc865ea57
6 changed files with 570 additions and 17 deletions
@@ -0,0 +1,100 @@
import { useEffect, useState } from "react"
import { App, Form, Modal } from "antd"
import { ModificationApi } from "@/api"
import ModificationForm from "@/components/modification-form"
import { Modification, ModificationRequest } from "@/types"
interface ModificationCreateModalProps {
open: boolean
defaultFirearmId?: number
lockedFirearmId?: number
onCancel: () => void
onSuccess: (modification: Modification) => void
}
function normalizeRequest(values: ModificationRequest): ModificationRequest {
return {
firearmId: values.firearmId,
name: values.name.trim(),
code: values.code.trim(),
tags: values.tags?.map((tag) => tag.trim()).filter(Boolean) || [],
note: values.note?.trim() || undefined,
author: values.author?.trim() || undefined,
videoUrl: values.videoUrl?.trim() || undefined,
accessories: (values.accessories || []).map((accessory) => ({
slotName: accessory.slotName.trim(),
accessoryName: accessory.accessoryName.trim(),
tunings: (accessory.tunings || []).map((tuning) => ({
tuningName: tuning.tuningName.trim(),
tuningValue: tuning.tuningValue,
})),
})),
}
}
export default function ModificationCreateModal({
open,
defaultFirearmId,
lockedFirearmId,
onCancel,
onSuccess,
}: ModificationCreateModalProps) {
const { message } = App.useApp()
const [form] = Form.useForm<ModificationRequest>()
const [loading, setLoading] = useState(false)
useEffect(() => {
if (!open) {
return
}
form.setFieldsValue({
firearmId: lockedFirearmId ?? defaultFirearmId,
accessories: [{ slotName: "", accessoryName: "", tunings: [] }],
tags: [],
})
}, [open, defaultFirearmId, lockedFirearmId, form])
async function onFinish(values: ModificationRequest) {
setLoading(true)
try {
const modification = await ModificationApi.addModification(
normalizeRequest({
...values,
firearmId: lockedFirearmId ?? values.firearmId,
})
)
message.success("改枪码创建成功")
form.resetFields()
onSuccess(modification)
} catch {
message.error("改枪码创建失败,请稍后重试")
} finally {
setLoading(false)
}
}
return (
<Modal
title="新建改枪"
open={open}
onCancel={onCancel}
onOk={() => form.submit()}
okText="创建"
cancelText="取消"
confirmLoading={loading}
width={820}
destroyOnHidden
afterOpenChange={(visible) => {
if (!visible) {
form.resetFields()
}
}}
>
<ModificationForm form={form} onFinish={onFinish} lockFirearmId={lockedFirearmId} />
</Modal>
)
}