From 2dcbedd80f9d61d8286b9980d8840e0e160db702 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Fri, 3 Apr 2026 00:59:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(host-grid):=20=E5=B0=8D=E9=BD=8A=20figma=20?=
 =?UTF-8?q?=E2=80=94=20=E6=9C=8D=E5=8B=99=E8=A1=8C=E5=8E=BB=E6=8E=89=20por?=
 =?UTF-8?q?t/=E6=8F=8F=E8=BF=B0=EF=BC=8Chostname=20=E9=A1=AF=E7=A4=BA?=
 =?UTF-8?q?=E6=9C=AB=E6=AE=B5=20IP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/components/infra/host-grid.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/infra/host-grid.tsx b/apps/web/src/components/infra/host-grid.tsx
index 4e8450ce..0356460a 100644
--- a/apps/web/src/components/infra/host-grid.tsx
+++ b/apps/web/src/components/infra/host-grid.tsx
@@ -42,25 +42,16 @@ function ServiceRow({ svc }: { svc: HostService }) {
   const isK3s = svc.isK3s ?? false
   const dotColor = isK3s ? '#4f8ef7' : svc.healthy ? '#22C55E' : '#b0ad9f'
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 5, minHeight: 17 }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 5, minHeight: 16 }}>
       <div style={{ width: 4, height: 4, borderRadius: '50%', background: dotColor, flexShrink: 0 }} />
       <span style={{
         fontSize: 11,
         fontWeight: isK3s ? 600 : 400,
         color: isK3s ? '#3b7de8' : '#49483f',
         fontFamily: 'var(--font-body), monospace',
-        flexShrink: 0,
       }}>
         {svc.name}
       </span>
-      {svc.port && (
-        <span style={{ fontSize: 10, color: '#b0ad9f' }}>:{svc.port}</span>
-      )}
-      {svc.description && (
-        <span style={{ fontSize: 10, color: '#b0ad9f', marginLeft: 'auto', flexShrink: 0, textAlign: 'right' }}>
-          {svc.description}
-        </span>
-      )}
     </div>
   )
 }
@@ -89,7 +80,8 @@ function HostCard({ host }: { host: HostInfo }) {
           <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
             <div style={{ width: 6, height: 6, borderRadius: '50%', background: accentColor, flexShrink: 0 }} />
             <span style={{ fontSize: 12, fontWeight: 700, color: '#141413', fontFamily: 'var(--font-body), monospace' }}>
-              {host.hostname}
+              {/* 顯示末段 IP 作為簡短標識，完整名稱放 IP 欄位 */}
+              {host.ip.split('.').pop() ?? host.hostname}
             </span>
             {isK3s && (
               <span style={{