修改部分问题

.gitea/workflows/build.yml

@@ -1,112 +0,0 @@
-name: Build and Deploy
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  build:
-    name: Build release archive
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          cache: pnpm
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 11
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build release archive
-        run: pnpm build:tar
-
-      - name: Clean up previous build artifacts on server
-        uses: appleboy/ssh-action@v1.0.3
-        with:
-          host: ${{ vars.DEPLOY_HOST }}
-          username: ${{ vars.DEPLOY_USER }}
-          port: ${{ vars.DEPLOY_PORT }}
-          key: ${{ secrets.DEPLOY_SSH_KEY }}
-          command: rm -f /tmp/dist.tar.gz /tmp/*.tar.gz
-
-      - name: Upload artifact to server
-        uses: appleboy/scp-action@v0.1.7
-        with:
-          host: ${{ vars.DEPLOY_HOST }}
-          username: ${{ vars.DEPLOY_USER }}
-          port: ${{ vars.DEPLOY_PORT }}
-          key: ${{ secrets.DEPLOY_SSH_KEY }}
-          source: "dist.tar.gz"
-          target: "/tmp/"
-
-  upload-release-asset:
-    name: Upload to Gitea Release
-    needs: build
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Download artifact from server
-        env:
-          DEPLOY_HOST: ${{ vars.DEPLOY_HOST }}
-          DEPLOY_USER: ${{ vars.DEPLOY_USER }}
-          DEPLOY_PORT: ${{ vars.DEPLOY_PORT }}
-          DEPLOY_SSH_KEY: ${{ secrets.DEPLOY_SSH_KEY }}
-        run: |
-          set -e
-          SSH_DIR="${RUNNER_TEMP}/ssh"
-          mkdir -p "$SSH_DIR"
-          chmod 700 "$SSH_DIR"
-          printf '%s\n' "$DEPLOY_SSH_KEY" > "$SSH_DIR/key"
-          chmod 600 "$SSH_DIR/key"
-          scp -i "$SSH_DIR/key" \
-              -P "$DEPLOY_PORT" \
-              -o StrictHostKeyChecking=accept-new \
-              -o UserKnownHostsFile="$SSH_DIR/known_hosts" \
-              "${DEPLOY_USER}@${DEPLOY_HOST}:/tmp/dist.tar.gz" \
-              ./dist.tar.gz
-          rm -rf "$SSH_DIR"
-
-      - name: Upload release asset via Gitea API
-        run: |
-          set -e
-          RELEASE_ID=$(jq -r '.release.id' "$GITEA_EVENT_PATH")
-          URL="${GITEA_SERVER_URL}/api/v1/repos/${GITEA_REPOSITORY}/releases/${RELEASE_ID}/assets?name=dist.tar.gz"
-          curl -fsSL \
-            -X POST \
-            -H "Authorization: token ${GITEA_TOKEN}" \
-            -H "Content-Type: application/gzip" \
-            --data-binary "@dist.tar.gz" \
-            "${URL}"
-
-  deploy-to-server:
-    name: Deploy to onixbyte.cn
-    needs: [build, upload-release-asset]
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Extract archive and deploy
-        uses: appleboy/ssh-action@v1.0.3
-        with:
-          host: ${{ vars.DEPLOY_HOST }}
-          username: ${{ vars.DEPLOY_USER }}
-          port: ${{ vars.DEPLOY_PORT }}
-          key: ${{ secrets.DEPLOY_SSH_KEY }}
-          script_stop: true
-          script: |
-            set -e
-            DEPLOY_PATH="${{ vars.DEPLOY_PATH }}"
-            mkdir -p "$DEPLOY_PATH"
-            rm -rf "$DEPLOY_PATH"/*
-            tar -xzf /tmp/dist.tar.gz -C "$DEPLOY_PATH" --strip-components=1
-            chown -R caddy:caddy "$DEPLOY_PATH"
-            rm -f /tmp/dist.tar.gz

.gitlab-ci.yml

@@ -1,33 +0,0 @@
-image: node:24.15-trixie-slim
-
-stages:
-  - build
-  - deploy
-
-build:
-  stage: build
-  rules:
-    - if: $CI_RELEASE_DESCRIPTION
-  script:
-    - corepack enable
-    - corepack prepare pnpm --activate
-    - pnpm install --frozen-lockfile
-    - pnpm build
-  artifacts:
-    paths:
-      - dist/
-    expire_in: 7 days
-
-deploy:
-  stage: deploy
-  rules:
-    - if: $CI_RELEASE_DESCRIPTION
-  needs:
-    - build
-  script:
-    - apt-get update -qq && apt-get install -y -qq openssh-client rsync
-    - mkdir -p ~/.ssh
-    - echo "$SSH_PRIVATE_KEY_BASE64" | base64 -d > ~/.ssh/id_rsa
-    - chmod 600 ~/.ssh/id_rsa
-    - ssh-keyscan -H "$DEPLOY_HOST" >> ~/.ssh/known_hosts
-    - rsync -avz --delete dist/ "${SSH_USER}@${DEPLOY_HOST}:${DEPLOY_PATH}"

src/api/auth-api.ts

@@ -9,5 +9,5 @@ export async function login(loginRequest: LoginRequest): Promise<User> {
 }
 
 export async function logout() {
-  await WebClient.get<void>("/auth/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/index.ts

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

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/mod-codes/index.tsx

@@ -1,6 +1,6 @@
 // ModCodes.tsx
 import { useEffect, useState, useCallback, useMemo } from "react";
-import { Card, Col, Pagination, Row, Tag, Typography, Button, Popconfirm, Space, Select, App } from "antd";
+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";
@@ -47,9 +47,10 @@ export default function ModCodes({ firearmId }: ModCodesProps) {
         page: page - 1,
         size: pageSize,
         sortBy: "id",
-        direction: "ASC",
+        direction: "DESC",
         firearmId: numericId, // 使用数字类型
         tags: selectedTags,
+
       });
       setModifications(pagedData.items);
       setTotal(pagedData.totalElements);
@@ -195,7 +196,14 @@ const tagColors = [
                     <Button
                       type="text"
                       size="small"
-                      onClick={() => navigator.clipboard.writeText(modification.code)}
+                      onClick={async () => {
+                        try {
+                          await navigator.clipboard.writeText(modification.code);
+                          message.success('已复制到剪贴板');   // 绿色成功提示，2秒后自动消失
+                        } catch {
+                          message.error('复制失败，请重试');   // 红色错误提示
+                        }
+                      }}
                     >
                       复制
                     </Button>
@@ -229,7 +237,7 @@ const tagColors = [
                       <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-6 gap-2">
+                        <div className="grid min-w-[275px] grid-cols-4 gap-2">
                           {(modification.accessories || []).map((accessory, accessoryIndex) => (
                             <div
                               key={`${modification.id}-accessory-${accessoryIndex}`}
@@ -259,7 +267,8 @@ const tagColors = [
                                     <Tag
                                       key={`${modification.id}-${accessoryIndex}-tuning-${tuningIndex}`}
                                       style={{
-                                        background: '#10E28C',
+                                        background: '#EED177',
+                                        color: '#000000',
                                       }}
                                     >
                                       {tuning.tuningName || "未命名"}: {tuning.tuningValue ?? "-"}

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

@@ -13,7 +13,10 @@ interface ModificationCreateModalProps {
 }
 
 function normalizeRequest(values: ModificationRequest): ModificationRequest {
+  console.log(values);
   return {
+    
+    
     firearmId: values.firearmId,
     name: values.name.trim(),
     code: values.code.trim(),
@@ -64,6 +67,7 @@ export default function ModificationCreateModal({
           firearmId: lockedFirearmId ?? values.firearmId,
         })
       )
+
       message.success("改枪码创建成功")
       form.resetFields()
       onSuccess(modification)

src/components/modification-form/index.tsx

@@ -1,32 +1,535 @@
-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"
+// 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
+  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 }))
+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)
+  const [firearmOptions, setFirearmOptions] = useState<Array<{ value: number; label: string }>>([]);
+  const [firearmLoading, setFirearmLoading] = useState(false);
 
   useEffect(() => {
-    let active = true
+    let active = true;
 
     async function loadAllFirearms() {
-      setFirearmLoading(true)
+      setFirearmLoading(true);
       try {
-        const allFirearms: Firearm[] = []
-        let page = 0
-        let totalPages = 1
+        const allFirearms: Firearm[] = [];
+        let page = 0;
+        let totalPages = 1;
 
         while (page < totalPages) {
           const paged = await FirearmApi.getFirearms({
@@ -34,68 +537,73 @@ export default function ModificationForm({ form, onFinish, lockFirearmId }: Modi
             size: 100,
             sortBy: "id",
             direction: "ASC",
-          })
+          });
 
-          allFirearms.push(...paged.items)
-          totalPages = paged.totalPages
-          page += 1
+          allFirearms.push(...paged.items);
+          totalPages = paged.totalPages;
+          page += 1;
         }
 
-        if (!active) {
-          return
-        }
+        if (!active) return;
 
         setFirearmOptions(
           allFirearms.map((firearm) => ({
             value: firearm.id,
             label: `${firearm.name}`,
           }))
-        )
+        );
       } finally {
         if (active) {
-          setFirearmLoading(false)
+          setFirearmLoading(false);
         }
       }
     }
 
-    void loadAllFirearms()
+    void loadAllFirearms();
 
     return () => {
-      active = false
-    }
-  }, [])
+      active = false;
+    };
+  }, []);
 
   const mergedFirearmOptions = useMemo(() => {
     if (
       lockFirearmId === undefined ||
       firearmOptions.some((option) => option.value === lockFirearmId)
     ) {
-      return firearmOptions
+      return firearmOptions;
     }
 
-    return [{ value: lockFirearmId, label: `武器 ID: ${lockFirearmId}` }, ...firearmOptions]
-  }, [firearmOptions, lockFirearmId])
+    return [{ value: lockFirearmId, label: `武器 ID: ${lockFirearmId}` }, ...firearmOptions];
+  }, [firearmOptions, lockFirearmId]);
 
   return (
     <Form<ModificationRequest>
       form={form}
       layout="vertical"
       onFinish={onFinish}
-      requiredMark={false}>
+      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: "请输入武器" }]}>
+            rules={[{ required: true, message: "请输入武器" }]}
+          >
             <Select<number>
-          className="w-full"
+              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())
+                  const labelText = String(option?.label ?? "");
+                  return labelText.toLowerCase().includes(input.toLowerCase());
                 },
               }}
             />
@@ -104,33 +612,44 @@ export default function ModificationForm({ form, onFinish, lockFirearmId }: Modi
           <Form.Item<ModificationRequest>
             name="name"
             label="改装名称"
-        rules={[{ required: true, message: "请输入改装名称" }]}>
-        <Input placeholder="请输入改装名称" />
+            rules={[{ required: true, message: "请输入改装名称" }]}
+          >
+            <Input className="w-[580px]" placeholder="请输入改装名称" />
           </Form.Item>
 
           <Form.Item<ModificationRequest>
             name="code"
             label="改枪码"
-        rules={[{ required: true, message: "请输入改枪码" }]}>
-        <Input placeholder="请输入改枪码" />
+            rules={[{ required: true, message: "请输入改枪码" }]}
+          >
+            <Input className="w-[580px]" placeholder="请输入改枪码" />
           </Form.Item>
 
           <Form.Item<ModificationRequest> name="tags" label="标签">
-        <Select mode="tags" tokenSeparators={[",", " "]} placeholder="可选：输入后回车" />
+            <Select
+              mode="tags"
+              tokenSeparators={[",", " "]}
+              placeholder="可选：输入后回车"
+              className="w-[580px]"
+            />
           </Form.Item>
 
           <Form.Item<ModificationRequest> name="author" label="作者">
-        <Input placeholder="可选：请输入作者" />
+            <Input className="w-[580px]" placeholder="可选：请输入作者" />
           </Form.Item>
 
           <Form.Item<ModificationRequest> name="videoUrl" label="视频链接">
-        <Input placeholder="可选：请输入视频链接" />
+            <Input className="w-[580px]" placeholder="可选：请输入视频链接" />
           </Form.Item>
 
           <Form.Item<ModificationRequest> name="note" label="备注">
-        <Input.TextArea rows={3} placeholder="可选：补充说明" />
+            <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">
@@ -139,55 +658,70 @@ export default function ModificationForm({ form, onFinish, lockFirearmId }: Modi
                       key={accessoryField.key}
                       title={`配件 ${accessoryField.name + 1}`}
                       size="small"
+                      style={{backgroundColor:'#1f1f1f'}}
                       extra={
                         <Button
                           danger
                           type="link"
                           size="small"
-                    onClick={() => removeAccessory(accessoryField.name)}>
+                          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: "请选择或输入槽位" }]}>
+                          rules={[{ required: true, message: "请选择或输入槽位" }]}
+                          className="!mb-1"  // 表单项底部间距缩小
+                        >
                           <AutoComplete options={slotOptions} placeholder="请选择或输入槽位" />
                         </Form.Item>
 
                         <Form.Item
                           name={[accessoryField.name, "accessoryName"]}
                           label="配件名称"
-                  rules={[{ required: true, message: "请输入配件名称" }]}>
+                          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-3">
+                            <div className="flex flex-col gap-2">  {/* 精校列表间距由3(12px)缩小为2(8px) */}
                               {tuningFields.map((tuningField) => (
-                        <Space key={tuningField.key} align="start" className="w-full" wrap>
+                                <Space key={tuningField.key} align="start" className="w-full" size="small" wrap>
                                   <Form.Item
                                     name={[tuningField.name, "tuningName"]}
                                     label="精校属性"
-                            rules={[{ required: true, message: "请选择或输入精校属性" }]}>
+                                    rules={[{ required: true, message: "请选择或输入精校属性" }]}
+                                    className="!mb-1"
+                                  >
                                     <AutoComplete
                                       options={tuningOptions}
                                       placeholder="例如：后坐控制"
-                              className="w-44"
+                                      className="w-44"        // 完全保留
                                     />
                                   </Form.Item>
                                   <Form.Item
                                     name={[tuningField.name, "tuningValue"]}
                                     label="精校值"
-                            rules={[{ required: true, message: "请输入精校值" }]}>
-                            <InputNumber className="w-32" placeholder="例如：0.35" />
+                                    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)}>
+                                    className="mt-8"           // 完全保留
+                                    onClick={() => removeTuning(tuningField.name)}
+                                  >
                                     删除
                                   </Button>
                                 </Space>
@@ -195,23 +729,31 @@ export default function ModificationForm({ form, onFinish, lockFirearmId }: Modi
                               <Button
                                 type="dashed"
                                 disabled={tuningFields.length >= 2}
-                        onClick={() => addTuning({ tuningName: "", tuningValue: 0 })}>
+                                onClick={() => addTuning({ tuningName: "", tuningValue: 0 })}
+                              >
                                 添加精校
                               </Button>
                             </div>
                           )}
                         </Form.List>
+                      </div>
                     </Card>
                   ))}
+                  {/* 添加配件按钮，保持在左侧（默认左对齐） */}
                   <Button
                     variant="solid"
                     color="lime"
-              onClick={() => addAccessory({ slotName: "", accessoryName: "", tunings: [] })}>
+                    className="self-start"
+                    onClick={() => addAccessory({ slotName: "", accessoryName: "", tunings: [] })}
+                  >
                     添加配件
                   </Button>
                 </div>
               )}
             </Form.List>
+          </div>
+        </div>
+      </div>
     </Form>
-  )
+  );
 }

src/constant/slots.json

@@ -1,6 +1,7 @@
 [
   "枪口",
   "枪管",
+  "导轨脚架",
   "贴片",
   "瞄准镜",
   "战术设备",
@@ -9,11 +10,10 @@
   "枪托",
   "托腮板",
   "枪托套件",
-  "导轨脚架",
   "前握把",
+  "弹匣",
+  "弹匣座",
   "后握把",
   "后握贴片",
-  "握把座",
-  "弹匣",
-  "弹匣座"
+  "握把座"
 ]

src/index.css

@@ -202,3 +202,21 @@ body {
 .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/layout/hero-layout/index.tsx

@@ -1,5 +1,5 @@
-import { Outlet, Link, NavLink } 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 {
@@ -12,17 +12,31 @@ 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(), [])
   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()
@@ -31,8 +45,24 @@ export default function HeroLayout() {
     }
   }
 
+  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-[#1b252a] ">
+    <div className="bg-[#1b252a] flex flex-col min-h-screen">
       {/* Navigation Header */}
       <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">
@@ -40,12 +70,14 @@ export default function HeroLayout() {
             <div className="flex items-center">
               <h1 className="text-xl font-semibold text-white">《三角洲》指南</h1>
             </div>
+            <div>
+              <DisplayBoard />
+            </div>
             <nav className="flex h-full">
               <NavLink
                 to="/firearms"
                 className={({ isActive }) =>
-                  `nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${
-                    isActive ? "active" : ""
+                  `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`
                 }>
                 武器列表
@@ -62,10 +94,11 @@ export default function HeroLayout() {
             </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>
@@ -145,7 +178,7 @@ export default function HeroLayout() {
                     },
                   ],
                 }}>
-                <span className="nav-item inline-flex items-center px-10 h-full text-base font-medium text-gray-500 hover:text-white cursor-pointer">
+                <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>
@@ -161,7 +194,7 @@ export default function HeroLayout() {
 
           <div className="border-t border-gray-800 my-6" />
           <div className="text-center text-xs text-gray-500">
-            <p>© 2024-{today.year()} Zihlu Wang 和 OnixByte。使用 React 与 TypeScript 构建。</p>
+            <p>© 2024-{today.year()} OnixByte。湘ICP备2026000274号-1</p>
           </div>
         </div>
       </footer>

src/page/firearms/index.tsx

@@ -1,17 +1,15 @@
-import { useCallback, 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, Popconfirm, Row, Select, Tag, Typography, App } from "antd"
+import { Button, Card, Col, Pagination, Popconfirm, Row, Select, Spin, Typography, App, Input, AutoComplete } from "antd"
 import { ConfigProvider, theme } from 'antd';
-import type { CollapseProps } from 'antd';
+import type { AutoCompleteProps } from 'antd';
 import { Collapse } from 'antd';
 
-
 const firearmTypeText: Record<FirearmType, string> = {
   RIFLE: "步枪",
   SUB_MACHINE_GUN: "冲锋枪",
@@ -23,12 +21,8 @@ const firearmTypeText: Record<FirearmType, string> = {
   SPECIAL: "特殊",
 }
 
-
-
 const darkTheme = {
   algorithm: theme.darkAlgorithm,
-
-  // token: { colorPrimary: '#00b96b' },
 };
 
 const allTypeValue = "ALL"
@@ -45,36 +39,76 @@ export default function FirearmsPage() {
   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);
 
   const loadFirearms = useCallback(async () => {
+    setLoading(true);
+    const start = Date.now();
+
+    try {
       const pagedData = await FirearmApi.getFirearms({
         page: page - 1,
-      size: 12,
+        size: 8,
         sortBy: "id",
         direction: "ASC",
         type: typeFilter === allTypeValue ? undefined : typeFilter,
-    })
-    setFirearms(pagedData.items)
-    setTotal(pagedData.totalElements)
-  }, [page, typeFilter])
-
-  const [expandedId, setExpandedId] = useState<number | null>(null);
-
+      });
+      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: 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()
-  }, [loadFirearms])
+    void GetFirearmName()
+  }, [loadFirearms, GetFirearmName])
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   }, [page]);
 
-
   async function handleDelete(firearm: Firearm) {
     setDeletingId(firearm.id)
     try {
@@ -102,6 +136,7 @@ export default function FirearmsPage() {
               </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}
@@ -117,15 +152,70 @@ export default function FirearmsPage() {
                 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)}>
@@ -171,11 +261,13 @@ export default function FirearmsPage() {
                     actions={[
                       <div>
                         <Collapse
+
                           expandIcon={() => null}
                           styles={
                             {
                               root: {
                                 background: '#1e1e1e',
+                                width: '100%'
                               }
                             }
                           }
@@ -204,38 +296,6 @@ export default function FirearmsPage() {
                     <div className="flex flex-col gap-3">
                       <div className="lmr-container">
                         <div className="lmr-left">
-                        <div style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '12px',
-                          width: '100%'
-                        }}>
-                          <span style={{
-                            display: 'inline-block',
-                            backgroundColor: '#555555',
-                            color: 'white',
-                            padding: '4px 12px',
-                            borderRadius: '4px',
-                            fontSize: '14px',
-                            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>
                         </div>
                         <div className="lmr-middle">
                           <div style={{
@@ -397,13 +457,13 @@ export default function FirearmsPage() {
                   </Card>
                 </Col>
               )}
-          </Row>
+            </Row>)}
         </div>
         <div className="flex justify-end">
           <Pagination
             align="end"
             current={page}
-            pageSize={12}
+            pageSize={8}
             total={total}
             onChange={(nextPage) => {
               setPage(nextPage)

src/page/login/index.tsx

@@ -5,6 +5,7 @@ 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()
@@ -16,7 +17,9 @@ export default function LoginPage() {
     setLoading(true)
     try {
       const user = await AuthApi.login(values)
-      dispatch(setCurrentUser(user))
+      const expireTimestamp = dayjs(user.expiration).valueOf();
+      const authUser = { ...user, expireAt: expireTimestamp };
+      dispatch(setCurrentUser(authUser))
       message.success(`欢迎回来，${user.username}`)
       navigate("/firearms")
     } catch {

src/store/auth-slice.ts

@@ -1,6 +1,11 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit"
 import { User } from "@/types"
 
+export interface AuthUser extends User {
+  expireAt: number;   // 转换 expiration 得到的时间戳
+}
+
+
 interface AuthState {
   user: User | null
 }
@@ -15,9 +20,11 @@ const authSlice = createSlice({
   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');
     },
   },
 })

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

@@ -7,5 +7,5 @@ export interface User {
   id: number
   username: string
   email: string
+  expiration: string
 }
-

src/types/common.ts

@@ -1,6 +1,7 @@
 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

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

vite.config.ts

@@ -44,6 +44,15 @@ export default defineConfig({
       },
     },
   },
+  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)),