From 24caeefb3aced2267899d431f7169f7798d99cda Mon Sep 17 00:00:00 2001
From: opsx <opsx@local>
Date: Tue, 27 Oct 2026 03:10:42 +0000
Subject: [PATCH] =?UTF-8?q?fix(deployments):=20=E5=8D=A1=E7=89=87=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=B8=83=E5=B1=80=E6=8B=A5=E6=8C=A4=20+=20=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E5=86=97=E4=BD=99=E7=9A=84=E6=97=A5=E5=BF=97=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2/=E9=87=87=E9=9B=86=E5=99=A8/=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈 /deployments 卡片按钮布局乱，且「日志查询」「采集器」和 endpoint 跳转按钮多余。

问题根因：
  1. ResourceCard 的操作区是 flex 但没有 flex-wrap，
     而 DeploymentCard 在部署/停止/重启按钮上用了 flex-1，
     窄卡片里 7 个按钮互相挤压、换行错位、宽度不均
  2. endpoint 在 K8s 模式下是 http://loki.log.svc.cluster.local:3100
     这类集群内地址，浏览器点不开，展示出来纯属噪音

修复：
  - ResourceCard 操作区加 flex-wrap + items-center（按钮多时自动规整换行）
  - DeploymentCard 去掉 4 处 flex-1（按钮按内容宽度排布）
  - 去掉「访问」字段（不再展示 cluster-local endpoint）
  - 去掉「日志查询」跳转按钮（左下导航已有入口）
  - 去掉「采集器」跳转按钮（同上）
  - 去掉 endpoint 的 ExternalLink 跳转按钮
  - 清理不再使用的 import：Link(react-router)、ExternalLink(lucide)

卡片保留的按钮：配置 / 部署（或 停止+重启）/ 日志 / 删除

镜像：lghost/lokistack:latest + v0.1 = sha256:d89b9cfa0054
---
 frontend/src/components/ResourceCard.tsx      |  3 +-
 .../deployments/components/DeploymentCard.tsx | 33 +++++--------------
 2 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/ResourceCard.tsx b/frontend/src/components/ResourceCard.tsx
index 3de6496..48484ea 100644
--- a/frontend/src/components/ResourceCard.tsx
+++ b/frontend/src/components/ResourceCard.tsx
@@ -90,7 +90,8 @@ export const ResourceCard = memo(function ResourceCard({
         )}
 
         {/* 操作区:贴底 */}
-        <div className="flex gap-2 pt-3 border-t border-border mt-auto">{actions}</div>
+        {/* flex-wrap：按钮多时自动换行，避免在窄卡片里被 flex-1 压扁/溢出 */}
+        <div className="flex flex-wrap items-center gap-2 pt-3 border-t border-border mt-auto">{actions}</div>
       </CardContent>
     </Card>
   )
diff --git a/frontend/src/pages/deployments/components/DeploymentCard.tsx b/frontend/src/pages/deployments/components/DeploymentCard.tsx
index 8242225..a4a1552 100644
--- a/frontend/src/pages/deployments/components/DeploymentCard.tsx
+++ b/frontend/src/pages/deployments/components/DeploymentCard.tsx
@@ -1,6 +1,5 @@
 import { memo, useEffect, useState } from 'react'
-import { Link } from 'react-router'
-import { Play, Square, RotateCw, Trash2, Terminal, ExternalLink, Pencil, Rocket } from 'lucide-react'
+import { Play, Square, RotateCw, Trash2, Terminal, Pencil, Rocket } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { StatusBadge } from '@/components/StatusBadge'
 import { deploymentApi } from '@/api'
@@ -26,7 +25,7 @@ interface DeploymentCardProps {
   onEditRetention: (d: LokiDeployment) => void
 }
 
-/** 部署卡片 — 列表项展示与操作入口（部署/停止/重启/日志/访问/删除） */
+/** 部署卡片 — 列表项展示与操作入口（配置/部署/停止/重启/日志/删除） */
 export const DeploymentCard = memo(function DeploymentCard({
   deployment: d,
   operating,
@@ -83,9 +82,8 @@ export const DeploymentCard = memo(function DeploymentCard({
           { label: '副本', value: `${d.replicas} · 保留 ${d.retentionDays || 30} 天` },
         ] : [{ label: '保留', value: `${d.retentionDays || 30} 天` }]),
         { label: '存储', value: d.storageConfig?.name || '本地' },
-        ...(d.endpoint ? [{ label: '访问', value: (
-          <span className="text-primary">{d.endpoint.replace(/^https?:\/\//, '')}</span>
-        ), title: d.endpoint }] : []),
+        // 不再展示 endpoint：K8s 模式下它是 http://loki.log.svc.cluster.local:3100
+        // 这类集群内地址，浏览器点不开，纯属噪音
         ...(d.grafanaEnabled && d.grafanaEndpoint ? [{ label: 'Grafana', value: (
           <a href={d.grafanaEndpoint} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline" title={`${d.grafanaEndpoint}(admin/admin)`}>
             {d.grafanaEndpoint.replace(/^https?:\/\//, '')}
@@ -104,41 +102,26 @@ export const DeploymentCard = memo(function DeploymentCard({
             <Pencil className="size-3 mr-1" />配置
           </Button>
           {canDeploy ? (
-            <Button variant="outline" size="sm" className="flex-1 text-xs bg-success/10 text-primary hover:bg-success/20 border-success/30" onClick={() => onDeploy(d.id)} disabled={isBusy}>
+            <Button variant="outline" size="sm" className="text-xs bg-success/10 text-primary hover:bg-success/20 border-success/30" onClick={() => onDeploy(d.id)} disabled={isBusy}>
               <Play className="size-3 mr-1" />{isBusy ? '部署中...' : '部署'}
             </Button>
           ) : isDeploying ? (
-            <Button variant="outline" size="sm" className="flex-1 text-xs" disabled>
+            <Button variant="outline" size="sm" className="text-xs" disabled>
               <RotateCw className="size-3 mr-1 animate-spin" />部署中...
             </Button>
           ) : (
             <>
-              <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onStop(d.id)}>
+              <Button variant="outline" size="sm" className="text-xs" onClick={() => onStop(d.id)}>
                 <Square className="size-3 mr-1" />停止
               </Button>
-              <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onRestart(d.id)} disabled={isBusy}>
+              <Button variant="outline" size="sm" className="text-xs" onClick={() => onRestart(d.id)} disabled={isBusy}>
                 <RotateCw className={`size-3 mr-1 ${isBusy ? 'animate-spin' : ''}`} />重启
               </Button>
             </>
           )}
-          {d.status === 'running' && (
-            <>
-              <Button variant="outline" size="sm" className="text-xs" asChild>
-                <Link to="/logs">日志查询</Link>
-              </Button>
-              <Button variant="outline" size="sm" className="text-xs" asChild>
-                <Link to="/collectors">采集器</Link>
-              </Button>
-            </>
-          )}
           <Button variant="outline" size="sm" className="text-xs" onClick={() => onViewLogs(d)}>
             <Terminal className="size-3 mr-1" />日志
           </Button>
-          {d.endpoint && (
-            <Button variant="outline" size="sm" className="text-xs text-primary hover:text-primary/80" onClick={() => window.open(d.endpoint, '_blank', 'noopener,noreferrer')} title="浏览器访问">
-              <ExternalLink className="size-3" />
-            </Button>
-          )}
           <Button variant="outline" size="sm" aria-label={`删除部署 ${d.name}`} className="text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => onDelete(d)}>
             <Trash2 className="size-3.5" />
           </Button>