GitHub
@@ -0,0 +1,13 @@
|
||||
import { LoginRequest, User } from "@/types"
|
||||
import { WebClient } from "@/shared/web-client"
|
||||
|
||||
export async function login(loginRequest: LoginRequest): Promise<User> {
|
||||
const { data } = await WebClient.post<User>("/auth/login", {
|
||||
...loginRequest,
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
export async function logout() {
|
||||
await WebClient.get<void>("/auth/logout")
|
||||
}
|
||||
+19
-1
@@ -1,4 +1,4 @@
|
||||
import { Direction, Firearm, FirearmType, Page, PageQueryParams } from "@/types"
|
||||
import { AddFirearmRequest, Direction, Firearm, FirearmType, Page, PageQueryParams } from "@/types"
|
||||
import { WebClient } from "@/shared/web-client"
|
||||
import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
|
||||
|
||||
@@ -36,3 +36,21 @@ export async function getFirearm(id: number): Promise<Firearm> {
|
||||
const { data } = await WebClient.get<Firearm>(`/firearms/${id}`)
|
||||
return data
|
||||
}
|
||||
|
||||
/**
|
||||
* 新建武器
|
||||
* @param request
|
||||
*/
|
||||
export async function addFirearm(request: AddFirearmRequest): Promise<Firearm> {
|
||||
const { data } = await WebClient.post<Firearm>("/firearms", request)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function editFirearm(id: number, request: AddFirearmRequest): Promise<Firearm> {
|
||||
const { data } = await WebClient.put<Firearm>(`/firearms/${id}`, request)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function removeFirearm(id: number) {
|
||||
await WebClient.delete<void>(`/firearms/${id}`)
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export * as FirearmApi from "./firearm-api"
|
||||
export * as ModificationApi from "./modification-api"
|
||||
export * as TagApi from "./tag-api"
|
||||
export * as AuthApi from "./auth-api"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Modification, Page, PageQueryParams } from "@/types"
|
||||
import { Modification, ModificationRequest, Page, PageQueryParams } from "@/types"
|
||||
import { WebClient } from "@/shared/web-client"
|
||||
import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
|
||||
|
||||
@@ -30,4 +30,38 @@ export async function getModifications(params?: ModificationParams): Promise<Pag
|
||||
export async function getModification(id: number): Promise<Modification> {
|
||||
const { data } = await WebClient.get<Modification>(`/modifications/${id}`)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function addModification(modification: ModificationRequest): Promise<Modification> {
|
||||
const { data } = await WebClient.post<Modification>("/modifications", modification)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function addModifications(
|
||||
modifications: ModificationRequest[]
|
||||
): Promise<Modification[]> {
|
||||
const { data } = await WebClient.post<Modification[]>("/modifications/batch", {
|
||||
modifications,
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
export async function editModification(
|
||||
id: number,
|
||||
modification: ModificationRequest
|
||||
): Promise<Modification> {
|
||||
const { data } = await WebClient.put<Modification>(`/modifications/${id}`, modification)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function removeModification(
|
||||
id: number
|
||||
): Promise<void> {
|
||||
await WebClient.delete(`/modifications/${id}`)
|
||||
}
|
||||
|
||||
export async function removeModifications(ids: number[]) {
|
||||
const urlSearchParams = new URLSearchParams()
|
||||
ids.forEach((id) => urlSearchParams.append("ids", "" + id))
|
||||
await WebClient.delete(`/modifications/batch-delete?${urlSearchParams.toString()}`)
|
||||
}
|
||||
@@ -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,101 @@
|
||||
import { Form, Input, InputNumber, Select } from "antd"
|
||||
import { AddFirearmRequest, FirearmType } from "@/types"
|
||||
import calibres from "@/constant/calibres.json"
|
||||
|
||||
const firearmTypeText: Record<FirearmType, string> = {
|
||||
RIFLE: "步枪",
|
||||
SUB_MACHINE_GUN: "冲锋枪",
|
||||
SHOTGUN: "霰弹枪",
|
||||
LIGHT_MACHINE_GUN: "轻机枪",
|
||||
DESIGNATED_MARKSMAN_RIFLE: "射手步枪",
|
||||
SNIPER_RIFLE: "狙击步枪",
|
||||
PISTOL: "手枪",
|
||||
SPECIAL: "特殊",
|
||||
}
|
||||
|
||||
const calibreOptions = calibres.map((calibre) => ({
|
||||
value: calibre,
|
||||
label: calibre,
|
||||
}))
|
||||
|
||||
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: "请选择子弹口径" }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择子弹口径"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
options={calibreOptions}
|
||||
/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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 ModificationEditModalProps {
|
||||
open: boolean
|
||||
modification: Modification | null
|
||||
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 ModificationEditModal({
|
||||
open,
|
||||
modification,
|
||||
lockedFirearmId,
|
||||
onCancel,
|
||||
onSuccess,
|
||||
}: ModificationEditModalProps) {
|
||||
const { message } = App.useApp()
|
||||
const [form] = Form.useForm<ModificationRequest>()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !modification) {
|
||||
return
|
||||
}
|
||||
|
||||
const { id: _id, ...editableValues } = modification
|
||||
form.setFieldsValue({
|
||||
...editableValues,
|
||||
firearmId: lockedFirearmId ?? editableValues.firearmId,
|
||||
tags: editableValues.tags || [],
|
||||
accessories: editableValues.accessories || [],
|
||||
})
|
||||
}, [open, modification, lockedFirearmId, form])
|
||||
|
||||
async function onFinish(values: ModificationRequest) {
|
||||
if (!modification) {
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const updated = await ModificationApi.editModification(
|
||||
modification.id,
|
||||
normalizeRequest({
|
||||
...values,
|
||||
firearmId: lockedFirearmId ?? values.firearmId,
|
||||
})
|
||||
)
|
||||
message.success("改枪码更新成功")
|
||||
onSuccess(updated)
|
||||
} catch {
|
||||
message.error("改枪码更新失败，请稍后重试")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="编辑改枪"
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
onOk={() => form.submit()}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
confirmLoading={loading}
|
||||
width={820}
|
||||
destroyOnHidden
|
||||
>
|
||||
<ModificationForm form={form} onFinish={onFinish} lockFirearmId={lockedFirearmId} />
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { FirearmApi } from "@/api"
|
||||
import slotNames from "@/constant/slots.json"
|
||||
import { Firearm, ModificationRequest } from "@/types"
|
||||
import { AutoComplete, Button, Card, Form, Input, InputNumber, Select, Space } from "antd"
|
||||
|
||||
interface ModificationFormProps {
|
||||
form: ReturnType<typeof Form.useForm<ModificationRequest>>[0]
|
||||
onFinish: (values: ModificationRequest) => void
|
||||
lockFirearmId?: number
|
||||
}
|
||||
|
||||
const slotOptions = slotNames.map((slotName) => ({ value: slotName }))
|
||||
|
||||
export default function ModificationForm({ form, onFinish, lockFirearmId }: ModificationFormProps) {
|
||||
const [firearmOptions, setFirearmOptions] = useState<Array<{ value: number; label: string }>>([])
|
||||
const [firearmLoading, setFirearmLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
|
||||
async function loadAllFirearms() {
|
||||
setFirearmLoading(true)
|
||||
try {
|
||||
const allFirearms: Firearm[] = []
|
||||
let page = 0
|
||||
let totalPages = 1
|
||||
|
||||
while (page < totalPages) {
|
||||
const paged = await FirearmApi.getFirearms({
|
||||
page,
|
||||
size: 100,
|
||||
sortBy: "id",
|
||||
direction: "ASC",
|
||||
})
|
||||
|
||||
allFirearms.push(...paged.items)
|
||||
totalPages = paged.totalPages
|
||||
page += 1
|
||||
}
|
||||
|
||||
if (!active) {
|
||||
return
|
||||
}
|
||||
|
||||
setFirearmOptions(
|
||||
allFirearms.map((firearm) => ({
|
||||
value: firearm.id,
|
||||
label: `${firearm.name}`,
|
||||
}))
|
||||
)
|
||||
} finally {
|
||||
if (active) {
|
||||
setFirearmLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void loadAllFirearms()
|
||||
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
const mergedFirearmOptions = useMemo(() => {
|
||||
if (lockFirearmId === undefined || firearmOptions.some((option) => option.value === lockFirearmId)) {
|
||||
return firearmOptions
|
||||
}
|
||||
|
||||
return [{ value: lockFirearmId, label: `武器 ID: ${lockFirearmId}` }, ...firearmOptions]
|
||||
}, [firearmOptions, lockFirearmId])
|
||||
|
||||
return (
|
||||
<Form<ModificationRequest>
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={onFinish}
|
||||
requiredMark={false}>
|
||||
<Form.Item<ModificationRequest>
|
||||
name="firearmId"
|
||||
label="武器"
|
||||
rules={[{ required: true, message: "请输入武器" }]}>
|
||||
<Select<number>
|
||||
className="w-full"
|
||||
placeholder="请选择武器"
|
||||
options={mergedFirearmOptions}
|
||||
loading={firearmLoading}
|
||||
disabled={lockFirearmId !== undefined}
|
||||
showSearch={{
|
||||
filterOption: (input, option) => {
|
||||
const labelText = String(option?.label ?? "")
|
||||
return labelText.toLowerCase().includes(input.toLowerCase())
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest>
|
||||
name="name"
|
||||
label="改装名称"
|
||||
rules={[{ required: true, message: "请输入改装名称" }]}>
|
||||
<Input placeholder="请输入改装名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest>
|
||||
name="code"
|
||||
label="改枪码"
|
||||
rules={[{ required: true, message: "请输入改枪码" }]}>
|
||||
<Input placeholder="请输入改枪码" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="tags" label="标签">
|
||||
<Select mode="tags" tokenSeparators={[",", " "]} placeholder="可选：输入后回车" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="author" label="作者">
|
||||
<Input placeholder="可选：请输入作者" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="videoUrl" label="视频链接">
|
||||
<Input placeholder="可选：请输入视频链接" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="note" label="备注">
|
||||
<Input.TextArea rows={3} placeholder="可选：补充说明" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.List name="accessories">
|
||||
{(accessoryFields, { add: addAccessory, remove: removeAccessory }) => (
|
||||
<div className="flex flex-col gap-4">
|
||||
{accessoryFields.map((accessoryField) => (
|
||||
<Card
|
||||
key={accessoryField.key}
|
||||
title={`配件 ${accessoryField.name + 1}`}
|
||||
size="small"
|
||||
extra={
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => removeAccessory(accessoryField.name)}>
|
||||
删除配件
|
||||
</Button>
|
||||
}>
|
||||
<Form.Item
|
||||
name={[accessoryField.name, "slotName"]}
|
||||
label="槽位"
|
||||
rules={[{ required: true, message: "请选择或输入槽位" }]}>
|
||||
<AutoComplete options={slotOptions} placeholder="请选择或输入槽位" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name={[accessoryField.name, "accessoryName"]}
|
||||
label="配件名称"
|
||||
rules={[{ required: true, message: "请输入配件名称" }]}>
|
||||
<Input placeholder="请输入配件名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.List name={[accessoryField.name, "tunings"]}>
|
||||
{(tuningFields, { add: addTuning, remove: removeTuning }) => (
|
||||
<div className="flex flex-col gap-3">
|
||||
{tuningFields.map((tuningField) => (
|
||||
<Space key={tuningField.key} align="start" className="w-full" wrap>
|
||||
<Form.Item
|
||||
name={[tuningField.name, "tuningName"]}
|
||||
label="调校项"
|
||||
rules={[{ required: true, message: "请输入调校项" }]}>
|
||||
<Input placeholder="例如：后坐控制" className="w-44" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[tuningField.name, "tuningValue"]}
|
||||
label="调校值"
|
||||
rules={[{ required: true, message: "请输入调校值" }]}>
|
||||
<InputNumber className="w-32" placeholder="例如：0.35" />
|
||||
</Form.Item>
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
className="mt-8"
|
||||
onClick={() => removeTuning(tuningField.name)}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
))}
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => addTuning({ tuningName: "", tuningValue: 0 })}>
|
||||
添加调校
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
</Card>
|
||||
))}
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => addAccessory({ slotName: "", accessoryName: "", tunings: [] })}>
|
||||
添加配件
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
[
|
||||
".338 Lap Mag",
|
||||
".357 Magnum",
|
||||
".45 ACP",
|
||||
".50 AE",
|
||||
".50 BMG",
|
||||
"12 Gauge",
|
||||
"12.7x55mm",
|
||||
"5.45x39mm",
|
||||
"5.56x45mm",
|
||||
"5.7x28mm",
|
||||
"5.8x42mm",
|
||||
"6.8x51mm",
|
||||
"7.62x39mm",
|
||||
"7.62x51mm",
|
||||
"7.62x54mm",
|
||||
"9x19mm",
|
||||
"9x39mm",
|
||||
"4.6x30mm",
|
||||
".300 BLK",
|
||||
"箭矢",
|
||||
"45-70 Govt"
|
||||
]
|
||||
@@ -0,0 +1,23 @@
|
||||
[
|
||||
"枪口",
|
||||
"左导轨",
|
||||
"右导轨",
|
||||
"枪管",
|
||||
"左贴片",
|
||||
"右贴片",
|
||||
"上导轨",
|
||||
"上贴片",
|
||||
"下导轨",
|
||||
"瞄准镜",
|
||||
"战术设备",
|
||||
"增高座瞄具",
|
||||
"侧瞄具",
|
||||
"枪托",
|
||||
"枪托套件",
|
||||
"后握把",
|
||||
"前握把",
|
||||
"导轨脚架",
|
||||
"弹匣座",
|
||||
"弹匣",
|
||||
"托腮板"
|
||||
]
|
||||
@@ -1 +0,0 @@
|
||||
import "./dayjs"
|
||||
@@ -1,6 +1,10 @@
|
||||
import { Outlet, Link } from "react-router-dom"
|
||||
import { useMemo } from "react"
|
||||
import dayjs from "dayjs"
|
||||
import { Dropdown } from "antd"
|
||||
import { AuthApi } from "@/api"
|
||||
import { useAppDispatch, useAppSelector } from "@/store"
|
||||
import { clearCurrentUser } from "@/store/auth-slice"
|
||||
|
||||
/**
|
||||
* Main application component that serves as the root layout.
|
||||
@@ -8,6 +12,16 @@ import dayjs from "dayjs"
|
||||
*/
|
||||
export default function HeroLayout() {
|
||||
const today = useMemo(() => dayjs(), [])
|
||||
const user = useAppSelector((state) => state.auth.user)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
async function handleLogout() {
|
||||
try {
|
||||
await AuthApi.logout()
|
||||
} finally {
|
||||
dispatch(clearCurrentUser())
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50">
|
||||
@@ -33,6 +47,32 @@ export default function HeroLayout() {
|
||||
>
|
||||
改枪码
|
||||
</Link>
|
||||
{user ? (
|
||||
<Dropdown
|
||||
trigger={["hover"]}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "logout",
|
||||
label: "退出登录",
|
||||
danger: true,
|
||||
onClick: handleLogout,
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<span className="cursor-pointer text-gray-700 px-3 py-2 rounded-md text-sm font-medium">
|
||||
{user.username}
|
||||
</span>
|
||||
</Dropdown>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
||||
>
|
||||
登录
|
||||
</Link>
|
||||
)}
|
||||
<a
|
||||
href="https://github.com/zihluwang/delta-force-firearm-modification-codes"
|
||||
target="_blank"
|
||||
|
||||
@@ -6,7 +6,6 @@ import { PersistGate } from "redux-persist/integration/react"
|
||||
import { App as AntApp, ConfigProvider as AntConfigProvider } from "antd"
|
||||
import { StyleProvider as AntStyleProvider } from "@ant-design/cssinjs"
|
||||
import AntSimplifiedChinese from "antd/locale/zh_CN"
|
||||
import "@/init"
|
||||
import router from "@/router"
|
||||
import store, { persistor } from "@/store"
|
||||
import "./index.css"
|
||||
|
||||
@@ -1,8 +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: "步枪",
|
||||
@@ -23,13 +26,18 @@ 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",
|
||||
@@ -41,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}
|
||||
@@ -66,6 +102,27 @@ export default function FirearmsPage() {
|
||||
<Col key={firearm.id} xs={24} md={12} lg={8}>
|
||||
<Card
|
||||
title={firearm.name}
|
||||
extra={
|
||||
user ? (
|
||||
<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"
|
||||
styles={{
|
||||
header: { minHeight: 56 },
|
||||
@@ -127,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()
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { App, Button, Card, Form, Input, Typography } from "antd"
|
||||
import { AuthApi } from "@/api"
|
||||
import { useAppDispatch } from "@/store"
|
||||
import { setCurrentUser } from "@/store/auth-slice"
|
||||
import { LoginRequest } from "@/types"
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate()
|
||||
const { message } = App.useApp()
|
||||
const dispatch = useAppDispatch()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function onFinish(values: LoginRequest) {
|
||||
setLoading(true)
|
||||
try {
|
||||
const user = await AuthApi.login(values)
|
||||
dispatch(setCurrentUser(user))
|
||||
message.success(`欢迎回来，${user.username}`)
|
||||
navigate("/firearms")
|
||||
} catch {
|
||||
message.error("登录失败，请检查帐号或密码")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 px-4 py-10 sm:py-16">
|
||||
<div className="mx-auto max-w-md">
|
||||
<Card bordered={false} className="shadow-sm">
|
||||
<Typography.Title level={3} className="!mb-2 text-center">
|
||||
登录
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph className="!mb-6 text-center !text-gray-500">
|
||||
使用你的帐号登录后即可继续操作
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Form<LoginRequest> layout="vertical" onFinish={onFinish} requiredMark={false}>
|
||||
<Form.Item<LoginRequest>
|
||||
name="principle"
|
||||
label="帐号"
|
||||
rules={[{ required: true, message: "请输入帐号" }]}
|
||||
>
|
||||
<Input autoComplete="username" placeholder="请输入帐号" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<LoginRequest>
|
||||
name="credential"
|
||||
label="密码"
|
||||
rules={[{ required: true, message: "请输入密码" }]}
|
||||
>
|
||||
<Input.Password autoComplete="current-password" placeholder="请输入密码" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item className="!mb-0">
|
||||
<Button type="primary" htmlType="submit" loading={loading} block>
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+159
-37
@@ -1,30 +1,46 @@
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { App, Button, Card, Col, Pagination, Popconfirm, Row, Select, Space, Tag, Typography } from "antd"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { Link, useSearchParams } from "react-router-dom"
|
||||
import { Button, Card, Col, Pagination, Row, Select, Space, Tag, Typography } from "antd"
|
||||
import { ModificationApi, TagApi } from "@/api"
|
||||
import ModificationCreateModal from "@/components/modification-create-modal"
|
||||
import ModificationEditModal from "@/components/modification-edit-modal"
|
||||
import { useAppSelector } from "@/store"
|
||||
import { Modification } from "@/types"
|
||||
|
||||
const pageSize = 12
|
||||
|
||||
export default function ModCodesPage() {
|
||||
const user = useAppSelector((state) => state.auth.user)
|
||||
const { message } = App.useApp()
|
||||
const [searchParams] = useSearchParams()
|
||||
const firearmId = useMemo(() => searchParams.get("firearmId") || undefined, [searchParams])
|
||||
const parsedFirearmId = useMemo(() => {
|
||||
if (!firearmId) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const value = Number(firearmId)
|
||||
return Number.isFinite(value) ? value : undefined
|
||||
}, [firearmId])
|
||||
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [modifications, setModifications] = useState<Modification[]>([])
|
||||
const [tagOptions, setTagOptions] = useState<string[]>([])
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
||||
const [total, setTotal] = useState<number>(0)
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||
const [createModalOpen, setCreateModalOpen] = useState(false)
|
||||
const [editingModification, setEditingModification] = useState<Modification | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const _firearmId = firearmId ? +firearmId : (void 0)
|
||||
const _firearmId = firearmId ? +firearmId : void 0
|
||||
TagApi.getTags(_firearmId).then((tags) => {
|
||||
setTagOptions(tags)
|
||||
})
|
||||
}, [])
|
||||
}, [firearmId])
|
||||
|
||||
useEffect(() => {
|
||||
ModificationApi.getModifications({
|
||||
const loadModifications = useCallback(() => {
|
||||
return ModificationApi.getModifications({
|
||||
page: page - 1,
|
||||
size: pageSize,
|
||||
sortBy: "id",
|
||||
@@ -37,6 +53,31 @@ export default function ModCodesPage() {
|
||||
})
|
||||
}, [page, firearmId, selectedTags])
|
||||
|
||||
useEffect(() => {
|
||||
loadModifications()
|
||||
}, [loadModifications])
|
||||
|
||||
async function handleDelete(modification: Modification) {
|
||||
if (!user) {
|
||||
return
|
||||
}
|
||||
|
||||
setDeletingId(modification.id)
|
||||
try {
|
||||
await ModificationApi.removeModification(modification.id)
|
||||
message.success("改枪码删除成功")
|
||||
if (modifications.length === 1 && page > 1) {
|
||||
setPage(page - 1)
|
||||
} else {
|
||||
loadModifications()
|
||||
}
|
||||
} catch {
|
||||
message.error("改枪码删除失败，请稍后重试")
|
||||
} finally {
|
||||
setDeletingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
}, [firearmId])
|
||||
@@ -47,46 +88,74 @@ export default function ModCodesPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4 flex items-center justify-between gap-4">
|
||||
<div className="mb-4 flex items-start justify-between gap-4">
|
||||
<Typography.Title level={4} className="mb-0!">
|
||||
改枪码列表
|
||||
</Typography.Title>
|
||||
<Space wrap>
|
||||
<span>标签：</span>
|
||||
<Select<string[]>
|
||||
mode="multiple"
|
||||
allowClear
|
||||
placeholder="请选择标签"
|
||||
className="w-64"
|
||||
value={selectedTags}
|
||||
options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
|
||||
onChange={(values) => {
|
||||
setSelectedTags(values)
|
||||
}}
|
||||
/>
|
||||
{firearmId && <Tag color="geekblue">武器 ID: {firearmId}</Tag>}
|
||||
{(firearmId || selectedTags.length > 0) && (
|
||||
<Link to="/mod-codes">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
setSelectedTags([])
|
||||
setPage(1)
|
||||
}}
|
||||
>
|
||||
清除筛选
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="flex flex-wrap items-center justify-end gap-3">
|
||||
<Space wrap>
|
||||
<span>标签：</span>
|
||||
<Select<string[]>
|
||||
mode="multiple"
|
||||
allowClear
|
||||
placeholder="请选择标签"
|
||||
className="w-64"
|
||||
value={selectedTags}
|
||||
options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
|
||||
onChange={(values) => {
|
||||
setSelectedTags(values)
|
||||
}}
|
||||
/>
|
||||
{firearmId && <Tag color="geekblue">武器 ID: {firearmId}</Tag>}
|
||||
{(firearmId || selectedTags.length > 0) && (
|
||||
<Link to="/mod-codes">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
setSelectedTags([])
|
||||
setPage(1)
|
||||
}}
|
||||
>
|
||||
清除筛选
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</Space>
|
||||
{user && (
|
||||
<Button type="primary" onClick={() => setCreateModalOpen(true)}>
|
||||
添加改装
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<Row gutter={[16, 16]}>
|
||||
{modifications.map((modification) => (
|
||||
<Col key={modification.id} xs={24} md={12} lg={8}>
|
||||
<Col key={modification.id} span={24}>
|
||||
<Card
|
||||
title={modification.name}
|
||||
extra={
|
||||
user ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button type="link" size="small" onClick={() => setEditingModification(modification)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确认删除改枪码"
|
||||
description={`确定要删除 ${modification.name} 吗？该操作不可撤销。`}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
okButtonProps={{ danger: true, loading: deletingId === modification.id }}
|
||||
onConfirm={() => handleDelete(modification)}
|
||||
>
|
||||
<Button type="link" danger size="small" loading={deletingId === modification.id}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
variant="outlined"
|
||||
styles={{
|
||||
header: { minHeight: 56 },
|
||||
@@ -112,14 +181,45 @@ export default function ModCodesPage() {
|
||||
{modification.author || "未知"}
|
||||
</Typography.Text>
|
||||
|
||||
{modification.tags.length > 0 && (
|
||||
{(modification.tags?.length || 0) > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{modification.tags.map((tag) => (
|
||||
{(modification.tags || []).map((tag) => (
|
||||
<Tag key={`${modification.id}-${tag}`}>{tag}</Tag>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Typography.Text strong>配件配置：</Typography.Text>
|
||||
{(modification.accessories?.length || 0) > 0 ? (
|
||||
<div className="mt-2 overflow-x-auto">
|
||||
<div className="grid min-w-275 grid-cols-5 gap-2">
|
||||
{(modification.accessories || []).map((accessory, accessoryIndex) => (
|
||||
<div key={`${modification.id}-accessory-${accessoryIndex}`} className="rounded border border-gray-100 p-2">
|
||||
<div className="flex items-center justify-between gap-2 rounded bg-gray-50 px-2 py-1">
|
||||
<Tag color="blue" className="mr-0">{accessory.slotName || "未填写槽位"}</Tag>
|
||||
<Tag className="mr-0">{accessory.accessoryName || "未填写配件"}</Tag>
|
||||
</div>
|
||||
{(accessory.tunings?.length || 0) > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{accessory.tunings.map((tuning, tuningIndex) => (
|
||||
<Tag key={`${modification.id}-${accessoryIndex}-tuning-${tuningIndex}`} color="geekblue">
|
||||
{tuning.tuningName || "未命名"}: {tuning.tuningValue ?? "-"}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Typography.Text type="secondary" className="block mt-1">
|
||||
暂无配件信息
|
||||
</Typography.Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Typography.Paragraph
|
||||
style={{ marginBottom: 0 }}
|
||||
type="secondary"
|
||||
@@ -161,6 +261,28 @@ export default function ModCodesPage() {
|
||||
showSizeChanger={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ModificationCreateModal
|
||||
open={createModalOpen}
|
||||
defaultFirearmId={parsedFirearmId}
|
||||
lockedFirearmId={parsedFirearmId}
|
||||
onCancel={() => setCreateModalOpen(false)}
|
||||
onSuccess={() => {
|
||||
setCreateModalOpen(false)
|
||||
void loadModifications()
|
||||
}}
|
||||
/>
|
||||
|
||||
<ModificationEditModal
|
||||
open={!!editingModification}
|
||||
modification={editingModification}
|
||||
lockedFirearmId={parsedFirearmId}
|
||||
onCancel={() => setEditingModification(null)}
|
||||
onSuccess={() => {
|
||||
setEditingModification(null)
|
||||
void loadModifications()
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ComponentType } from "react"
|
||||
import { createBrowserRouter } from "react-router-dom"
|
||||
import ErrorPage from "@/components/error-page"
|
||||
import EmptyLayout from "@/layout/empty-layout"
|
||||
import HeroLayout from "@/layout/hero-layout"
|
||||
|
||||
function lazy<T extends { default: ComponentType<unknown> }>(importer: () => Promise<T>) {
|
||||
@@ -37,6 +38,16 @@ const router = createBrowserRouter(
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
element: <EmptyLayout />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{
|
||||
path: "login",
|
||||
lazy: lazy(() => import("@/page/login")),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
{
|
||||
basename: "/",
|
||||
|
||||
@@ -3,4 +3,4 @@ import duration from "dayjs/plugin/duration"
|
||||
|
||||
dayjs.extend(duration)
|
||||
|
||||
console.log("Global Dayjs plugins initialised.")
|
||||
export default dayjs
|
||||
@@ -1,9 +1,10 @@
|
||||
import axios from "axios"
|
||||
import dayjs from "dayjs"
|
||||
import dayjs from "@/shared/dayjs"
|
||||
|
||||
const WebClient = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL,
|
||||
timeout: dayjs.duration({ seconds: 10 }).asMilliseconds(),
|
||||
withCredentials: true
|
||||
})
|
||||
|
||||
export { WebClient }
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit"
|
||||
import { User } from "@/types"
|
||||
|
||||
interface AuthState {
|
||||
user: User | null
|
||||
}
|
||||
|
||||
const initialState: AuthState = {
|
||||
user: null,
|
||||
}
|
||||
|
||||
const authSlice = createSlice({
|
||||
name: "auth",
|
||||
initialState,
|
||||
reducers: {
|
||||
setCurrentUser(state, action: PayloadAction<User>) {
|
||||
state.user = action.payload
|
||||
},
|
||||
clearCurrentUser(state) {
|
||||
state.user = null
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const { setCurrentUser, clearCurrentUser } = authSlice.actions
|
||||
export const authReducer = authSlice.reducer
|
||||
+3
-1
@@ -11,6 +11,7 @@ import {
|
||||
REGISTER,
|
||||
} from "redux-persist"
|
||||
import createWebStorage from "redux-persist/es/storage/createWebStorage"
|
||||
import { authReducer } from "./auth-slice"
|
||||
import { firearmsReducer } from "./firearms-slice"
|
||||
|
||||
const storage = createWebStorage(import.meta.env.VITE_REDUX_STORAGE ?? "local")
|
||||
@@ -18,10 +19,11 @@ const storage = createWebStorage(import.meta.env.VITE_REDUX_STORAGE ?? "local")
|
||||
const persistConfig = {
|
||||
key: "root",
|
||||
storage,
|
||||
whitelist: ["firearms"],
|
||||
whitelist: ["auth", "firearms"],
|
||||
}
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
auth: authReducer,
|
||||
firearms: firearmsReducer
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
export interface LoginRequest {
|
||||
principle: string
|
||||
credential: string
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
export type Direction = "ASC" | "DESC"
|
||||
|
||||
export interface Page<T> {
|
||||
items: T[]
|
||||
page: number
|
||||
size: number
|
||||
totalElements: number
|
||||
totalPages: number
|
||||
}
|
||||
|
||||
export interface PageQueryParams {
|
||||
page?: number
|
||||
size?: number
|
||||
sortBy?: string
|
||||
direction?: Direction
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
export type FirearmType =
|
||||
| "RIFLE"
|
||||
| "SUB_MACHINE_GUN"
|
||||
| "SHOTGUN"
|
||||
| "LIGHT_MACHINE_GUN"
|
||||
| "DESIGNATED_MARKSMAN_RIFLE"
|
||||
| "SNIPER_RIFLE"
|
||||
| "PISTOL"
|
||||
| "SPECIAL"
|
||||
|
||||
export interface Firearm {
|
||||
id: number
|
||||
name: string
|
||||
type: FirearmType
|
||||
level: string
|
||||
calibre: string
|
||||
fireRate: number
|
||||
armourDamage: number
|
||||
bodyDamage: number
|
||||
review: string | null
|
||||
}
|
||||
|
||||
export interface AddFirearmRequest extends Omit<Firearm, "id"> {}
|
||||
|
||||
+4
-49
@@ -1,49 +1,4 @@
|
||||
export type Direction = "ASC" | "DESC"
|
||||
|
||||
export type FirearmType =
|
||||
| "RIFLE"
|
||||
| "SUB_MACHINE_GUN"
|
||||
| "SHOTGUN"
|
||||
| "LIGHT_MACHINE_GUN"
|
||||
| "DESIGNATED_MARKSMAN_RIFLE"
|
||||
| "SNIPER_RIFLE"
|
||||
| "PISTOL"
|
||||
| "SPECIAL"
|
||||
|
||||
export interface Page<T> {
|
||||
items: T[]
|
||||
page: number
|
||||
size: number
|
||||
totalElements: number
|
||||
totalPages: number
|
||||
}
|
||||
|
||||
export interface Firearm {
|
||||
id: number
|
||||
name: string
|
||||
type: FirearmType
|
||||
level: string
|
||||
calibre: string
|
||||
fireRate: number
|
||||
armourDamage: number
|
||||
bodyDamage: number
|
||||
review: string
|
||||
}
|
||||
|
||||
export interface Modification {
|
||||
id: number
|
||||
firearmId: number
|
||||
name: string
|
||||
code: string
|
||||
tags: string[]
|
||||
note: string
|
||||
author: string
|
||||
videoUrl: string
|
||||
}
|
||||
|
||||
export interface PageQueryParams {
|
||||
page?: number
|
||||
size?: number
|
||||
sortBy?: string
|
||||
direction?: Direction
|
||||
}
|
||||
export * from "./common"
|
||||
export * from "./firearm"
|
||||
export * from "./modification"
|
||||
export * from "./auth"
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
export interface Tuning {
|
||||
tuningName: string
|
||||
tuningValue: number
|
||||
}
|
||||
|
||||
export interface Accessory {
|
||||
slotName: string
|
||||
accessoryName: string
|
||||
tunings: Tuning[]
|
||||
}
|
||||
|
||||
export interface Modification {
|
||||
id: number
|
||||
firearmId: number
|
||||
name: string
|
||||
code: string
|
||||
tags?: string[]
|
||||
note?: string
|
||||
author?: string
|
||||
videoUrl?: string,
|
||||
accessories: Accessory[]
|
||||
}
|
||||
|
||||
export interface ModificationRequest extends Omit<Modification, "id"> {}
|
||||
@@ -12,4 +12,13 @@ export default defineConfig({
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user