From 06a96f35881a73196b5312199286a4dcca62ac48 Mon Sep 17 00:00:00 2001
From: Gloridust <Gloridust@gmail.com>
Date: Wed, 8 Jul 2026 03:05:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=AE=9E=E4=BE=8B=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=8B=A5=E6=8C=A4=20=E2=80=94=E2=80=94=20?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E8=A1=8C=E5=8F=AA=E7=95=99=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E5=BE=BD=E6=A0=87=EF=BC=8C=E5=8F=AF=E5=8D=87=E7=BA=A7/?=
 =?UTF-8?q?=E9=95=9C=E5=83=8F=E7=89=88=E6=9C=AC=E7=A7=BB=E5=88=B0=E7=8B=AC?=
 =?UTF-8?q?=E7=AB=8B=E5=85=83=E6=95=B0=E6=8D=AE=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

加了「镜像 vX.Y.Z」角标后，标题行挤了名字+在线+可升级+镜像版本四样，导致名字被截成
「Ethan...」、徽标竖排换行成「可升\n级」「在\n线」。重构：
- 标题行只保留 名字 + 状态徽标；名字 flex:1 吃满宽度，仅真的过长才省略号（并加 title 悬浮全名）。
- 可升级 / 镜像版本 下沉到独立的 .inst-meta 行，可自然换行。
- .tag 全局加 white-space:nowrap，杜绝徽标字内换行；标题行状态徽标 flex:none 不被挤压。
- 卡片网格最小列宽 220→248px，给内容更多呼吸空间。
已用真实构建 CSS 渲染 mock 卡片截图验证：深浅色下名字完整显示、超长名优雅省略、徽标不再竖排。
---
 panel/web/src/pages/Admin.tsx | 35 +++++++++++++++++++++--------------
 panel/web/src/styles.css      | 22 +++++++++++++++++++++-
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/panel/web/src/pages/Admin.tsx b/panel/web/src/pages/Admin.tsx
index 74b1996..bb0e654 100644
--- a/panel/web/src/pages/Admin.tsx
+++ b/panel/web/src/pages/Admin.tsx
@@ -1331,22 +1331,29 @@ function InstanceAdminCard({
   return (
     <div className={'inst-card' + (menuOpen ? ' open-menu' : '')}>
       <div className="inst-head">
-        <span className="inst-name">{inst.name}</span>
+        <span className="inst-name" title={inst.name}>
+          {inst.name}
+        </span>
         <span className={'tag ' + badge.cls}>{badge.text}</span>
-        {outdated && !acting && (
-          <span className="tag tag-warn" title="该实例的镜像落后于最新版，点「升级实例」可更新">
-            可升级
-          </span>
-        )}
-        {inst.imageVersion && (
-          <span
-            className="tag tag-muted"
-            title={/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? '该实例当前运行的镜像版本' : '本地自构建镜像（无发布版本号，显示镜像短 id）'}
-          >
-            镜像 {/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? `v${inst.imageVersion}` : inst.imageVersion.slice(0, 8)}
-          </span>
-        )}
       </div>
+      {/* 次要元数据独占一行（可换行），不再和名字挤在标题行导致名字被截断、徽标竖排换行 */}
+      {((outdated && !acting) || inst.imageVersion) && (
+        <div className="inst-meta">
+          {outdated && !acting && (
+            <span className="tag tag-warn" title="该实例的镜像落后于最新版，点「升级实例」可更新">
+              可升级
+            </span>
+          )}
+          {inst.imageVersion && (
+            <span
+              className="tag tag-muted"
+              title={/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? '该实例当前运行的镜像版本' : '本地自构建镜像（无发布版本号，显示镜像短 id）'}
+            >
+              镜像 {/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? `v${inst.imageVersion}` : inst.imageVersion.slice(0, 8)}
+            </span>
+          )}
+        </div>
+      )}
       <div className="inst-sub">
         {sub}
         {!acting && ` · 可访问 ${userCount} 人`}
diff --git a/panel/web/src/styles.css b/panel/web/src/styles.css
index 5edb1ca..427c94c 100644
--- a/panel/web/src/styles.css
+++ b/panel/web/src/styles.css
@@ -476,6 +476,7 @@ button {
   margin-left: 8px;
   vertical-align: middle;
   font-weight: 600;
+  white-space: nowrap; /* 徽标整体不换行，杜绝「可升\n级」竖排 */
 }
 .tag-off {
   background: rgba(var(--danger-rgb) / 0.14);
@@ -952,7 +953,7 @@ button {
 /* ---------- 实例网格 ---------- */
 .inst-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
   gap: 14px;
   margin-bottom: 22px;
   /* 各卡片按自身内容高度，避免某张展开「管理」菜单时同行其它卡片被拉等高（显得也展开了） */
@@ -989,6 +990,8 @@ button {
   gap: 8px;
 }
 .inst-name {
+  flex: 1; /* 吃满剩余宽度，名字有充分空间，只在真的过长时才省略 */
+  min-width: 0; /* 允许在 flex 容器内收缩以触发省略号 */
   font-size: 16px;
   font-weight: 700;
   color: var(--text);
@@ -996,6 +999,23 @@ button {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* 标题行的状态徽标：不参与收缩、整体不换行（此前会被挤成「在\n线」竖排） */
+.inst-head > .tag {
+  flex: none;
+  margin-left: 0;
+  white-space: nowrap;
+}
+/* 次要元数据行：可升级 / 镜像版本，独立成行、可自然换行 */
+.inst-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+.inst-meta .tag {
+  margin-left: 0;
+  white-space: nowrap;
+}
 .inst-sub {
   margin-top: 6px;
   font-size: 13px;