fix: 节点管理按钮改为两行 grid 布局,防止卡片滑动溢出

- 操作按钮从单行 flex 改为两行 grid (3+2),避免窄屏挤压
- SortableItem 和 Card 添加 overflow-hidden,阻止内容溢出导致页面横滑
This commit is contained in:
sagit
2026-02-11 08:45:58 +00:00
parent d40e97d73b
commit f4e56d091e
+12 -10
View File
@@ -125,7 +125,7 @@ const SortableItem = ({
}; };
return ( return (
<div ref={setNodeRef} style={style} {...attributes}> <div ref={setNodeRef} style={style} {...attributes} className="overflow-hidden">
{children(listeners)} {children(listeners)}
</div> </div>
); );
@@ -1253,7 +1253,7 @@ export default function NodePage() {
{(listeners) => ( {(listeners) => (
<Card <Card
key={node.id} key={node.id}
className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200" className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden"
> >
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<div className="flex justify-between items-start w-full"> <div className="flex justify-between items-start w-full">
@@ -1514,11 +1514,10 @@ export default function NodePage() {
{/* 操作按钮 */} {/* 操作按钮 */}
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex gap-1.5">
{!isRemoteNode && ( {!isRemoteNode && (
<> <div className="grid grid-cols-3 gap-1.5">
<Button <Button
className="flex-1 min-h-8" className="min-h-8"
color="success" color="success"
isLoading={node.copyLoading} isLoading={node.copyLoading}
size="sm" size="sm"
@@ -1528,7 +1527,7 @@ export default function NodePage() {
安装 安装
</Button> </Button>
<Button <Button
className="flex-1 min-h-8" className="min-h-8"
color="warning" color="warning"
isDisabled={node.connectionStatus !== "online"} isDisabled={node.connectionStatus !== "online"}
isLoading={node.upgradeLoading} isLoading={node.upgradeLoading}
@@ -1539,7 +1538,7 @@ export default function NodePage() {
升级 升级
</Button> </Button>
<Button <Button
className="flex-1 min-h-8" className="min-h-8"
color="secondary" color="secondary"
isDisabled={node.connectionStatus !== "online"} isDisabled={node.connectionStatus !== "online"}
isLoading={node.rollbackLoading} isLoading={node.rollbackLoading}
@@ -1549,8 +1548,12 @@ export default function NodePage() {
> >
回退 回退
</Button> </Button>
</div>
)}
<div className={`grid gap-1.5 ${isRemoteNode ? "grid-cols-1" : "grid-cols-2"}`}>
{!isRemoteNode && (
<Button <Button
className="flex-1 min-h-8" className="min-h-8"
color="primary" color="primary"
size="sm" size="sm"
variant="flat" variant="flat"
@@ -1558,10 +1561,9 @@ export default function NodePage() {
> >
编辑 编辑
</Button> </Button>
</>
)} )}
<Button <Button
className={`min-h-8 ${isRemoteNode ? "w-full" : "flex-1"}`} className="min-h-8"
color="danger" color="danger"
size="sm" size="sm"
variant="flat" variant="flat"