diff --git a/web/src/components/monitor/MiniChart.tsx b/web/src/components/monitor/MiniChart.tsx index b85693d..27f5924 100644 --- a/web/src/components/monitor/MiniChart.tsx +++ b/web/src/components/monitor/MiniChart.tsx @@ -1,12 +1,12 @@ -import { Area, AreaChart, ResponsiveContainer } from 'recharts'; +import {Area, AreaChart, ResponsiveContainer} from 'recharts'; interface MiniChartProps { data: Array<{ time: string; value: number }>; - status: string; + lastValue?: number; id: string; } -export const MiniChart = ({ data, status, id }: MiniChartProps) => { +export const MiniChart = ({data, lastValue, id}: MiniChartProps) => { if (!data || data.length === 0) { return (
@@ -15,7 +15,7 @@ export const MiniChart = ({ data, status, id }: MiniChartProps) => { ); } - const color = status === 'up' ? '#10b981' : status === 'down' ? '#f59e0b' : '#94a3b8'; + const color = lastValue <= 200 ? '#22d3ee' : '#fbbf24'; return (
@@ -23,18 +23,24 @@ export const MiniChart = ({ data, status, id }: MiniChartProps) => { - - + + + + + + + + + diff --git a/web/src/pages/Public/MonitorList.tsx b/web/src/pages/Public/MonitorList.tsx index 7e70346..e2a1a20 100644 --- a/web/src/pages/Public/MonitorList.tsx +++ b/web/src/pages/Public/MonitorList.tsx @@ -128,12 +128,12 @@ const MonitorCard = ({monitor, displayMode}: {
-
- TARGET_ID: {monitor.id.toString().substring(0, 8)} -

{monitor.name}

+
+ {monitor.target} +
@@ -153,12 +153,9 @@ const MonitorCard = ({monitor, displayMode}: { )}

-

200 ? 'text-amber-400' : 'text-cyan-100' - )}> - {displayValue} ms -

+
200 ? 'text-amber-400 drop-shadow-[0_0_8px_rgba(251,191,36,0.5)]' : 'text-white drop-shadow-[0_0_8px_rgba(34,211,238,0.5)]'}`}> + {displayValue}ms +
{monitor.type === 'https' && monitor.certExpiryTime ? ( @@ -183,7 +180,7 @@ const MonitorCard = ({monitor, displayMode}: { {/* 迷你走势图 */}