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}: {
{/* 迷你走势图 */}