修改部分问题

- scp target restored to /tmp/: /tmp/dist.tar.gz was treated as a
  directory by scp-action, breaking the deploy tar extract
- drop forgejo-release@v1 (unreachable from runner); upload asset
  via the Gitea release assets API using curl
- replace ssh-action "cp" with scp CLI: the cp ran on the remote
  server, leaving the runner without a local file
- chain deploy on upload-release-asset: its cleanup rm must not
  race with the artifact download
- clean up stale /tmp/dist.tar.gz on the server before each build

.env.example

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

.github/dependabot.yml

@@ -1,27 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "weekly"
-    commit-message:
-      prefix: "chore: "
-
-    groups:
-      dependency-updates:
-        patterns: ["*"]
-        update-types: ["minor", "patch"]
-
-    ignore:
-      - dependency-name: "@types/node"
-        update-types: ["version-update:semver-major"]
-
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "daily"

.vscode/launch.json

@@ -1,22 +1,19 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node-terminal",
-            "request": "launch",
-            "name": "pnpm dev",
-            "command": "pnpm dev",
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "node-terminal",
-            "request": "launch",
-            "name": "build",
-            "command": "pnpm build",
-            "cwd": "${workspaceFolder}"
-        }
-    ]
-}
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "pnpm dev",
+      "command": "pnpm dev",
+      "cwd": "${workspaceFolder}"
+    },
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "build",
+      "command": "pnpm build",
+      "cwd": "${workspaceFolder}"
+    }
+  ]
+}

CLAUDE.md

@@ -0,0 +1,56 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+pnpm install          # Install dependencies (pnpm required)
+pnpm dev              # Start Vite dev server
+pnpm build            # TypeScript check + Vite production build
+pnpm build:tar        # Build + tar.gz archive (used by CI)
+pnpm preview          # Preview production build locally
+pnpm lint             # ESLint
+```
+
+No test suite exists in this project.
+
+## Architecture
+
+This is a Chinese-language SPA for browsing and managing Delta Force guide ("《三角洲》指南"). The frontend talks to a Spring Boot backend via REST APIs.
+
+**App shell** (`src/main.tsx`): React 19 + React Router 7 + Redux Toolkit + Ant Design 6 + Tailwind CSS 4. Wraps the router in Redux `Provider` → `PersistGate` (Redux Persist) → Ant Design `StyleProvider`/`ConfigProvider` (locale `zh_CN`).
+
+**Routing** (`src/router/index.tsx`): Two layout groups:
+- `HeroLayout` (nav header + footer) for `/`, `/firearms`, `/mod-codes`
+- `EmptyLayout` (minimal) for `/login`
+All page components are lazy-loaded via `createBrowserRouter` + `lazy()`.
+
+**State** (`src/store/`): Redux Toolkit with two slices — `auth` (current user) and `firearms` (paginated firearm list). State is persisted to `localStorage` or `sessionStorage` based on the `VITE_REDUX_STORAGE` env var. Use typed hooks from `src/hooks/store.ts` (`useAppDispatch`, `useAppSelector`).
+
+**API layer** (`src/api/`): Axios instance (`src/shared/web-client/`) with base URL from `VITE_API_BASE_URL`, 10s timeout, and credentials. API modules: `FirearmApi`, `ModificationApi`, `TagApi`, `AuthApi`.
+
+**Pages**:
+- `FirearmsPage` — paginated card grid with type filter, create/edit modals (admin-only), delete with popconfirm
+- `ModCodesPage` — paginated list with tag multi-select and firearmId query param filter, create/edit modals with nested accessory/tuning form lists
+- `LoginPage` — simple username/password form, dispatches `setCurrentUser` on success
+
+**Shared form components**: `FirearmForm` and `ModificationForm` are reused by both create and edit modals. `ModificationForm` fetches all firearms for its weapon selector and supports a `lockFirearmId` prop that disables the selector (used when navigating from a specific firearm).
+
+**Type system** (`src/types/`): `Firearm` with weapon stats, `Modification` with nested `Accessory[]` → `Tuning[]`, `Page<T>` for paginated API responses, `User` for auth.
+
+**Vite config**: Alias `@` → `./src`. Plugins: React, Tailwind CSS 4, port checker. Build uses rolldown with manual chunk splitting for React, Redux, Ant Design, React Router, and rc-* packages.
+
+**Styling**: Tailwind CSS 4 with CSS layers (`theme, base, antd, components, utilities`). Responsive grid for mod code cards (1→2→3→4 columns). Prettier: 100 print width, no semicolons, double quotes, trailing commas ES5.
+
+## Environment variables
+
+```
+VITE_API_BASE_URL=/api        # Backend API base URL
+VITE_REDUX_STORAGE=local      # "local" or "session" for Redux persistence
+```
+
+## Contributing conventions
+
+- User-facing copy, documentation, and code comments in British English
+- Commit messages use `chore:` prefix for dependency updates (per Dependabot config)

README.md

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

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/onixbyte.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>三角洲行动改枪码库</title>
+    <title>《三角洲》指南</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -8,35 +8,37 @@
     "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",
+    "@ant-design/icons": "^6.2.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.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-redux": "^9.2.0",
-    "react-router": "^7.14.0",
-    "react-router-dom": "^7.14.0",
+    "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": {
+    "@tailwindcss/typography": "^0.5.19",
     "@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.8"
+    "globals": "^17.6.0",
+    "prettier": "^3.8.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.11",
+    "vite-plugin-markdown": "^2.2.0",
+    "vite-plugin-port-checker": "^1.0.1"
   },
   "pnpm": {
     "ignoredBuiltDependencies": [

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: false

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.post<void>("/auth/logout")
+}

src/api/daily-password-api.ts

@@ -0,0 +1,9 @@
+import { WebClient } from "@/shared/web-client"
+import { DailyPasswordResponse, PasswordItem } from "@/types/DailyPasswordResponse"
+
+
+export async function getDailyPassword(): Promise<PasswordItem[]> {
+  const { data } = await WebClient.get<DailyPasswordResponse>(`/daily-passwords`)
+  const allPasswords:PasswordItem[]=data.data.passwords
+  return allPasswords
+}

src/api/firearm-api.ts

@@ -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"
 
@@ -7,9 +7,9 @@ interface FirearmParams extends PageQueryParams {
 }
 
 /**
- * 查询武器列表
+ * Fetch firearm list
  *
- * @param params 分页查询参数¬
+ * @param params Paged query parameters
  */
 export async function getFirearms(params?: FirearmParams): Promise<Page<Firearm>> {
   let uri = "/firearms"
@@ -28,11 +28,29 @@ export async function getFirearms(params?: FirearmParams): Promise<Page<Firearm>
 }
 
 /**
- * 根据 ID 查询武器
+ * Fetch firearm by ID
  *
- * @param id 武器 ID
+ * @param id Firearm ID
  */
 export async function getFirearm(id: number): Promise<Firearm> {
   const { data } = await WebClient.get<Firearm>(`/firearms/${id}`)
   return data
 }
+
+/**
+ * Create firearm
+ * @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

@@ -1,3 +1,5 @@
 export * as FirearmApi from "./firearm-api"
 export * as ModificationApi from "./modification-api"
 export * as TagApi from "./tag-api"
+export * as AuthApi from "./auth-api"
+export * as DailyPasswordApi from "./daily-password-api" 

src/api/modification-api.ts

@@ -1,4 +1,4 @@
-import { Modification, Page, PageQueryParams } from "@/types"
+import { Modification, ModificationRequest, Page, PageQueryParams } from "@/types"
 import { WebClient } from "@/shared/web-client"
 import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
 
@@ -30,4 +30,38 @@ export async function getModifications(params?: ModificationParams): Promise<Pag
 export async function getModification(id: number): Promise<Modification> {
   const { data } = await WebClient.get<Modification>(`/modifications/${id}`)
   return data
+}
+
+export async function addModification(modification: ModificationRequest): Promise<Modification> {
+  const { data } = await WebClient.post<Modification>("/modifications", modification)
+  return data
+}
+
+export async function addModifications(
+  modifications: ModificationRequest[]
+): Promise<Modification[]> {
+  const { data } = await WebClient.post<Modification[]>("/modifications/batch", {
+    modifications,
+  })
+  return data
+}
+
+export async function editModification(
+  id: number,
+  modification: ModificationRequest
+): Promise<Modification> {
+  const { data } = await WebClient.put<Modification>(`/modifications/${id}`, modification)
+  return data
+}
+
+export async function removeModification(
+  id: number
+): Promise<void> {
+  await WebClient.delete(`/modifications/${id}`)
+}
+
+export async function removeModifications(ids: number[]) {
+  const urlSearchParams = new URLSearchParams()
+  ids.forEach((id) => urlSearchParams.append("ids", "" + id))
+  await WebClient.delete(`/modifications/batch-delete?${urlSearchParams.toString()}`)
 }

src/components/AccessoryFormModal/index.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from "react"
+import { Button, Form, Input, InputNumber, Modal, AutoComplete, Space } from "antd"
+import slotNames from "@/constant/slots.json"
+import tuningNames from "@/constant/tunings.json"
+
+interface AccessoryType {
+  slotName: string
+  accessoryName: string
+  tunings: Array<{ tuningName: string; tuningValue: number }>
+}
+
+interface AccessoryFormModalProps {
+  open: boolean
+  onCancel: () => void
+  onOk: (values: AccessoryType) => void
+  initialData?: AccessoryType | null
+  editingIndex?: number | null
+}
+
+const slotOptions = slotNames.map((slotName) => ({ value: slotName }))
+const tuningOptions = tuningNames.map((tuningName) => ({ value: tuningName }))
+
+export default function AccessoryFormModal({ 
+  open, 
+  onCancel, 
+  onOk, 
+  initialData, 
+  editingIndex 
+}: AccessoryFormModalProps) {
+  const [form] = Form.useForm<AccessoryType>()
+
+  // 重置表单或回填数据
+  useEffect(() => {
+    if (open) {
+      if (initialData) {
+        // 编辑模式：回填数据
+        form.setFieldsValue(initialData)
+      } else {
+        // 新增模式：重置表单
+        form.resetFields()
+      }
+    }
+  }, [open, initialData, form])
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields()
+      onOk(values)
+      form.resetFields()
+    } catch (error) {
+      console.log("表单校验失败:", error)
+    }
+  }
+
+  const handleCancel = () => {
+    form.resetFields()
+    onCancel()
+  }
+
+  return (
+    <Modal
+      title={initialData ? `编辑配件 ${(editingIndex ?? 0) + 1}` : "添加配件"}
+      open={open}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      width={600}
+      destroyOnClose
+    >
+      <Form form={form} layout="vertical" requiredMark={false}>
+        <Form.Item
+          name="slotName"
+          label="槽位"
+          rules={[{ required: true, message: "请选择或输入槽位" }]}
+        >
+          <AutoComplete options={slotOptions} placeholder="请选择或输入槽位" />
+        </Form.Item>
+
+        <Form.Item
+          name="accessoryName"
+          label="配件名称"
+          rules={[{ required: true, message: "请输入配件名称" }]}
+        >
+          <Input placeholder="请输入配件名称" />
+        </Form.Item>
+
+        <Form.List name="tunings">
+          {(tuningFields, { add: addTuning, remove: removeTuning }) => (
+            <div className="flex flex-col gap-3">
+              <div className="font-medium">精校配置</div>
+              {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>
+      </Form>
+    </Modal>
+  )
+}

src/components/DisplayBoard/DisplayBoard.css

@@ -0,0 +1,100 @@
+/* DisplayBoard.css - 荧光绿主题 + 紧凑导航栏样式 */
+
+.display-board {
+  /* 横向排列，紧凑高度 */
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  height: 48px;          /* 严格控制高度，适合导航栏 */
+  padding: 0 20px;
+  background-color: #ffffff00;
+  overflow-x: auto;      /* 窄屏时允许滚动，保证所有项目可见 */
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+/* 自定义滚动条（可选，提升美观） */
+.display-board::-webkit-scrollbar {
+  height: 4px;
+}
+.display-board::-webkit-scrollbar-track {
+  background: #f0f0f0;
+}
+.display-board::-webkit-scrollbar-thumb {
+  background: #10e28c;
+  border-radius: 4px;
+}
+
+/* 每个内容卡片 - 轻量胶囊风格 */
+.display-item {
+  border-radius: 2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background-color: #0b0f149d;
+  padding: 4px 14px;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
+}
+
+.loading-placeholder{
+  color: #10e28c;
+}
+
+/* 名字样式 - 清晰易读 */
+.item-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #a8a8a8;
+  letter-spacing: 0.3px;
+}
+
+/* 计算器风格数字板 —— 黑底、荧光绿字、等宽字体、内陷光感 */
+.calculator-digit {
+  background: #0c0f0c;
+  border-radius: 6px;
+  min-width: 62px;
+  text-align: center;
+
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  color: #10e28c;
+  text-shadow: 0 0 3px #10e28c, 0 0 1px #73ff50;
+  box-shadow: inset 0 1px 4px #10e28c, 0 0 0 1px #73ff5046;
+  transition: all 0.1s linear;
+  display: grid;
+  height: 100%;
+}
+
+.calculator-digit div{
+  height: 100%;
+}
+
+/* 模拟计算器屏幕的额外“发光感” */
+.calculator-digit:hover {
+  text-shadow: 0 0 5px #10e28c;
+  box-shadow: inset 0 1px 4px rgba(0,0,0,0.8), 0 0 2px #10e28c;
+}
+
+/* 响应式微调：当屏幕宽度小于500px时适当缩小间距和字体 */
+@media (max-width: 560px) {
+  .display-board {
+    gap: 8px;
+    padding: 0 12px;
+  }
+  .display-item {
+    padding: 3px 10px;
+    gap: 5px;
+  }
+  .item-name {
+    font-size: 11px;
+  }
+  .calculator-digit {
+    font-size: 13px;
+    min-width: 54px;
+    padding: 2px 6px;
+    letter-spacing: 1px;
+  }
+}

src/components/DisplayBoard/index.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react';
+import './DisplayBoard.css';
+import { DailyPasswordApi } from '@/api';
+import { DailyPasswordData,PasswordItem } from '@/types/DailyPasswordResponse';
+
+// 单条数据接口
+interface DisplayItem {
+  mapName: string;
+  password: number;
+}
+
+// 组件 Props 接口（支持动态获取 + 静态传入）
+interface DisplayBoardProps {
+  /** 可选：静态数据，若同时提供 fetchData，则静态数据仅作为初始值 */
+  items?: PasswordItem[];
+  /** 可选：异步获取数据的函数，返回值应为 DisplayItem[] */
+  fetchData?: () => Promise<PasswordItem[]>;
+  /** 可选：自动刷新间隔（毫秒），默认不自动刷新 */
+  refreshInterval?: number;
+  /** 可选：是否强制要求数组长度为 5（默认 true） */
+  enforceLength?: boolean;
+}
+
+/**
+ * 头部导航栏显示框组件
+ * - 支持静态数据传入
+ * - 支持动态数据获取（通过 fetchData 属性）
+ * - 自动处理加载状态（显示简短占位符）
+ * - 紧凑设计（高 48px），荧光绿主题，计算器风格密码
+ */
+const DisplayBoard: React.FC<DisplayBoardProps> = ({
+  items: staticItems,
+  fetchData,
+  refreshInterval,
+  enforceLength = true,
+}) => {
+  const [items, setItems] = useState<PasswordItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(!!fetchData);
+
+  const defaultItems: PasswordItem[] = [
+    { mapName: 'Alex', password: '1234' },
+    { mapName: 'Jamie', password: '5678' },
+    { mapName: 'Taylor', password: '9012'},
+    { mapName: 'Jordan', password: '3456' },
+    { mapName: 'Casey', password: '7890' },
+  ];
+
+  // 确保数组长度为 5（若 enforceLength 为 true）
+  const ensureLength = (data: PasswordItem[]): PasswordItem[] => {
+    if (!enforceLength) return data;
+    if (data.length === 5) return data;
+    if (data.length < 5) {
+      // 不足则用默认数据补齐，实际项目中可自定义补齐逻辑
+      return [...data, ...defaultItems.slice(data.length, 5)];
+    }
+    // 超过5个则截取前5个
+    return data.slice(0, 5);
+  };
+
+  // 加载数据的函数
+  const loadData = async () => {
+    if (DailyPasswordApi.getDailyPassword) {
+      setLoading(true);
+      try {
+        const dynamicData = await DailyPasswordApi.getDailyPassword();
+        const finalData = ensureLength(dynamicData);
+        setItems(finalData);
+      } catch (error) {
+        console.error('动态获取密码数据失败', error);
+        // 出错时使用静态数据或默认数据兜底
+        if (staticItems && staticItems.length > 0) {
+          setItems(ensureLength(staticItems));
+        } else {
+          setItems(defaultItems);
+        }
+      } finally {
+        setLoading(false);
+      }
+    } else if (staticItems) {
+      // 仅静态数据模式
+      setItems(ensureLength(staticItems));
+    } else {
+      // 无任何数据源，使用默认
+      setItems(defaultItems);
+    }
+  };
+
+  // 初次加载 & fetchData 变化时重新拉取
+  useEffect(() => {
+    loadData();
+  }, [fetchData]); // 注意：staticItems 变化不会自动触发重新拉取，如需可自行添加依赖
+
+  // 定时刷新逻辑
+  useEffect(() => {
+    if (!fetchData || !refreshInterval || refreshInterval <= 0) return;
+    const timer = setInterval(() => {
+      loadData();
+    }, refreshInterval);
+    return () => clearInterval(timer);
+  }, [fetchData, refreshInterval]);
+
+  // 辅助：格式化密码为四位数字（计算器风格）
+  const formatPassword = (pwd: string | number): string => {
+    const str = String(pwd).replace(/\D/g, '');
+    if (str.length >= 4) return str.slice(0, 4);
+    return str.padStart(4, '0');
+  };
+
+  // 加载状态时显示简洁的占位符（保持高度不变，避免布局抖动）
+  if (loading && items.length === 0) {
+    return (
+      <div className="display-board loading">
+        <div className="loading-placeholder">加载密码...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="display-board">
+      {items.map((item, index) => (
+        <div className="display-item" key={`${item.mapName}-${index}`}>
+          <span className="item-name">{item.mapName}</span>
+          <div className="calculator-digit">
+          <div>
+            {formatPassword(item.password)}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DisplayBoard;

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/markdown-renderer/index.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+interface MarkdownRendererProps {
+  /** HTML string processed by vite-plugin-markdown */
+  html: string
+  /** Optional custom class name */
+  className?: string
+}
+
+export default function MarkdownRenderer({ html, className = "" }: MarkdownRendererProps) {
+  return (
+    <article
+      className={`prose prose-slate max-w-none dark:prose-invert ${className}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}

src/components/mod-codes/index.tsx

@@ -0,0 +1,366 @@
+// ModCodes.tsx
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { Card, Col, Pagination, Row, Tag, Typography, Button, Popconfirm, Space, Select, App, message } from "antd";
+import { Link } from "react-router-dom";
+import { ModificationApi, TagApi } from "@/api";
+import { Modification } from "@/types";
+import ModificationCreateModal from "@/components/modification-create-modal";
+import ModificationEditModal from "@/components/modification-edit-modal";
+import { useAppSelector } from "@/hooks/store";
+
+const pageSize = 10; // 常量，不需要 useState
+
+interface ModCodesProps {
+  firearmId: string; // 从父组件传入
+}
+
+export default function ModCodes({ firearmId }: ModCodesProps) {
+  const { message } = App.useApp();
+  const user = useAppSelector((state) => state.auth.user);
+
+  // ✅ 所有 useState 必须放在组件函数内部
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [editingModification, setEditingModification] = useState<Modification | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [modifications, setModifications] = useState<Modification[]>([]);
+  const [tagOptions, setTagOptions] = useState<string[]>([]);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+
+  // 获取标签选项
+  useEffect(() => {
+    const _firearmId = firearmId ? Number(firearmId) : undefined;
+    if (_firearmId) {
+      TagApi.getTags(_firearmId).then(setTagOptions);
+    }
+  }, [firearmId]);
+
+  // 加载改枪码列表
+  const loadModifications = useCallback(async () => {
+    const numericId = firearmId
+    if (!numericId) return;
+    setLoading(true);
+    try {
+      const pagedData = await ModificationApi.getModifications({
+        page: page - 1,
+        size: pageSize,
+        sortBy: "id",
+        direction: "DESC",
+        firearmId: numericId, // 使用数字类型
+        tags: selectedTags,
+
+      });
+      setModifications(pagedData.items);
+      setTotal(pagedData.totalElements);
+    } finally {
+      setLoading(false);
+    }
+  }, [firearmId, page, selectedTags]);
+
+  useEffect(() => {
+    loadModifications();
+  }, [loadModifications]);
+
+  const handleDelete = async (modification: Modification) => {
+    setDeletingId(modification.id);
+    try {
+      await ModificationApi.removeModification(modification.id);
+      message.success("删除成功");
+      if (modifications.length === 1 && page > 1) {
+        setPage(page - 1);
+      } else {
+        await loadModifications();
+      }
+    } catch {
+      message.error("删除失败");
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  // 当 firearmId 或标签改变时重置分页
+  useEffect(() => {
+    setPage(1);
+  }, [firearmId, selectedTags]);
+
+  const parsedFirearmId = useMemo(() => {
+    const value = Number(firearmId);
+    return isNaN(value) ? undefined : value;
+  }, [firearmId]);
+
+  if (!parsedFirearmId) {
+    return <Typography.Text type="secondary">无效的武器 ID</Typography.Text>;
+  }
+  const tagColors = [
+    '#e28010', // 青绿
+    '#0EA5E9', // 天蓝
+    '#8B5CF6', // 紫色
+    '#F59E0B', // 琥珀
+    '#EF4444', // 红色
+    '#EC4899', // 粉红
+  ];
+
+
+  return (
+    <div className="bg-#1e1e1e">
+      <div className="mb-4 flex items-start justify-between gap-4 bg-#1e1e1e">
+        <div className="flex flex-wrap items-center justify-end gap-3 bg-#1e1e1e">
+          <Space wrap>
+            <span>标签：</span>
+            <Select<string[]>
+              mode="multiple"
+              allowClear
+              placeholder="请选择标签"
+              className="w-64"
+              value={selectedTags}
+              options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
+              onChange={(values) => {
+                setSelectedTags(values);
+              }}
+            />
+            {firearmId && <Tag color="geekblue">武器 ID: {firearmId}</Tag>}
+            {(firearmId || selectedTags.length > 0) && (
+              <Link to="/mod-codes">
+                <Button
+                  type="link"
+                  onClick={() => {
+                    setSelectedTags([]);
+                    setPage(1);
+                  }}
+                >
+                  清除筛选
+                </Button>
+              </Link>
+            )}
+          </Space>
+          {user && (
+            <Button type="primary" onClick={() => setCreateModalOpen(true)}>
+              添加改装
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="mb-6">
+        <Row gutter={[16, 16]}>
+          {modifications.map((modification) => (
+            <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={{
+                  root: {
+                    background: '#35333385'
+                  },
+                  header: { minHeight: 56 },
+                }}
+              >
+                <div className="flex flex-col gap-3">
+                  {/* 改枪码行 */}
+                  <div className="flex items-center justify-between gap-2">
+                    <span>
+                      <strong style={{
+                        color: '#10E28C',
+                        fontWeight: 800
+                      }}>改枪码：</strong>
+                      <code className="rounded" style={{
+                        color: '#10E28C',
+                        fontWeight: 600
+                      }}>
+                        {modification.code}
+                      </code>
+                    </span>
+                    <Button
+                      type="text"
+                      size="small"
+                      onClick={async () => {
+                        try {
+                          await navigator.clipboard.writeText(modification.code);
+                          message.success('已复制到剪贴板');   // 绿色成功提示，2秒后自动消失
+                        } catch {
+                          message.error('复制失败，请重试');   // 红色错误提示
+                        }
+                      }}
+                    >
+                      复制
+                    </Button>
+                  </div>
+
+                  {/* 作者 */}
+                  <div className="flex items-center justify-between gap-2">
+                    <Typography.Text style={{
+                      color: '#B59728',
+                      fontWeight: 800
+                    }}>
+                      <strong>作者：</strong>
+                      {modification.author || "未知"}
+                    </Typography.Text>
+                  </div>
+                  {/* 标签列表 */}
+                  {(modification.tags?.length || 0) > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                      {(modification.tags || []).map((tag, idx) => (
+                        <Tag key={`${modification.id}-${tag}`} style={{
+                          background: tagColors[idx % tagColors.length],
+                          font: '800'
+                        }}>{tag}</Tag>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* 配件配置区域 */}
+                  <div>
+                    <div className="flex items-center justify-between gap-2">
+                      <Typography.Text strong>配件配置：</Typography.Text></div>
+                    {(modification.accessories?.length || 0) > 0 ? (
+                      <div className="mt-2 overflow-x-auto">
+                        <div className="grid min-w-[275px] grid-cols-4 gap-2">
+                          {(modification.accessories || []).map((accessory, accessoryIndex) => (
+                            <div
+                              key={`${modification.id}-accessory-${accessoryIndex}`}
+                              className="" style={{
+                                borderRadius: '0.25rem',
+                                border: '2px solid #10E28C',
+                                padding: '0.5rem',
+                                background: '#16343b96'
+
+                              }}
+                            >
+                              <div className="flex items-center justify-between gap-2 rounded px-2 py-1">
+                                <Typography.Text className="mr-0 text-cyan-400" style={{
+                                  color: '#10E28C',
+                                }}>
+                                  {accessory.slotName || "未填写槽位"}
+                                </Typography.Text>
+                                <Typography.Text className="mr-0 text-cyan-300" style={{
+                                  color: '#ffffff',
+                                }}>
+                                  {accessory.accessoryName || "未填写配件"}
+                                </Typography.Text>
+                              </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}`}
+                                      style={{
+                                        background: '#EED177',
+                                        color: '#000000',
+                                      }}
+                                    >
+                                      {tuning.tuningName || "未命名"}: {tuning.tuningValue ?? "-"}
+                                    </Tag>
+                                  ))}
+                                </div>
+                              ) : null}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : (
+                      <Typography.Text type="secondary" className="mt-1 block">
+                        暂无配件信息
+                      </Typography.Text>
+                    )}
+                  </div>
+
+                  {/* 备注 */}
+                  <div className="flex items-center justify-between gap-2">
+                    <Typography.Paragraph
+                      style={{ marginBottom: 0 }}
+                      type="secondary"
+                      ellipsis={{ rows: 3 }}
+                    >
+                      {modification.note || "暂无备注"}
+                    </Typography.Paragraph>
+                  </div>
+                  {/* 视频链接 */}
+                  <div className="flex items-center justify-between gap-2">
+                    {modification.videoUrl && (
+                      <div>
+                        <a
+                          href={modification.videoUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-cyan-400 hover:text-cyan-300"
+                        >
+                          查看视频
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </Card>
+            </Col>
+          ))}
+
+          {modifications.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={pageSize}
+          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();
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,101 @@
+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 {
+  console.log(values);
+  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,759 @@
+// 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, Tag, message } from "antd"
+// import { EditOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons"
+// import AccessoryFormModal from "@/components/AccessoryFormModal"
+
+// const slotOptions = slotNames.map((slotName) => ({ value: slotName }))
+// const tuningOptions = tuningNames.map((tuningName) => ({ value: tuningName }))
+
+// interface ModificationFormProps {
+//   form: ReturnType<typeof Form.useForm<ModificationRequest>>[0]
+//   onFinish: (values: ModificationRequest) => void
+//   lockFirearmId?: number
+// }
+
+// interface AccessoryType {
+//   slotName: string
+//   accessoryName: string
+//   tunings: Array<{ tuningName: string; tuningValue: number }>
+// }
+
+// export default function ModificationForm({ form, onFinish, lockFirearmId }: ModificationFormProps) {
+//   const [firearmOptions, setFirearmOptions] = useState<Array<{ value: number; label: string }>>([])
+//   const [firearmLoading, setFirearmLoading] = useState(false)
+
+//   // 配件弹窗相关状态
+//   const [accessoryModalOpen, setAccessoryModalOpen] = useState(false)
+//   const [editingAccessory, setEditingAccessory] = useState<AccessoryType | null>(null)
+//   const [editingAccessoryIndex, setEditingAccessoryIndex] = useState<number | null>(null)
+
+//   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])
+
+//   // 打开添加配件弹窗
+//   const handleAddAccessory = () => {
+//     setEditingAccessory(null)
+//     setEditingAccessoryIndex(null)
+//     setAccessoryModalOpen(true)
+//   }
+
+//   // 打开编辑配件弹窗
+//   const handleEditAccessory = (index: number, accessory: AccessoryType) => {
+//     setEditingAccessory(accessory)
+//     setEditingAccessoryIndex(index)
+//     setAccessoryModalOpen(true)
+//   }
+
+//   // 删除配件
+//   const handleDeleteAccessory = (remove: (index: number) => void, index: number) => {
+//     remove(index)
+//     message.success("删除成功")
+//   }
+
+//   // 配件弹窗确认回调
+//   const handleAccessoryModalOk = (values: AccessoryType) => {
+//     const accessories = form.getFieldValue("accessories") || []
+
+//     if (editingAccessoryIndex !== null) {
+//       // 编辑模式：更新指定索引的数据
+//       const updatedAccessories = [...accessories]
+//       updatedAccessories[editingAccessoryIndex] = values
+//       form.setFieldsValue({ accessories: updatedAccessories })
+//       message.success("修改成功")
+//     } else {
+//       // 新增模式：添加新数据
+//       form.setFieldsValue({ accessories: [...accessories, values] })
+//       message.success("添加成功")
+//     }
+
+//     setAccessoryModalOpen(false)
+//     setEditingAccessory(null)
+//     setEditingAccessoryIndex(null)
+//   }
+
+//   // 配件弹窗取消回调
+//   const handleAccessoryModalCancel = () => {
+//     setAccessoryModalOpen(false)
+//     setEditingAccessory(null)
+//     setEditingAccessoryIndex(null)
+//   }
+
+//   return (
+//     <>
+//       <Form<ModificationRequest>
+//         form={form}
+//         layout="vertical"
+//         onFinish={() => {
+//     const allValues = form.getFieldsValue(true);
+//     console.log('完整数据:', allValues);
+//     onFinish(allValues);
+//   }}
+//         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>
+
+//         {/* 改造后的配件列表 */}
+//         <div className="flex flex-col gap-4">
+
+//           <Form.Item<ModificationRequest> label="配件配置">
+//           <Form.List name="accessories">
+//             {(accessoryFields, { add, remove }) => (
+//               <div className="flex flex-col gap-3">
+//                 {/* 配件标签列表 */}
+//                 <div className="flex flex-wrap gap-2">
+//                   {accessoryFields.length === 0 ? (
+//                     <div className="text-gray-400 text-sm py-2">暂无配件，点击下方按钮添加</div>
+//                   ) : (
+//                     accessoryFields.map((accessoryField, index) => {
+//                       const accessory = form.getFieldValue(["accessories", index]) as AccessoryType
+//                       return (
+//                         <Tag
+//                           key={accessoryField.key}
+//                           closable
+//                           onClose={(e) => {
+//                             e.preventDefault()
+//                             handleDeleteAccessory(remove, accessoryField.name)
+//                           }}
+//                           closeIcon={<DeleteOutlined />}
+//                           className="px-3 py-1.5 text-sm border hover:shadow-sm transition-all "
+//                           style={{ marginRight: 8, marginBottom: 8 }}
+//                         >
+//                           <Space size={6}>
+//                             <span className="font-medium text-[#2ee59d]">
+//                               {accessory?.slotName || "?"}
+//                             </span>
+//                             <span className="text-gray-400">·</span>
+//                             <span className="text-[#2ee59d]">
+//                               {accessory?.accessoryName || "未命名"}
+//                             </span>
+//                             {accessory?.tunings && accessory.tunings.length > 0 && (
+//                               <span className="text-blue-500 text-xs bg-blue-50 px-1.5 py-0.5 rounded">
+//                                 {accessory.tunings.length}项精校
+//                               </span>
+//                             )}
+//                             <Button
+//                               type="link"
+//                               size="small"
+//                               icon={<EditOutlined />}
+//                               onClick={(e) => {
+//                                 e.stopPropagation()
+//                                 const currentAccessory = form.getFieldValue(["accessories", index])
+//                                 handleEditAccessory(index, currentAccessory)
+//                               }}
+//                               className="text-blue-500 hover:text-blue-700 p-0"
+//                               style={{ marginLeft: 4 }}
+//                             />
+//                           </Space>
+//                         </Tag>
+//                       )
+//                     })
+//                   )}
+//                 </div>
+
+//                 {/* 添加按钮 */}
+//                 <Button
+//                   type="dashed"
+//                   icon={<PlusOutlined />}
+//                   onClick={handleAddAccessory}
+//                   size="small"
+//                   className="w-full"
+//                 >
+//                   添加配件
+//                 </Button>
+//               </div>
+//             )}
+//           </Form.List>
+//         </Form.Item>
+//         </div>
+
+//       </Form>
+
+//       {/* 配件编辑弹窗 */}
+//       <AccessoryFormModal
+//         open={accessoryModalOpen}
+//         onCancel={handleAccessoryModalCancel}
+//         onOk={handleAccessoryModalOk}
+//         initialData={editingAccessory}
+//         editingIndex={editingAccessoryIndex}
+//       />
+//     </>
+//   )
+// }
+// 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>
+//   )
+// }
+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}
+      className="max-w-full mx-auto"
+    >
+      {/* 强制不换行，左右并排 */}
+      <div className="flex flex-nowrap gap-6">
+        {/* 左侧：主要字段，固定宽度，控件宽度收窄 */}
+        <div className="flex-none w-[580px] space-y-4">
+          <Form.Item<ModificationRequest>
+            name="firearmId"
+            label="武器"
+            rules={[{ required: true, message: "请输入武器" }]}
+          >
+            <Select<number>
+              className="w-[580px]"
+              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 className="w-[580px]" placeholder="请输入改装名称" />
+          </Form.Item>
+
+          <Form.Item<ModificationRequest>
+            name="code"
+            label="改枪码"
+            rules={[{ required: true, message: "请输入改枪码" }]}
+          >
+            <Input className="w-[580px]" placeholder="请输入改枪码" />
+          </Form.Item>
+
+          <Form.Item<ModificationRequest> name="tags" label="标签">
+            <Select
+              mode="tags"
+              tokenSeparators={[",", " "]}
+              placeholder="可选：输入后回车"
+              className="w-[580px]"
+            />
+          </Form.Item>
+
+          <Form.Item<ModificationRequest> name="author" label="作者">
+            <Input className="w-[580px]" placeholder="可选：请输入作者" />
+          </Form.Item>
+
+          <Form.Item<ModificationRequest> name="videoUrl" label="视频链接">
+            <Input className="w-[580px]" placeholder="可选：请输入视频链接" />
+          </Form.Item>
+
+          <Form.Item<ModificationRequest> name="note" label="备注">
+            <Input.TextArea className="w-[580px]" rows={3} placeholder="可选：补充说明" />
+          </Form.Item>
+        </div>
+
+        {/* 右侧：配件列表，固定宽度，卡片缩小，高度限制滚动 */}
+        <div className="flex-none w-[420px]">
+          <div className="max-h-[600px] overflow-y-auto pr-2 hide-scrollbar">
+            <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"
+                      style={{backgroundColor:'#1f1f1f'}}
+                      extra={
+                        <Button
+                          danger
+                          type="link"
+                          size="small"
+                          onClick={() => removeAccessory(accessoryField.name)}
+                        >
+                          删除配件
+                        </Button>
+                      }
+                      className="w-full [&_.ant-card-body]:!p-3"  // 卡片内边距由默认24px缩小到12px
+                    >
+                      {/* 用容器控制表单项间距，由默认大间距缩小为4px */}
+                      <div className="space-y-1">
+                        <Form.Item
+                          name={[accessoryField.name, "slotName"]}
+                          label="槽位"
+                          rules={[{ required: true, message: "请选择或输入槽位" }]}
+                          className="!mb-1"  // 表单项底部间距缩小
+                        >
+                          <AutoComplete options={slotOptions} placeholder="请选择或输入槽位" />
+                        </Form.Item>
+
+                        <Form.Item
+                          name={[accessoryField.name, "accessoryName"]}
+                          label="配件名称"
+                          rules={[{ required: true, message: "请输入配件名称" }]}
+                          className="!mb-1"
+                        >
+                          <Input placeholder="请输入配件名称" />
+                        </Form.Item>
+
+                        <Form.List name={[accessoryField.name, "tunings"]}>
+                          {(tuningFields, { add: addTuning, remove: removeTuning }) => (
+                            <div className="flex flex-col gap-2">  {/* 精校列表间距由3(12px)缩小为2(8px) */}
+                              {tuningFields.map((tuningField) => (
+                                <Space key={tuningField.key} align="start" className="w-full" size="small" wrap>
+                                  <Form.Item
+                                    name={[tuningField.name, "tuningName"]}
+                                    label="精校属性"
+                                    rules={[{ required: true, message: "请选择或输入精校属性" }]}
+                                    className="!mb-1"
+                                  >
+                                    <AutoComplete
+                                      options={tuningOptions}
+                                      placeholder="例如：后坐控制"
+                                      className="w-44"        // 完全保留
+                                    />
+                                  </Form.Item>
+                                  <Form.Item
+                                    name={[tuningField.name, "tuningValue"]}
+                                    label="精校值"
+                                    rules={[{ required: true, message: "请输入精校值" }]}
+                                    className="!mb-1"
+                                  >
+                                    <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>
+                      </div>
+                    </Card>
+                  ))}
+                  {/* 添加配件按钮，保持在左侧（默认左对齐） */}
+                  <Button
+                    variant="solid"
+                    color="lime"
+                    className="self-start"
+                    onClick={() => addAccessory({ slotName: "", accessoryName: "", tunings: [] })}
+                  >
+                    添加配件
+                  </Button>
+                </div>
+              )}
+            </Form.List>
+          </div>
+        </div>
+      </div>
+    </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,19 @@
+[
+  "枪口",
+  "枪管",
+  "导轨脚架",
+  "贴片",
+  "瞄准镜",
+  "战术设备",
+  "增高座瞄具",
+  "侧瞄具",
+  "枪托",
+  "托腮板",
+  "枪托套件",
+  "前握把",
+  "弹匣",
+  "弹匣座",
+  "后握把",
+  "后握贴片",
+  "握把座"
+]

src/constant/tunings.json

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

src/docs/EULA.md

@@ -0,0 +1,29 @@
+# 《三角洲行动游戏指南》最终用户许可协议
+
+> 最近更新日期： 2026年5月6日
+
+感谢您访问《三角洲行动游戏指南》（以下简称“本站”）。在访问或使用本站前，请您务必仔细阅读本协议。
+
+## 第一条：项目性质与声明
+
+本站是由《三角洲行动》游戏玩家开发的兴趣爱好项目，与游戏官方（包括但不限于腾讯、琳恩工作室等）不存在任何形式的关联、授权或代理关系。
+
+本站仅旨在为玩家提供游戏资讯、攻略及技术性指南，不保证资讯的绝对实时性与准确性。
+
+## 第二条：内容版权说明
+
+本站部分指南、攻略及图片素材提取、整理自哔哩哔哩、抖音等视频平台的公开视频，本站均会标注原作者信息或来源。相关内容的知识产权归原作者所有。
+
+由本站开发者原创或邀请的高手提供的特约稿件，其版权归本站或原提供者所有。
+
+严禁任何个人或组织在未经本站或原作者授权的情况下，将本站内容用于商业牟利。
+
+## 第三条：免责声明
+
+游戏机制可能随版本更新而变动，因参考本站指南而产生的任何游戏结果（如战绩波动、游戏内损失等），本站概不负责。
+
+来源标注中可能包含指向第三方平台的链接，本站不对第三方平台内容的合法性或安全性负责。
+
+## 第四条：协议变更
+
+本站保留随时修改本协议的权利。重大变更将通过站点公告形式发布。

src/docs/PrivacyPolicy.md

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

src/hooks/store.ts

@@ -0,0 +1,5 @@
+import { useDispatch, useSelector } from "react-redux"
+import type { AppDispatch, RootState } from "@/store"
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()

src/index.css

@@ -1,8 +1,10 @@
 @layer theme, base, antd, components, utilities;
 
 @import 'tailwindcss';
+@plugin "@tailwindcss/typography";
 
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   width: 100%;
@@ -33,4 +35,188 @@ html, body {
   .mod-codes-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+}
+
+.nav-item {
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.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;
+  z-index: -1;
+
+}
+
+.nav-item:hover::after {
+  height: 30%;
+}
+
+/* 激活状态效果 */
+.nav-item.active::after {
+  height: 30%;
+}
+
+/* 可选：激活+悬停效果 */
+.nav-item.active:hover::after {
+  opacity: 0.35;
+}
+
+.custom-btn-outlined {
+  --ant-color-solid: #10E28C;
+  /* 边框和文字颜色 */
+  --ant-color-solid-hover: #2ee59d;
+  --ant-color-solid-active: #0cb878;
+}
+
+
+.hex-bg {
+  background-color: #1E1E1E;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.3' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='fadeDown' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2339ff14' stop-opacity='1' /%3E%3Cstop offset='100%25' stop-color='%2339ff14' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23fadeDown)' stroke-width='0.5'%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546041,-0.85081805,0.85081805,0.52546041,-203.01888079,130.22116071)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.65208214,130.43446239)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.04868859,141.09544261)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.68192833,141.30866893)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.2853524,130.6476887)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3151986,141.52187999)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.86530846,152.18286021)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.49857872,152.39608653)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-203.44526451,151.88976939)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,152.72932323)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.30770653,163.1089619)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.99694603,163.40205272)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3930642,163.69517406)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,130.86648448)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.84158104,174.24726756)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-166.23769921,174.68691905)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-160.08231896,163.69518931)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-159.78921288,141.71168407)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-160.37542504,185.6786793)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.68620079,185.53211864)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-209.32536095,140.83235057)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-215.48072594,129.98715098)'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: 350px 350px;
+  background-position: right -90px top -40px;
+  background-repeat: no-repeat;
+  margin: 0;
+
+}
+
+.nav-item:hover,
+.nav-item.active {
+  color: white;
+}
+
+
+/* LeftMiddleRightBox.css */
+.lmr-container {
+  display: flex;
+  width: 100%;
+  /* 可根据需要调整 */
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  background: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+}
+
+
+.lmr-left,
+.lmr-middle,
+.lmr-right {
+  padding: 20px;
+  transition: all 0.2s ease;
+  height: 100%;
+}
+
+
+.lmr-left {
+  flex: 1;
+  background-color: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+  margin: auto;
+}
+
+.lmr-middle {
+  flex: 3;
+  background-color: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+}
+
+.lmr-right {
+  flex: 2;
+  background-color: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+}
+
+.content-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  height: 100%;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+
+
+@media (max-width: 768px) {
+  .lmr-container {
+    flex-direction: column;
+    min-height: auto;
+  }
+
+  .lmr-left,
+  .lmr-middle,
+  .lmr-right {
+    border-right: none;
+
+  }
+
+  .lmr-right {
+    border-bottom: none;
+  }
+
+  .content-placeholder {
+    min-height: 100px;
+  }
+}
+
+.css-var-_r_1_.ant-collapse{
+  --ant-collapse-header-bg:#1e1e1e;
+  width: 90%;
+  border: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ant-collapse-body{
+  background: #1e1e1e;
+}
+
+.ant-modal-container{
+  width: 620px;
+}
+
+.hide-scrollbar {
+  max-height: 500px;      /* 限制高度，触发滚动 */
+  overflow-y: auto;       /* 允许滚动 */
+  
+  /* 隐藏滚动条（Firefox 和 IE） */
+  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+/* 隐藏滚动条（Chrome/Safari/Edge 新版） */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
 }

src/init/index.ts

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

src/layout/hero-layout/index.tsx

@@ -1,66 +1,203 @@
-import { Outlet, Link } from "react-router-dom"
-import { useMemo } from "react"
+import { Outlet, Link, NavLink, useNavigate } from "react-router-dom"
+import { useEffect, useMemo } from "react"
 import dayjs from "dayjs"
-
+import { Dropdown } from "antd"
+import {
+  FileTextOutlined,
+  GithubOutlined,
+  LockOutlined,
+  LoginOutlined,
+} from "@ant-design/icons"
+import { AuthApi } from "@/api"
+import { useAppDispatch, useAppSelector } from "@/hooks/store"
+import { clearCurrentUser } from "@/store/auth-slice"
+import { useState } from "react"
+import { clearAutoLogout, scheduleAutoLogout } from "@/utils/autoLogout";
+import DisplayBoard from '@/components/DisplayBoard';
 /**
  * Main application component that serves as the root layout.
  * Uses React Router's Outlet to render child routes.
  */
-export default function HeroLayout() {
-  const today = useMemo(() => dayjs(), [])
 
+
+
+export default function HeroLayout() {
+
+
+
+
+  const today = useMemo(() => dayjs(), [])
+  const user = useAppSelector((state) => state.auth.user)
+  const dispatch = useAppDispatch()
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+
+  // 统一登出函数：清除定时器、清除 Redux、跳转登录页
+  const performLogout = () => {
+    clearAutoLogout();
+    dispatch(clearCurrentUser());
+  };
+
+  async function handleLogout() {
+    try {
+      await AuthApi.logout()
+    } finally {
+      dispatch(clearCurrentUser())
+    }
+  }
+
+  useEffect(() => {
+    if (user?.expiration) {
+      const localDate = new Date(user.expiration.replace(' ', 'T'));
+      const targetTimestamp = localDate.getTime();
+      if (targetTimestamp > Date.now()) {
+        console.log("未到自动登出时间");
+        
+        scheduleAutoLogout(targetTimestamp, performLogout);
+      } else {
+        // 已过期立即登出
+        performLogout();
+      }
+    } else {
+      clearAutoLogout();
+    }
+  }, [user]);
   return (
-    <div className="bg-gray-50">
+    <div className="bg-[#1b252a] flex flex-col min-h-screen">
       {/* 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-[#0b0f14] shadow-sm border-b">
+        <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
+            <div>
+              <DisplayBoard />
+            </div>
+            <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`
+                }>
                 改枪码
-              </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"
-              >
-                GitHub
-              </a>
+              </NavLink> */}
             </nav>
           </div>
         </div>
+
       </header>
 
       {/* Main Content Area */}
-      <main className="max-w-screen-2xl mx-auto py-6 sm:px-6 lg:px-10">
+      <main className="flex-1 w-full max-w-screen-2xl mx-auto py-6 sm:px-6 lg:px-10">
         <div className="px-4 py-6 sm:px-0">
           <Outlet />
         </div>
       </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">
-            © 2024-{today.year()} Zihlu Wang 和 OnixByte。使用 React 与 TypeScript 构建。
-          </p>
+      <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 仓库">
+                <GithubOutlined className="text-base 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/delta-force-guide-web"
+                    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">
+                    Web
+                  </a>
+                  <a
+                    href="https://github.com/zihluwang/delta-force-guide-server"
+                    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">
+                    Server
+                  </a>
+                </div>
+              )}
+            </div>
+
+            <span className="text-gray-700 select-none">•</span>
+            <Link
+              to="/legal?tab=eula"
+              className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200">
+              <FileTextOutlined className="text-lg opacity-80" />
+              EULA
+            </Link>
+            <span className="text-gray-700 select-none">•</span>
+            <Link
+              to="/legal?tab=privacy"
+              className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200">
+              <LockOutlined className="text-lg 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="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">
+                <LoginOutlined className="text-lg 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()} OnixByte。湘ICP备2026000274号-1</p>
+          </div>
         </div>
       </footer>
     </div>
   )
-}
+}

src/main.tsx

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

src/markdown.d.ts

@@ -0,0 +1,6 @@
+declare module "*.md" {
+  const attributes: Record<string, any>
+  const html: string
+  const toc: { level: string; content: string; slug: string }[]
+  export { attributes, html, toc }
+}

src/page/firearms/index.tsx

@@ -1,8 +1,14 @@
-import { useEffect, useState } from "react"
-import { Link } from "react-router-dom"
+import { useCallback, useEffect, useState, useMemo } from "react"
 import { FirearmApi } from "@/api"
+import FirearmCreateModal from "@/components/firearm-create-modal"
+import FirearmEditModal from "@/components/firearm-edit-modal"
+import ModCodes from "@/components/mod-codes"
+import { useAppSelector } from "@/hooks/store"
 import { Firearm, FirearmType } from "@/types"
-import { Button, Card, Col, Pagination, Row, Select, Tag, Typography } from "antd"
+import { Button, Card, Col, Pagination, Popconfirm, Row, Select, Spin, Typography, App, Input, AutoComplete } from "antd"
+import { ConfigProvider, theme } from 'antd';
+import type { AutoCompleteProps } from 'antd';
+import { Collapse } from 'antd';
 
 const firearmTypeText: Record<FirearmType, string> = {
   RIFLE: "步枪",
@@ -15,6 +21,10 @@ const firearmTypeText: Record<FirearmType, string> = {
   SPECIAL: "特殊",
 }
 
+const darkTheme = {
+  algorithm: theme.darkAlgorithm,
+};
+
 const allTypeValue = "ALL"
 type FirearmTypeFilter = FirearmType | typeof allTypeValue
 
@@ -23,110 +33,465 @@ 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)
+  const [allOptions, setAllOptions] = useState<AutoCompleteProps['options']>([]);
+  const [filteredOptions, setFilteredOptions] = useState<AutoCompleteProps['options']>([]);
+  const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    FirearmApi.getFirearms({
-      page: page - 1,
-      size: 12,
+  const loadFirearms = useCallback(async () => {
+    setLoading(true);
+    const start = Date.now();
+
+    try {
+      const pagedData = await FirearmApi.getFirearms({
+        page: page - 1,
+        size: 8,
+        sortBy: "id",
+        direction: "ASC",
+        type: typeFilter === allTypeValue ? undefined : typeFilter,
+      });
+      setFirearms(pagedData.items);
+      setTotal(pagedData.totalElements);
+    } catch (error) {
+      // 可在此处理错误，比如 message.error
+    } finally {
+      const elapsed = Date.now() - start;
+      if (elapsed < 500) {
+        await new Promise(resolve => setTimeout(resolve, 500 - elapsed));
+      }
+      setLoading(false);
+    }
+  }, [page, typeFilter]);
+
+  const GetFirearmName = useCallback(async () => {
+    const Firearms = await FirearmApi.getFirearms({
+      page: 0,           // 从第一页开始
+      size: 100,        // 足够大的值，或者根据实际总数调整
       sortBy: "id",
       direction: "ASC",
-      type: typeFilter === allTypeValue ? undefined : typeFilter,
-    }).then((pagedData) => {
-      setFirearms(pagedData.items)
-      setTotal(pagedData.totalElements)
-    })
-  }, [page, typeFilter])
+      type: undefined,   // 不按类型过滤，获取全部
+    });
+    const formatted = Firearms.items.map(item => ({
+      label: item.name,
+      value: item.name,        // 用名称作为 value
+      data: item,
+    }));
+    setAllOptions(formatted);
+    setFilteredOptions(formatted);
+  }, []);
+  const handleSearch = (searchText: string) => {
+    if (!searchText) {
+      setFilteredOptions(allOptions);
+      void loadFirearms()
+      return;
+    }
+    const lower = searchText.toLowerCase();
+    const filtered = allOptions?.filter(opt =>
+      opt?.label?.toString().toLowerCase().includes(lower)
+    );
+    setFilteredOptions(filtered);
+  };
 
+
+  useEffect(() => {
+    void loadFirearms()
+    void GetFirearmName()
+  }, [loadFirearms, GetFirearmName])
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [page]);
+
+  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">
-        <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)
+      <ConfigProvider theme={darkTheme}>
+        <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>
+          <div className="flex flex-col sm:flex-row gap-3 sm:items-center">
+            <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)
+              }}
+            />
+            <AutoComplete
+              style={{ width: 240 }}
+              options={filteredOptions}   // 使用过滤后的选项
+              placeholder="搜索武器名称"
+              showSearch={{ onSearch: handleSearch }}     // 输入时触发过滤
+              onSelect={async (value, option) => {
+                const selected = option.data as Firearm;
+                console.log('选中 ID:', selected.id);
+                console.log('选中名称:', selected.name);
+                const pagedData = await FirearmApi.getFirearm(selected.id)
+                const newArray = [];
+                newArray.push(pagedData)
+                setFirearms(newArray)
+                setTotal(1)
+              }}
+              allowClear
+            />
+          </div>
+        </div>
+        <div className="mb-6">
+          {loading ? (<div className="flex justify-center items-center h-64">
+            <Spin size="large" tip="加载中..." />
+          </div>) : (
+            <Row gutter={[16, 16]}>
+              {firearms.map((firearm) => (
+                <Col key={firearm.id} xs={24} md={24} lg={24}>
+
+                  <Card
+                    className="hex-bg border-5px-#142c38"
+                    title={
+                      <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        width: '100%'
+                      }}>
+                        <span style={{
+                          display: 'inline-block',
+                          color: '#10E28C',
+                          padding: '4px 12px',
+                          borderRadius: '4px',
+                          fontSize: '18px',
+                          fontWeight: '500',
+                          letterSpacing: '0.5px'
+                        }}>
+                          {firearm.name}
+                        </span>
+                        <span className="flex items-center justify-between"
+                          style={{
+                            display: 'inline-block',
+                            backgroundColor: '#2d4f5796',
+                            color: 'white',
+                            padding: '4px 12px',
+                            borderRadius: '4px',
+                            fontSize: '14px',
+                            fontWeight: '500',
+                            letterSpacing: '0.5px'
+                          }}>
+                          {firearmTypeText[firearm.type]}
+
+                        </span></div>
+                    }
+                    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"
+                    style={{
+                      height: '100%', display: 'flex', flexDirection: 'column'
+                    }}
+                    styles={{
+                      root: {
+                        border: '1px solid #313131'
+                      },
+                      header: {
+                        borderBottom: '1px solid #303030',
+                      },
+                      body: {
+                        flex: 1,
+                        overflow: 'auto',
+                        padding: '12px',
+
+                      },
+                      actions: {
+                        flexShrink: 0,
+                        background: '#1e1e1e',
+                        display: 'flex'
+                      }
+                    }}
+                    actions={[
+                      <div>
+                        <Collapse
+
+                          expandIcon={() => null}
+                          styles={
+                            {
+                              root: {
+                                background: '#1e1e1e',
+                                width: '100%'
+                              }
+                            }
+                          }
+                          items={[{
+                            key: '1',
+                            label: (
+                              <Button
+                                variant="outlined"
+                                styles={{
+                                  root: {
+                                    color: '#10E28C',
+                                    border: '1px solid #10E28C',
+                                    background: '#16343b96',
+                                    width: '20%',
+                                  }
+                                }}
+                              >
+                                查看改枪码
+                              </Button>
+                            ),
+                            children: <ModCodes firearmId={String(firearm.id)} />
+                          }]}
+                        />
+                      </div>,
+                    ]}>
+                    <div className="flex flex-col gap-3">
+                      <div className="lmr-container">
+                        <div className="lmr-left">
+                        </div>
+                        <div className="lmr-middle">
+                          <div style={{
+                            color: 'white',
+                            padding: '4px 12px',
+                            borderRadius: '4px',
+                            fontSize: '14px',
+                            fontWeight: '500',
+                            letterSpacing: '0.5px'
+                          }}>
+                            <div style={{
+                              display: 'grid',
+                              gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))', // 最小宽度160px
+                              gap: '12px',
+                            }}>
+                              {/* 武器输出等级 */}
+                              <div style={{
+                                border: '2px solid #10E28C',
+                                backgroundColor: '#16343b96',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                textAlign: 'center'
+                              }}>
+                                <div style={{
+                                  padding: '4px 0px',
+                                  borderRadius: '4px',
+                                  color: '#10E28C',
+                                  fontSize: '13px',
+                                  fontWeight: 500,
+                                  marginBottom: '6px',
+                                  whiteSpace: 'nowrap',
+                                  textAlign: 'center'
+                                }}>
+                                  武器输出等级
+                                </div>
+                                <div style={{
+                                  fontSize: '16px',
+                                  fontWeight: 600,
+                                  color: '#ffffff'
+                                }}>
+                                  {firearm.level}
+                                </div>
+                              </div>
+
+                              {/* 子弹口径 */}
+                              <div style={{
+                                border: '2px solid #10E28C',
+                                backgroundColor: '#16343b96',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                textAlign: 'center'
+                              }}>
+                                <div style={{
+                                  padding: '4px 12px',
+                                  borderRadius: '4px',
+                                  color: '#10E28C',
+                                  fontSize: '13px',
+                                  fontWeight: 500,
+                                  marginBottom: '6px',
+                                  whiteSpace: 'nowrap'
+                                }}>
+                                  子弹口径
+                                </div>
+                                <div style={{
+                                  fontSize: '16px',
+                                  fontWeight: 600,
+                                  color: '#ffffff'
+                                }}>
+                                  {firearm.calibre}
+                                </div>
+                              </div>
+
+                              {/* 每秒甲伤 */}
+                              <div style={{
+                                border: '2px solid #10E28C',
+                                backgroundColor: '#16343b96',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                textAlign: 'center'
+                              }}>
+                                <div style={{
+                                  padding: '4px 12px',
+                                  borderRadius: '4px',
+                                  color: '#10E28C',
+                                  fontSize: '13px',
+                                  fontWeight: 500,
+                                  marginBottom: '6px',
+                                  whiteSpace: 'nowrap'
+                                }}>
+                                  每秒甲伤
+                                </div>
+                                <div style={{
+                                  fontSize: '16px',
+                                  fontWeight: 600,
+                                  color: '#ffffff'
+                                }}>
+                                  {asDps(firearm.fireRate, firearm.armourDamage)}
+                                </div>
+                              </div>
+
+                              {/* 每秒肉伤 */}
+                              <div style={{
+                                border: '2px solid #10E28C',
+                                backgroundColor: '#16343b96',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                textAlign: 'center'
+                              }}>
+                                <div style={{
+                                  padding: '4px 12px',
+                                  borderRadius: '4px',
+                                  color: '#10E28C',
+                                  fontSize: '13px',
+                                  fontWeight: 500,
+                                  marginBottom: '6px',
+                                  whiteSpace: 'nowrap'
+                                }}>
+                                  每秒肉伤
+                                </div>
+                                <div style={{
+                                  fontSize: '16px',
+                                  fontWeight: 600,
+                                  color: '#ffffff'
+                                }}>
+                                  {asDps(firearm.fireRate, firearm.bodyDamage)}
+                                </div>
+                              </div>
+                            </div>
+
+                          </div>
+                        </div>
+                        <div className="lmr-right">
+                          <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>
+                      </div>
+
+                    </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={8}
+            total={total}
+            onChange={(nextPage) => {
+              setPage(nextPage)
+            }}
+            showSizeChanger={false}
+          />
+        </div>
+        <FirearmCreateModal
+          open={createModalOpen}
+          onCancel={() => setCreateModalOpen(false)}
+          onSuccess={() => {
+            setCreateModalOpen(false)
+            void loadFirearms()
           }}
         />
-      </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}
-                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 }}
-                    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)
+
+        <FirearmEditModal
+          open={!!editingFirearm}
+          firearm={editingFirearm}
+          onCancel={() => setEditingFirearm(null)}
+          onSuccess={() => {
+            setEditingFirearm(null)
+            void loadFirearms()
           }}
-          showSizeChanger={false}
+
         />
-      </div>
+      </ConfigProvider>
     </>
+
   )
 }

src/page/legal/index.tsx

@@ -0,0 +1,34 @@
+import { Tabs } from "antd"
+import { useSearchParams } from "react-router-dom"
+import MarkdownRenderer from "@/components/markdown-renderer"
+import { html as EulaHtml } from "@/docs/EULA.md"
+import { html as PrivacyHtml } from "@/docs/PrivacyPolicy.md"
+
+const tabKeys = new Set(["eula", "privacy"])
+
+export default function LegalPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const rawTab = searchParams.get("tab")
+  const activeTab = rawTab && tabKeys.has(rawTab) ? rawTab : "eula"
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <Tabs
+        activeKey={activeTab}
+        onChange={(key) => setSearchParams({ tab: key })}
+        items={[
+          {
+            key: "eula",
+            label: "最终用户许可协议",
+            children: <MarkdownRenderer html={EulaHtml} />,
+          },
+          {
+            key: "privacy",
+            label: "隐私政策",
+            children: <MarkdownRenderer html={PrivacyHtml} />,
+          },
+        ]}
+      />
+    </div>
+  )
+}

src/page/login/index.tsx

@@ -0,0 +1,70 @@
+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 "@/hooks/store"
+import { setCurrentUser } from "@/store/auth-slice"
+import { LoginRequest } from "@/types"
+import dayjs from "dayjs";
+
+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)
+      const expireTimestamp = dayjs(user.expiration).valueOf();
+      const authUser = { ...user, expireAt: expireTimestamp };
+      dispatch(setCurrentUser(authUser))
+      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 variant="borderless" 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,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 "@/hooks/store"
 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,46 +100,79 @@ export default function ModCodesPage() {
 
   return (
     <>
-      <div className="mb-4 flex items-center justify-between gap-4">
+      <div className="mb-4 flex items-start justify-between gap-4">
         <Typography.Title level={4} className="mb-0!">
           改枪码列表
         </Typography.Title>
-        <Space wrap>
-          <span>标签：</span>
-          <Select<string[]>
-            mode="multiple"
-            allowClear
-            placeholder="请选择标签"
-            className="w-64"
-            value={selectedTags}
-            options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
-            onChange={(values) => {
-              setSelectedTags(values)
-            }}
-          />
-          {firearmId && <Tag color="geekblue">武器 ID: {firearmId}</Tag>}
-          {(firearmId || selectedTags.length > 0) && (
-            <Link to="/mod-codes">
-              <Button
-                type="link"
-                onClick={() => {
-                  setSelectedTags([])
-                  setPage(1)
-                }}
-              >
-                清除筛选
-              </Button>
-            </Link>
+        <div className="flex flex-wrap items-center justify-end gap-3">
+          <Space wrap>
+            <span>标签：</span>
+            <Select<string[]>
+              mode="multiple"
+              allowClear
+              placeholder="请选择标签"
+              className="w-64"
+              value={selectedTags}
+              options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
+              onChange={(values) => {
+                setSelectedTags(values)
+              }}
+            />
+            {firearmId && <Tag color="geekblue">武器 ID: {firearmId}</Tag>}
+            {(firearmId || selectedTags.length > 0) && (
+              <Link to="/mod-codes">
+                <Button
+                  type="link"
+                  onClick={() => {
+                    setSelectedTags([])
+                    setPage(1)
+                  }}>
+                  清除筛选
+                </Button>
+              </Link>
+            )}
+          </Space>
+          {user && (
+            <Button type="primary" onClick={() => setCreateModalOpen(true)}>
+              添加改装
+            </Button>
           )}
-        </Space>
+        </div>
       </div>
 
       <div className="mb-6">
         <Row gutter={[16, 16]}>
           {modifications.map((modification) => (
-            <Col key={modification.id} xs={24} md={12} lg={8}>
+            <Col key={modification.id} span={24}>
               <Card
                 title={modification.name}
+                extra={
+                  user ? (
+                    <div className="flex items-center gap-1">
+                      <Button
+                        type="link"
+                        size="small"
+                        onClick={() => setEditingModification(modification)}>
+                        编辑
+                      </Button>
+                      <Popconfirm
+                        title="确认删除改枪码"
+                        description={`确定要删除 ${modification.name} 吗？该操作不可撤销。`}
+                        okText="删除"
+                        cancelText="取消"
+                        okButtonProps={{ danger: true, loading: deletingId === modification.id }}
+                        onConfirm={() => handleDelete(modification)}>
+                        <Button
+                          type="link"
+                          danger
+                          size="small"
+                          loading={deletingId === modification.id}>
+                          删除
+                        </Button>
+                      </Popconfirm>
+                    </div>
+                  ) : null
+                }
                 variant="outlined"
                 styles={{
                   header: { minHeight: 56 },
@@ -106,20 +192,59 @@ export default function ModCodesPage() {
                       复制
                     </Button>
                   </div>
-
+                  
                   <Typography.Text>
                     <strong>作者：</strong>
                     {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()
+        }}
+      />
     </>
   )
 }

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>) {
@@ -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",
@@ -35,6 +40,21 @@ const router = createBrowserRouter(
           path: "mod-codes",
           lazy: lazy(() => import("@/page/mod-codes")),
         },
+        {
+          path: "legal",
+          lazy: lazy(() => import("@/page/legal"))
+        }
+      ],
+    },
+    {
+      element: <EmptyLayout />,
+      hydrateFallbackElement,
+      errorElement: <ErrorPage />,
+      children: [
+        {
+          path: "login",
+          lazy: lazy(() => import("@/page/login")),
+        },
       ],
     },
   ],

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

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

src/store/auth-slice.ts

@@ -0,0 +1,33 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { User } from "@/types"
+
+export interface AuthUser extends User {
+  expireAt: number;   // 转换 expiration 得到的时间戳
+}
+
+
+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
+      localStorage.setItem('auth_user', JSON.stringify(action.payload));
+    },
+    clearCurrentUser(state) {
+      state.user = null
+      localStorage.removeItem('auth_user');
+    },
+  },
+})
+
+export const { setCurrentUser, clearCurrentUser } = authSlice.actions
+export const authReducer = authSlice.reducer

src/store/index.ts

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

src/types/DailyPasswordResponse.ts

@@ -0,0 +1,25 @@
+export interface PasswordItem {
+  mapName: string;   // 地图名称，如 "零号大坝"
+  password: string;  // 四位数字密码，如 "6460"
+}
+
+// data 字段的类型
+export interface DailyPasswordData {
+  updateDate: string;       // 如 "06月14日每日密码已更新"
+  totalCount: number;       // 总数，这里固定为 5
+  passwords: PasswordItem[]; // 密码数组
+  source: string;           // 如 "三角洲行动每日密码"
+  lastUpdated: string;      // 最后更新时间字符串，如 "2026-06-14 16:54:46"
+  timestamp: number;        // Unix 时间戳（秒），如 1781427286
+}
+
+// 根返回值的类型
+export interface DailyPasswordResponse {
+  status: 'success' | 'error'; // 可根据实际调整字面量，或直接用 string
+  message: string;             // 如 "每日密码获取成功"
+  data: DailyPasswordData;
+  metadata: {
+    version: string;   // 如 "1.0"
+    author: string;    // 如 "tmini.net"
+  };
+}

src/types/auth.ts

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

src/types/common.ts

@@ -0,0 +1,18 @@
+export type Direction = "ASC" | "DESC"
+
+export interface Page<T> {
+  map(arg0: (item: any) => { label: any; value: any; data: any }): unknown
+  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

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

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/autoLogout.ts

@@ -0,0 +1,20 @@
+let logoutTimer: ReturnType<typeof setTimeout> | null = null;
+
+export const scheduleAutoLogout = (expireTimestamp: number, onLogout: () => void) => {
+  if (logoutTimer) clearTimeout(logoutTimer);
+  const delay = expireTimestamp - Date.now();
+  if (delay <= 0) {
+    onLogout();
+    return;
+  }
+  logoutTimer = setTimeout(() => {
+    onLogout();
+  }, delay);
+};
+
+export const clearAutoLogout = () => {
+  if (logoutTimer) {
+    clearTimeout(logoutTimer);
+    logoutTimer = null;
+  }
+};

src/vite-env.d.ts

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

tailwind.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from "tailwindcss"
+import typography from "@tailwindcss/typography"
+
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [typography],
+} satisfies Config

vite.config.ts

@@ -2,11 +2,57 @@ 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"
+import { Mode, plugin as markdown } from "vite-plugin-markdown"
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), portChecker(), markdown({ mode: [Mode.HTML, Mode.TOC] })],
   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"
+          }
+        },
+      },
+    },
+  },
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://dfguide.onixbyte.cn/dev-api",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),