优化武器列表页面
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
+142
-4
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
+355
-132
@@ -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">
|
||||
<div>
|
||||
{user && (
|
||||
<Button type="primary" onClick={() => setCreateModalOpen(true)}>
|
||||
新建武器
|
||||
</Button>
|
||||
)}
|
||||
<ConfigProvider theme={darkTheme}>
|
||||
<div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
{user && (
|
||||
<Button type="primary" onClick={() => setCreateModalOpen(true)}>
|
||||
新建武器
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<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>
|
||||
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>
|
||||
<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}>
|
||||
删除
|
||||
<div className="mb-6">
|
||||
<Row gutter={[16, 16]}>
|
||||
{firearms.map((firearm) => (
|
||||
<Col key={firearm.id} xs={24} md={24} lg={24}>
|
||||
|
||||
<Card
|
||||
className="hex-bg border-5px-#142c38"
|
||||
extra={
|
||||
user ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button type="link" size="small" onClick={() => setEditingFirearm(firearm)}>
|
||||
编辑
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
variant="outlined"
|
||||
styles={{
|
||||
header: { minHeight: 56 },
|
||||
}}
|
||||
actions={[
|
||||
<Link key={`mod-codes-${firearm.id}`} to={`/mod-codes?firearmId=${firearm.id}`}>
|
||||
<Button type="link">查看改枪码</Button>
|
||||
</Link>,
|
||||
]}>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Tag color="blue">{firearmTypeText[firearm.type]}</Tag>
|
||||
</div>
|
||||
<Typography.Text>
|
||||
<strong>武器输出等级：</strong>
|
||||
{firearm.level}
|
||||
</Typography.Text>
|
||||
<Typography.Text>
|
||||
<strong>子弹口径：</strong>
|
||||
{firearm.calibre}
|
||||
</Typography.Text>
|
||||
<Typography.Text>
|
||||
<strong>每秒甲伤：</strong>
|
||||
{asDps(firearm.fireRate, firearm.armourDamage)}
|
||||
</Typography.Text>
|
||||
<Typography.Text>
|
||||
<strong>每秒肉伤：</strong>
|
||||
{asDps(firearm.fireRate, firearm.bodyDamage)}
|
||||
</Typography.Text>
|
||||
<Typography.Paragraph
|
||||
style={{ marginBottom: 0 }}
|
||||
type="secondary"
|
||||
ellipsis={{
|
||||
rows: 3,
|
||||
tooltip: firearm.review
|
||||
? {
|
||||
title: <div style={{ whiteSpace: "pre-line" }}>{firearm.review}</div>,
|
||||
placement: "topLeft",
|
||||
<Popconfirm
|
||||
title="确认删除武器"
|
||||
description={`确定要删除 ${firearm.name} 吗？该操作不可撤销。`}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
okButtonProps={{ danger: true, loading: deletingId === firearm.id }}
|
||||
onConfirm={() => handleDelete(firearm)}>
|
||||
<Button type="link" danger size="small" loading={deletingId === firearm.id}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
variant="outlined"
|
||||
style={{
|
||||
height: '100%', display: 'flex', flexDirection: 'column'
|
||||
}}
|
||||
styles={{
|
||||
root: {
|
||||
border: '1px solid #313131'
|
||||
},
|
||||
header: {
|
||||
borderBottom: '1px solid #303030',
|
||||
},
|
||||
body: {
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
padding: '12px',
|
||||
|
||||
},
|
||||
actions: {
|
||||
flexShrink: 0,
|
||||
background: '#1e1e1e',
|
||||
display: 'flex'
|
||||
}
|
||||
}}
|
||||
actions={[
|
||||
<div>
|
||||
<Collapse
|
||||
expandIcon={() => null}
|
||||
styles={
|
||||
{
|
||||
root: {
|
||||
background: '#1e1e1e',
|
||||
}
|
||||
}
|
||||
: false,
|
||||
}}
|
||||
className="whitespace-pre-line">
|
||||
{firearm.review || "暂无描述"}
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
{firearms.length === 0 && (
|
||||
<Col span={24}>
|
||||
<Card>
|
||||
<Typography.Text type="secondary">暂无武器数据</Typography.Text>
|
||||
</Card>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Pagination
|
||||
align="end"
|
||||
current={page}
|
||||
pageSize={12}
|
||||
total={total}
|
||||
onChange={(nextPage) => {
|
||||
setPage(nextPage)
|
||||
}
|
||||
items={[{
|
||||
key: '1',
|
||||
label: (
|
||||
<Button
|
||||
variant="outlined"
|
||||
styles={{
|
||||
root: {
|
||||
color: '#10E28C',
|
||||
border: '1px solid #10E28C',
|
||||
background: '#16343b96',
|
||||
width: '20%',
|
||||
}
|
||||
}}
|
||||
>
|
||||
查看改枪码
|
||||
</Button>
|
||||
),
|
||||
children: <ModCodes firearmId={String(firearm.id)} />
|
||||
}]}
|
||||
/>
|
||||
</div>,
|
||||
]}>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="lmr-container">
|
||||
<div className="lmr-left">
|
||||
<div 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
|
||||
open={createModalOpen}
|
||||
onCancel={() => setCreateModalOpen(false)}
|
||||
onSuccess={() => {
|
||||
setCreateModalOpen(false)
|
||||
void loadFirearms()
|
||||
}}
|
||||
/>
|
||||
<FirearmEditModal
|
||||
open={!!editingFirearm}
|
||||
firearm={editingFirearm}
|
||||
onCancel={() => setEditingFirearm(null)}
|
||||
onSuccess={() => {
|
||||
setEditingFirearm(null)
|
||||
void loadFirearms()
|
||||
}}
|
||||
|
||||
<FirearmEditModal
|
||||
open={!!editingFirearm}
|
||||
firearm={editingFirearm}
|
||||
onCancel={() => setEditingFirearm(null)}
|
||||
onSuccess={() => {
|
||||
setEditingFirearm(null)
|
||||
void loadFirearms()
|
||||
}}
|
||||
/>
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@@ -192,7 +192,7 @@ export default function ModCodesPage() {
|
||||
复制
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<Typography.Text>
|
||||
<strong>作者：</strong>
|
||||
{modification.author || "未知"}
|
||||
|
||||
Reference in New Issue
Block a user