fix: 前端页面架构重构优化

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 } from '@element-plus/icons-vue';
+import { Box, Close, CopyDocument, HomeFilled, OfficeBuilding, Search, Monitor } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
@@ -33,6 +33,10 @@ const modelTypeOptions = ref<ModelTypeOption[]>([]);
 // API类型选项
 const apiTypeOptions = ref<ModelApiTypeOption[]>([]);
 
+function goToMonitor() {
+  window.open('http://data.ccnetcore.com:91/', '_blank');
+}
+
 async function fetchModelList() {
   loading.value = true;
   try {
@@ -265,15 +269,20 @@ onMounted(() => {
               </div>
             </div>
           </div>
-          <el-button
+          <div class="monitor-card" @click="goToMonitor">
-            v-if="false"
+            <div class="monitor-icon">
-            :icon="HomeFilled"
+              <el-icon class="ecg-icon"><Monitor /></el-icon>
-            class="home-btn"
+            </div>
-            round
+            <div class="monitor-info">
-            @click="goToHome"
+              <div class="monitor-value">
-          >
+                实时监控
-            返回首页
+                <span class="live-dot" />
-          </el-button>
+              </div>
+              <div class="monitor-label">
+                服务可用性矩阵
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -662,20 +671,66 @@ onMounted(() => {
           }
         }
 
-        .home-btn {
+        .monitor-card {
-          background: rgba(255, 255, 255, 0.25);
+          background: rgba(255, 255, 255, 0.15);
-          border: 1px solid rgba(255, 255, 255, 0.4);
-          color: white;
           backdrop-filter: blur(10px);
-          padding: 10px 24px;
+          border: 1px solid rgba(255, 255, 255, 0.25);
-          font-weight: 500;
+          border-radius: 12px;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          padding: 12px 20px;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          cursor: pointer;
+          transition: all 0.3s;
           flex-shrink: 0;
 
           &:hover {
-            background: rgba(255, 255, 255, 0.35);
+            background: rgba(255, 255, 255, 0.25);
             transform: translateY(-2px);
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+
+            .ecg-icon {
+              animation: heartbeat 1.5s ease-in-out infinite both;
+            }
+          }
+
+          .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;
+          }
+
+          .monitor-info {
+            .monitor-value {
+              font-size: 16px;
+              font-weight: 700;
+              color: white;
+              line-height: 1.2;
+              margin-bottom: 2px;
+              display: flex;
+              align-items: center;
+              gap: 6px;
+
+              .live-dot {
+                width: 8px;
+                height: 8px;
+                background-color: #67c23a;
+                border-radius: 50%;
+                box-shadow: 0 0 8px #67c23a;
+                animation: pulse 2s infinite;
+              }
+            }
+
+            .monitor-label {
+              font-size: 12px;
+              color: rgba(255, 255, 255, 0.9);
+            }
           }
         }
       }
@@ -1161,7 +1216,7 @@ onMounted(() => {
             }
           }
 
-          .home-btn {
+          .monitor-card {
             width: 100%;
           }
         }
@@ -1380,4 +1435,18 @@ onMounted(() => {
     transform: translateX(0);
   }
 }
+
+@keyframes heartbeat {
+  0% { transform: scale(1); }
+  14% { transform: scale(1.3); }
+  28% { transform: scale(1); }
+  42% { transform: scale(1.3); }
+  70% { transform: scale(1); }
+}
+
+@keyframes pulse {
+  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7); }
+  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); }
+}
 </style>