tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-07 18:26:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): move batch operations into top toolbar (#198)

Browse Source 
## 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
2026-02-23 21:30:57 +08:00
committed by GitHub
parent 191aface2e 880a3b81b0
commit d752e096a3
3 changed files with 335 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/pages/forward.tsx
+97 -76
View File
@@ -1722,7 +1722,87 @@ 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 ? (
<>
<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"
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 <Button
isIconOnly isIconOnly
@@ -1769,7 +1849,9 @@ export default function ForwardPage() {
className="text-sm" className="text-sm"
color="default" color="default"
size="sm" size="sm"
title={viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"} title={
viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
}
variant="flat" variant="flat"
onPress={handleViewModeChange} onPress={handleViewModeChange}
> >
@@ -1820,88 +1902,27 @@ export default function ForwardPage() {
</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"
color="default"
size="sm" size="sm"
variant={selectMode ? "solid" : "flat"} variant="flat"
onPress={toggleSelectMode} onPress={toggleSelectMode}
> >
{selectMode ? "退出" : "批量"} 批量
</Button> </Button>
<Button color="primary" size="sm" variant="flat" onPress={handleAdd}> <Button
color="primary"
size="sm"
variant="flat"
onPress={handleAdd}
>
新增 新增
</Button> </Button>
</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>
)} )}
</div>
</div>
{/* 根据显示模式渲染不同内容 */} {/* 根据显示模式渲染不同内容 */}
{viewMode === "grouped" ? ( {viewMode === "grouped" ? (
vite-frontend/src/pages/node.tsx
+37 -22
View File
@@ -1075,26 +1075,10 @@ 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"}
onPress={toggleSelectMode}
>
{selectMode ? "退出" : "批量"}
</Button>
<Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
新增
</Button>
</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} 项 已选 {selectedIds.size} 项
</span> </span>
<Button <Button
@@ -1115,6 +1099,7 @@ export default function NodePage() {
</Button> </Button>
<Button <Button
color="warning" color="warning"
isDisabled={selectedIds.size === 0}
isLoading={batchUpgradeLoading} isLoading={batchUpgradeLoading}
size="sm" size="sm"
variant="flat" variant="flat"
@@ -1124,15 +1109,45 @@ export default function NodePage() {
</Button> </Button>
<Button <Button
color="danger" color="danger"
isDisabled={selectedIds.size === 0}
size="sm" size="sm"
variant="flat" variant="flat"
onPress={() => setBatchDeleteModalOpen(true)} onPress={() => setBatchDeleteModalOpen(true)}
> >
删除 删除
</Button> </Button>
</div> <Button
</div> 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>
{!wsConnected && ( {!wsConnected && (
<Alert <Alert
vite-frontend/src/pages/tunnel.tsx
+36 -20
View File
@@ -710,24 +710,9 @@ 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"
variant={selectMode ? "solid" : "flat"}
onPress={toggleSelectMode}
>
{selectMode ? "退出" : "批量"}
</Button>
<Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
新增
</Button>
</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"> <span className="text-sm text-default-600 shrink-0">
已选择 {selectedIds.size} 项 已选择 {selectedIds.size} 项
</span> </span>
@@ -749,6 +734,7 @@ export default function TunnelPage() {
</Button> </Button>
<Button <Button
color="danger" color="danger"
isDisabled={selectedIds.size === 0}
size="sm" size="sm"
variant="flat" variant="flat"
onPress={() => setBatchDeleteModalOpen(true)} onPress={() => setBatchDeleteModalOpen(true)}
@@ -757,6 +743,7 @@ export default function TunnelPage() {
</Button> </Button>
<Button <Button
color="primary" color="primary"
isDisabled={selectedIds.size === 0}
isLoading={batchLoading} isLoading={batchLoading}
size="sm" size="sm"
variant="flat" variant="flat"
@@ -764,9 +751,38 @@ export default function TunnelPage() {
> >
下发 下发
</Button> </Button>
</div> <Button
</div> 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>
{/* 隧道卡片网格 */} {/* 隧道卡片网格 */}
{tunnels.length > 0 ? ( {tunnels.length > 0 ? (