feat: enhance firearm options and tuning button styles for better usability

# Conflicts:
#	package.json
#	pnpm-lock.yaml

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "chat.tools.terminal.autoApprove": {
-        "pnpm": true
-    }
-}

LICENCE

@@ -0,0 +1,21 @@
+MIT Licence
+
+Copyright (c) 2026 Zihlu Wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,3 +1,96 @@
-# React + TypeScript + Vite
+# Delta Force Firearm Modification Codes
 
-This template provides a minimal setup to get React working in Vite.
+Delta Force Firearm Modification Codes is a lightweight web app for browsing and filtering firearm modification codes for Delta Force.
+
+The site is built with Vite, React, TypeScript, Tailwind CSS, and React Router. It presents a searchable code library with filtering by weapon, mode, and tag, and includes quick copy support for each modification code.
+
+## Features
+
+- Browse a curated list of firearm modification codes.
+- Filter results by weapon, mode, and tag.
+- Copy modification codes directly from the interface.
+- Render large lists efficiently with window virtualisation.
+- Deploy as a static site.
+
+## Tech Stack
+
+- Vite
+- React 19
+- TypeScript
+- Tailwind CSS 4
+- React Router 7
+- @tanstack/react-virtual
+- Day.js
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 20 or later is recommended.
+- pnpm is required for dependency management and scripts.
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Start the development server
+
+```bash
+pnpm dev
+```
+
+### Build for production
+
+```bash
+pnpm build
+```
+
+### Preview the production build locally
+
+```bash
+pnpm preview
+```
+
+## Available Scripts
+
+- `pnpm dev`: start the Vite development server.
+- `pnpm build`: run TypeScript compilation and create a production build.
+- `pnpm preview`: preview the production bundle locally.
+- `pnpm lint`: run project linting.
+- `pnpm deploy`: build and publish the site with `gh-pages`.
+
+## Project Structure
+
+```text
+src/
+	components/       Shared UI components
+	data/             Modification code dataset
+	init/             Application initialisation
+	layout/           Route layouts
+	page/             Route pages
+	router/           Router configuration
+```
+
+The current dataset is stored in `src/data/modification-codes.json`.
+
+## Deployment
+
+The repository is configured for static deployment. The `public/CNAME` file indicates the site is intended to be served on `onixbyte.dev`.
+
+To deploy:
+
+```bash
+pnpm deploy
+```
+
+## Contributing
+
+Contributions are welcome. If you want to improve the dataset, refine the filtering experience, or fix UI issues, open an issue or submit a pull request.
+
+When contributing, please keep documentation and user-facing copy in British English.
+
+## Licence
+
+This project is released under the MIT Licence. See `LICENCE` for details.

package.json

@@ -1,35 +1,42 @@
 {
-  "name": "react-template",
+  "name": "delta-force-guide-web",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "build:tar": "pnpm build && tar -czf dist.tar.gz dist",
     "lint": "eslint .",
     "preview": "vite preview",
     "deploy": "pnpm build && gh-pages -d dist",
     "predeploy": "pnpm build"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.2.2",
+    "@ant-design/cssinjs": "^2.1.2",
-    "@tanstack/react-virtual": "^3.13.23",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-virtual": "^3.13.24",
+    "antd": "^6.3.6",
+    "axios": "^1.15.2",
     "dayjs": "^1.11.20",
-    "react": "^19.2.4",
+    "react": "^19.2.5",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.5",
-    "react-router": "^7.13.1",
+    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.13.1",
+    "react-router": "^7.14.2",
-    "tailwindcss": "^4.2.2"
+    "react-router-dom": "^7.14.2",
+    "redux-persist": "^6.0.0",
+    "tailwindcss": "^4.2.4"
   },
   "devDependencies": {
-    "@types/node": "^22.19.15",
+    "@types/node": "^22.19.17",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "globals": "^16.5.0",
+    "globals": "^17.5.0",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
-    "typescript": "~5.9.3",
+    "typescript": "~6.0.3",
-    "vite": "^8.0.1"
+    "vite": "^8.0.10"
   },
   "pnpm": {
     "ignoredBuiltDependencies": [

src/api/auth-api.ts

@@ -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")
+}

src/api/firearm-api.ts

@@ -0,0 +1,56 @@
+import { AddFirearmRequest, Direction, Firearm, FirearmType, Page, PageQueryParams } from "@/types"
+import { WebClient } from "@/shared/web-client"
+import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
+
+interface FirearmParams extends PageQueryParams {
+  type?: FirearmType
+}
+
+/**
+ * 查询武器列表
+ *
+ * @param params 分页查询参数¬
+ */
+export async function getFirearms(params?: FirearmParams): Promise<Page<Firearm>> {
+  let uri = "/firearms"
+  const urlSearchParam = asUrlSearchParam(params)
+
+  if (params?.type) {
+    urlSearchParam.append("type", params.type)
+  }
+
+  if (urlSearchParam.size > 0) {
+    uri = uri.concat("?", urlSearchParam.toString())
+  }
+
+  const { data } = await WebClient.get<Page<Firearm>>(uri)
+  return data
+}
+
+/**
+ * 根据 ID 查询武器
+ *
+ * @param id 武器 ID
+ */
+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}`)
+}

src/api/index.ts

@@ -0,0 +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"

src/api/modification-api.ts

@@ -0,0 +1,67 @@
+import { Modification, ModificationRequest, Page, PageQueryParams } from "@/types"
+import { WebClient } from "@/shared/web-client"
+import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
+
+interface ModificationParams extends PageQueryParams {
+  firearmId?: string
+  tags?: string[]
+}
+
+export async function getModifications(params?: ModificationParams): Promise<Page<Modification>> {
+  let uri = "/modifications"
+  const urlSearchParams = asUrlSearchParam(params)
+
+  if (params?.firearmId) {
+    urlSearchParams.append("firearmId", "" + params.firearmId)
+  }
+
+  if (params?.tags) {
+    params.tags.forEach((tag) => urlSearchParams.append("tags", tag))
+  }
+
+  if (urlSearchParams.size > 0) {
+    uri = uri.concat("?", urlSearchParams.toString())
+  }
+
+  const { data } = await WebClient.get<Page<Modification>>(uri)
+  return data
+}
+
+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()}`)
+}

src/api/tag-api.ts

@@ -0,0 +1,18 @@
+import { WebClient } from "@/shared/web-client"
+
+export async function getTags(firearmId?: number): Promise<string[]> {
+  let uri = "/tags"
+
+  const urlSearchParam = new URLSearchParams()
+
+  if (firearmId) {
+    urlSearchParam.append("firearmId", "" + firearmId)
+  }
+
+  if (urlSearchParam.size > 0) {
+    uri = uri.concat("?", urlSearchParam.toString())
+  }
+
+  const { data } = await WebClient.get<string[]>(uri)
+  return data
+}

src/components/firearm-create-modal/index.tsx

@@ -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>
+  )
+}
+

src/components/firearm-edit-modal/index.tsx

@@ -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>
+  )
+}
+

src/components/firearm-form/index.tsx

@@ -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>
+  )
+}

src/components/modification-create-modal/index.tsx

@@ -0,0 +1,97 @@
+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: [],
+      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>
+  )
+}

src/components/modification-edit-modal/index.tsx

@@ -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>
+  )
+}
+
+

src/components/modification-form/index.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useMemo, useState } from "react"
+import { FirearmApi } from "@/api"
+import slotNames from "@/constant/slots.json"
+import tuningNames from "@/constant/tunings.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 }))
+const tuningOptions = tuningNames.map((tuningName) => ({ value: tuningName }))
+
+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: "请选择或输入精校属性" }]}>
+                            <AutoComplete
+                              options={tuningOptions}
+                              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"
+                        disabled={tuningFields.length >= 2}
+                        onClick={() => addTuning({ tuningName: "", tuningValue: 0 })}>
+                        添加精校
+                      </Button>
+                    </div>
+                  )}
+                </Form.List>
+              </Card>
+            ))}
+            <Button
+              variant="solid"
+              color="lime"
+              onClick={() => addAccessory({ slotName: "", accessoryName: "", tunings: [] })}>
+              添加配件
+            </Button>
+          </div>
+        )}
+      </Form.List>
+    </Form>
+  )
+}

src/constant/calibres.json

@@ -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"
+]

src/constant/slots.json

@@ -0,0 +1,23 @@
+[
+  "枪口",
+  "左导轨",
+  "右导轨",
+  "枪管",
+  "左贴片",
+  "右贴片",
+  "上导轨",
+  "上贴片",
+  "下导轨",
+  "瞄准镜",
+  "战术设备",
+  "增高座瞄具",
+  "侧瞄具",
+  "枪托",
+  "枪托套件",
+  "后握把",
+  "前握把",
+  "导轨脚架",
+  "弹匣座",
+  "弹匣",
+  "托腮板"
+]

src/constant/tunings.json

@@ -0,0 +1 @@
+["安装位置", "厚度", "缩放倍率", "长度", "瞳距", "配重", "托腮板安装位置"]

src/data/modification-codes.json

@@ -1,90 +0,0 @@
-[
-  {
-    "weapon": "SCAR-H战斗步枪",
-    "modification-code": "6JJE3180BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["精锐制式券", "突击步枪", "稳定"],
-    "note": "精锐火力券提供的 SCAR-H",
-    "price": 445295
-  },
-  {
-    "weapon": "M4A1突击步枪",
-    "modification-code": "6JAS9U80BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["稳定", "突击步枪", "倍镜"],
-    "note": "带有三倍镜的稳定版 M4A1，全套价格左右。",
-    "price": 400000
-  },
-  {
-    "weapon": "M4A1突击步枪",
-    "modification-code": "6J9D8SO0BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["突击步枪", "性价比"],
-    "note": "性价比改装稳定版 M4A1。",
-    "price": 242638
-  },
-  {
-    "weapon": "MK4冲锋枪",
-    "modification-code": "6IVR0N40BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["超绝腰射", "三连发"],
-    "note": "超绝三连发腰射 MK4，近距离火力十足",
-    "price": 538686
-  },
-  {
-    "weapon": "MK4冲锋枪",
-    "modification-code": "6J7283O0BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["超绝腰射", "全自动"],
-    "note": "超绝全自动腰射 MK4，见到人瞄准好之后左键按到死",
-    "price": 466836
-  },
-  {
-    "weapon": "M7战斗步枪",
-    "modification-code": "6IVH3HC0BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["半改", "蓝管", "稳定"],
-    "note": "半改稳定 M7",
-    "price": 620597
-  },
-  {
-    "weapon": "M7战斗步枪",
-    "modification-code": "6J2QBQK0BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["倍镜", "职业选手", "消音"],
-    "note": "需要较高控枪水平的满改 M7",
-    "price": 891030
-  },
-  {
-    "weapon": "M7战斗步枪",
-    "modification-code": "6J2QC080BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["稳定"],
-    "note": "S8 赛季幻影版满改稳定 M7，51操控",
-    "price": 1039234
-  },
-  {
-    "weapon": "M7战斗步枪",
-    "modification-code": "6J2QC4O0BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["稳定"],
-    "note": "S8 赛季隐袭版满改稳定 M7，49操控",
-    "price": 1064418
-  },
-  {
-    "weapon": "MK47突击步枪",
-    "modification-code": "6JAV6A80BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["突袭", "大口径", "消音"],
-    "note": "S8 赛季余烬MK47，携带消音器",
-    "price": 862384
-  },
-  {
-    "weapon": "MK47突击步枪",
-    "modification-code": "6JAV6SS0BB9B3KKCCH41C",
-    "mode": "烽火地带",
-    "tags": ["突袭", "稳定"],
-    "note": "幻影余烬主宰者MK47",
-    "price": 864227
-  }
-]

src/index.css

@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
 
 html, body {
   margin: 0;
@@ -9,3 +11,26 @@ html, body {
 #root {
   width: 100%;
 }
+
+.mod-codes-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .mod-codes-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .mod-codes-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .mod-codes-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

src/init/index.ts

@@ -1 +0,0 @@
-import "./dayjs"

src/layout/hero-layout/index.tsx

@@ -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">
@@ -21,12 +35,44 @@ export default function HeroLayout() {
               </h1>
             </div>
             <nav className="flex space-x-8">
+              <Link
+                to="/firearms"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                武器列表
+              </Link>
               <Link
                 to="/mod-codes"
                 className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
               >
                 改枪码
               </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"

src/main.tsx

@@ -1,8 +1,13 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { RouterProvider } from "react-router-dom"
-import "@/init"
+import { Provider } from "react-redux"
+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 router from "@/router"
+import store, { persistor } from "@/store"
 import "./index.css"
 
 /**
@@ -11,6 +16,20 @@ import "./index.css"
  */
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <Provider store={store}>
-  </StrictMode>,
+      <PersistGate loading={null} persistor={persistor}>
+        <AntStyleProvider layer>
+          <AntConfigProvider
+            locale={AntSimplifiedChinese}
+            button={{
+              autoInsertSpace: false,
+            }}>
+            <AntApp className="h-full w-full">
+              <RouterProvider router={router} />
+            </AntApp>
+          </AntConfigProvider>
+        </AntStyleProvider>
+      </PersistGate>
+    </Provider>
+  </StrictMode>
 )

src/page/firearms/index.tsx

@@ -0,0 +1,214 @@
+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, Popconfirm, Row, Select, Tag, Typography, App } from "antd"
+
+const firearmTypeText: Record<FirearmType, string> = {
+  RIFLE: "步枪",
+  SUB_MACHINE_GUN: "冲锋枪",
+  SHOTGUN: "霰弹枪",
+  LIGHT_MACHINE_GUN: "轻机枪",
+  DESIGNATED_MARKSMAN_RIFLE: "射手步枪",
+  SNIPER_RIFLE: "狙击步枪",
+  PISTOL: "手枪",
+  SPECIAL: "特殊",
+}
+
+const allTypeValue = "ALL"
+type FirearmTypeFilter = FirearmType | typeof allTypeValue
+
+function asDps(fireRate: number, damage: number) {
+  return ((fireRate / 60) * damage).toFixed(2)
+}
+
+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)
+
+  const loadFirearms = useCallback(async () => {
+    const pagedData = await FirearmApi.getFirearms({
+      page: page - 1,
+      size: 12,
+      sortBy: "id",
+      direction: "ASC",
+      type: typeFilter === allTypeValue ? undefined : typeFilter,
+    })
+    setFirearms(pagedData.items)
+    setTotal(pagedData.totalElements)
+  }, [page, typeFilter])
+
+  useEffect(() => {
+    void 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 {
+        void loadFirearms()
+      }
+    } catch {
+      message.error("武器删除失败，请稍后重试")
+    } finally {
+      setDeletingId(null)
+    }
+  }
+
+  return (
+    <>
+      <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}
+          options={[
+            { value: allTypeValue, label: "全部类型" },
+            ...Object.entries(firearmTypeText).map(([value, label]) => ({
+              value,
+              label,
+            })),
+          ]}
+          onChange={(nextType) => {
+            setPage(1)
+            setTypeFilter(nextType)
+          }}
+        />
+      </div>
+      <div className="mb-6">
+        <Row gutter={[16, 16]}>
+          {firearms.map((firearm) => (
+            <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 },
+                }}
+                actions={[
+                  <Link key={`mod-codes-${firearm.id}`} to={`/mod-codes?firearmId=${firearm.id}`}>
+                    <Button type="link">查看改枪码</Button>
+                  </Link>,
+                ]}>
+                <div className="flex flex-col gap-3">
+                  <div className="flex items-center justify-between">
+                    <Tag color="blue">{firearmTypeText[firearm.type]}</Tag>
+                  </div>
+                  <Typography.Text>
+                    <strong>武器输出等级：</strong>
+                    {firearm.level}
+                  </Typography.Text>
+                  <Typography.Text>
+                    <strong>子弹口径：</strong>
+                    {firearm.calibre}
+                  </Typography.Text>
+                  <Typography.Text>
+                    <strong>每秒甲伤：</strong>
+                    {asDps(firearm.fireRate, firearm.armourDamage)}
+                  </Typography.Text>
+                  <Typography.Text>
+                    <strong>每秒肉伤：</strong>
+                    {asDps(firearm.fireRate, firearm.bodyDamage)}
+                  </Typography.Text>
+                  <Typography.Paragraph
+                    style={{ marginBottom: 0 }}
+                    type="secondary"
+                    ellipsis={{
+                      rows: 3,
+                      tooltip: firearm.review
+                        ? {
+                            title: <div style={{ whiteSpace: "pre-line" }}>{firearm.review}</div>,
+                            placement: "topLeft",
+                          }
+                        : false,
+                    }}
+                    className="whitespace-pre-line">
+                    {firearm.review || "暂无描述"}
+                  </Typography.Paragraph>
+                </div>
+              </Card>
+            </Col>
+          ))}
+          {firearms.length === 0 && (
+            <Col span={24}>
+              <Card>
+                <Typography.Text type="secondary">暂无武器数据</Typography.Text>
+              </Card>
+            </Col>
+          )}
+        </Row>
+      </div>
+      <div className="flex justify-end">
+        <Pagination
+          align="end"
+          current={page}
+          pageSize={12}
+          total={total}
+          onChange={(nextPage) => {
+            setPage(nextPage)
+          }}
+          showSizeChanger={false}
+        />
+      </div>
+
+      <FirearmCreateModal
+        open={createModalOpen}
+        onCancel={() => setCreateModalOpen(false)}
+        onSuccess={() => {
+          setCreateModalOpen(false)
+          void loadFirearms()
+        }}
+      />
+
+      <FirearmEditModal
+        open={!!editingFirearm}
+        firearm={editingFirearm}
+        onCancel={() => setEditingFirearm(null)}
+        onSuccess={() => {
+          setEditingFirearm(null)
+          void loadFirearms()
+        }}
+      />
+    </>
+  )
+}

src/page/login/index.tsx

@@ -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>
+  )
+}

src/page/mod-codes/index.tsx

@@ -1,262 +1,313 @@
-import { useMemo, useState, useEffect, useLayoutEffect, useRef } from "react"
+import {
-import { useWindowVirtualizer } from "@tanstack/react-virtual"
+  App,
-import rawModCodes from "@/data/modification-codes.json"
+  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 { 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)
 
-function useColumnCount() {
-  const getCount = () => {
-    if (window.innerWidth >= 1024) return 4
-    if (window.innerWidth >= 768) return 3
-    if (window.innerWidth >= 640) return 2
-    return 1
-  }
-  const [cols, setCols] = useState(getCount)
   useEffect(() => {
-    const handler = () => setCols(getCount())
+    const _firearmId = firearmId ? +firearmId : void 0
-    window.addEventListener("resize", handler)
+    TagApi.getTags(_firearmId).then((tags) => {
-    return () => window.removeEventListener("resize", handler)
+      setTagOptions(tags)
-  }, [])
+    })
-  return cols
+  }, [firearmId])
-}
 
-type ModCodeSource = {
+  const loadModifications = useCallback(async () => {
-  weapon: string
+    return ModificationApi.getModifications({
-  "modification-code": string
+      page: page - 1,
-  mode?: string
+      size: pageSize,
-  tags?: string[]
+      sortBy: "id",
-  note?: string
+      direction: "ASC",
-  price?: number
+      firearmId,
-}
+      tags: selectedTags,
+    }).then((pagedData) => {
+      setModifications(pagedData.items)
+      setTotal(pagedData.totalElements)
+    })
+  }, [page, firearmId, selectedTags])
 
-type ModCode = {
+  useEffect(() => {
-  id: string
+    void loadModifications()
-  weapon: string
+  }, [loadModifications])
-  code: string
-  mode?: string
-  tags: string[]
-  note?: string
-  price?: number
-}
 
-const MOD_CODES: ModCode[] = (rawModCodes as ModCodeSource[]).map((item, index) => ({
+  async function handleDelete(modification: Modification) {
-  id: `mod-${index + 1}`,
+    if (!user) {
-  weapon: item.weapon,
+      return
-  code: item["modification-code"],
+    }
-  mode: item.mode,
-  tags: item.tags ?? [],
-  note: item.note,
-  price: item.price,
-}))
 
-export default function ModCodes() {
+    setDeletingId(modification.id)
-  const [keyword, setKeyword] = useState("")
-  const [activeTag, setActiveTag] = useState<string>("全部")
-  const [activeWeapon, setActiveWeapon] = useState<string>("全部")
-  const [copiedId, setCopiedId] = useState<string | null>(null)
-  const [copyErrorId, setCopyErrorId] = useState<string | null>(null)
-
-  const handleCopy = async (item: ModCode) => {
     try {
-      await navigator.clipboard.writeText(item.code)
+      await ModificationApi.removeModification(modification.id)
-      setCopyErrorId(null)
+      message.success("改枪码删除成功")
-      setCopiedId(item.id)
+      if (modifications.length === 1 && page > 1) {
-      window.setTimeout(() => {
+        setPage(page - 1)
-        setCopiedId((current) => (current === item.id ? null : current))
+      } else {
-      }, 1500)
+        void loadModifications()
+      }
     } catch {
-      setCopiedId(null)
+      message.error("改枪码删除失败，请稍后重试")
-      setCopyErrorId(item.id)
+    } finally {
-      window.setTimeout(() => {
+      setDeletingId(null)
-        setCopyErrorId((current) => (current === item.id ? null : current))
-      }, 1500)
     }
   }
 
-  const allWeapons = useMemo(() => {
+  useEffect(() => {
-    const weapons = new Set<string>()
+    setPage(1)
-    MOD_CODES.forEach((item) => weapons.add(item.weapon))
+  }, [firearmId])
-    return ["全部", ...Array.from(weapons)]
-  }, [])
 
-  const allTags = useMemo(() => {
+  useEffect(() => {
-    const tags = new Set<string>()
+    setPage(1)
-    MOD_CODES.forEach((item) => {
+  }, [selectedTags])
-      item.tags.forEach((tag) => tags.add(tag))
-    })
-    return ["全部", ...Array.from(tags)]
-  }, [])
-
-  const filtered = useMemo(() => {
-    const q = keyword.trim().toLowerCase()
-    return MOD_CODES.filter((item) => {
-      const matchWeapon = activeWeapon === "全部" || item.weapon === activeWeapon
-      const matchTag = activeTag === "全部" || item.tags.includes(activeTag)
-      const matchKeyword =
-        q.length === 0 ||
-        item.weapon.toLowerCase().includes(q) ||
-        item.code.toLowerCase().includes(q) ||
-        (item.mode?.toLowerCase().includes(q) ?? false) ||
-        item.tags.some((tag) => tag.toLowerCase().includes(q))
-      return matchWeapon && matchTag && matchKeyword
-    })
-  }, [activeWeapon, activeTag, keyword])
-
-  const colCount = useColumnCount()
-
-  const rows = useMemo<ModCode[][]>(() => {
-    const result: ModCode[][] = []
-    for (let i = 0; i < filtered.length; i += colCount) {
-      result.push(filtered.slice(i, i + colCount))
-    }
-    return result
-  }, [filtered, colCount])
-
-  const listRef = useRef<HTMLDivElement>(null)
-  const scrollMarginRef = useRef(0)
-  useLayoutEffect(() => {
-    scrollMarginRef.current = listRef.current?.offsetTop ?? 0
-  })
-
-  const rowVirtualizer = useWindowVirtualizer({
-    count: rows.length,
-    estimateSize: () => 220,
-    overscan: 3,
-    scrollMargin: scrollMarginRef.current,
-  })
 
   return (
-    <section className="space-y-6">
+    <>
-      <div className="space-y-4 px-1">
+      <div className="mb-4 flex items-start justify-between gap-4">
-        <p className="text-sm text-gray-600">
+        <Typography.Title level={4} className="mb-0!">
-          支持按武器、tag 与关键字筛选。关键字可匹配枪械名称、改枪码或 tag。
+          改枪码列表
-        </p>
+        </Typography.Title>
-
+        <div className="flex flex-wrap items-center justify-end gap-3">
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <Space wrap>
-          <label className="block">
+            <span>标签：</span>
-            <span className="block text-sm font-medium text-gray-700 mb-1">武器筛选</span>
+            <Select<string[]>
-            <select
+              mode="multiple"
-              value={activeWeapon}
+              allowClear
-              onChange={(event) => setActiveWeapon(event.target.value)}
+              placeholder="请选择标签"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 bg-white"
+              className="w-64"
-            >
+              value={selectedTags}
-              {allWeapons.map((weapon) => (
+              options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
-                <option key={weapon} value={weapon}>{weapon}</option>
+              onChange={(values) => {
-              ))}
+                setSelectedTags(values)
-            </select>
-          </label>
-          <label className="block">
-            <span className="block text-sm font-medium text-gray-700 mb-1">关键字查找</span>
-            <input
-              value={keyword}
-              onChange={(event) => setKeyword(event.target.value)}
-              placeholder="例如：M4、近战、DF-"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
-            />
-          </label>
-          <div className="flex items-end">
-            <button
-              type="button"
-              onClick={() => {
-                setKeyword("")
-                setActiveTag("全部")
-                setActiveWeapon("全部")
               }}
-              className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+            />
-            >
+            {firearmId && <Tag color="geekblue">武器 ID: {firearmId}</Tag>}
-              清空筛选
+            {(firearmId || selectedTags.length > 0) && (
-            </button>
+              <Link to="/mod-codes">
-          </div>
+                <Button
-        </div>
+                  type="link"
-
+                  onClick={() => {
-        <div className="flex flex-wrap gap-2">
+                    setSelectedTags([])
-          {allTags.map((tag) => {
+                    setPage(1)
-            const selected = tag === activeTag
+                  }}>
-            return (
+                  清除筛选
-              <button
+                </Button>
-                key={tag}
+              </Link>
-                type="button"
+            )}
-                onClick={() => setActiveTag(tag)}
+          </Space>
-                className={`rounded-full px-3 py-1 text-sm border transition ${
+          {user && (
-                  selected
+            <Button type="primary" onClick={() => setCreateModalOpen(true)}>
-                    ? "border-blue-600 bg-blue-600 text-white"
+              添加改装
-                    : "border-gray-300 bg-white text-gray-700 hover:bg-gray-100"
+            </Button>
-                }`}
+          )}
-              >
-                #{tag}
-              </button>
-            )
-          })}
         </div>
       </div>
 
-      <div
+      <div className="mb-6">
-        ref={listRef}
+        <Row gutter={[16, 16]}>
-        style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }}
+          {modifications.map((modification) => (
-      >
+            <Col key={modification.id} span={24}>
-        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+              <Card
-          <div
+                title={modification.name}
-            key={virtualRow.index}
+                extra={
-            data-index={virtualRow.index}
+                  user ? (
-            ref={rowVirtualizer.measureElement}
+                    <div className="flex items-center gap-1">
-            style={{
+                      <Button
-              position: "absolute",
+                        type="link"
-              top: 0,
+                        size="small"
-              left: 0,
+                        onClick={() => setEditingModification(modification)}>
-              width: "100%",
+                        编辑
-              transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`,
+                      </Button>
-            }}
+                      <Popconfirm
-          >
+                        title="确认删除改枪码"
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 pb-4">
+                        description={`确定要删除 ${modification.name} 吗？该操作不可撤销。`}
-              {rows[virtualRow.index].map((item) => (
+                        okText="删除"
-                <article key={item.id} className="bg-white border rounded-xl p-4 shadow-sm space-y-3">
+                        cancelText="取消"
-                  <div className="flex items-center justify-between gap-3">
+                        okButtonProps={{ danger: true, loading: deletingId === modification.id }}
-                    <h2 className="text-lg font-semibold text-gray-900">{item.weapon}</h2>
+                        onConfirm={() => handleDelete(modification)}>
-                    {item.mode ? (
+                        <Button
-                      <span className="text-xs rounded-full bg-gray-100 text-gray-700 px-2 py-1">
+                          type="link"
-                        {item.mode}
+                          danger
-                      </span>
+                          size="small"
+                          loading={deletingId === modification.id}>
+                          删除
+                        </Button>
+                      </Popconfirm>
+                    </div>
+                  ) : null
+                }
+                variant="outlined"
+                styles={{
+                  header: { minHeight: 56 },
+                }}>
+                <div className="flex flex-col gap-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <span>
+                      <strong>改枪码：</strong>
+                      <code className="bg-gray-400 px-2 py-1 rounded text-sm text-white">
+                        {modification.code}
+                      </code>
+                    </span>
+                    <Button
+                      type="text"
+                      size="small"
+                      onClick={() => navigator.clipboard.writeText(modification.code)}>
+                      复制
+                    </Button>
+                  </div>
+
+                  <Typography.Text>
+                    <strong>作者：</strong>
+                    {modification.author || "未知"}
+                  </Typography.Text>
+
+                  {(modification.tags?.length || 0) > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                      {(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">
+                                <Typography color="blue" className="mr-0">
+                                  {accessory.slotName || "未填写槽位"}
+                                </Typography>
+                                <Typography className="mr-0 text-[#4C1D95]">
+                                  {accessory.accessoryName || "未填写配件"}
+                                </Typography>
+                              </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>
                     ) : (
-                      <span className="text-xs text-gray-500">ID: {item.id}</span>
+                      <Typography.Text type="secondary" className="block mt-1">
+                        暂无配件信息
+                      </Typography.Text>
                     )}
                   </div>
-                  <div className="rounded-lg bg-gray-900 text-green-300 px-3 py-2 font-mono text-sm break-all flex items-center justify-between gap-3">
+
-                    <span>{item.code}</span>
+                  <Typography.Paragraph
-                    <button
+                    style={{ marginBottom: 0 }}
-                      type="button"
+                    type="secondary"
-                      onClick={() => handleCopy(item)}
+                    ellipsis={{ rows: 3 }}>
-                      className="shrink-0 rounded-md bg-green-400/10 border border-green-400/40 text-green-200 px-2 py-1 text-xs hover:bg-green-400/20"
+                    {modification.note || "暂无备注"}
-                    >
+                  </Typography.Paragraph>
-                      {copiedId === item.id ? "已复制" : "复制改枪码"}
+
-                    </button>
+                  {modification.videoUrl && (
-                  </div>
+                    <div>
-                  {copyErrorId === item.id ? (
+                      <a href={modification.videoUrl} target="_blank" rel="noopener noreferrer">
-                    <p className="text-xs text-red-600">复制失败，请手动选中复制。</p>
+                        查看视频
-                  ) : null}
+                      </a>
-                  {item.price ? <p className="text-sm text-gray-900 font-medium">$ {item.price.toLocaleString()}</p> : null}
+                    </div>
-                  {item.note ? <p className="text-sm text-gray-600">{item.note}</p> : null}
+                  )}
-                  <div className="flex flex-wrap gap-2">
+                </div>
-                    {item.tags.map((tag) => (
+              </Card>
-                      <button
+            </Col>
-                        key={`${item.id}-${tag}`}
+          ))}
-                        type="button"
+
-                        onClick={() => setActiveTag(tag)}
+          {modifications.length === 0 && (
-                        className="text-xs rounded-full bg-blue-50 text-blue-700 px-2 py-1 hover:bg-blue-100"
+            <Col span={24}>
-                      >
+              <Card>
-                        #{tag}
+                <Typography.Text type="secondary">暂无改枪码数据</Typography.Text>
-                      </button>
+              </Card>
-                    ))}
+            </Col>
-                  </div>
+          )}
-                </article>
+        </Row>
-              ))}
-            </div>
-          </div>
-        ))}
       </div>
 
-      {filtered.length === 0 ? (
+      <div className="flex justify-end">
-        <div className="bg-white border rounded-xl p-6 text-center text-gray-600">
+        <Pagination
-          未找到匹配的改枪码，请尝试其他 tag 或关键字。
+          align="end"
-        </div>
+          current={page}
-      ) : null}
+          pageSize={pageSize}
-    </section>
+          total={total}
+          onChange={(nextPage) => {
+            setPage(nextPage)
+          }}
+          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()
+        }}
+      />
+    </>
   )
 }

src/router/index.tsx

@@ -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>) {
@@ -25,7 +26,11 @@ const router = createBrowserRouter(
       children: [
         {
           index: true,
-          lazy: lazy(() => import("@/page/mod-codes")),
+          lazy: lazy(() => import("@/page/firearms")),
+        },
+        {
+          path: "firearms",
+          lazy: lazy(() => import("@/page/firearms")),
         },
         {
           path: "mod-codes",
@@ -33,6 +38,16 @@ const router = createBrowserRouter(
         },
       ],
     },
+    {
+      element: <EmptyLayout />,
+      errorElement: <ErrorPage />,
+      children: [
+        {
+          path: "login",
+          lazy: lazy(() => import("@/page/login")),
+        },
+      ],
+    },
   ],
   {
     basename: "/",

src/shared/dayjs/index.ts

@@ -3,4 +3,4 @@ import duration from "dayjs/plugin/duration"
 
 dayjs.extend(duration)
 
-console.log("Global Dayjs plugins initialised.")
+export default dayjs

src/shared/web-client/index.ts

@@ -0,0 +1,10 @@
+import axios from "axios"
+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 }

src/store/auth-slice.ts

@@ -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

src/store/firearms-slice.ts

@@ -0,0 +1,42 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { Firearm, Page } from "@/types"
+
+interface FirearmsState {
+  items: Firearm[]
+  page: number
+  size: number
+  totalPages: number
+  totalElements: number
+}
+
+const initialState: FirearmsState = {
+  items: [],
+  page: 0,
+  size: 12,
+  totalPages: 0,
+  totalElements: 0,
+}
+
+const firearmsSlice = createSlice({
+  name: "firearms",
+  initialState,
+  reducers: {
+    setFirearmsPage(state, action: PayloadAction<Page<Firearm>>) {
+      state.items = action.payload.items
+      state.page = action.payload.page
+      state.size = action.payload.size
+      state.totalPages = action.payload.totalPages
+      state.totalElements = action.payload.totalElements
+    },
+    clearFirearms(state) {
+      state.items = []
+      state.page = 0
+      state.size = 12
+      state.totalPages = 0
+      state.totalElements = 0
+    },
+  },
+})
+
+export const { setFirearmsPage, clearFirearms } = firearmsSlice.actions
+export const firearmsReducer = firearmsSlice.reducer

src/store/index.ts

@@ -0,0 +1,50 @@
+import { configureStore, combineReducers } from "@reduxjs/toolkit"
+import { useDispatch, useSelector } from "react-redux"
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  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")
+
+const persistConfig = {
+  key: "root",
+  storage,
+  whitelist: ["auth", "firearms"],
+}
+
+const rootReducer = combineReducers({
+  auth: authReducer,
+  firearms: firearmsReducer
+})
+
+const persistedReducer = persistReducer(persistConfig, rootReducer)
+
+const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+})
+
+export const persistor = persistStore(store)
+
+export default store
+export type RootState = ReturnType<typeof rootReducer>
+export type AppDispatch = typeof store.dispatch
+export type AppStore = typeof store
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()

src/types/auth.ts

@@ -0,0 +1,11 @@
+export interface LoginRequest {
+  principle: string
+  credential: string
+}
+
+export interface User {
+  id: number
+  username: string
+  email: string
+}
+

src/types/common.ts

@@ -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
+}
+

src/types/firearm.ts

@@ -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"> {}
+

src/types/index.ts

@@ -0,0 +1,4 @@
+export * from "./common"
+export * from "./firearm"
+export * from "./modification"
+export * from "./auth"

src/types/modification.ts

@@ -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"> {}

src/utils/index.ts

@@ -0,0 +1 @@
+export * as QueryParamUtils from "./query-param-utils"

src/utils/query-param-utils.ts

@@ -0,0 +1,23 @@
+import { PageQueryParams } from "@/types"
+
+export function asUrlSearchParam(pageQueryParams?: PageQueryParams) {
+  const urlSearchParams = new URLSearchParams()
+
+  if (pageQueryParams?.page) {
+    urlSearchParams.append("page", "" + pageQueryParams.page)
+  }
+
+  if (pageQueryParams?.size) {
+    urlSearchParams.append("size", "" + pageQueryParams.size)
+  }
+
+  if (pageQueryParams?.sortBy) {
+    urlSearchParams.append("sortBy", pageQueryParams.sortBy)
+  }
+
+  if (pageQueryParams?.direction) {
+    urlSearchParams.append("direction", pageQueryParams.direction)
+  }
+
+  return urlSearchParams
+}

src/vite-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
   readonly VITE_REDUX_STORAGE: "local" | "session"
+  readonly VITE_API_BASE_URL: string
 }
 
 interface ImportMeta {

vite.config.ts

@@ -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/, '')
+      }
+    }
+  }
 })