feat: 优化页面布局，添加根据名称搜索功能

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@ant-design/cssinjs": "^2.1.2",
         "@ant-design/icons": "^6.2.2",
+        "@anthropic-ai/claude-code": "^2.1.139",
         "@reduxjs/toolkit": "^2.11.2",
         "@tailwindcss/vite": "^4.2.4",
         "@tanstack/react-virtual": "^3.13.24",
@@ -131,6 +132,133 @@
         "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@anthropic-ai/claude-code": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code/-/claude-code-2.1.139.tgz",
+      "integrity": "sha512-I8SZmO4844GYXGALBZc+NPuFr38yA9OlsoMPMzU1Txxk3uCHnlOFA1FlcUayZ/Z8j7gv/O9LPB+WiIcp9Ynlaw==",
+      "hasInstallScript": true,
+      "license": "SEE LICENSE IN README.md",
+      "bin": {
+        "claude": "bin/claude.exe"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "@anthropic-ai/claude-code-darwin-arm64": "2.1.139",
+        "@anthropic-ai/claude-code-darwin-x64": "2.1.139",
+        "@anthropic-ai/claude-code-linux-arm64": "2.1.139",
+        "@anthropic-ai/claude-code-linux-arm64-musl": "2.1.139",
+        "@anthropic-ai/claude-code-linux-x64": "2.1.139",
+        "@anthropic-ai/claude-code-linux-x64-musl": "2.1.139",
+        "@anthropic-ai/claude-code-win32-arm64": "2.1.139",
+        "@anthropic-ai/claude-code-win32-x64": "2.1.139"
+      }
+    },
+    "node_modules/@anthropic-ai/claude-code-darwin-arm64": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-darwin-arm64/-/claude-code-darwin-arm64-2.1.139.tgz",
+      "integrity": "sha512-2OnJCrL/LO8GgfgKBrmTwLhiC9S/UJbbEpeP5oz44InbhREhFU4rFuRc49pmDyUmT5yje8dNJ00ZVXiXnOOOVw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@anthropic-ai/claude-code-darwin-x64": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-darwin-x64/-/claude-code-darwin-x64-2.1.139.tgz",
+      "integrity": "sha512-7Wt45d4e0V6SZHq5TgDA+5Jm1uBztRQ1wzqbPe5atmf8S12RLK0d2r5h50YK1HsUqQvdvRmZBnvSvz2QFrFjBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@anthropic-ai/claude-code-linux-arm64": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-linux-arm64/-/claude-code-linux-arm64-2.1.139.tgz",
+      "integrity": "sha512-xE3s+MSxm1n9Ywq5+L83eBsv+bJNy77MEUE8au49+bwD8/LQP07gO6YP9PFTbpwMvUe4aQKwKXG16uGj1ABvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@anthropic-ai/claude-code-linux-arm64-musl": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-linux-arm64-musl/-/claude-code-linux-arm64-musl-2.1.139.tgz",
+      "integrity": "sha512-HAU7n0ZMLmYQkKGuUyzp+W0RXtgtEZ+o0hgPwxt/wA3ox2HpOaqwTXgPEcprrGVTWImMXwt/YxNwqSGsPn7JVA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@anthropic-ai/claude-code-linux-x64": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-linux-x64/-/claude-code-linux-x64-2.1.139.tgz",
+      "integrity": "sha512-BwfSmFhas8MkOtYweY23gHPJTasHzklDSBGqWaae/ObTmk7swiz6NYSaP7DEbrWa1WSl3PTgduFq9/fJVhYNGQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@anthropic-ai/claude-code-linux-x64-musl": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-linux-x64-musl/-/claude-code-linux-x64-musl-2.1.139.tgz",
+      "integrity": "sha512-Y+weBppaTayuHOR2PuYE7p9aY1R6wPo2v2qB2tkWgvnazUDxlEgSdUxM/zMNeW27UHFmcFizt/ILW71VrAYEHg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@anthropic-ai/claude-code-win32-arm64": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-win32-arm64/-/claude-code-win32-arm64-2.1.139.tgz",
+      "integrity": "sha512-kx0ApoeuSieGDivd21EJu0nvdXH4ZVQTpQjVEimPtHXe7U4mracKJh7l/hxTQ2cKru5wVMqv1JZzfcTv7xRJ4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@anthropic-ai/claude-code-win32-x64": {
+      "version": "2.1.139",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code-win32-x64/-/claude-code-win32-x64-2.1.139.tgz",
+      "integrity": "sha512-DfKgp68zhWWNGpeqCRKGvuYAdQ83aoa20nnVDuTt2C0dCsY+Fmw/Fjc83vdDSQScrpFtpkANwZp5j0O+/qbgsw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@babel/runtime": {
       "version": "7.29.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@ant-design/cssinjs": "^2.1.2",
     "@ant-design/icons": "^6.2.2",
+    "@anthropic-ai/claude-code": "^2.1.139",
     "@reduxjs/toolkit": "^2.11.2",
     "@tailwindcss/vite": "^4.2.4",
     "@tanstack/react-virtual": "^3.13.24",

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

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

@@ -3,7 +3,12 @@ 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 { 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]
@@ -11,13 +16,21 @@ interface ModificationFormProps {
   lockFirearmId?: number
 }
 
-const slotOptions = slotNames.map((slotName) => ({ value: slotName }))
+interface AccessoryType {
-const tuningOptions = tuningNames.map((tuningName) => ({ value: tuningName }))
+  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
 
@@ -76,11 +89,64 @@ export default function ModificationForm({ form, onFinish, lockFirearmId }: Modi
     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={onFinish}
+        onFinish={() => {
+    const allValues = form.getFieldsValue(true);
+    console.log('完整数据:', allValues);
+    onFinish(allValues);
+  }}
         requiredMark={false}>
         <Form.Item<ModificationRequest>
           name="firearmId"
@@ -131,87 +197,307 @@ export default function ModificationForm({ form, onFinish, lockFirearmId }: Modi
           <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
+          <Form.Item<ModificationRequest> label="配件配置">
-                  name={[accessoryField.name, "accessoryName"]}
+          <Form.List name="accessories">
-                  label="配件名称"
+            {(accessoryFields, { add, remove }) => (
-                  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>
+                <div className="flex flex-wrap gap-2">
-                          <Form.Item
+                  {accessoryFields.length === 0 ? (
-                            name={[tuningField.name, "tuningName"]}
+                    <div className="text-gray-400 text-sm py-2">暂无配件，点击下方按钮添加</div>
-                            label="精校属性"
+                  ) : (
-                            rules={[{ required: true, message: "请选择或输入精校属性" }]}>
+                    accessoryFields.map((accessoryField, index) => {
-                            <AutoComplete
+                      const accessory = form.getFieldValue(["accessories", index]) as AccessoryType
-                              options={tuningOptions}
+                      return (
-                              placeholder="例如：后坐控制"
+                        <Tag
-                              className="w-44"
+                          key={accessoryField.key}
-                            />
+                          closable
-                          </Form.Item>
+                          onClose={(e) => {
-                          <Form.Item
+                            e.preventDefault()
-                            name={[tuningField.name, "tuningValue"]}
+                            handleDeleteAccessory(remove, accessoryField.name)
-                            label="精校值"
+                          }}
-                            rules={[{ required: true, message: "请输入精校值" }]}>
+                          closeIcon={<DeleteOutlined />}
-                            <InputNumber className="w-32" placeholder="例如：0.35" />
+                          className="px-3 py-1.5 text-sm border hover:shadow-sm transition-all"
-                          </Form.Item>
+                          style={{ marginRight: 8, marginBottom: 8 }}
+                        >
+                          <Space size={6}>
+                            <span className="font-medium text-gray-700">
+                              {accessory?.slotName || "?"}
+                            </span>
+                            <span className="text-gray-400">·</span>
+                            <span className="text-gray-800">
+                              {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"
-                            danger
+                              size="small"
-                            className="mt-8"
+                              icon={<EditOutlined />}
-                            onClick={() => removeTuning(tuningField.name)}>
+                              onClick={(e) => {
-                            删除
+                                e.stopPropagation()
-                          </Button>
+                                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"
-                        disabled={tuningFields.length >= 2}
+                  icon={<PlusOutlined />}
-                        onClick={() => addTuning({ tuningName: "", tuningValue: 0 })}>
+                  onClick={handleAddAccessory}
-                        添加精校
+                  size="small"
-                      </Button>
+                  className="w-full"
-                    </div>
+                >
-                  )}
-                </Form.List>
-              </Card>
-            ))}
-            <Button
-              variant="solid"
-              color="lime"
-              onClick={() => addAccessory({ slotName: "", accessoryName: "", tunings: [] })}>
                   添加配件
                 </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>
+//   )
+// }

src/layout/hero-layout/index.tsx

@@ -1,5 +1,5 @@
-import { Outlet, Link, NavLink } from "react-router-dom"
+import { Outlet, Link, NavLink, useNavigate } from "react-router-dom"
-import { useMemo } from "react"
+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,22 @@ export default function HeroLayout() {
     }
   }
 
+  useEffect(() => {
+    if (user?.expiration) {
+      const localDate = new Date(user.expiration.replace(' ', 'T'));
+      const targetTimestamp = localDate.getTime();
+      if (targetTimestamp > Date.now()) {
+        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 +68,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 ${
+                  `nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? "active" : ""
-                    isActive ? "active" : ""
                   } text-gray-500 hover:text-white`
                 }>
                 武器列表
@@ -62,10 +92,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 +176,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 +192,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。</p>
           </div>
         </div>
       </footer>

src/page/firearms/index.tsx

@@ -1,17 +1,15 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useState, useMemo } from "react"
-import { Link } from "react-router-dom"
 import { FirearmApi } from "@/api"
 import FirearmCreateModal from "@/components/firearm-create-modal"
 import FirearmEditModal from "@/components/firearm-edit-modal"
 import 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)
+      setFirearms(pagedData.items);
-    setTotal(pagedData.totalElements)
+      setTotal(pagedData.totalElements);
-  }, [page, typeFilter])
+    } catch (error) {
-
+      // 可在此处理错误，比如 message.error
-  const [expandedId, setExpandedId] = useState<number | null>(null);
+    } 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,8 +152,29 @@ 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}>
@@ -171,11 +227,13 @@ export default function FirearmsPage() {
                   actions={[
                     <div>
                       <Collapse
+
                         expandIcon={() => null}
                         styles={
                           {
                             root: {
                               background: '#1e1e1e',
+                              width: '100%'
                             }
                           }
                         }
@@ -397,13 +455,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)),