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
+49 -47
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,54 +1514,56 @@ export default function NodePage() {
{/* 操作按钮 */} {/* 操作按钮 */}
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex gap-1.5"> {!isRemoteNode && (
<div className="grid grid-cols-3 gap-1.5">
<Button
className="min-h-8"
color="success"
isLoading={node.copyLoading}
size="sm"
variant="flat"
onPress={() => handleCopyInstallCommand(node)}
>
安装
</Button>
<Button
className="min-h-8"
color="warning"
isDisabled={node.connectionStatus !== "online"}
isLoading={node.upgradeLoading}
size="sm"
variant="flat"
onPress={() => openUpgradeModal("single", node.id)}
>
升级
</Button>
<Button
className="min-h-8"
color="secondary"
isDisabled={node.connectionStatus !== "online"}
isLoading={node.rollbackLoading}
size="sm"
variant="flat"
onPress={() => handleRollbackNode(node)}
>
回退
</Button>
</div>
)}
<div className={`grid gap-1.5 ${isRemoteNode ? "grid-cols-1" : "grid-cols-2"}`}>
{!isRemoteNode && ( {!isRemoteNode && (
<> <Button
<Button className="min-h-8"
className="flex-1 min-h-8" color="primary"
color="success" size="sm"
isLoading={node.copyLoading} variant="flat"
size="sm" onPress={() => handleEdit(node)}
variant="flat" >
onPress={() => handleCopyInstallCommand(node)} 编辑
> </Button>
安装
</Button>
<Button
className="flex-1 min-h-8"
color="warning"
isDisabled={node.connectionStatus !== "online"}
isLoading={node.upgradeLoading}
size="sm"
variant="flat"
onPress={() => openUpgradeModal("single", node.id)}
>
升级
</Button>
<Button
className="flex-1 min-h-8"
color="secondary"
isDisabled={node.connectionStatus !== "online"}
isLoading={node.rollbackLoading}
size="sm"
variant="flat"
onPress={() => handleRollbackNode(node)}
>
回退
</Button>
<Button
className="flex-1 min-h-8"
color="primary"
size="sm"
variant="flat"
onPress={() => handleEdit(node)}
>
编辑
</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"