wangdl/admin-projects
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: card sections with fixed min-height for perfect alignment
All checks were successful
Deploy Admin Frontend / build-and-deploy (push) Successful in 8s
Details

Browse Source
This commit is contained in:
WangDL 2026-05-22 14:19:47 +08:00
parent 73fa2b57ff
commit 942a3b23d2
1 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/pages/Servers.tsx
View File

@ -25,7 +25,8 @@ function ServerCard({ server }: { server: ServerInfo }) {
return ( return (
<Card title={<Space><CloudServerOutlined />{server.name}<Tag color="blue">{server.role}</Tag></Space>} style={{ height: '100%' }}> <Card title={<Space><CloudServerOutlined />{server.name}<Tag color="blue">{server.role}</Tag></Space>} style={{ height: '100%' }}>
<div style={{ marginBottom: 12, minHeight: 28 }}> {/* IP & domains — fixed height */}
<div style={{ marginBottom: 12, minHeight: 30 }}>
<Space wrap size={[4, 4]}> <Space wrap size={[4, 4]}>
<CopyTag text={server.network.publicIp} icon="🌐 " color="cyan" /> <CopyTag text={server.network.publicIp} icon="🌐 " color="cyan" />
<CopyTag text={server.network.privateIp} icon="🔒 " /> <CopyTag text={server.network.privateIp} icon="🔒 " />
@ -35,44 +36,49 @@ function ServerCard({ server }: { server: ServerInfo }) {
</Space> </Space>
</div> </div>
<Row gutter={[16, 12]}> {/* Metrics — fixed height grid */}
<Col xs={12} sm={6}> <div style={{ marginBottom: 10, minHeight: 72 }}>
<Row gutter={[16, 8]}>
<Col span={8}>
<Text type="secondary" style={{ fontSize: 11 }}>CPU · {server.cpu.cores}核</Text> <Text type="secondary" style={{ fontSize: 11 }}>CPU · {server.cpu.cores}核</Text>
<Progress percent={server.cpu.usagePercent} strokeColor={cpuColor} size="small" format={p => `${p}%`} /> <Progress percent={server.cpu.usagePercent} strokeColor={cpuColor} size="small" format={p => `${p}%`} />
</Col> </Col>
<Col xs={12} sm={6}> <Col span={8}>
<Text type="secondary" style={{ fontSize: 11 }}>内存</Text> <Text type="secondary" style={{ fontSize: 11 }}>内存 {server.memory.percent}%</Text>
<Progress percent={server.memory.percent} strokeColor={memColor} size="small" format={p => `${p}%`} /> <Progress percent={server.memory.percent} strokeColor={memColor} size="small" />
<Text style={{ fontSize: 10 }} type="secondary">{server.memory.used}/{server.memory.total}</Text> <Text style={{ fontSize: 10 }} type="secondary">{server.memory.used}/{server.memory.total}</Text>
</Col> </Col>
<Col xs={24} sm={12}> <Col span={8}>
<Text type="secondary" style={{ fontSize: 11, marginBottom: 4, display: 'block' }}>磁盘</Text> <Text type="secondary" style={{ fontSize: 11, marginBottom: 2 }}>磁盘</Text>
{(server.disks || []).map(d => ( {(server.disks || []).map(d => (
<div key={d.mount} style={{ marginBottom: 4 }}> <div key={d.mount} style={{ marginBottom: 2, display: 'flex', alignItems: 'center', gap: 4 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}> <Text style={{ fontSize: 10, width: 32 }} type="secondary">{d.mount}</Text>
<Text style={{ fontSize: 10, minWidth: 36 }} type="secondary">{d.mount}</Text> <Progress percent={d.percent} size="small" strokeColor={d.percent > 80 ? '#ff4d4f' : '#1677ff'} style={{ flex: 1, margin: 0 }} />
<div style={{ flex: 1 }}><Progress percent={d.percent} size="small" strokeColor={d.percent > 80 ? '#ff4d4f' : '#1677ff'} style={{ margin: 0 }} /></div> <Text style={{ fontSize: 10, whiteSpace: 'nowrap' }}>{d.used}</Text>
<Text style={{ fontSize: 10, whiteSpace: 'nowrap', minWidth: 70, textAlign: 'right' }}>{d.used} / {d.total}</Text>
</div>
</div> </div>
))} ))}
</Col> </Col>
<Col span={24}>
<Text style={{ fontSize: 14, fontWeight: 500 }}>🕐 {server.uptime}</Text>
</Col>
</Row> </Row>
</div>
{/* Uptime */}
<div style={{ marginBottom: 12, minHeight: 22 }}>
<Text style={{ fontSize: 14, fontWeight: 500 }}>🕐 {server.uptime}</Text>
</div>
{/* Process table — fixed height */}
<Table <Table
dataSource={server.processes || []} dataSource={server.processes || []}
rowKey="pid" size="small" pagination={false} rowKey="pid" size="small" pagination={false}
style={{ marginTop: 12 }} scroll={{ y: 240 }}
style={{ marginTop: 0 }}
columns={[ columns={[
{ title: '进程', dataIndex: 'name', width: 120, ellipsis: true, render: (name: string, r: ProcessInfo) => ( { title: '进程', dataIndex: 'name', width: 110, ellipsis: true, render: (name: string, r: ProcessInfo) => (
<Tooltip title={r.desc ? `${r.desc}\n${r.command}` : r.command}><span>{name}</span></Tooltip> <Tooltip title={r.desc ? `${r.desc}\n${r.command}` : r.command}><span>{name}</span></Tooltip>
)}, )},
{ title: '说明', dataIndex: 'desc', width: 100, ellipsis: true, render: (d: string) => <Text type="secondary" style={{ fontSize: 12 }}>{d || '-'}</Text> }, { title: '说明', dataIndex: 'desc', width: 90, ellipsis: true, render: (d: string) => <Text type="secondary" style={{ fontSize: 12 }}>{d || '-'}</Text> },
{ title: 'CPU', dataIndex: 'cpu', width: 55 }, { title: 'CPU', dataIndex: 'cpu', width: 50 },
{ title: 'MEM', dataIndex: 'mem', width: 55 }, { title: 'MEM', dataIndex: 'mem', width: 50 },
]} ]}
locale={{ emptyText: '暂无' }} locale={{ emptyText: '暂无' }}
/> />