mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-29 07:56:37 +08:00
feat(node): split node page into local and remote sections
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import {
|
||||
DndContext,
|
||||
KeyboardSensor,
|
||||
@@ -66,7 +66,7 @@ import { useNodeOfflineTimers } from "@/pages/node/use-node-offline-timers";
|
||||
import { useNodeRealtime } from "@/pages/node/use-node-realtime";
|
||||
import { useLocalStorageState } from "@/hooks/use-local-storage-state";
|
||||
import { loadStoredOrder, saveOrder } from "@/utils/order-storage";
|
||||
import { PlusIcon, DeleteIcon, CheckAllIcon, XCircleIcon, ListCheckIcon, XIcon, ArrowUpIcon, ShareIcon } from "@/components/icons";
|
||||
|
||||
|
||||
interface Node {
|
||||
id: number;
|
||||
@@ -190,7 +190,6 @@ const SortableItem = ({
|
||||
};
|
||||
|
||||
export default function NodePage() {
|
||||
const navigate = useNavigate();
|
||||
const [nodeList, setNodeList] = useState<Node[]>([]);
|
||||
const [nodeOrder, setNodeOrder] = useState<number[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -1222,95 +1221,70 @@ export default function NodePage() {
|
||||
{selectMode ? (
|
||||
<>
|
||||
<span className="text-sm text-default-600 shrink-0">
|
||||
已选择 {selectedIds.size} 项
|
||||
已选 {selectedIds.size} 项
|
||||
</span>
|
||||
<Button
|
||||
isIconOnly
|
||||
color="primary"
|
||||
size="sm"
|
||||
title="全选"
|
||||
variant="flat"
|
||||
onPress={selectAll}
|
||||
>
|
||||
<CheckAllIcon className="w-4 h-4" />
|
||||
全选
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
color="secondary"
|
||||
size="sm"
|
||||
title="清空"
|
||||
variant="flat"
|
||||
onPress={deselectAll}
|
||||
>
|
||||
<XCircleIcon className="w-4 h-4" />
|
||||
清空
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
color="warning"
|
||||
isDisabled={selectedIds.size === 0}
|
||||
isLoading={batchUpgradeLoading}
|
||||
size="sm"
|
||||
title="升级"
|
||||
variant="flat"
|
||||
onPress={() => openUpgradeModal("batch")}
|
||||
>
|
||||
<ArrowUpIcon className="w-4 h-4" />
|
||||
升级
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
color="danger"
|
||||
isDisabled={selectedIds.size === 0}
|
||||
size="sm"
|
||||
title="删除"
|
||||
variant="flat"
|
||||
onPress={() => setBatchDeleteModalOpen(true)}
|
||||
>
|
||||
<DeleteIcon className="w-4 h-4" />
|
||||
删除
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
color="default"
|
||||
color="secondary"
|
||||
size="sm"
|
||||
title="退出"
|
||||
variant="solid"
|
||||
onPress={toggleSelectMode}
|
||||
>
|
||||
<XIcon className="w-4 h-4" />
|
||||
退出
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
isIconOnly
|
||||
className="bg-violet-100 text-violet-700 hover:bg-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:hover:bg-violet-900/45"
|
||||
className="bg-sky-100 text-sky-700 hover:bg-sky-200 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
|
||||
color="default"
|
||||
size="sm"
|
||||
title="选择"
|
||||
variant="flat"
|
||||
onPress={toggleSelectMode}
|
||||
>
|
||||
<ListCheckIcon className="w-4 h-4" />
|
||||
批量
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
className="bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:hover:bg-indigo-900/45"
|
||||
color="default"
|
||||
size="sm"
|
||||
title="面板共享"
|
||||
variant="flat"
|
||||
onPress={() => navigate("/panel-sharing")}
|
||||
>
|
||||
<ShareIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
color="primary"
|
||||
size="sm"
|
||||
title="新增"
|
||||
variant="flat"
|
||||
onPress={handleAdd}
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
新增
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user