src/components/mod-codes/index.tsx

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

src/index.css

@@ -2,7 +2,8 @@
 
 @import 'tailwindcss';
 
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   width: 100%;
@@ -38,6 +39,7 @@ html, body {
 .nav-item {
   position: relative;
   overflow: hidden;
+  z-index: 1;
 }
 
 .nav-item::after {
@@ -51,15 +53,151 @@ html, body {
   transition: height 0.2s ease-in-out;
   opacity: 0.35;
   pointer-events: none;
-  
+  z-index: -1;
+
 }
 
-.nav-item:hover::after,
+.nav-item:hover::after {
+  height: 30%;
+}
+
+/* 激活状态效果 */
 .nav-item.active::after {
-  height: 80%;  /* 向上打光的高度，可以调整 */
+  height: 30%;
+}
+
+/* 可选：激活+悬停效果 */
+.nav-item.active:hover::after {
+  opacity: 0.35;
+}
+
+.custom-btn-outlined {
+  --ant-color-solid: #10E28C;
+  /* 边框和文字颜色 */
+  --ant-color-solid-hover: #2ee59d;
+  --ant-color-solid-active: #0cb878;
+}
+
+
+.hex-bg {
+  background-color: #1E1E1E;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.3' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='fadeDown' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2339ff14' stop-opacity='1' /%3E%3Cstop offset='100%25' stop-color='%2339ff14' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23fadeDown)' stroke-width='0.5'%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546041,-0.85081805,0.85081805,0.52546041,-203.01888079,130.22116071)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.65208214,130.43446239)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.04868859,141.09544261)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.68192833,141.30866893)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.2853524,130.6476887)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3151986,141.52187999)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.86530846,152.18286021)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.49857872,152.39608653)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-203.44526451,151.88976939)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,152.72932323)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.30770653,163.1089619)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.99694603,163.40205272)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3930642,163.69517406)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,130.86648448)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.84158104,174.24726756)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-166.23769921,174.68691905)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-160.08231896,163.69518931)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-159.78921288,141.71168407)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-160.37542504,185.6786793)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.68620079,185.53211864)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-209.32536095,140.83235057)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-215.48072594,129.98715098)'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: 350px 350px;
+  background-position: right -90px top -40px;
+  background-repeat: no-repeat;
+  margin: 0;
+
 }
 
 .nav-item:hover,
 .nav-item.active {
   color: white;
+}
+
+
+/* LeftMiddleRightBox.css */
+.lmr-container {
+  display: flex;
+  width: 100%;
+  /* 可根据需要调整 */
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  background: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+}
+
+/* 公共列样式：平均分配宽度，带有视觉区分 */
+.lmr-left,
+.lmr-middle,
+.lmr-right {
+  padding: 20px;
+  transition: all 0.2s ease;
+  height: 100%;
+}
+
+/* 为左右中区域添加微妙的背景色差异，便于区分 */
+.lmr-left {
+  flex: 1;
+  background-color: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+  margin: auto;
+}
+
+.lmr-middle {
+  flex: 3;
+  background-color: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+}
+
+.lmr-right {
+  flex: 2;
+  background-color: '#555555';
+  color: 'white';
+  padding: '4px 12px';
+  border-radius: '4px';
+  font-size: '14px';
+  font-weight: '500';
+  letter-spacing: '0.5px';
+}
+
+.content-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  height: 100%;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+
+/* 响应式：小屏幕下自动转为垂直排列 */
+@media (max-width: 768px) {
+  .lmr-container {
+    flex-direction: column;
+    min-height: auto;
+  }
+
+  .lmr-left,
+  .lmr-middle,
+  .lmr-right {
+    border-right: none;
+
+  }
+
+  .lmr-right {
+    border-bottom: none;
+  }
+
+  .content-placeholder {
+    min-height: 100px;
+  }
+}
+
+.css-var-_r_1_.ant-collapse{
+  --ant-collapse-header-bg:#1e1e1e;
+  width: 90%;
+  border: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ant-collapse-body{
+  background: #1e1e1e;
 }

src/layout/hero-layout/index.tsx

@@ -26,7 +26,7 @@ export default function HeroLayout() {
   }
 
   return (
-    <div className="bg-gray-50 ">
+    <div className="bg-[#1b252a] ">
       {/* Navigation Header */}
       <header className="bg-white shadow-sm border-b bg-[url('/nav_bg.png')] bg-cover bg-center">
         <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 h-full"> 
@@ -34,25 +34,25 @@ export default function HeroLayout() {
             <div className="flex items-center">
               <h1 className="text-xl font-semibold text-gray-900 text-white">三角洲行动改枪码库</h1>
             </div>
-            <nav className="flex h-full"> 
+            <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' : ''
-                  } text-gray-500 hover:text-white`
+                  } text-gray-500 hover:text-white whitespace-nowrap`
                 }
               >
                 武器列表
               </NavLink>
-              <NavLink
+              {/* <NavLink
                 to="/mod-codes"
                 className={({ isActive }) =>
                   `nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? 'active' : ''
-                  } text-gray-500 hover:text-white`
+                  } text-gray-500 hover:text-white whitespace-nowrap`
                 }
               >
                 改枪码
-              </NavLink>
+              </NavLink> */}
               {/* {user ? (
                 <Dropdown
                   trigger={["hover"]}
@@ -93,7 +93,7 @@ export default function HeroLayout() {
       </header>
 
       {/* Main Content Area */}
-      <main className="max-w-screen-2xl mx-auto py-6 sm:px-6 lg:px-10">
+      <main className=" 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>
@@ -134,7 +134,7 @@ export default function HeroLayout() {
             {isDropdownOpen && (
               <div className="absolute top-full left-2/3 -translate-x-1/2 w-18 bg-gray-950 border border-gray-700 rounded-lg shadow-xl py-1 z-20 opacity-60">
                 <a
-                  href="https://github.com/zihluwang/frontend-repo"
+                  href="https://github.com/zihluwang/delta-force-firearm-modification-codes"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white transition-colors"
@@ -193,7 +193,7 @@ export default function HeroLayout() {
                 to="/login"
                 className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200"
               >
-                <img src="../../public/footer-3.png" alt="" className="w-8 w-8 opacity-80" />
+                <img src="/footer-3.png" alt="" className="w-8 w-8 opacity-80" />
                 登录
               </Link>
             )}

src/page/firearms/index.tsx

@@ -3,9 +3,14 @@ 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 "@/store/hooks"
 import { Firearm, FirearmType } from "@/types"
 import { Button, Card, Col, Pagination, Popconfirm, Row, Select, Tag, Typography, App } from "antd"
+import { ConfigProvider, theme } from 'antd';
+import type { CollapseProps } from 'antd';
+import { Collapse } from 'antd';
+
 
 const firearmTypeText: Record<FirearmType, string> = {
   RIFLE: "步枪",
@@ -18,6 +23,14 @@ const firearmTypeText: Record<FirearmType, string> = {
   SPECIAL: "特殊",
 }
 
+
+
+const darkTheme = {
+  algorithm: theme.darkAlgorithm,
+
+  // token: { colorPrimary: '#00b96b' },
+};
+
 const allTypeValue = "ALL"
 type FirearmTypeFilter = FirearmType | typeof allTypeValue
 
@@ -32,6 +45,7 @@ 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)
@@ -48,9 +62,18 @@ export default function FirearmsPage() {
     setTotal(pagedData.totalElements)
   }, [page, typeFilter])
 
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+
+
+
+
   useEffect(() => {
     void loadFirearms()
   }, [loadFirearms])
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [page]);
+
 
   async function handleDelete(firearm: Firearm) {
     setDeletingId(firearm.id)
@@ -68,147 +91,347 @@ export default function FirearmsPage() {
       setDeletingId(null)
     }
   }
-
   return (
     <>
-      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <ConfigProvider theme={darkTheme}>
-        <div>
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          {user && (
+          <div>
-            <Button type="primary" onClick={() => setCreateModalOpen(true)}>
+            {user && (
-              新建武器
+              <Button type="primary" onClick={() => setCreateModalOpen(true)}>
-            </Button>
+                新建武器
-          )}
+              </Button>
+            )}
+          </div>
+          <Select<FirearmTypeFilter>
+            className="w-full sm:w-64"
+            value={typeFilter}
+            options={[
+              { value: allTypeValue, label: "全部类型" },
+              ...Object.entries(firearmTypeText).map(([value, label]) => ({
+                value,
+                label,
+              })),
+            ]}
+            onChange={(nextType) => {
+              setPage(1)
+              setTypeFilter(nextType)
+            }}
+          />
         </div>
-        <Select<FirearmTypeFilter>
+        <div className="mb-6">
-          className="w-full sm:w-64"
+          <Row gutter={[16, 16]}>
-          value={typeFilter}
+            {firearms.map((firearm) => (
-          options={[
+              <Col key={firearm.id} xs={24} md={24} lg={24}>
-            { value: allTypeValue, label: "全部类型" },
+
-            ...Object.entries(firearmTypeText).map(([value, label]) => ({
+                <Card
-              value,
+                  className="hex-bg border-5px-#142c38"
-              label,
+                  extra={
-            })),
+                    user ? (
-          ]}
+                      <div className="flex items-center gap-1">
-          onChange={(nextType) => {
+                        <Button type="link" size="small" onClick={() => setEditingFirearm(firearm)}>
-            setPage(1)
+                          编辑
-            setTypeFilter(nextType)
-          }}
-        />
-      </div>
-      <div className="mb-6">
-        <Row gutter={[16, 16]}>
-          {firearms.map((firearm) => (
-            <Col key={firearm.id} xs={24} md={12} lg={8}>
-              <Card
-                title={firearm.name}
-                extra={
-                  user ? (
-                    <div className="flex items-center gap-1">
-                      <Button type="link" size="small" onClick={() => setEditingFirearm(firearm)}>
-                        编辑
-                      </Button>
-                      <Popconfirm
-                        title="确认删除武器"
-                        description={`确定要删除 ${firearm.name} 吗？该操作不可撤销。`}
-                        okText="删除"
-                        cancelText="取消"
-                        okButtonProps={{ danger: true, loading: deletingId === firearm.id }}
-                        onConfirm={() => handleDelete(firearm)}>
-                        <Button type="link" danger size="small" loading={deletingId === firearm.id}>
-                          删除
                         </Button>
-                      </Popconfirm>
+                        <Popconfirm
-                    </div>
+                          title="确认删除武器"
-                  ) : null
+                          description={`确定要删除 ${firearm.name} 吗？该操作不可撤销。`}
-                }
+                          okText="删除"
-                variant="outlined"
+                          cancelText="取消"
-                styles={{
+                          okButtonProps={{ danger: true, loading: deletingId === firearm.id }}
-                  header: { minHeight: 56 },
+                          onConfirm={() => handleDelete(firearm)}>
-                }}
+                          <Button type="link" danger size="small" loading={deletingId === firearm.id}>
-                actions={[
+                            删除
-                  <Link key={`mod-codes-${firearm.id}`} to={`/mod-codes?firearmId=${firearm.id}`}>
+                          </Button>
-                    <Button type="link">查看改枪码</Button>
+                        </Popconfirm>
-                  </Link>,
+                      </div>
-                ]}>
+                    ) : null
-                <div className="flex flex-col gap-3">
+                  }
-                  <div className="flex items-center justify-between">
+                  variant="outlined"
-                    <Tag color="blue">{firearmTypeText[firearm.type]}</Tag>
+                  style={{
-                  </div>
+                    height: '100%', display: 'flex', flexDirection: 'column'
-                  <Typography.Text>
+                  }}
-                    <strong>武器输出等级：</strong>
+                  styles={{
-                    {firearm.level}
+                    root: {
-                  </Typography.Text>
+                      border: '1px solid #313131'
-                  <Typography.Text>
+                    },
-                    <strong>子弹口径：</strong>
+                    header: {
-                    {firearm.calibre}
+                      borderBottom: '1px solid #303030',
-                  </Typography.Text>
+                    },
-                  <Typography.Text>
+                    body: {
-                    <strong>每秒甲伤：</strong>
+                      flex: 1,
-                    {asDps(firearm.fireRate, firearm.armourDamage)}
+                      overflow: 'auto',
-                  </Typography.Text>
+                      padding: '12px',
-                  <Typography.Text>
+
-                    <strong>每秒肉伤：</strong>
+                    },
-                    {asDps(firearm.fireRate, firearm.bodyDamage)}
+                    actions: {
-                  </Typography.Text>
+                      flexShrink: 0,
-                  <Typography.Paragraph
+                      background: '#1e1e1e',
-                    style={{ marginBottom: 0 }}
+                      display: 'flex'
-                    type="secondary"
+                    }
-                    ellipsis={{
+                  }}
-                      rows: 3,
+                  actions={[
-                      tooltip: firearm.review
+                    <div>
-                        ? {
+                      <Collapse
-                            title: <div style={{ whiteSpace: "pre-line" }}>{firearm.review}</div>,
+                        expandIcon={() => null}
-                            placement: "topLeft",
+                        styles={
+                          {
+                            root: {
+                              background: '#1e1e1e',
+                            }
                           }
-                        : false,
+                        }
-                    }}
+                        items={[{
-                    className="whitespace-pre-line">
+                          key: '1',
-                    {firearm.review || "暂无描述"}
+                          label: (
-                  </Typography.Paragraph>
+                            <Button
-                </div>
+                              variant="outlined"
-              </Card>
+                              styles={{
-            </Col>
+                                root: {
-          ))}
+                                  color: '#10E28C',
-          {firearms.length === 0 && (
+                                  border: '1px solid #10E28C',
-            <Col span={24}>
+                                  background: '#16343b96',
-              <Card>
+                                  width: '20%',
-                <Typography.Text type="secondary">暂无武器数据</Typography.Text>
+                                }
-              </Card>
+                              }}
-            </Col>
+                            >
-          )}
+                              查看改枪码
-        </Row>
+                            </Button>
-      </div>
+                          ),
-      <div className="flex justify-end">
+                          children: <ModCodes firearmId={String(firearm.id)} />
-        <Pagination
+                        }]}
-          align="end"
+                      />
-          current={page}
+                    </div>,
-          pageSize={12}
+                  ]}>
-          total={total}
+                  <div className="flex flex-col gap-3">
-          onChange={(nextPage) => {
+                    <div className="lmr-container">
-            setPage(nextPage)
+                      <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={{
+                          color: 'white',
+                          padding: '4px 12px',
+                          borderRadius: '4px',
+                          fontSize: '14px',
+                          fontWeight: '500',
+                          letterSpacing: '0.5px'
+                        }}>
+                          <div style={{
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))', // 最小宽度160px
+                            gap: '12px',
+                          }}>
+                            {/* 武器输出等级 */}
+                            <div style={{
+                              border: '2px solid #10E28C',
+                              backgroundColor: '#16343b96',
+                              padding: '12px 16px',
+                              borderRadius: '8px',
+                              textAlign: 'center'
+                            }}>
+                              <div style={{
+                                padding: '4px 0px',
+                                borderRadius: '4px',
+                                color: '#10E28C',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                marginBottom: '6px',
+                                whiteSpace: 'nowrap',
+                                textAlign: 'center'
+                              }}>
+                                武器输出等级
+                              </div>
+                              <div style={{
+                                fontSize: '16px',
+                                fontWeight: 600,
+                                color: '#ffffff'
+                              }}>
+                                {firearm.level}
+                              </div>
+                            </div>
+
+                            {/* 子弹口径 */}
+                            <div style={{
+                              border: '2px solid #10E28C',
+                              backgroundColor: '#16343b96',
+                              padding: '12px 16px',
+                              borderRadius: '8px',
+                              textAlign: 'center'
+                            }}>
+                              <div style={{
+                                padding: '4px 12px',
+                                borderRadius: '4px',
+                                color: '#10E28C',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                marginBottom: '6px',
+                                whiteSpace: 'nowrap'
+                              }}>
+                                子弹口径
+                              </div>
+                              <div style={{
+                                fontSize: '16px',
+                                fontWeight: 600,
+                                color: '#ffffff'
+                              }}>
+                                {firearm.calibre}
+                              </div>
+                            </div>
+
+                            {/* 每秒甲伤 */}
+                            <div style={{
+                              border: '2px solid #10E28C',
+                              backgroundColor: '#16343b96',
+                              padding: '12px 16px',
+                              borderRadius: '8px',
+                              textAlign: 'center'
+                            }}>
+                              <div style={{
+                                padding: '4px 12px',
+                                borderRadius: '4px',
+                                color: '#10E28C',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                marginBottom: '6px',
+                                whiteSpace: 'nowrap'
+                              }}>
+                                每秒甲伤
+                              </div>
+                              <div style={{
+                                fontSize: '16px',
+                                fontWeight: 600,
+                                color: '#ffffff'
+                              }}>
+                                {asDps(firearm.fireRate, firearm.armourDamage)}
+                              </div>
+                            </div>
+
+                            {/* 每秒肉伤 */}
+                            <div style={{
+                              border: '2px solid #10E28C',
+                              backgroundColor: '#16343b96',
+                              padding: '12px 16px',
+                              borderRadius: '8px',
+                              textAlign: 'center'
+                            }}>
+                              <div style={{
+                                padding: '4px 12px',
+                                borderRadius: '4px',
+                                color: '#10E28C',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                marginBottom: '6px',
+                                whiteSpace: 'nowrap'
+                              }}>
+                                每秒肉伤
+                              </div>
+                              <div style={{
+                                fontSize: '16px',
+                                fontWeight: 600,
+                                color: '#ffffff'
+                              }}>
+                                {asDps(firearm.fireRate, firearm.bodyDamage)}
+                              </div>
+                            </div>
+                          </div>
+
+                        </div>
+                      </div>
+                      <div className="lmr-right">
+                        <Typography.Paragraph
+                          style={{ marginBottom: 0 }}
+                          type="secondary"
+                          ellipsis={{
+                            rows: 3,
+                            tooltip: firearm.review
+                              ? {
+                                title: <div style={{ whiteSpace: "pre-line" }}>{firearm.review}</div>,
+                                placement: "topLeft",
+                              }
+                              : false,
+                          }}
+                          className="whitespace-pre-line">
+                          {firearm.review || "暂无描述"}
+                        </Typography.Paragraph>
+                      </div>
+                    </div>
+
+                  </div>
+                </Card>
+              </Col>
+            ))}
+            {firearms.length === 0 && (
+              <Col span={24}>
+                <Card>
+                  <Typography.Text type="secondary">暂无武器数据</Typography.Text>
+                </Card>
+              </Col>
+            )}
+          </Row>
+        </div>
+        <div className="flex justify-end">
+          <Pagination
+            align="end"
+            current={page}
+            pageSize={12}
+            total={total}
+            onChange={(nextPage) => {
+              setPage(nextPage)
+            }}
+            showSizeChanger={false}
+          />
+        </div>
+        <FirearmCreateModal
+          open={createModalOpen}
+          onCancel={() => setCreateModalOpen(false)}
+          onSuccess={() => {
+            setCreateModalOpen(false)
+            void loadFirearms()
           }}
-          showSizeChanger={false}
         />
-      </div>
 
-      <FirearmCreateModal
+        <FirearmEditModal
-        open={createModalOpen}
+          open={!!editingFirearm}
-        onCancel={() => setCreateModalOpen(false)}
+          firearm={editingFirearm}
-        onSuccess={() => {
+          onCancel={() => setEditingFirearm(null)}
-          setCreateModalOpen(false)
+          onSuccess={() => {
-          void loadFirearms()
+            setEditingFirearm(null)
-        }}
+            void loadFirearms()
-      />
+          }}
 
-      <FirearmEditModal
+        />
-        open={!!editingFirearm}
+      </ConfigProvider>
-        firearm={editingFirearm}
-        onCancel={() => setEditingFirearm(null)}
-        onSuccess={() => {
-          setEditingFirearm(null)
-          void loadFirearms()
-        }}
-      />
     </>
+
   )
 }

src/page/mod-codes/index.tsx

@@ -192,7 +192,7 @@ export default function ModCodesPage() {
                       复制
                     </Button>
                   </div>
-
+                  
                   <Typography.Text>
                     <strong>作者：</strong>
                     {modification.author || "未知"}