From 0d4d847e0873474c1b3b256931a87ac59391d961 Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Fri, 9 Jan 2026 20:27:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A8=A1=E5=9E=8B=E5=BA=93=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Ai.Vue3/src/pages/modelLibrary/index.vue | 547 ++++++++++++++++++--
 1 file changed, 496 insertions(+), 51 deletions(-)

diff --git a/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue b/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue
index 88c00f34..5b890010 100644
--- a/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue
+++ b/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModelApiTypeOption, ModelLibraryDto, ModelTypeOption } from '@/api/model/types';
-import { Box, Close, CopyDocument, HomeFilled, OfficeBuilding, Search, Monitor } from '@element-plus/icons-vue';
+import { Box, Close, CopyDocument, OfficeBuilding, Search } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
@@ -281,18 +281,65 @@ onMounted(() => {
             </div>
           </div>
           <div class="monitor-card" @click="goToMonitor">
-            <div class="monitor-icon">
-              <el-icon class="ecg-icon"><Monitor /></el-icon>
+            <!-- 动态网格背景 -->
+            <div class="grid-background">
+              <div v-for="i in 6" :key="`line-${i}`" class="grid-line" />
             </div>
-            <div class="monitor-info">
-              <div class="monitor-value">
-                实时监控
-                <span class="live-dot" />
+
+            <!-- 扫描线效果 -->
+            <div class="scan-line" />
+
+            <!-- 粒子效果 -->
+            <div class="particles">
+              <span v-for="i in 8" :key="`particle-${i}`" class="particle" />
+            </div>
+
+            <div class="monitor-content">
+              <!-- 左侧：3D 旋转立方体 + 脉冲圆环 -->
+              <div class="monitor-visual">
+                <div class="pulse-rings">
+                  <div class="pulse-ring" />
+                  <div class="pulse-ring" />
+                  <div class="pulse-ring" />
+                </div>
+                <div class="cube-container">
+                  <div class="cube">
+                    <div class="cube-face front" />
+                    <div class="cube-face back" />
+                    <div class="cube-face left" />
+                    <div class="cube-face right" />
+                    <div class="cube-face top" />
+                    <div class="cube-face bottom" />
+                  </div>
+                </div>
+                <div class="status-dot">
+                  <span class="dot-core" />
+                </div>
               </div>
-              <div class="monitor-label">
-                服务可用性矩阵
+
+              <!-- 右侧：信息 + 实时数据流 -->
+              <div class="monitor-info">
+                <div class="monitor-header">
+                  <span class="status-badge">
+                    <span class="badge-dot" />
+                    LIVE
+                  </span>
+                  <div class="monitor-title">
+                    实时监控
+                  </div>
+                </div>
+                <div class="monitor-subtitle">
+                  服务可用性矩阵
+                </div>
+                <!-- 实时数据波形 -->
+                <div class="waveform">
+                  <span v-for="i in 12" :key="`bar-${i}`" class="wave-bar" />
+                </div>
               </div>
             </div>
+
+            <!-- 边框光效 -->
+            <div class="border-glow" />
           </div>
         </div>
       </div>
@@ -684,64 +731,345 @@ onMounted(() => {
         }
 
         .monitor-card {
-          background: rgba(255, 255, 255, 0.15);
-          backdrop-filter: blur(10px);
-          border: 1px solid rgba(255, 255, 255, 0.25);
-          border-radius: 12px;
-          padding: 12px 20px;
-          display: flex;
-          align-items: center;
-          gap: 12px;
+          background: rgba(10, 15, 30, 0.6);
+          backdrop-filter: blur(20px);
+          border: 1px solid rgba(103, 194, 58, 0.3);
+          border-radius: 20px;
+          padding: 20px 28px;
           cursor: pointer;
-          transition: all 0.3s;
+          transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
           flex-shrink: 0;
+          position: relative;
+          overflow: hidden;
+          min-width: 280px;
+          box-shadow:
+            0 8px 32px rgba(0, 0, 0, 0.3),
+            inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg,
+              rgba(103, 194, 58, 0.1) 0%,
+              rgba(64, 158, 255, 0.1) 100%);
+            opacity: 0;
+            transition: opacity 0.5s;
+          }
 
           &:hover {
-            background: rgba(255, 255, 255, 0.25);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+            transform: translateY(-6px) scale(1.03);
+            border-color: rgba(103, 194, 58, 0.6);
+            box-shadow:
+              0 16px 48px rgba(103, 194, 58, 0.3),
+              0 0 80px rgba(103, 194, 58, 0.2),
+              inset 0 1px 0 rgba(255, 255, 255, 0.2);
 
-            .ecg-icon {
-              animation: heartbeat 1.5s ease-in-out infinite both;
+            &::before {
+              opacity: 1;
+            }
+
+            .cube {
+              animation: cubeRotate 3s linear infinite;
+            }
+
+            .scan-line {
+              animation: scanMove 2s linear infinite;
+            }
+
+            .wave-bar {
+              animation: waveformPulse 0.8s ease-in-out infinite;
+            }
+
+            .border-glow {
+              opacity: 1;
             }
           }
 
-          .monitor-icon {
-            width: 40px;
-            height: 40px;
-            background: rgba(255, 255, 255, 0.25);
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 20px;
-            color: white;
+          // 动态网格背景
+          .grid-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            opacity: 0.15;
+            pointer-events: none;
+
+            .grid-line {
+              position: absolute;
+              background: linear-gradient(90deg, transparent, rgba(103, 194, 58, 0.3), transparent);
+              height: 1px;
+              width: 100%;
+              animation: gridFlow 3s ease-in-out infinite;
+
+              &:nth-child(1) { top: 16.66%; animation-delay: 0.2s; }
+              &:nth-child(2) { top: 33.32%; animation-delay: 0.4s; }
+              &:nth-child(3) { top: 49.98%; animation-delay: 0.6s; }
+              &:nth-child(4) { top: 66.64%; animation-delay: 0.8s; }
+              &:nth-child(5) { top: 83.3%; animation-delay: 1s; }
+              &:nth-child(6) { top: 99.96%; animation-delay: 1.2s; }
+            }
           }
 
-          .monitor-info {
-            .monitor-value {
-              font-size: 16px;
-              font-weight: 700;
-              color: white;
-              line-height: 1.2;
-              margin-bottom: 2px;
+          // 扫描线
+          .scan-line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, rgba(103, 194, 58, 0.8), transparent);
+            box-shadow: 0 0 10px rgba(103, 194, 58, 0.8);
+            pointer-events: none;
+          }
+
+          // 粒子效果
+          .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+
+            .particle {
+              position: absolute;
+              width: 2px;
+              height: 2px;
+              background: rgba(103, 194, 58, 0.6);
+              border-radius: 50%;
+              animation: particleFloat 4s ease-in-out infinite;
+
+              &:nth-child(1) { left: 12%; animation-delay: 0.3s; animation-duration: 3.5s; }
+              &:nth-child(2) { left: 24%; animation-delay: 0.6s; animation-duration: 4s; }
+              &:nth-child(3) { left: 36%; animation-delay: 0.9s; animation-duration: 4.5s; }
+              &:nth-child(4) { left: 48%; animation-delay: 1.2s; animation-duration: 5s; }
+              &:nth-child(5) { left: 60%; animation-delay: 1.5s; animation-duration: 5.5s; }
+              &:nth-child(6) { left: 72%; animation-delay: 1.8s; animation-duration: 6s; }
+              &:nth-child(7) { left: 84%; animation-delay: 2.1s; animation-duration: 6.5s; }
+              &:nth-child(8) { left: 96%; animation-delay: 2.4s; animation-duration: 7s; }
+            }
+          }
+
+          // 边框光效
+          .border-glow {
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg,
+              rgba(103, 194, 58, 0.5),
+              rgba(64, 158, 255, 0.5),
+              rgba(103, 194, 58, 0.5));
+            background-size: 200% 200%;
+            border-radius: 20px;
+            opacity: 0;
+            filter: blur(8px);
+            z-index: -1;
+            animation: borderGlowMove 3s ease infinite;
+            transition: opacity 0.5s;
+          }
+
+          // 内容区域
+          .monitor-content {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            position: relative;
+            z-index: 1;
+
+            // 左侧视觉效果
+            .monitor-visual {
+              position: relative;
+              width: 70px;
+              height: 70px;
+              flex-shrink: 0;
               display: flex;
               align-items: center;
-              gap: 6px;
+              justify-content: center;
 
-              .live-dot {
-                width: 8px;
-                height: 8px;
-                background-color: #67c23a;
-                border-radius: 50%;
-                box-shadow: 0 0 8px #67c23a;
-                animation: pulse 2s infinite;
+              // 脉冲圆环
+              .pulse-rings {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+
+                .pulse-ring {
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  width: 70px;
+                  height: 70px;
+                  border: 2px solid rgba(103, 194, 58, 0.4);
+                  border-radius: 50%;
+                  transform: translate(-50%, -50%);
+                  animation: pulseRing 2s ease-out infinite;
+
+                  &:nth-child(2) {
+                    animation-delay: 0.6s;
+                  }
+
+                  &:nth-child(3) {
+                    animation-delay: 1.2s;
+                  }
+                }
+              }
+
+              // 3D立方体容器
+              .cube-container {
+                position: relative;
+                width: 40px;
+                height: 40px;
+                perspective: 200px;
+                z-index: 2;
+              }
+
+              // 3D立方体
+              .cube {
+                width: 100%;
+                height: 100%;
+                position: relative;
+                transform-style: preserve-3d;
+                transform: rotateX(-20deg) rotateY(-20deg);
+
+                .cube-face {
+                  position: absolute;
+                  width: 40px;
+                  height: 40px;
+                  background: rgba(103, 194, 58, 0.2);
+                  border: 1px solid rgba(103, 194, 58, 0.6);
+                  backdrop-filter: blur(5px);
+
+                  &.front {
+                    transform: translateZ(20px);
+                  }
+
+                  &.back {
+                    transform: translateZ(-20px) rotateY(180deg);
+                  }
+
+                  &.left {
+                    transform: translateX(-20px) rotateY(-90deg);
+                  }
+
+                  &.right {
+                    transform: translateX(20px) rotateY(90deg);
+                  }
+
+                  &.top {
+                    transform: translateY(-20px) rotateX(90deg);
+                  }
+
+                  &.bottom {
+                    transform: translateY(20px) rotateX(-90deg);
+                  }
+                }
+              }
+
+              // 状态点
+              .status-dot {
+                position: absolute;
+                top: 8px;
+                right: 8px;
+                z-index: 3;
+
+                .dot-core {
+                  display: block;
+                  width: 10px;
+                  height: 10px;
+                  background: #67c23a;
+                  border-radius: 50%;
+                  box-shadow:
+                    0 0 0 0 rgba(103, 194, 58, 0.7),
+                    0 0 15px rgba(103, 194, 58, 0.8);
+                  animation: statusDotPulse 2s ease-in-out infinite;
+                }
               }
             }
 
-            .monitor-label {
-              font-size: 12px;
-              color: rgba(255, 255, 255, 0.9);
+            // 右侧信息区域
+            .monitor-info {
+              flex: 1;
+              min-width: 0;
+
+              .monitor-header {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                margin-bottom: 6px;
+
+                .status-badge {
+                  display: inline-flex;
+                  align-items: center;
+                  gap: 5px;
+                  padding: 3px 10px;
+                  background: rgba(103, 194, 58, 0.2);
+                  border: 1px solid rgba(103, 194, 58, 0.5);
+                  border-radius: 12px;
+                  font-size: 11px;
+                  font-weight: 700;
+                  color: #67c23a;
+                  letter-spacing: 1px;
+                  text-transform: uppercase;
+
+                  .badge-dot {
+                    width: 6px;
+                    height: 6px;
+                    background: #67c23a;
+                    border-radius: 50%;
+                    animation: badgeDotBlink 1.5s ease-in-out infinite;
+                  }
+                }
+
+                .monitor-title {
+                  font-size: 18px;
+                  font-weight: 700;
+                  color: white;
+                  letter-spacing: 0.5px;
+                }
+              }
+
+              .monitor-subtitle {
+                font-size: 12px;
+                color: rgba(255, 255, 255, 0.7);
+                margin-bottom: 10px;
+                letter-spacing: 0.3px;
+              }
+
+              // 波形图
+              .waveform {
+                display: flex;
+                align-items: flex-end;
+                gap: 3px;
+                height: 24px;
+
+                .wave-bar {
+                  flex: 1;
+                  background: rgba(103, 194, 58, 0.4);
+                  border-radius: 2px 2px 0 0;
+                  min-width: 2px;
+                  transition: all 0.3s;
+
+                  &:nth-child(1) { height: 40%; }
+                  &:nth-child(2) { height: 70%; }
+                  &:nth-child(3) { height: 50%; }
+                  &:nth-child(4) { height: 85%; }
+                  &:nth-child(5) { height: 60%; }
+                  &:nth-child(6) { height: 90%; }
+                  &:nth-child(7) { height: 75%; }
+                  &:nth-child(8) { height: 55%; }
+                  &:nth-child(9) { height: 80%; }
+                  &:nth-child(10) { height: 65%; }
+                  &:nth-child(11) { height: 45%; }
+                  &:nth-child(12) { height: 70%; }
+                }
+              }
             }
           }
         }
@@ -1456,4 +1784,121 @@ onMounted(() => {
   70% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(103, 194, 58, 0); }
   100% { opacity: 1; box-shadow: 0 0 0 0 rgba(103, 194, 58, 0); }
 }
+
+// 网格流动
+@keyframes gridFlow {
+  0%, 100% {
+    opacity: 0.15;
+    transform: translateX(0);
+  }
+  50% {
+    opacity: 0.3;
+    transform: translateX(10px);
+  }
+}
+
+// 扫描线移动
+@keyframes scanMove {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    top: 100%;
+    opacity: 0;
+  }
+}
+
+// 粒子漂浮
+@keyframes particleFloat {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.6;
+  }
+  90% {
+    opacity: 0.6;
+  }
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+// 边框光效移动
+@keyframes borderGlowMove {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+// 脉冲圆环
+@keyframes pulseRing {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0.6;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.4);
+    opacity: 0;
+  }
+}
+
+// 3D立方体旋转
+@keyframes cubeRotate {
+  0% {
+    transform: rotateX(-20deg) rotateY(-20deg);
+  }
+  100% {
+    transform: rotateX(-20deg) rotateY(340deg);
+  }
+}
+
+// 状态点脉冲
+@keyframes statusDotPulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7), 0 0 15px rgba(103, 194, 58, 0.8);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(103, 194, 58, 0), 0 0 25px rgba(103, 194, 58, 1);
+  }
+}
+
+// 徽章点闪烁
+@keyframes badgeDotBlink {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+}
+
+// 波形脉冲
+@keyframes waveformPulse {
+  0%, 100% {
+    background: rgba(103, 194, 58, 0.4);
+    transform: scaleY(1);
+  }
+  50% {
+    background: rgba(103, 194, 58, 0.8);
+    transform: scaleY(1.3);
+  }
+}
 </style>