feat: 完成排行榜功能

Yi.Ai.Vue3/src/layouts/components/Header/index.vue

@@ -12,7 +12,6 @@ import Avatar from './components/Avatar.vue';
 import BuyBtn from './components/BuyBtn.vue';
 import ContactUsBtn from './components/ContactUsBtn.vue';
 import LoginBtn from './components/LoginBtn.vue';
-import ModelLibraryBtn from './components/ModelLibraryBtn.vue';
 import ThemeBtn from './components/ThemeBtn.vue';
 
 const router = useRouter();
@@ -42,7 +41,7 @@ const mobileMenuVisible = ref(false);
 const activeIndex = computed(() => {
   if (route.path.startsWith('/console'))
     return 'console';
-  if (route.path.startsWith('/model-library'))
+  if (route.path.startsWith('/model-library') || route.path.startsWith('/ranking'))
     return 'model-library';
   if (route.path.includes('/chat/'))
     return 'chat';
@@ -71,6 +70,19 @@ function handleConsoleClick(e: MouseEvent) {
   mobileMenuVisible.value = false;
 }
 
+// 修改模型库菜单的点击事件
+function handleModelLibraryClick(e: MouseEvent) {
+  e.stopPropagation(); // 阻止事件冒泡
+  router.push('/model-library');
+  mobileMenuVisible.value = false;
+}
+
+// 跳转到模型监控外部链接
+function goToModelMonitor() {
+  window.open('http://data.ccnetcore.com:91/?period=24h', '_blank');
+  mobileMenuVisible.value = false;
+}
+
 // 切换移动端菜单
 function toggleMobileMenu() {
   mobileMenuVisible.value = !mobileMenuVisible.value;
@@ -122,10 +134,18 @@ function toggleMobileMenu() {
           <AnnouncementBtn :is-menu-item="true" />
         </el-menu-item>
 
-        <!-- 模型库 -->
-        <el-menu-item index="/model-library" class="custom-menu-item">
-          <ModelLibraryBtn :is-menu-item="true" />
-        </el-menu-item>
+        <!-- 模型库下拉菜单 -->
+        <el-sub-menu index="model-library" class="model-library-submenu" popper-class="custom-popover">
+          <template #title>
+            <span class="menu-title" @click="handleModelLibraryClick">模型库</span>
+          </template>
+          <el-menu-item index="/ranking">
+            模型排行榜
+          </el-menu-item>
+          <el-menu-item index="no-route" @click="goToModelMonitor">
+            模型监控
+          </el-menu-item>
+        </el-sub-menu>
 
         <!-- AI教程 -->
         <el-menu-item class="custom-menu-item" index="no-route">
@@ -254,11 +274,19 @@ function toggleMobileMenu() {
           </el-menu-item>
         </el-sub-menu>
 
-        <!-- 模型库 -->
-        <el-menu-item index="/model-library">
-          <el-icon><Box /></el-icon>
-          <span>模型库</span>
-        </el-menu-item>
+        <!-- 模型库下拉菜单 -->
+        <el-sub-menu index="model-library">
+          <template #title>
+            <el-icon><Box /></el-icon>
+            <span>模型库</span>
+          </template>
+          <el-menu-item index="/ranking">
+            模型排行榜
+          </el-menu-item>
+          <el-menu-item index="no-route" @click="goToModelMonitor">
+            模型监控
+          </el-menu-item>
+        </el-sub-menu>
 
         <!-- 控制台 -->
         <el-sub-menu index="console">
@@ -412,9 +440,10 @@ function toggleMobileMenu() {
   }
 }
 
-// 聊天和控制台子菜单
+// 聊天、模型库和控制台子菜单
 .chat-submenu,
-.console-submenu {
+.console-submenu,
+.model-library-submenu {
   :deep(.el-sub-menu__title) {
     display: flex;
     align-items: center;
@@ -674,4 +703,7 @@ function toggleMobileMenu() {
     }
   }
 }
+.el-sub-menu .el-sub-menu__icon-arrow{
+  margin-right: -20px;
+}
 </style>