style(admin-web): truncate long client status tag with tooltip

Long desktop client status labels overflowed the media card; cap tag width with ellipsis and expose the full text via tooltip on hover.
2026-04-20 12:00:10 +08:00
parent 9bfe0fab48
commit f5a1cd81b2
1 changed files with 13 additions and 1 deletions
@@ -403,7 +403,11 @@ async function refreshAll(): Promise<void> {
              </div>
              <div class="meta-row">
                <span class="meta-label">客户端状态</span>
-                <a-tag :color="clientStatusColor(account)">{{ clientStatusText(account) }}</a-tag>
+                <a-tooltip :title="clientStatusText(account)" placement="topLeft">
+                  <a-tag :color="clientStatusColor(account)" class="client-status-tag">
+                    {{ clientStatusText(account) }}
+                  </a-tag>
+                </a-tooltip>
              </div>
              <div class="meta-row">
                <span class="meta-label">最近心跳</span>
@@ -662,6 +666,14 @@ async function refreshAll(): Promise<void> {
  word-break: break-all;
 }

+.client-status-tag {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
 .media-card__footer {
  padding-top: 4px;
 }