优化服务监控页面

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 (
             <div className="h-16 w-full flex items-center justify-center text-xs text-slate-400 dark:text-slate-500">
@@ -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 (
         <div className="h-16 w-full -mb-2">
@@ -23,18 +23,24 @@ export const MiniChart = ({ data, status, id }: MiniChartProps) => {
                 <AreaChart data={data}>
                     <defs>
                         <linearGradient id={`colorLatency-${id}`} x1="0" y1="0" x2="0" y2="1">
-                            <stop offset="5%" stopColor={color} stopOpacity={0.2} />
-                            <stop offset="95%" stopColor={color} stopOpacity={0} />
+                            <stop offset="0%" stopColor={color} stopOpacity={0.3}/>
+                            <stop offset="100%" stopColor={color} stopOpacity={0}/>
                         </linearGradient>
+                        <filter id="glow" height="300%" width="300%" x="-75%" y="-75%">
+                            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                            <feMerge>
+                                <feMergeNode in="coloredBlur"/>
+                                <feMergeNode in="SourceGraphic"/>
+                            </feMerge>
+                        </filter>
                     </defs>
                     <Area
                         type="monotone"
                         dataKey="value"
                         stroke={color}
-                        fillOpacity={1}
                         fill={`url(#colorLatency-${id})`}
-                        strokeWidth={1.5}
-                        isAnimationActive={false}
+                        strokeWidth={2}
+                        filter="url(#glow)"
                     />
                 </AreaChart>
             </ResponsiveContainer>

web/src/pages/Public/MonitorList.tsx

@@ -128,12 +128,12 @@ const MonitorCard = ({monitor, displayMode}: {
                         <TypeIcon type={monitor.type}/>
                     </div>
                     <div className="flex-1 min-w-0">
-                        <div className="text-xs font-mono text-cyan-500/60 mb-0.5 tracking-wider">
-                            TARGET_ID: {monitor.id.toString().substring(0, 8)}
-                        </div>
                         <h3 className="font-bold text-sm text-cyan-100 tracking-wide truncate group-hover:text-cyan-400 transition-colors">
                             {monitor.name}
                         </h3>
+                        <div className="text-xs font-mono text-cyan-500/60 mb-0.5 tracking-wider truncate">
+                            {monitor.target}
+                        </div>
                     </div>
                 </div>
                 <div className="flex-shrink-0 ml-2">
@@ -153,12 +153,9 @@ const MonitorCard = ({monitor, displayMode}: {
                                 </span>
                         )}
                     </p>
-                    <p className={cn(
-                        "text-xl font-bold flex items-end gap-1 font-mono",
-                        displayValue > 200 ? 'text-amber-400' : 'text-cyan-100'
-                    )}>
-                        {displayValue} <span className="text-xs font-normal text-cyan-600 mb-1">ms</span>
-                    </p>
+                    <div className={`text-xl font-bold flex items-baseline gap-1 ${displayValue > 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}<span className="text-xs text-cyan-600 font-normal">ms</span>
+                    </div>
                 </div>
                 <div>
                     {monitor.type === 'https' && monitor.certExpiryTime ? (
@@ -183,7 +180,7 @@ const MonitorCard = ({monitor, displayMode}: {
             {/* 迷你走势图 */}
             <MiniChart
                 data={chartData}
-                status={monitor.status}
+                lastValue={displayValue}
                 id={monitor.id}
             />
         </CyberCard>