From 018e15d78c7eeab89103b618c47f9aaf4d929562 Mon Sep 17 00:00:00 2001 From: Montia37 Date: Wed, 27 Aug 2025 16:19:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=BB=B6=E8=BF=9F?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=EF=BC=8C=E6=B7=BB=E5=8A=A0=E8=BF=9E=E6=8E=A5?= =?UTF-8?q?=E6=96=AD=E7=82=B9=E6=8E=A7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- komari-theme.json | 7 +++++++ src/config/ConfigProvider.tsx | 2 ++ src/config/default.ts | 2 ++ src/pages/instance/Instance.tsx | 6 ++++-- src/pages/instance/PingChart.tsx | 31 ++++++++++++++++++++++++------- 5 files changed, 39 insertions(+), 9 deletions(-) diff --git a/komari-theme.json b/komari-theme.json index bceb650..64dfa99 100644 --- a/komari-theme.json +++ b/komari-theme.json @@ -147,6 +147,13 @@ "default": true, "help": "启用后默认显示延迟图表" }, + { + "key": "enableConnectBreaks", + "name": "启用连接断点", + "type": "switch", + "default": false, + "help": "启用后图表中的曲线将会跨过断点形成连续的线条，并使用半透明的垂直参考线来标记断点位置" + }, { "key": "pingChatrtMaxPoints", "name": "延迟图表最大渲染点数", diff --git a/src/config/ConfigProvider.tsx b/src/config/ConfigProvider.tsx index 4e9c344..75e7107 100644 --- a/src/config/ConfigProvider.tsx +++ b/src/config/ConfigProvider.tsx @@ -97,6 +97,8 @@ export function ConfigProvider({ enableInstanceDetail: theme.enableInstanceDetail ?? DEFAULT_CONFIG.enableInstanceDetail, enablePingChart: theme.enablePingChart ?? DEFAULT_CONFIG.enablePingChart, + enableConnectBreaks: + theme.enableConnectBreaks ?? DEFAULT_CONFIG.enableConnectBreaks, pingChartMaxPoints: theme.pingChartMaxPoints || DEFAULT_CONFIG.pingChartMaxPoints, backgroundImage, diff --git a/src/config/default.ts b/src/config/default.ts index 2646675..e0d8a7c 100644 --- a/src/config/default.ts +++ b/src/config/default.ts @@ -16,6 +16,7 @@ export interface ConfigOptions { enableGroupedBar?: boolean; // 是否启用分组栏 enableInstanceDetail?: boolean; // 是否启用实例详情 enablePingChart?: boolean; // 是否启用延迟图表 + enableConnectBreaks?: boolean; // 是否启用连接断点 pingChartMaxPoints?: number; // 延迟图表最大点数 enableSwap?: boolean; // 是否启用SWAP显示 } @@ -39,6 +40,7 @@ export const DEFAULT_CONFIG: ConfigOptions = { enableGroupedBar: true, enableInstanceDetail: true, enablePingChart: true, + enableConnectBreaks: false, pingChartMaxPoints: 0, enableSwap: true, }; diff --git a/src/pages/instance/Instance.tsx b/src/pages/instance/Instance.tsx index 09d20d6..a735e20 100644 --- a/src/pages/instance/Instance.tsx +++ b/src/pages/instance/Instance.tsx @@ -117,11 +117,13 @@ const Instance = memo(({ node }: InstanceProps) => {

总流量

- {node.traffic_limit && isOnline && ( + {node.traffic_limit !== 0 && isOnline && stats && ( )}
diff --git a/src/pages/instance/PingChart.tsx b/src/pages/instance/PingChart.tsx index d9f307c..7ca7d8f 100644 --- a/src/pages/instance/PingChart.tsx +++ b/src/pages/instance/PingChart.tsx @@ -31,7 +31,9 @@ const PingChart = memo(({ node, hours }: PingChartProps) => { const [visiblePingTasks, setVisiblePingTasks] = useState([]); const [timeRange, setTimeRange] = useState<[number, number] | null>(null); const [cutPeak, setCutPeak] = useState(false); - const [connectBreaks, setConnectBreaks] = useState(false); + const [connectBreaks, setConnectBreaks] = useState( + useConfigItem("enableConnectBreaks") + ); const maxPointsToRender = useConfigItem("pingChartMaxPoints") || 0; // 0表示不限制 useEffect(() => { @@ -147,12 +149,27 @@ const PingChart = memo(({ node, hours }: PingChartProps) => { }, [pingHistory?.tasks]); const generateColor = useCallback( - (taskName: string, total: number, isBreakPoints?: boolean) => { + (taskName: string, total: number) => { const index = sortedTasks.findIndex((t) => t.name === taskName); if (index === -1) return "#000000"; // Fallback color const hue = (index * (360 / total)) % 360; - return `hsla(${hue}, 50%, 60%, ${isBreakPoints ? 0.7 : 1})`; + + // 使用OKLCH色彩空间，优化折线图的颜色区分度 + // L=0.7 (较高亮度，便于在图表背景上清晰显示) + // C=0.2 (较高饱和度，增强颜色区分度) + const oklchColor = `oklch(0.6 0.2 ${hue} / .8)`; + + // 为不支持OKLCH的浏览器提供HSL备用色 + // 使用更高的饱和度和适中的亮度来匹配OKLCH的视觉效果 + const hslFallback = `hsl(${hue}, 50%, 60%)`; + + // 检查浏览器是否支持OKLCH + if (CSS.supports("color", oklchColor)) { + return oklchColor; + } else { + return hslFallback; + } }, [sortedTasks] ); @@ -180,7 +197,7 @@ const PingChart = memo(({ node, hours }: PingChartProps) => { if (isBreak) { points.push({ x: currentPoint.time, - color: generateColor(task.name, sortedTasks.length, true), + color: generateColor(task.name, sortedTasks.length), }); } } @@ -271,7 +288,7 @@ const PingChart = memo(({ node, hours }: PingChartProps) => { 关于连接断点的提示

当您开启"连接断点"功能后，图表中的曲线将会跨过那些由于网络问题或其他原因导致的丢包点，形成一条连续的线条。同时，系统会在丢包位置显示半透明的垂直参考线来标记断点位置。

', + '

关于连接断点的提示

默认关闭，可在后台配置

当您开启"连接断点"功能后，图表中的曲线将会跨过那些由于网络问题或其他原因导致的丢包点，形成一条连续的线条。同时，系统会在丢包位置显示半透明的垂直参考线来标记断点位置。

', }} /> @@ -322,14 +339,14 @@ const PingChart = memo(({ node, hours }: PingChartProps) => { key={`break-${index}`} x={point.x} stroke={point.color} - strokeWidth={1} + strokeWidth={1.5} strokeOpacity={0.5} /> ))} {sortedTasks.map((task) => (