openclaw/vps-commander
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

fix(web): fix card height mismatch caused by long device names with dedicated row and ellipsis

Browse Source
This commit is contained in:
kory
2026-09-28 09:49:13 +08:00
parent 80db7a482a
commit c11aadaa68
4 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+10 -8
View File
@@ -18,17 +18,19 @@ header strong{font-size:18px}header span{margin-left:12px;color:var(--text-muted
:root[data-theme="light"] .svg-moon{display:block;color:#475569} :root[data-theme="light"] .svg-moon{display:block;color:#475569}
/* 设备卡片与画像升级 */ /* 设备卡片与画像升级 */
.device-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:10px} .devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .device-card{min-width:0;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.device-title{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap} .device-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.device-name{font-size:15px;color:var(--text-main);overflow-wrap:anywhere;word-break:break-all} .device-status-wrap{display:flex;align-items:center;gap:6px;min-width:0}
.role-badge{font-size:11px;padding:2px 6px;border-radius:5px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)} .device-name-row{min-width:0;display:flex;align-items:center}
.device-name{font-size:15px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}
.role-badge{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)}
.role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)} .role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)}
.role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)} .role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
.role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)} .role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.btn-revoke{padding:3px 8px;font-size:12px;border-radius:6px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer} .btn-revoke{padding:2px 8px;font-size:11px;border-radius:5px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer;flex-shrink:0}
.btn-revoke:hover{background:rgba(239,68,68,.15);border-color:var(--dot-offline)} .btn-revoke:hover{background:rgba(239,68,68,.15);border-color:var(--dot-offline)}
.device-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .device-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 资源画像 2列紧凑栅格 */ /* 资源画像 2列紧凑栅格 */
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px} .profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px}
@@ -37,4 +39,4 @@ header strong{font-size:18px}header span{margin-left:12px;color:var(--text-muted
.p-val{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;color:var(--text-main);white-space:nowrap} .p-val{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;color:var(--text-main);white-space:nowrap}
.badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700} .badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700}
.badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)} .badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
.badge-docker-text.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)} .badge-docker-text.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}
internal/web/static/app.js
+5 -3
View File
@@ -48,14 +48,16 @@ async function loadDevices(){
return ` return `
<div class="device-card ${isOnline ? "online" : "offline"}"> <div class="device-card ${isOnline ? "online" : "offline"}">
<div class="device-head"> <div class="device-topbar">
<div class="device-title"> <div class="device-status-wrap">
<span class="dot"></span> <span class="dot"></span>
<strong class="device-name">${esc(d.name)}</strong>
<span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span> <span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span>
</div> </div>
<button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button> <button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button>
</div> </div>
<div class="device-name-row">
<strong class="device-name" title="${esc(d.name)}">${esc(d.name)}</strong>
</div>
<div class="device-meta"> <div class="device-meta">
<span>${esc(d.status)}</span> · <span>${esc(d.status)}</span> ·
<span>${esc(d.arch||"")}/${esc(d.os||"")}</span> <span>${esc(d.arch||"")}/${esc(d.os||"")}</span>
web/static/app.css
+10 -8
View File
@@ -18,17 +18,19 @@ header strong{font-size:18px}header span{margin-left:12px;color:var(--text-muted
:root[data-theme="light"] .svg-moon{display:block;color:#475569} :root[data-theme="light"] .svg-moon{display:block;color:#475569}
/* 设备卡片与画像升级 */ /* 设备卡片与画像升级 */
.device-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:10px} .devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .device-card{min-width:0;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.device-title{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap} .device-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.device-name{font-size:15px;color:var(--text-main);overflow-wrap:anywhere;word-break:break-all} .device-status-wrap{display:flex;align-items:center;gap:6px;min-width:0}
.role-badge{font-size:11px;padding:2px 6px;border-radius:5px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)} .device-name-row{min-width:0;display:flex;align-items:center}
.device-name{font-size:15px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}
.role-badge{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)}
.role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)} .role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)}
.role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)} .role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
.role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)} .role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.btn-revoke{padding:3px 8px;font-size:12px;border-radius:6px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer} .btn-revoke{padding:2px 8px;font-size:11px;border-radius:5px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer;flex-shrink:0}
.btn-revoke:hover{background:rgba(239,68,68,.15);border-color:var(--dot-offline)} .btn-revoke:hover{background:rgba(239,68,68,.15);border-color:var(--dot-offline)}
.device-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .device-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 资源画像 2列紧凑栅格 */ /* 资源画像 2列紧凑栅格 */
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px} .profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px}
@@ -37,4 +39,4 @@ header strong{font-size:18px}header span{margin-left:12px;color:var(--text-muted
.p-val{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;color:var(--text-main);white-space:nowrap} .p-val{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;color:var(--text-main);white-space:nowrap}
.badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700} .badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700}
.badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)} .badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
.badge-docker-text.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)} .badge-docker-text.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}
web/static/app.js
+5 -3
View File
@@ -48,14 +48,16 @@ async function loadDevices(){
return ` return `
<div class="device-card ${isOnline ? "online" : "offline"}"> <div class="device-card ${isOnline ? "online" : "offline"}">
<div class="device-head"> <div class="device-topbar">
<div class="device-title"> <div class="device-status-wrap">
<span class="dot"></span> <span class="dot"></span>
<strong class="device-name">${esc(d.name)}</strong>
<span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span> <span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span>
</div> </div>
<button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button> <button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button>
</div> </div>
<div class="device-name-row">
<strong class="device-name" title="${esc(d.name)}">${esc(d.name)}</strong>
</div>
<div class="device-meta"> <div class="device-meta">
<span>${esc(d.status)}</span> · <span>${esc(d.status)}</span> ·
<span>${esc(d.arch||"")}/${esc(d.os||"")}</span> <span>${esc(d.arch||"")}/${esc(d.os||"")}</span>