diff --git a/frontend/src/pages/Deploy/Server/List/components/ServerCard.tsx b/frontend/src/pages/Deploy/Server/List/components/ServerCard.tsx index c27485d6..482af3fc 100644 --- a/frontend/src/pages/Deploy/Server/List/components/ServerCard.tsx +++ b/frontend/src/pages/Deploy/Server/List/components/ServerCard.tsx @@ -47,110 +47,106 @@ export const ServerCard: React.FC = ({ }; return ( - - {/* 背景装饰 */} -
- - - {/* 顶部状态栏 */} -
-
-
+ + {/* 顶部:状态和分类 */} +
+
+
- + }`}> {ServerStatusLabels[server.status]?.label || server.status}
{server.categoryName && ( - + {server.categoryName} )}
- {/* 服务器信息 */} -
-
- {getOsIcon(server.osType)} + {/* 中间:服务器名称和基本信息 */} +
+
+
+ {getOsIcon(server.osType)} +
-

+

{server.serverName}

-
-
- - {server.hostIp} -
- {server.hostname && ( -
- - {server.hostname} -
- )} +
+ + {server.hostIp}
+ {server.hostname && ( +
+ {server.hostname} +
+ )} + {server.osType && ( +
+ {OsTypeLabels[server.osType]?.label || server.osType} + {server.osVersion && ` ${server.osVersion}`} +
+ )}
- {/* 系统信息 */} - {server.osType && ( -
- - {OsTypeLabels[server.osType]?.label || server.osType} - {server.osVersion && ` ${server.osVersion}`} + {/* SSH 和认证方式 - 在一行显示 */} +
+ SSH: {server.sshUser || 'root'}:{server.sshPort || 22} + {server.authType && ( + + {server.authType === 'PASSWORD' ? '密码' : '密钥'} -
- )} + )} +
- {/* 硬件配置 */} + {/* 硬件配置 - 紧凑显示 */} {(server.cpuCores || server.memorySize || server.diskSize) && ( -
+
{server.cpuCores && ( -
- - {server.cpuCores} 核 +
+ + {server.cpuCores}核
)} {server.memorySize && ( -
- - {server.memorySize} GB +
+ + {server.memorySize}GB
)} {server.diskSize && ( -
- - {server.diskSize} GB +
+ + {server.diskSize}GB
)}
)} - {/* 描述 */} - {server.description && ( -

- {server.description} -

- )} - - {/* 标签 */} + {/* 标签 - 可选显示 */} {server.tags && (() => { try { const tags = JSON.parse(server.tags); return Array.isArray(tags) && tags.length > 0 && ( -
- {tags.map((tag, index) => ( +
+ {tags.slice(0, 2).map((tag, index) => ( {tag} ))} + {tags.length > 2 && +{tags.length - 2}}
); } catch { @@ -158,81 +154,66 @@ export const ServerCard: React.FC = ({ } })()} - {/* SSH 用户信息 */} -
- SSH用户: {server.sshUser || 'root'} - 端口: {server.sshPort || 22} -
- - {/* 认证方式 */} - {server.authType && ( -
- 认证: - - {server.authType === 'PASSWORD' ? '密码认证' : '密钥认证'} - -
+ {/* 描述 - 始终显示 */} + {server.description && ( +

+ {server.description} +

)} {/* 最后连接时间 */} {server.lastConnectTime && ( -
- - 最后连接: {formatTime(server.lastConnectTime)} +
+ + 最后连接 {formatTime(server.lastConnectTime)}
)} - {/* 弹性空间,将按钮推到底部 */} -
- - {/* 操作按钮 - 固定在底部并居中 */} -
+ {/* 操作按钮 - Hover 时才显示 */} +
- 测试SSH连接 + 测试连接 - 编辑服务器信息 + 编辑 - 删除服务器 + 删除