diff --git a/src/pages/Servers.tsx b/src/pages/Servers.tsx index d6a1f5c..4d0638a 100644 --- a/src/pages/Servers.tsx +++ b/src/pages/Servers.tsx @@ -6,40 +6,38 @@ import { getServerMetrics, type ServerInfo, type ProcessInfo } from '@/services/ const { Text, Title } = Typography +function CopyTag({ text, icon, color }: { text: string; icon?: React.ReactNode; color?: string }) { + return ( + { await navigator.clipboard.writeText(text); message.success(`已复制: ${text}`) }}> + {icon}{text} + + ) +} + function ServerCard({ server }: { server: ServerInfo }) { const cpuColor = server.cpu.usagePercent > 80 ? '#ff4d4f' : server.cpu.usagePercent > 50 ? '#faad14' : '#52c41a' const memColor = server.memory.percent > 80 ? '#ff4d4f' : server.memory.percent > 50 ? '#faad14' : '#52c41a' return ( - {server.name}{server.role}} - style={{ height: '100%' }} - > - {/* Network info */} + {server.name}{server.role}} style={{ height: '100%' }}> - - { navigator.clipboard.writeText(server.network.publicIp); message.success('已复制') }}> - 🌐 {server.network.publicIp} - - { navigator.clipboard.writeText(server.network.privateIp); message.success('已复制') }}> - 🔒 {server.network.privateIp} - + + + {server.network.domains.map(d => ( - { navigator.clipboard.writeText(d); message.success('已复制') }}> - {d} - + } color="blue" /> ))} - {/* Metrics */} - CPU ({server.cpu.cores}核) + CPU · {server.cpu.cores}核 `${p}%`} /> - {server.cpu.model?.slice(0, 30)} + {server.cpu.model?.slice(0, 28)} 内存 @@ -47,13 +45,14 @@ function ServerCard({ server }: { server: ServerInfo }) { {server.memory.used}/{server.memory.total} - 磁盘 - {server.disks.map(d => ( -
- - {d.mount} + 磁盘 + {server.disks.filter(d => d.total !== '-').length === 0 && 暂无数据} + {server.disks.filter(d => d.total !== '-').map(d => ( +
+ + {d.mount} 80 ? '#ff4d4f' : '#1677ff'} style={{ flex: 1, margin: 0 }} /> - {d.used}/{d.total} + {d.used}/{d.total}
))} @@ -64,16 +63,17 @@ function ServerCard({ server }: { server: ServerInfo }) { - {/* Processes */} ( - {name} + { title: '进程', dataIndex: 'name', width: 140, ellipsis: true, render: (name: string, r: ProcessInfo) => ( + + {name} + )}, + { title: '说明', dataIndex: 'desc', width: 120, ellipsis: true, render: (d: string) => {d || '-'} }, { title: 'CPU', dataIndex: 'cpu', width: 55 }, { title: 'MEM', dataIndex: 'mem', width: 55 }, ]} diff --git a/src/services/server-api.ts b/src/services/server-api.ts index 4acafc9..12b54d5 100644 --- a/src/services/server-api.ts +++ b/src/services/server-api.ts @@ -1,7 +1,7 @@ import { api } from './http-client' export interface DiskInfo { mount: string; total: string; used: string; free: string; percent: number } -export interface ProcessInfo { pid: number; cpu: string; mem: string; name: string; command: string } +export interface ProcessInfo { pid: number; cpu: string; mem: string; name: string; desc: string; command: string } export interface ServerInfo { name: string; role: string; hostname: string; cpu: { model: string; cores: number; usagePercent: number };