mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-04 09:06:38 +08:00
fix(frontend): move batch operations into top toolbar (#198)
## Summary - switch batch mode interactions to the top-right action bar on forward, tunnel, and node pages - remove bottom floating batch toolbars and restore normal action toolbar when exiting batch mode - stabilize toolbar layout and improve batch button visibility to avoid visual jitter on toggle
This commit is contained in:
sagit
+193
-172
@@ -1722,187 +1722,208 @@ export default function ForwardPage() {
|
|||||||
onOpen={() => setIsSearchVisible(true)}
|
onOpen={() => setIsSearchVisible(true)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
|
<div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0 sm:gap-3">
|
||||||
{/* 筛选按钮 */}
|
{selectMode ? (
|
||||||
<Button
|
<>
|
||||||
isIconOnly
|
<span className="text-sm text-default-600 shrink-0">
|
||||||
aria-label="筛选条件"
|
已选择 {selectedIds.size} 项
|
||||||
className={
|
</span>
|
||||||
filterUserId !== "all" || filterTunnelId !== "all"
|
<Button
|
||||||
? "bg-primary/20 text-primary relative"
|
color="primary"
|
||||||
: "text-default-600 relative"
|
size="sm"
|
||||||
}
|
variant="flat"
|
||||||
color={
|
onPress={selectAll}
|
||||||
filterUserId !== "all" || filterTunnelId !== "all"
|
|
||||||
? "primary"
|
|
||||||
: "default"
|
|
||||||
}
|
|
||||||
size="sm"
|
|
||||||
title="筛选条件"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => setIsFilterModalOpen(true)}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
{(filterUserId !== "all" || filterTunnelId !== "all") && (
|
|
||||||
<span className="absolute top-1.5 right-1.5 flex h-1.5 w-1.5 rounded-full bg-primary" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
{/* 显示模式切换按钮 */}
|
|
||||||
<Button
|
|
||||||
isIconOnly
|
|
||||||
aria-label={
|
|
||||||
viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
|
|
||||||
}
|
|
||||||
className="text-sm"
|
|
||||||
color="default"
|
|
||||||
size="sm"
|
|
||||||
title={viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"}
|
|
||||||
variant="flat"
|
|
||||||
onPress={handleViewModeChange}
|
|
||||||
>
|
|
||||||
{viewMode === "grouped" ? (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
>
|
||||||
<path
|
全选
|
||||||
clipRule="evenodd"
|
</Button>
|
||||||
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
|
<Button
|
||||||
fillRule="evenodd"
|
color="secondary"
|
||||||
/>
|
size="sm"
|
||||||
</svg>
|
variant="flat"
|
||||||
) : (
|
onPress={deselectAll}
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
>
|
||||||
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
|
清空
|
||||||
</svg>
|
</Button>
|
||||||
)}
|
<Button
|
||||||
</Button>
|
color="danger"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => setBatchDeleteModalOpen(true)}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="warning"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
isLoading={batchLoading}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => handleBatchToggleService(false)}
|
||||||
|
>
|
||||||
|
停用
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="success"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
isLoading={batchLoading}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => handleBatchToggleService(true)}
|
||||||
|
>
|
||||||
|
启用
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
isLoading={batchLoading}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={handleBatchRedeploy}
|
||||||
|
>
|
||||||
|
下发
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => setBatchChangeTunnelModalOpen(true)}
|
||||||
|
>
|
||||||
|
隧道
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="sm"
|
||||||
|
variant="solid"
|
||||||
|
onPress={toggleSelectMode}
|
||||||
|
>
|
||||||
|
退出
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* 筛选按钮 */}
|
||||||
|
<Button
|
||||||
|
isIconOnly
|
||||||
|
aria-label="筛选条件"
|
||||||
|
className={
|
||||||
|
filterUserId !== "all" || filterTunnelId !== "all"
|
||||||
|
? "bg-primary/20 text-primary relative"
|
||||||
|
: "text-default-600 relative"
|
||||||
|
}
|
||||||
|
color={
|
||||||
|
filterUserId !== "all" || filterTunnelId !== "all"
|
||||||
|
? "primary"
|
||||||
|
: "default"
|
||||||
|
}
|
||||||
|
size="sm"
|
||||||
|
title="筛选条件"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => setIsFilterModalOpen(true)}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="w-4 h-4"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{(filterUserId !== "all" || filterTunnelId !== "all") && (
|
||||||
|
<span className="absolute top-1.5 right-1.5 flex h-1.5 w-1.5 rounded-full bg-primary" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
{/* 显示模式切换按钮 */}
|
||||||
|
<Button
|
||||||
|
isIconOnly
|
||||||
|
aria-label={
|
||||||
|
viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
|
||||||
|
}
|
||||||
|
className="text-sm"
|
||||||
|
color="default"
|
||||||
|
size="sm"
|
||||||
|
title={
|
||||||
|
viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
|
||||||
|
}
|
||||||
|
variant="flat"
|
||||||
|
onPress={handleViewModeChange}
|
||||||
|
>
|
||||||
|
{viewMode === "grouped" ? (
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="w-4 h-4"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
|
||||||
|
fillRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="w-4 h-4"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
{/* 导入按钮 */}
|
{/* 导入按钮 */}
|
||||||
<Button
|
<Button
|
||||||
color="warning"
|
color="warning"
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="flat"
|
variant="flat"
|
||||||
onPress={handleImport}
|
onPress={handleImport}
|
||||||
>
|
>
|
||||||
导入
|
导入
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{/* 导出按钮 */}
|
{/* 导出按钮 */}
|
||||||
<Button
|
<Button
|
||||||
color="success"
|
color="success"
|
||||||
isLoading={exportLoading}
|
isLoading={exportLoading}
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="flat"
|
variant="flat"
|
||||||
onPress={handleExport}
|
onPress={handleExport}
|
||||||
>
|
>
|
||||||
导出
|
导出
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
color={selectMode ? "secondary" : "default"}
|
className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
|
||||||
size="sm"
|
color="default"
|
||||||
variant={selectMode ? "solid" : "flat"}
|
size="sm"
|
||||||
onPress={toggleSelectMode}
|
variant="flat"
|
||||||
>
|
onPress={toggleSelectMode}
|
||||||
{selectMode ? "退出" : "批量"}
|
>
|
||||||
</Button>
|
批量
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
|
<Button
|
||||||
新增
|
color="primary"
|
||||||
</Button>
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={handleAdd}
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{selectMode && selectedIds.size > 0 && (
|
|
||||||
<div className="fixed bottom-7 left-1/2 z-50 w-[calc(100vw-1rem)] max-w-max -translate-x-1/2 overflow-x-auto rounded-lg border border-divider bg-content1 p-2 shadow-lg">
|
|
||||||
<div className="flex min-w-max items-center gap-2">
|
|
||||||
<span className="text-sm text-default-600 shrink-0">
|
|
||||||
已选择 {selectedIds.size} 项
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={selectAll}
|
|
||||||
>
|
|
||||||
全选
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={deselectAll}
|
|
||||||
>
|
|
||||||
清空
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="danger"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => setBatchDeleteModalOpen(true)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="warning"
|
|
||||||
isLoading={batchLoading}
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => handleBatchToggleService(false)}
|
|
||||||
>
|
|
||||||
停用
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="success"
|
|
||||||
isLoading={batchLoading}
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => handleBatchToggleService(true)}
|
|
||||||
>
|
|
||||||
启用
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
isLoading={batchLoading}
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={handleBatchRedeploy}
|
|
||||||
>
|
|
||||||
下发
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => setBatchChangeTunnelModalOpen(true)}
|
|
||||||
>
|
|
||||||
隧道
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 根据显示模式渲染不同内容 */}
|
{/* 根据显示模式渲染不同内容 */}
|
||||||
{viewMode === "grouped" ? (
|
{viewMode === "grouped" ? (
|
||||||
sortedForwards.length > 0 ? (
|
sortedForwards.length > 0 ? (
|
||||||
|
|||||||
@@ -1075,65 +1075,80 @@ export default function NodePage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0">
|
||||||
<Button
|
{selectMode ? (
|
||||||
color={selectMode ? "secondary" : "default"}
|
<>
|
||||||
size="sm"
|
<span className="text-sm text-default-600 shrink-0">
|
||||||
variant={selectMode ? "solid" : "flat"}
|
已选 {selectedIds.size} 项
|
||||||
onPress={toggleSelectMode}
|
</span>
|
||||||
>
|
<Button
|
||||||
{selectMode ? "退出" : "批量"}
|
color="primary"
|
||||||
</Button>
|
size="sm"
|
||||||
<Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
|
variant="flat"
|
||||||
新增
|
onPress={selectAll}
|
||||||
</Button>
|
>
|
||||||
|
全选
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={deselectAll}
|
||||||
|
>
|
||||||
|
清空
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="warning"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
isLoading={batchUpgradeLoading}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => openUpgradeModal("batch")}
|
||||||
|
>
|
||||||
|
升级
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="danger"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => setBatchDeleteModalOpen(true)}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="sm"
|
||||||
|
variant="solid"
|
||||||
|
onPress={toggleSelectMode}
|
||||||
|
>
|
||||||
|
退出
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
|
||||||
|
color="default"
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={toggleSelectMode}
|
||||||
|
>
|
||||||
|
批量
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={handleAdd}
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 批量操作浮动工具栏 */}
|
|
||||||
{selectMode && selectedIds.size > 0 && (
|
|
||||||
<div className="fixed bottom-7 left-1/2 z-50 w-[calc(100vw-1rem)] max-w-max -translate-x-1/2 overflow-x-auto rounded-lg border border-divider bg-content1 p-2 shadow-lg">
|
|
||||||
<div className="flex min-w-max items-center gap-2">
|
|
||||||
<span className="text-sm font-medium shrink-0">
|
|
||||||
已选 {selectedIds.size} 项
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={selectAll}
|
|
||||||
>
|
|
||||||
全选
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={deselectAll}
|
|
||||||
>
|
|
||||||
清空
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="warning"
|
|
||||||
isLoading={batchUpgradeLoading}
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => openUpgradeModal("batch")}
|
|
||||||
>
|
|
||||||
升级
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="danger"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => setBatchDeleteModalOpen(true)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!wsConnected && (
|
{!wsConnected && (
|
||||||
<Alert
|
<Alert
|
||||||
className="mb-4"
|
className="mb-4"
|
||||||
|
|||||||
@@ -710,64 +710,80 @@ export default function TunnelPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0">
|
||||||
<Button
|
{selectMode ? (
|
||||||
color={selectMode ? "secondary" : "default"}
|
<>
|
||||||
size="sm"
|
<span className="text-sm text-default-600 shrink-0">
|
||||||
variant={selectMode ? "solid" : "flat"}
|
已选择 {selectedIds.size} 项
|
||||||
onPress={toggleSelectMode}
|
</span>
|
||||||
>
|
<Button
|
||||||
{selectMode ? "退出" : "批量"}
|
color="primary"
|
||||||
</Button>
|
size="sm"
|
||||||
<Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
|
variant="flat"
|
||||||
新增
|
onPress={selectAll}
|
||||||
</Button>
|
>
|
||||||
|
全选
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={deselectAll}
|
||||||
|
>
|
||||||
|
清空
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="danger"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={() => setBatchDeleteModalOpen(true)}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
isDisabled={selectedIds.size === 0}
|
||||||
|
isLoading={batchLoading}
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={handleBatchRedeploy}
|
||||||
|
>
|
||||||
|
下发
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="sm"
|
||||||
|
variant="solid"
|
||||||
|
onPress={toggleSelectMode}
|
||||||
|
>
|
||||||
|
退出
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
|
||||||
|
color="default"
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={toggleSelectMode}
|
||||||
|
>
|
||||||
|
批量
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
variant="flat"
|
||||||
|
onPress={handleAdd}
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{selectMode && selectedIds.size > 0 && (
|
|
||||||
<div className="fixed bottom-7 left-1/2 z-50 w-[calc(100vw-1rem)] max-w-max -translate-x-1/2 overflow-x-auto rounded-lg border border-divider bg-content1 p-2 shadow-lg">
|
|
||||||
<div className="flex min-w-max items-center gap-2">
|
|
||||||
<span className="text-sm text-default-600 shrink-0">
|
|
||||||
已选择 {selectedIds.size} 项
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={selectAll}
|
|
||||||
>
|
|
||||||
全选
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={deselectAll}
|
|
||||||
>
|
|
||||||
清空
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="danger"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => setBatchDeleteModalOpen(true)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
isLoading={batchLoading}
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={handleBatchRedeploy}
|
|
||||||
>
|
|
||||||
下发
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 隧道卡片网格 */}
|
{/* 隧道卡片网格 */}
|
||||||
{tunnels.length > 0 ? (
|
{tunnels.length > 0 ? (
|
||||||
<DndContext sensors={sensors} onDragEnd={handleDragEnd}>
|
<DndContext sensors={sensors} onDragEnd={handleDragEnd}>
|
||||||
|
|||||||
Reference in New Issue
Block a user