refactor: optimised slots

refactor: rename app title
refactor: reduce slots
2026-05-10 13:52:22 +08:00 · 2026-05-10 13:43:01 +08:00 · 2026-05-10 13:41:37 +08:00 · 2026-05-10 13:32:49 +08:00 · 2026-05-10 13:30:51 +08:00 · 2026-05-10 13:30:25 +08:00
47 changed files with 4985 additions and 985 deletions
@@ -0,0 +1,21 @@
+# ENVIRONMENT CONFIGURATION TEMPLATE
+#
+# This file serves as a template for environment variables.
+# DO NOT include any sensitive data (passwords, API keys, etc.) in this file.
+#
+# INSTRUCTIONS
+# 1. Copy this file to `.env`, `.env.development`, or `.env.production` depending on your
+#    target environment.
+# 2. Replace the placeholder values with your actual configuration.
+# 3. Alternatively, ensure these variables are defined within your system's environment
+#    settings before running the application.
+
+# The base URL fot the backend API service.
+# Ensure this matches your Spring Boot server address (e.g., http://localhost:8080).
+VITE_API_BASE_URL=/api
+
+# Determines where Redux state is persisted on the client side.
+# Available options:
+# - `local`:   Persists data in LocalStorage (remains after closing the browser).
+# - `session`: Persists data in SessionStorage (cleared when the tab is closed).
+VITE_REDUX_STORAGE=local
@@ -0,0 +1,30 @@
+name: Upload Release Assets
+
+on:
+  release:
+    types: [created] # 仅当创建 Release 之后触发
+
+jobs:
+  build-and-upload:
+    runs-on: ubuntu-latest
+
+    # 必须授予权限以允许 Action 修改 Release
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Create archive
+        run: |
+          TAG_NAME=${{ github.event.release.tag_name }}
+          tar -czvf "website-dist-${TAG_NAME}.tar.gz" --exclude=".git*" --exclude=".github*" .
+
+      - name: Upload Release Asset
+        uses: softprops/action-gh-release@v2
+        with:
+          # 上传刚才生成的 tar.gz 文件
+          files: dist-${{ github.event.release.tag_name }}.tar.gz
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -66,8 +66,6 @@ pnpm preview
 ```text
 src/
 	components/       Shared UI components
-	data/             Modification code dataset
-	init/             Application initialisation
 	layout/           Route layouts
 	page/             Route pages
 	router/           Router configuration
@@ -8,35 +8,34 @@
    "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"
+    "preview": "vite preview"
  },
  "dependencies": {
    "@ant-design/cssinjs": "^2.1.2",
    "@reduxjs/toolkit": "^2.11.2",
-    "@tailwindcss/vite": "^4.2.2",
-    "@tanstack/react-virtual": "^3.13.23",
-    "antd": "^6.3.5",
-    "axios": "^1.14.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-virtual": "^3.13.24",
+    "antd": "^6.3.7",
+    "axios": "^1.16.0",
    "dayjs": "^1.11.20",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
    "react-redux": "^9.2.0",
-    "react-router": "^7.13.2",
-    "react-router-dom": "^7.13.2",
+    "react-router": "^7.15.0",
+    "react-router-dom": "^7.15.0",
    "redux-persist": "^6.0.0",
-    "tailwindcss": "^4.2.2"
+    "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": "^17.4.0",
-    "prettier": "^3.8.1",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.3"
+    "globals": "^17.6.0",
+    "prettier": "^3.8.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.11",
+    "vite-plugin-port-checker": "^1.0.1"
  },
  "pnpm": {
    "ignoredBuiltDependencies": [
@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: false
@@ -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")
+}
@@ -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"

@@ -31,3 +31,37 @@ 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,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>
+  )
+}
@@ -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,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>
+  )
+}
@@ -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,19 @@
+[
+  "枪口",
+  "枪管",
+  "贴片",
+  "瞄准镜",
+  "战术设备",
+  "增高座瞄具",
+  "侧瞄具",
+  "枪托",
+  "托腮板",
+  "枪托套件",
+  "导轨脚架",
+  "前握把",
+  "后握把",
+  "后握贴片",
+  "握把座",
+  "弹匣",
+  "弹匣座"
+]
@@ -0,0 +1 @@
+["安装位置", "厚度", "缩放倍率", "长度", "瞳距", "配重", "托腮板安装位置"]
@@ -0,0 +1,29 @@
+# 《三角洲行动游戏指南》最终用户许可协议
+
+> 最近更新日期： 2026年5月6日
+
+感谢您访问《三角洲行动游戏指南》（以下简称“本站”）。在访问或使用本站前，请您务必仔细阅读本协议。
+
+## 第一条：项目性质与声明
+
+本站是由《三角洲行动》游戏玩家开发的兴趣爱好项目，与游戏官方（包括但不限于腾讯、琳恩工作室等）不存在任何形式的关联、授权或代理关系。
+
+本站仅旨在为玩家提供游戏资讯、攻略及技术性指南，不保证资讯的绝对实时性与准确性。
+
+## 第二条：内容版权说明
+
+本站部分指南、攻略及图片素材提取、整理自哔哩哔哩、抖音等视频平台的公开视频，本站均会标注原作者信息或来源。相关内容的知识产权归原作者所有。
+
+由本站开发者原创或邀请的高手提供的特约稿件，其版权归本站或原提供者所有。
+
+严禁任何个人或组织在未经本站或原作者授权的情况下，将本站内容用于商业牟利。
+
+## 第三条：免责声明
+
+游戏机制可能随版本更新而变动，因参考本站指南而产生的任何游戏结果（如战绩波动、游戏内损失等），本站概不负责。
+
+来源标注中可能包含指向第三方平台的链接，本站不对第三方平台内容的合法性或安全性负责。
+
+## 第四条：协议变更
+
+本站保留随时修改本协议的权利。重大变更将通过站点公告形式发布。
@@ -0,0 +1,33 @@
+# 《三角洲行动游戏指南》隐私政策
+
+本隐私政策旨在向您说明在无需登录的情况下，本站如何处理与您相关的信息。
+
+## 第一条：信息收集情况
+
+1. **个人信息：** 由于本站采用无需登录的模式，我们不会收集您的姓名、手机号、身份证号或精确地理位置等个人敏感数据。
+
+2. **服务器日志：** 本站未集成任何第三方流量统计工具（如 Google Analytics 或百度统计），不会主动记录您的 IP 地址或用户代理（User-agent）数据。
+
+## 第二条：Cookie 的使用
+
+1. **必要性 Cookie：** 本站仅使用必要的 Cookie 用于保存与后端交互所需的功能性数据（如临时会话标识或您的本地设置偏好）。
+
+2. **非追踪性：** 这些 Cookie 不用于追踪您的个人跨站行为，也不会用于构建您的个人画像。
+
+## 第三条：第三方广告与赞助
+
+1. **现状说明：** 本站目前不包含任何商业广告，亦未开通打赏或赞助入口。
+
+2. **未来规划：** 考虑到运营成本，本站保留未来接入广告服务或赞助链接的权利。届时，广告商可能会根据其自身的隐私政策使用 Cookie。一旦此类功能上线，我们将同步更新本政策。
+
+## 第四条：数据安全
+
+我们致力于保护站点的运行安全，防止现有数据被非法篡改或泄露。
+
+## 第五条：联系我们
+
+若您对本协议或内容版权有任何疑问，请通过以下方式联系：
+
+开发者： Zihlu Wang、Xingyao Fan
+
+联系渠道： [GitHub](https://github.com/zihluwang/delta-force-guide-web)
@@ -34,3 +34,32 @@ html, body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
 }
+
+.nav-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  background: linear-gradient(to top, #22ffa7, transparent);
+  transition: height 0.2s ease-in-out;
+  opacity: 0.35;
+  pointer-events: none;
+  
+}
+
+.nav-item:hover::after,
+.nav-item.active::after {
+  height: 80%;  /* 向上打光的高度，可以调整 */
+}
+
+.nav-item:hover,
+.nav-item.active {
+  color: white;
+}
@@ -1 +0,0 @@
-import "./dayjs"
@@ -1,6 +1,11 @@
-import { Outlet, Link } from "react-router-dom"
+import { Outlet, Link, NavLink } 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/hooks"
+import { clearCurrentUser } from "@/store/auth-slice"
+import { useState } from 'react';

 /**
 * Main application component that serves as the root layout.
@@ -8,39 +13,80 @@ import dayjs from "dayjs"
 */
 export default function HeroLayout() {
  const today = useMemo(() => dayjs(), [])
+  const user = useAppSelector((state) => state.auth.user)
+  const dispatch = useAppDispatch()
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  async function handleLogout() {
+    try {
+      await AuthApi.logout()
+    } finally {
+      dispatch(clearCurrentUser())
+    }
+  }

  return (
    <div className="bg-gray-50 ">
      {/* Navigation Header */}
-      <header className="bg-white shadow-sm border-b">
-        <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10">
-          <div className="flex justify-between items-center h-16">
+      <header className="bg-white shadow-sm border-b bg-[url('/nav_bg.png')] bg-cover bg-center">
+        <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 h-full"> 
+          <div className="flex justify-between items-center h-20"> 
            <div className="flex items-center">
-              <h1 className="text-xl font-semibold text-gray-900">
-                三角洲行动改枪码库
-              </h1>
+              <h1 className="text-xl font-semibold text-white">《三角洲》指南</h1>
            </div>
-            <nav className="flex space-x-8">
-              <Link
+            <nav className="flex h-full"> 
+              <NavLink
                to="/firearms"
-                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                className={({ isActive }) =>
+                  `nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? 'active' : ''
+                  } text-gray-500 hover:text-white`
+                }
              >
                武器列表
-              </Link>
-              <Link
+              </NavLink>
+              <NavLink
                to="/mod-codes"
-                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                className={({ isActive }) =>
+                  `nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? 'active' : ''
+                  } text-gray-500 hover:text-white`
+                }
              >
                改枪码
+              </NavLink>
+              {/* {user ? (
+                <Dropdown
+                  trigger={["hover"]}
+                  menu={{
+                    items: [
+                      {
+                        key: "logout",
+                        label: "退出登录",
+                        danger: true,
+                        onClick: handleLogout,
+                      },
+                    ],
+                  }}
+                >
+                  <span className="nav-item inline-flex items-center px-10 h-full text-base font-medium text-gray-500 hover:text-white cursor-pointer">
+                    {user.username}
+                  </span>
+                </Dropdown>
+              ) : (
+                <Link
+                  to="/login"
+                  className="nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 text-gray-500 hover:text-white"
+                >
+                  登录
                </Link>
+              )}
              <a
                href="https://github.com/zihluwang/delta-force-firearm-modification-codes"
                target="_blank"
                rel="noopener noreferrer"
-                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                className="nav-item inline-flex items-center px-10 h-full text-lg font-medium transition-all duration-200 text-gray-500 hover:text-white"
              >
                GitHub
-              </a>
+              </a> */}
            </nav>
          </div>
        </div>
@@ -54,12 +100,113 @@ export default function HeroLayout() {
      </main>

      {/* Footer */}
-      <footer className="bg-white border-t">
-        <div className="max-w-screen-2xl mx-auto py-4 px-4 sm:px-6 lg:px-10">
-          <p className="text-center text-sm text-gray-500">
+      <footer className="bg-black border-t border-gray-800">
+        <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 py-8">
+
+
+
+          <div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-10 text-sm">
+
+            <div
+            className="relative"
+            onMouseEnter={() => setIsDropdownOpen(true)}
+            onMouseLeave={() => setIsDropdownOpen(false)}
+          >
+            <button
+              className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200 focus:outline-none"
+              aria-label="GitHub 仓库"
+            >
+              <img
+                src="/github-logo.png"  
+                alt=""
+                className="w-5 h-5 opacity-80"
+              />
+              <span>GitHub</span>
+              <svg
+                className={`w-3 h-3 transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+            {isDropdownOpen && (
+              <div className="absolute top-full left-2/3 -translate-x-1/2 w-18 bg-gray-950 border border-gray-700 rounded-lg shadow-xl py-1 z-20 opacity-60">
+                <a
+                  href="https://github.com/zihluwang/frontend-repo"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white transition-colors"
+                >
+                  前端
+                </a>
+                <a
+                  href="https://github.com/zihluwang/backend-repo"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white transition-colors"
+                >
+                  后端
+                </a>
+              </div>
+            )}
+          </div>
+
+            <span className="text-gray-700 select-none">•</span>
+            <Link
+              to="/"
+              className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200"
+            >
+              <img src="/footer-1.png" alt="" className="w-8 w-8 opacity-80" />
+              EULA
+            </Link>
+            <span className="text-gray-700 select-none">•</span>
+            <Link
+              to="/"
+              className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200"
+            >
+              <img src="/footer-2.png" alt="" className="w-8 w-8 opacity-80" />
+              隐私政策
+            </Link>
+            <span className="text-gray-700 select-none">•</span>
+            {user ? (
+              <Dropdown
+                trigger={["hover"]}
+                menu={{
+                  items: [
+                    {
+                      key: "logout",
+                      label: "退出登录",
+                      danger: true,
+                      onClick: handleLogout,
+                    },
+                  ],
+                }}
+              >
+                <span className="nav-item inline-flex items-center px-10 h-full text-base font-medium text-gray-500 hover:text-white cursor-pointer">
+                  {user.username}
+                </span>
+              </Dropdown>
+            ) : (
+              <Link
+                to="/login"
+                className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200"
+              >
+                <img src="../../public/footer-3.png" alt="" className="w-8 w-8 opacity-80" />
+                登录
+              </Link>
+            )}
+          </div>
+
+          <div className="border-t border-gray-800 my-6" />
+          <div className="text-center text-xs text-gray-500">
+            <p>
              © 2024-{today.year()} Zihlu Wang 和 OnixByte。使用 React 与 TypeScript 构建。
            </p>
          </div>
+
+        </div>
      </footer>
    </div>
  )
@@ -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/hooks"
 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,27 +26,59 @@ 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(async () => {
+    const pagedData = await FirearmApi.getFirearms({
      page: page - 1,
      size: 12,
      sortBy: "id",
      direction: "ASC",
      type: typeFilter === allTypeValue ? undefined : typeFilter,
-    }).then((pagedData) => {
+    })
    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 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 +101,26 @@ 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 },
@@ -98,7 +153,15 @@ export default function FirearmsPage() {
                  <Typography.Paragraph
                    style={{ marginBottom: 0 }}
                    type="secondary"
-                    ellipsis={{ rows: 3 }}
+                    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>
@@ -127,6 +190,25 @@ export default function FirearmsPage() {
          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()
+        }}
+      />
    </>
  )
 }
@@ -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/hooks"
+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>
+  )
+}
@@ -1,34 +1,62 @@
-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/hooks"
 import { Modification } from "@/types"

-const pageSize = 12
+const pageSize = 10

 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(async () => {
+    return ModificationApi.getModifications({
      page: page - 1,
      size: pageSize,
      sortBy: "id",
-      direction: "ASC",
+      direction: "DESC",
      firearmId,
      tags: selectedTags,
    }).then((pagedData) => {
@@ -37,6 +65,31 @@ export default function ModCodesPage() {
    })
  }, [page, firearmId, selectedTags])

+  useEffect(() => {
+    void 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 {
+        void loadModifications()
+      }
+    } catch {
+      message.error("改枪码删除失败，请稍后重试")
+    } finally {
+      setDeletingId(null)
+    }
+  }
+
  useEffect(() => {
    setPage(1)
  }, [firearmId])
@@ -47,10 +100,11 @@ 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>
+        <div className="flex flex-wrap items-center justify-end gap-3">
          <Space wrap>
            <span>标签：</span>
            <Select<string[]>
@@ -72,21 +126,53 @@ export default function ModCodesPage() {
                  onClick={() => {
                    setSelectedTags([])
                    setPage(1)
-                }}
-              >
+                  }}>
                  清除筛选
                </Button>
              </Link>
            )}
          </Space>
+          {user && (
+            <Button type="primary" onClick={() => setCreateModalOpen(true)}>
+              添加改装
+            </Button>
+          )}
+        </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 +198,53 @@ 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">
+                                <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>
+                    ) : (
+                      <Typography.Text type="secondary" className="block mt-1">
+                        暂无配件信息
+                      </Typography.Text>
+                    )}
+                  </div>
+
                  <Typography.Paragraph
                    style={{ marginBottom: 0 }}
                    type="secondary"
@@ -161,6 +286,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>) {
@@ -12,6 +13,8 @@ function lazy<T extends { default: ComponentType<unknown> }>(importer: () => Pro
  }
 }

+const hydrateFallbackElement = <div className="px-4 py-6 text-gray-500">页面加载中...</div>
+
 /**
 * Main application router configuration using React Router v6.
 * Defines all routes and their corresponding components.
@@ -21,11 +24,13 @@ const router = createBrowserRouter(
    {
      path: "/",
      element: <HeroLayout />,
+      hydrateFallbackElement,
      errorElement: <ErrorPage />,
      children: [
        {
          index: true,
          lazy: lazy(() => import("@/page/firearms")),
+
        },
        {
          path: "firearms",
@@ -37,6 +42,17 @@ const router = createBrowserRouter(
        },
      ],
    },
+    {
+      element: <EmptyLayout />,
+      hydrateFallbackElement,
+      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
@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from "react-redux"
+import type { AppDispatch, RootState } from "./index"
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
+
@@ -1,5 +1,4 @@
 import { configureStore, combineReducers } from "@reduxjs/toolkit"
-import { useDispatch, useSelector } from "react-redux"
 import {
  persistStore,
  persistReducer,
@@ -11,6 +10,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 +18,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
 })

@@ -44,5 +45,3 @@ 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>()
@@ -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"> {}
+
@@ -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"> {}
@@ -1,6 +1,14 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
+  /**
+   * Redux persistent storage location, use `local` for local storage and `session` for
+   * session storage
+   */
  readonly VITE_REDUX_STORAGE: "local" | "session"
+
+  /**
+   * Backend API Base URL
+   */
  readonly VITE_API_BASE_URL: string
 }

@@ -2,11 +2,47 @@ import { fileURLToPath, URL } from "node:url"
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import tailwindcss from "@tailwindcss/vite"
+import portChecker from "vite-plugin-port-checker"

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), portChecker()],
  base: "/",
+  build: {
+    rolldownOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes("node_modules")) {
+            return
+          }
+
+          if (id.includes("react-router")) {
+            return "router-vendor"
+          }
+
+          if (id.includes("redux") || id.includes("immer")) {
+            return "redux-vendor"
+          }
+
+          if (id.includes("/node_modules/@ant-design/")) {
+            return "ant-design-vendor"
+          }
+
+          if (id.includes("/node_modules/rc-")) {
+            return "antd-rc-vendor"
+          }
+
+          if (
+            id.includes("/node_modules/react/") ||
+            id.includes("/node_modules/react-dom/") ||
+            id.includes("/node_modules/scheduler/")
+          ) {
+            return "react-vendor"
+          }
+        },
+      },
+    },
+  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
				`@@ -0,0 +1 @@`
				`["安装位置", "厚度", "缩放倍率", "长度", "瞳距", "配重", "托腮板安装位置"]`