优化武器列表页面
This commit is contained in:
+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>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user