From a649945566fc712d74652325af60a42821a25781 Mon Sep 17 00:00:00 2001 From: Montia37 Date: Fri, 5 Sep 2025 19:35:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E8=A7=86=E5=9B=BE=E8=BF=9B=E5=BA=A6=E6=9D=A1=E9=80=89=E9=A1=B9?= =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E8=BF=9B=E5=BA=A6=E6=9D=A1=E6=98=BE?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- komari-theme.json | 7 +++ src/components/sections/NodeCard.tsx | 26 ++--------- src/components/sections/NodeListItem.tsx | 58 +++++++++++++++++++----- src/components/ui/progress-bar.tsx | 10 +++- src/config/ConfigProvider.tsx | 3 ++ src/config/default.ts | 2 + src/pages/Home.tsx | 8 +++- src/utils/formatHelper.ts | 6 +++ 8 files changed, 84 insertions(+), 36 deletions(-) diff --git a/komari-theme.json b/komari-theme.json index 958adb5..2c1576c 100644 --- a/komari-theme.json +++ b/komari-theme.json @@ -129,6 +129,13 @@ "default": true, "help": "启用后默认显示 SWAP 信息" }, + { + "key": "enableListItemProgressBar", + "name": "启用列表视图进度条", + "type": "switch", + "default": true, + "help": "启用后列表视图中将会显示进度条来表示存储使用率" + }, { "name": "Instance 设置", "type": "title" diff --git a/src/components/sections/NodeCard.tsx b/src/components/sections/NodeCard.tsx index 4a4f11b..dec21df 100644 --- a/src/components/sections/NodeCard.tsx +++ b/src/components/sections/NodeCard.tsx @@ -33,12 +33,6 @@ export const NodeCard = ({ node, enableSwap }: NodeCardProps) => { trafficPercentage, } = useNodeCommons(node); - const getProgressBarClass = (percentage: number) => { - if (percentage > 90) return "bg-red-600"; - if (percentage > 50) return "bg-yellow-400"; - return "bg-green-500"; - }; - return ( {
CPU
- + {cpuUsage.toFixed(0)}%
内存
- + {memUsage.toFixed(0)}%
@@ -109,10 +97,7 @@ export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
SWAP
- + {node.swap_total > 0 ? ( {swapUsage.toFixed(0)}% ) : ( @@ -124,10 +109,7 @@ export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
硬盘
- + {diskUsage.toFixed(0)}%
diff --git a/src/components/sections/NodeListItem.tsx b/src/components/sections/NodeListItem.tsx index f7ba729..1919d75 100644 --- a/src/components/sections/NodeListItem.tsx +++ b/src/components/sections/NodeListItem.tsx @@ -6,13 +6,19 @@ import Flag from "./Flag"; import { Tag } from "../ui/tag"; import { useNodeCommons } from "@/hooks/useNodeCommons"; import { CircleProgress } from "../ui/circle-progress"; +import { ProgressBar } from "../ui/progress-bar"; interface NodeListItemProps { node: NodeWithStatus; enableSwap: boolean | undefined; + enableListItemProgressBar: boolean | undefined; } -export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => { +export const NodeListItem = ({ + node, + enableSwap, + enableListItemProgressBar, +}: NodeListItemProps) => { const { stats, isOnline, @@ -60,16 +66,32 @@ export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
{node.cpu_cores} Cores
-
{isOnline ? `${cpuUsage.toFixed(1)}%` : "N/A"}
+ {enableListItemProgressBar ? ( +
+ + + {isOnline ? `${cpuUsage.toFixed(0)}%` : "N/A"} + +
+ ) : ( +
{isOnline ? `${cpuUsage.toFixed(0)}%` : "N/A"}
+ )}
{formatBytes(node.mem_total)}
-
- {isOnline ? `${memUsage.toFixed(1)}%` : "N/A"} -
+ {enableListItemProgressBar ? ( +
+ + + {isOnline ? `${memUsage.toFixed(0)}%` : "N/A"} + +
+ ) : ( +
{isOnline ? `${memUsage.toFixed(0)}%` : "N/A"}
+ )}
{enableSwap && ( @@ -78,9 +100,16 @@ export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => { {node.swap_total > 0 ? (
{formatBytes(node.swap_total)}
-
- {isOnline ? `${swapUsage.toFixed(1)}%` : "N/A"} -
+ {enableListItemProgressBar ? ( +
+ + + {isOnline ? `${swapUsage.toFixed(0)}%` : "N/A"} + +
+ ) : ( +
{isOnline ? `${swapUsage.toFixed(0)}%` : "N/A"}
+ )}
) : (
OFF
@@ -91,9 +120,16 @@ export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
{formatBytes(node.disk_total)}
-
- {isOnline ? `${diskUsage.toFixed(1)}%` : "N/A"} -
+ {enableListItemProgressBar ? ( +
+ + + {isOnline ? `${diskUsage.toFixed(0)}%` : "N/A"} + +
+ ) : ( +
{isOnline ? `${diskUsage.toFixed(0)}%` : "N/A"}
+ )}
diff --git a/src/components/ui/progress-bar.tsx b/src/components/ui/progress-bar.tsx index 3472993..e2cba09 100644 --- a/src/components/ui/progress-bar.tsx +++ b/src/components/ui/progress-bar.tsx @@ -1,13 +1,19 @@ +import { getProgressBarClass } from "@/utils"; + export const ProgressBar = ({ value, + h = "h-3", className, }: { value: number; + h?: string; className?: string; }) => ( -
+
); diff --git a/src/config/ConfigProvider.tsx b/src/config/ConfigProvider.tsx index 75e7107..5c8b06b 100644 --- a/src/config/ConfigProvider.tsx +++ b/src/config/ConfigProvider.tsx @@ -105,6 +105,9 @@ export function ConfigProvider({ blurValue, blurBackgroundColor, enableSwap: theme.enableSwap ?? DEFAULT_CONFIG.enableSwap, + enableListItemProgressBar: + theme.enableListItemProgressBar ?? + DEFAULT_CONFIG.enableListItemProgressBar, }), [ theme, diff --git a/src/config/default.ts b/src/config/default.ts index e0d8a7c..5a290ab 100644 --- a/src/config/default.ts +++ b/src/config/default.ts @@ -19,6 +19,7 @@ export interface ConfigOptions { enableConnectBreaks?: boolean; // 是否启用连接断点 pingChartMaxPoints?: number; // 延迟图表最大点数 enableSwap?: boolean; // 是否启用SWAP显示 + enableListItemProgressBar?: boolean; // 是否启用列表视图进度条 } // 默认配置值 @@ -43,4 +44,5 @@ export const DEFAULT_CONFIG: ConfigOptions = { enableConnectBreaks: false, pingChartMaxPoints: 0, enableSwap: true, + enableListItemProgressBar: true, }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index fbde997..d636d3c 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -26,7 +26,12 @@ const HomePage: React.FC = ({ viewMode, searchTerm }) => { const [selectedGroup, setSelectedGroup] = useState( homeStateCache.selectedGroup ); - const { enableGroupedBar, enableStatsBar, enableSwap } = useAppConfig(); + const { + enableGroupedBar, + enableStatsBar, + enableSwap, + enableListItemProgressBar, + } = useAppConfig(); const [displayOptions, setDisplayOptions] = useState({ time: true, online: true, @@ -173,6 +178,7 @@ const HomePage: React.FC = ({ viewMode, searchTerm }) => { key={node.uuid} node={node} enableSwap={enableSwap} + enableListItemProgressBar={enableListItemProgressBar} /> ) )} diff --git a/src/utils/formatHelper.ts b/src/utils/formatHelper.ts index 3f0caa2..da50954 100644 --- a/src/utils/formatHelper.ts +++ b/src/utils/formatHelper.ts @@ -105,3 +105,9 @@ export const formatTrafficLimit = ( return `总 ${limitText} (${typeText})`; }; + +export const getProgressBarClass = (percentage: number) => { + if (percentage > 90) return "bg-red-600"; + if (percentage > 50) return "bg-yellow-400"; + return "bg-green-500"; +};