fix(deployments): 卡片按钮布局拥挤 + 去掉冗余的日志查询/采集器/跳转入口
用户反馈 /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
This commit is contained in:
1 parent
188d9460fe
commit
24caeefb3a
2 files changed
+10
-26
No files matched your search
@@ -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>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user