refactor: update monitor dashboard visuals with new background images…

frontend/pages/monitor-dashboard/components/MonitorCenterPanorama.jsx

@@ -1,4 +1,4 @@
-import centerBg from "../images/centerpic6.png";
+import centerBg from "../images/centerpic8.png";
 import centerTopBg from "../images/centertopbg1.png";
 import intl from "react-intl-universal";
 
@@ -23,12 +23,12 @@ export default function MonitorCenterPanorama({ kpis, loading }) {
 
   return (
     <div className="flex h-full w-full min-w-0 flex-col lg:col-span-2">
-      <div className="flex h-full min-h-0 w-full flex-col overflow-hidden relative">
+      <div className="flex h-full min-h-0 w-full flex-col relative">
         <div className="box-border min-h-0 w-full min-w-full flex-1 self-stretch flex flex-col">
           {/* 指标卡区域 */}
           <div className="z-10 flex gap-2 justify-between lg:justify-start mb-4 h-[110px] px-2">
             {cards.map((card, index) => (
-              <div 
+              <div
                 key={index}
                 className="relative flex-1 flex flex-col items-center bg-center bg-[length:100%_100%] bg-no-repeat transition-transform hover:scale-105 duration-300 mx-1"
                 style={{ backgroundImage: `url(${centerTopBg})` }}
@@ -55,9 +55,14 @@ export default function MonitorCenterPanorama({ kpis, loading }) {
           {/* 全景图片内容区域 */}
           <div
             className="w-full flex-1 min-h-0 bg-contain bg-center bg-no-repeat"
-            style={{ backgroundImage: `url(${centerBg})` }}
+            // style={{ backgroundImage: `url(${centerBg})` }}
             aria-hidden
-          />
+          >
+            <div
+              className="absolute -top-[20px] -left-[100px] h-[calc(100%+200px)] w-[calc(100%+200px)] bg-contain bg-center bg-no-repeat"
+              style={{ backgroundImage: `url(${centerBg})` }}
+            />
+          </div>
         </div>
       </div>
     </div>

frontend/pages/monitor-dashboard/components/MonitorPanel.jsx

@@ -1,7 +1,7 @@
 export default function MonitorPanel({ title, children, className = "", headerExtra }) {
   return (
     <div
-      className={`relative bg-[#020b1a]/60 border border-[#16436e] shadow-[inset_0_0_20px_rgba(0,163,255,0.1)] rounded flex flex-col backdrop-blur-sm overflow-hidden ${className}`}
+      className={`relative bg-[#020b1a]/10 border border-[#16436e] shadow-[inset_0_0_20px_rgba(0,163,255,0.1)] rounded flex flex-col backdrop-blur-sm overflow-hidden ${className}`}
     >
       <div className="absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 border-[#00f0ff]" />
       <div className="absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 border-[#00f0ff]" />

frontend/pages/monitor-dashboard/index.jsx

@@ -6,9 +6,8 @@ import intl from "react-intl-universal";
 import { useMonitorFullscreen } from "./hooks/useMonitorFullscreen.js";
 import { useMonitorDashboard } from "./hooks/useMonitorDashboard.js";
 import { useMonitorSession } from "./hooks/useMonitorSession.js";
-import bgImage from "./images/opsRobotbg3.png";
-import topBg from "./images/centertopbg3.png";
-import topLineBg from "./images/toplinebg1.png";
+import topBg from "./images/topbg3.png";
+import topLineBg from "./images/toplinebg2.png";
 
 export default function MonitorDashboard() {
   const { containerRef, isFullscreen, toggleFullscreen } = useMonitorFullscreen();
@@ -28,7 +27,7 @@ export default function MonitorDashboard() {
   return (
     <div
       ref={containerRef}
-      className={`w-full bg-[#010611] flex-1 text-white p-2 pt-0 font-sans selection:bg-[#00f0ff]/30 flex flex-col gap-0 relative overflow-y-auto lg:overflow-hidden ${
+      className={`w-full bg-[#061333] flex-1 text-white p-2 pt-0 font-sans selection:bg-[#00f0ff]/30 flex flex-col gap-0 relative overflow-y-auto lg:overflow-hidden ${
         isFullscreen ? "h-screen" : "min-h-[750px]"
       }`}
       // style={{
@@ -41,7 +40,7 @@ export default function MonitorDashboard() {
     >
       {/* 顶部贯穿背景线 */}
       <div 
-        className="absolute top-0 left-0 w-full h-[24px] z-9 pointer-events-none"
+        className="absolute top-0 left-0 w-full h-[28px] z-9 pointer-events-none"
         style={{
           backgroundImage: `url(${topLineBg})`,
           backgroundRepeat: "repeat-x",
@@ -106,7 +105,7 @@ export default function MonitorDashboard() {
         />
       </div>
 
-      <div className="mt-3 flex min-h-0 flex-[3] flex-col">
+      <div className="mt-3 flex min-h-0 flex-[3] flex-col z-50">
         <MonitorBottomRow
           topInstances={otelData?.topInstances}
           tokenDistribution={otelData?.tokenDistribution}