diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingGetListInput.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingGetListInput.cs
new file mode 100644
index 00000000..71f39c56
--- /dev/null
+++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingGetListInput.cs
@@ -0,0 +1,14 @@
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos;
+
+/// <summary>
+/// 排行榜查询输入
+/// </summary>
+public class RankingGetListInput
+{
+    /// <summary>
+    /// 排行榜类型：0-模型，1-工具，不传返回全部
+    /// </summary>
+    public RankingTypeEnum? Type { get; set; }
+}
diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingItemDto.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingItemDto.cs
new file mode 100644
index 00000000..12b478d8
--- /dev/null
+++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingItemDto.cs
@@ -0,0 +1,41 @@
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos;
+
+/// <summary>
+/// 排行榜项DTO
+/// </summary>
+public class RankingItemDto
+{
+    public Guid Id { get; set; }
+
+    /// <summary>
+    /// 名称
+    /// </summary>
+    public string Name { get; set; } = null!;
+
+    /// <summary>
+    /// 描述
+    /// </summary>
+    public string Description { get; set; } = null!;
+
+    /// <summary>
+    /// Logo地址
+    /// </summary>
+    public string? LogoUrl { get; set; }
+
+    /// <summary>
+    /// 得分
+    /// </summary>
+    public decimal Score { get; set; }
+
+    /// <summary>
+    /// 提供者
+    /// </summary>
+    public string Provider { get; set; } = null!;
+
+    /// <summary>
+    /// 排行榜类型
+    /// </summary>
+    public RankingTypeEnum Type { get; set; }
+}
diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/IServices/IRankingService.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/IServices/IRankingService.cs
new file mode 100644
index 00000000..d689d9eb
--- /dev/null
+++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/IServices/IRankingService.cs
@@ -0,0 +1,16 @@
+using Yi.Framework.AiHub.Application.Contracts.Dtos;
+
+namespace Yi.Framework.AiHub.Application.Contracts.IServices;
+
+/// <summary>
+/// 排行榜服务接口
+/// </summary>
+public interface IRankingService
+{
+    /// <summary>
+    /// 获取排行榜列表（全量返回）
+    /// </summary>
+    /// <param name="input">查询条件</param>
+    /// <returns>排行榜列表</returns>
+    Task<List<RankingItemDto>> GetListAsync(RankingGetListInput input);
+}
diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/RankingService.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/RankingService.cs
new file mode 100644
index 00000000..92b13c84
--- /dev/null
+++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/RankingService.cs
@@ -0,0 +1,38 @@
+using Mapster;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.Application.Services;
+using Yi.Framework.AiHub.Application.Contracts.Dtos;
+using Yi.Framework.AiHub.Application.Contracts.IServices;
+using Yi.Framework.AiHub.Domain.Entities;
+using Yi.Framework.SqlSugarCore.Abstractions;
+
+namespace Yi.Framework.AiHub.Application.Services;
+
+/// <summary>
+/// 排行榜服务
+/// </summary>
+public class RankingService : ApplicationService, IRankingService
+{
+    private readonly ISqlSugarRepository<RankingItemAggregateRoot, Guid> _repository;
+
+    public RankingService(ISqlSugarRepository<RankingItemAggregateRoot, Guid> repository)
+    {
+        _repository = repository;
+    }
+
+    /// <summary>
+    /// 获取排行榜列表（全量返回，按得分降序）
+    /// </summary>
+    [HttpGet("ranking/list")]
+    [AllowAnonymous]
+    public async Task<List<RankingItemDto>> GetListAsync([FromQuery] RankingGetListInput input)
+    {
+        var query = _repository._DbQueryable
+            .WhereIF(input.Type.HasValue, x => x.Type == input.Type!.Value)
+            .OrderByDescending(x => x.Score);
+
+        var entities = await query.ToListAsync();
+        return entities.Adapt<List<RankingItemDto>>();
+    }
+}
diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/RankingTypeEnum.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/RankingTypeEnum.cs
new file mode 100644
index 00000000..d233b944
--- /dev/null
+++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/RankingTypeEnum.cs
@@ -0,0 +1,17 @@
+namespace Yi.Framework.AiHub.Domain.Shared.Enums;
+
+/// <summary>
+/// 排行榜类型枚举
+/// </summary>
+public enum RankingTypeEnum
+{
+    /// <summary>
+    /// 模型
+    /// </summary>
+    Model = 0,
+
+    /// <summary>
+    /// 工具
+    /// </summary>
+    Tool = 1
+}
diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Entities/RankingItemAggregateRoot.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Entities/RankingItemAggregateRoot.cs
new file mode 100644
index 00000000..ef36886b
--- /dev/null
+++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Entities/RankingItemAggregateRoot.cs
@@ -0,0 +1,42 @@
+using SqlSugar;
+using Volo.Abp.Domain.Entities.Auditing;
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Domain.Entities;
+
+/// <summary>
+/// 排行榜项聚合根
+/// </summary>
+[SugarTable("Ai_RankingItem")]
+public class RankingItemAggregateRoot : FullAuditedAggregateRoot<Guid>
+{
+    /// <summary>
+    /// 名称
+    /// </summary>
+    public string Name { get; set; } 
+
+    /// <summary>
+    /// 描述
+    /// </summary>
+    public string? Description { get; set; }
+
+    /// <summary>
+    /// Logo地址
+    /// </summary>
+    public string? LogoUrl { get; set; }
+
+    /// <summary>
+    /// 得分
+    /// </summary>
+    public decimal Score { get; set; }
+
+    /// <summary>
+    /// 提供者
+    /// </summary>
+    public string? Provider { get; set; } 
+
+    /// <summary>
+    /// 排行榜类型：0-模型，1-工具
+    /// </summary>
+    public RankingTypeEnum Type { get; set; }
+}
diff --git a/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs b/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
index 5529f1e8..afaa6969 100644
--- a/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
+++ b/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
@@ -361,7 +361,7 @@ namespace Yi.Abp.Web
             var app = context.GetApplicationBuilder();
             app.UseRouting();
 
-            //app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<SessionAggregateRoot>();
+            // app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<RankingItemAggregateRoot>();
             // app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<ActivationCodeRecordAggregateRoot>();
             // app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<UsageStatisticsAggregateRoot>();
 
diff --git a/Yi.Ai.Vue3/.claude/settings.local.json b/Yi.Ai.Vue3/.claude/settings.local.json
index 2379a8d2..89b03152 100644
--- a/Yi.Ai.Vue3/.claude/settings.local.json
+++ b/Yi.Ai.Vue3/.claude/settings.local.json
@@ -8,7 +8,9 @@
       "Bash(timeout /t 5 /nobreak)",
       "Bash(git checkout:*)",
       "Bash(npm install marked --save)",
-      "Bash(pnpm add marked)"
+      "Bash(pnpm add marked)",
+      "Bash(pnpm lint:*)",
+      "Bash(pnpm list:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/Yi.Ai.Vue3/CLAUDE.md b/Yi.Ai.Vue3/CLAUDE.md
new file mode 100644
index 00000000..25c6ed7a
--- /dev/null
+++ b/Yi.Ai.Vue3/CLAUDE.md
@@ -0,0 +1,367 @@
+# CLAUDE.md
+
+本文件为 Claude Code (claude.ai/code) 提供本项目代码开发指导。
+
+## 项目简介
+
+**意心AI** - 基于 Vue 3.5 + TypeScript 开发的企业级 AI 聊天应用模板，仿豆包/通义 AI 平台。支持流式对话、AI 模型库、文件上传、Mermaid 图表渲染等功能。
+
+## 技术栈
+
+- **框架**: Vue 3.5+ (Composition API) + TypeScript 5.8+
+- **构建工具**: Vite 6.3+
+- **UI 组件**: Element Plus 2.10.4 + vue-element-plus-x 1.3.7
+- **状态管理**: Pinia 3.0 + pinia-plugin-persistedstate
+- **HTTP 请求**: hook-fetch（支持流式/SSE，替代 Axios）
+- **CSS**: UnoCSS + SCSS
+- **路由**: Vue Router 4
+
+## 常用命令
+
+```bash
+# 安装依赖（必须用 pnpm）
+pnpm install
+
+# 启动开发服务器（端口 17001）
+pnpm dev
+
+# 生产构建
+pnpm build
+
+# 预览生产构建
+pnpm preview
+
+# 代码检查与修复
+pnpm lint          # ESLint 检查
+pnpm fix           # ESLint 自动修复
+pnpm lint:stylelint # 样式检查
+
+# 规范提交（使用 cz-git）
+pnpm cz
+```
+
+## 如何新增页面
+
+### 1. 创建页面文件
+
+页面文件统一放在 `src/pages/` 目录下：
+
+```
+src/pages/
+├── chat/                    # 功能模块文件夹
+│   ├── index.vue           # 父级布局页
+│   ├── conversation/       # 子页面文件夹
+│   │   └── index.vue       # 子页面
+│   └── image/
+│       └── index.vue
+├── console/
+│   └── index.vue
+└── your-page/              # 新增页面在这里创建
+    └── index.vue
+```
+
+**单页面示例** (`src/pages/your-page/index.vue`):
+
+```vue
+<template>
+  <div class="your-page">
+    <h1>页面标题</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 自动导入 Vue API，无需手动 import
+const route = useRoute()
+const router = useRouter()
+
+// 如需使用状态管理
+const userStore = useUserStore()
+
+onMounted(() => {
+  console.log('页面加载')
+})
+</script>
+
+<style scoped lang="scss">
+.your-page {
+  padding: 20px;
+}
+</style>
+```
+
+### 2. 配置路由
+
+路由配置在 `src/routers/modules/staticRouter.ts`。
+
+**新增独立页面**（添加到 `layoutRouter` 的 children 中）：
+
+```typescript
+{
+  path: 'your-page',           // URL 路径，最终为 /your-page
+  name: 'yourPage',            // 路由名称，必须唯一
+  component: () => import('@/pages/your-page/index.vue'),
+  meta: {
+    title: '页面标题',          // 页面标题，会显示在浏览器标签
+    keepAlive: 0,              // 是否缓存页面：0=缓存，1=不缓存
+    isDefaultChat: false,      // 是否为默认聊天页
+    layout: 'default',         // 布局类型：default/blankPage
+  },
+}
+```
+
+**新增带子路由的功能模块**：
+
+```typescript
+{
+  path: 'module-name',
+  name: 'moduleName',
+  component: () => import('@/pages/module-name/index.vue'),  // 父级布局页
+  redirect: '/module-name/sub-page',                          // 默认重定向
+  meta: {
+    title: '模块标题',
+    icon: 'HomeFilled',      // Element Plus 图标名称
+  },
+  children: [
+    {
+      path: 'sub-page',
+      name: 'subPage',
+      component: () => import('@/pages/module-name/sub-page/index.vue'),
+      meta: {
+        title: '子页面标题',
+      },
+    },
+    // 带参数的路由
+    {
+      path: 'detail/:id',
+      name: 'detailPage',
+      component: () => import('@/pages/module-name/detail/index.vue'),
+      meta: {
+        title: '详情页',
+      },
+    },
+  ],
+}
+```
+
+**无需布局的独立页面**（添加到 `staticRouter`）：
+
+```typescript
+{
+  path: '/test/page',
+  name: 'testPage',
+  component: () => import('@/pages/test/page.vue'),
+  meta: {
+    title: '测试页面',
+  },
+}
+```
+
+### 3. 页面 Meta 配置说明
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| title | string | 页面标题，显示在浏览器标签页 |
+| keepAlive | number | 0=缓存页面，1=不缓存 |
+| layout | string | 布局类型：'default' 使用默认布局，'blankPage' 使用空白布局 |
+| isDefaultChat | boolean | 是否为默认聊天页面 |
+| icon | string | Element Plus 图标名称，用于菜单显示 |
+| isHide | string | '0'=在菜单中隐藏，'1'=显示 |
+| isKeepAlive | string | '0'=缓存，'1'=不缓存（字符串版） |
+
+### 4. 布局说明
+
+布局组件位于 `src/layouts/`：
+
+- **default**: 默认布局，包含侧边栏、顶部导航等
+- **blankPage**: 空白布局，仅包含路由出口
+
+在路由 meta 中通过 `layout` 字段指定：
+
+```typescript
+meta: {
+  layout: 'default',     // 使用默认布局（有侧边栏）
+  // 或
+  layout: 'blankPage',   // 使用空白布局（全屏页面）
+}
+```
+
+### 5. 页面跳转示例
+
+```typescript
+// 在 script setup 中使用
+const router = useRouter()
+
+// 跳转页面
+router.push('/chat/conversation')
+router.push({ name: 'chatConversation' })
+router.push({ path: '/chat/conversation/:id', params: { id: '123' } })
+
+// 获取路由参数
+const route = useRoute()
+console.log(route.params.id)
+```
+
+### 6. 完整新增页面示例
+
+假设要新增一个"数据统计"页面：
+
+**步骤 1**: 创建页面文件 `src/pages/statistics/index.vue`
+
+```vue
+<template>
+  <div class="statistics-page">
+    <el-card>
+      <template #header>
+        <span>数据统计</span>
+      </template>
+      <div>页面内容</div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data, loading } = useFetch('/api/statistics').get().json()
+</script>
+
+<style scoped lang="scss">
+.statistics-page {
+  padding: 20px;
+}
+</style>
+```
+
+**步骤 2**: 在 `src/routers/modules/staticRouter.ts` 中添加路由
+
+```typescript
+{
+  path: 'statistics',
+  name: 'statistics',
+  component: () => import('@/pages/statistics/index.vue'),
+  meta: {
+    title: '意心Ai-数据统计',
+    keepAlive: 0,
+    isDefaultChat: false,
+    layout: 'default',
+  },
+}
+```
+
+**步骤 3**: 在菜单中添加入口（如需要）
+
+如需在侧边栏显示，需在相应的位置添加菜单配置。
+
+## 核心架构说明
+
+### HTTP 请求封装
+
+位于 `src/utils/request.ts`，使用 hook-fetch：
+
+```typescript
+import { get, post, put, del } from '@/utils/request'
+
+// GET 请求
+const { data } = await get('/api/endpoint').json()
+
+// POST 请求
+const result = await post('/api/endpoint', { key: 'value' }).json()
+```
+
+特点：
+- 自动附加 JWT Token 到请求头
+- 自动处理 401/403 错误
+- 支持 Server-Sent Events (SSE) 流式响应
+
+### 状态管理
+
+Pinia stores 位于 `src/stores/modules/`：
+
+| Store | 用途 |
+|-------|------|
+| user.ts | 用户认证、登录状态 |
+| chat.ts | 聊天消息、流式输出 |
+| session.ts | 会话列表、当前会话 |
+| model.ts | AI 模型配置 |
+
+使用方式：
+
+```typescript
+const userStore = useUserStore()
+userStore.setToken(token, refreshToken)
+userStore.logout()
+```
+
+### 自动导入
+
+项目已配置 `unplugin-auto-import`，以下 API 无需手动 import：
+
+- Vue API: `ref`, `reactive`, `computed`, `watch`, `onMounted` 等
+- Vue Router: `useRoute`, `useRouter`
+- Pinia: `createPinia`, `storeToRefs`
+- VueUse: `useFetch`, `useStorage` 等
+
+### 路径别名
+
+| 别名 | 对应路径 |
+|------|----------|
+| `@/` | `src/` |
+| `@components/` | `src/vue-element-plus-y/components/` |
+
+### 环境变量
+
+开发配置在 `.env.development`：
+
+```
+VITE_WEB_BASE_API=/dev-api           # API 前缀
+VITE_API_URL=http://localhost:19001/api/app  # 后端地址
+VITE_SSO_SEVER_URL=http://localhost:18001    # SSO 地址
+```
+
+Vite 开发服务器会自动将 `/dev-api` 代理到后端 API。
+
+## 代码规范
+
+### 提交规范
+
+使用 `pnpm cz` 进行规范提交，类型包括：
+- `feat`: 新功能
+- `fix`: 修复
+- `docs`: 文档
+- `style`: 代码格式
+- `refactor`: 重构
+- `perf`: 性能优化
+- `test`: 测试
+- `build`: 构建
+- `ci`: CI/CD
+- `revert`: 回滚
+- `chore`: 其他
+
+### Git Hooks
+
+- **pre-commit**: 自动运行 ESLint 修复
+- **commit-msg**: 校验提交信息格式
+
+## 构建优化
+
+Vite 配置中的代码分割策略（`vite.config.ts`）：
+
+| Chunk 名称 | 包含内容 |
+|-----------|---------|
+| vue-vendor | Vue 核心库、Vue Router |
+| pinia | Pinia 状态管理 |
+| element-plus | Element Plus UI 库 |
+| markdown | Markdown 解析相关 |
+| utils | Lodash、VueUse 工具库 |
+| highlight | 代码高亮库 |
+| echarts | 图表库 |
+| pdf | PDF 处理库 |
+
+## 后端集成
+
+后端为 .NET 8 项目，本地启动命令：
+
+```bash
+cd E:\devDemo\Yi\Yi.Abp.Net8\src\Yi.Abp.Web
+dotnet run
+```
+
+前端开发时，后端默认运行在 `http://localhost:19001`。
diff --git a/Yi.Ai.Vue3/src/api/ranking/index.ts b/Yi.Ai.Vue3/src/api/ranking/index.ts
new file mode 100644
index 00000000..94b5f82b
--- /dev/null
+++ b/Yi.Ai.Vue3/src/api/ranking/index.ts
@@ -0,0 +1,15 @@
+import type { RankingGetListInput, RankingItemDto } from './types';
+import { get } from '@/utils/request';
+
+// 获取排行榜列表（公开接口，无需登录）
+export function getRankingList(params?: RankingGetListInput) {
+  const queryParams = new URLSearchParams();
+  if (params?.type !== undefined) {
+    queryParams.append('Type', params.type.toString());
+  }
+
+  const queryString = queryParams.toString();
+  const url = queryString ? `/ranking/list?${queryString}` : '/ranking/list';
+
+  return get<RankingItemDto[]>(url).json();
+}
diff --git a/Yi.Ai.Vue3/src/api/ranking/types.ts b/Yi.Ai.Vue3/src/api/ranking/types.ts
new file mode 100644
index 00000000..ad3e5ca3
--- /dev/null
+++ b/Yi.Ai.Vue3/src/api/ranking/types.ts
@@ -0,0 +1,21 @@
+// 排行榜类型枚举
+export enum RankingTypeEnum {
+  Model = 0,
+  Tool = 1,
+}
+
+// 排行榜项
+export interface RankingItemDto {
+  id: string;
+  name: string;
+  description: string;
+  logoUrl?: string;
+  score: number;
+  provider: string;
+  type: RankingTypeEnum;
+}
+
+// 排行榜查询参数
+export interface RankingGetListInput {
+  type?: RankingTypeEnum;
+}
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/components/ModelLibraryBtn.vue b/Yi.Ai.Vue3/src/layouts/components/Header/components/ModelLibraryBtn.vue
index 73347ac9..c557aee7 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/ModelLibraryBtn.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/ModelLibraryBtn.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-function goToModelLibrary() {
-  router.push('/model-library');
-}
+// 这是一个纯展示组件，点击事件由父组件 el-menu-item 处理
 </script>
 
 <template>
@@ -13,7 +7,6 @@ function goToModelLibrary() {
     <div
       class="model-library-btn"
       title="查看模型库"
-      @click="goToModelLibrary"
     >
       <!-- PC端显示文字 -->
       <span class="pc-text">模型库</span>
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/components/RankingBtn.vue b/Yi.Ai.Vue3/src/layouts/components/Header/components/RankingBtn.vue
new file mode 100644
index 00000000..433b2355
--- /dev/null
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/RankingBtn.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+// 这是一个纯展示组件，点击事件由父组件 el-menu-item 处理
+</script>
+
+<template>
+  <div class="ranking-btn-container" data-tour="ranking-btn">
+    <div
+      class="ranking-btn"
+      title="查看排行榜"
+    >
+      <!-- PC端显示文字 -->
+      <span class="pc-text">排行榜</span>
+      <!-- 移动端显示图标 -->
+      <svg
+        class="mobile-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
+        <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
+        <path d="M4 22h16" />
+        <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
+        <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
+        <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ranking-btn-container {
+  display: flex;
+  align-items: center;
+
+  .ranking-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #606266;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #606266;
+      transform: translateY(-1px);
+    }
+
+    // PC端显示文字，隐藏图标
+    .pc-text {
+      display: inline;
+      margin: 0 12px;
+    }
+
+    .mobile-icon {
+      display: none;
+    }
+  }
+}
+
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
+  .ranking-btn-container {
+    .ranking-btn {
+      .pc-text {
+        display: none;
+      }
+
+      .mobile-icon {
+        display: inline;
+      }
+    }
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue b/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
index c6139636..dd99fc29 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
+++ b/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>
diff --git a/Yi.Ai.Vue3/src/pages/ranking/index.vue b/Yi.Ai.Vue3/src/pages/ranking/index.vue
new file mode 100644
index 00000000..f9bafc41
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/ranking/index.vue
@@ -0,0 +1,1322 @@
+<script setup lang="ts">
+import { Trophy, User, Cpu, CirclePlus, CircleCheck } from '@element-plus/icons-vue';
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getRankingList } from '@/api/ranking';
+import { RankingTypeEnum, type RankingItemDto } from '@/api/ranking/types';
+
+// 加载状态
+const loading = ref(false);
+
+// 模型排行数据
+const modelRankingList = ref<RankingItemDto[]>([]);
+
+// 工具排行数据
+const toolRankingList = ref<RankingItemDto[]>([]);
+
+// 获取排行榜数据
+async function fetchRankingData() {
+  loading.value = true;
+  try {
+    const [modelRes, toolRes] = await Promise.all([
+      getRankingList({ type: RankingTypeEnum.Model }),
+      getRankingList({ type: RankingTypeEnum.Tool }),
+    ]);
+
+    if (modelRes.code === 200) {
+      modelRankingList.value = modelRes.data;
+    }
+    if (toolRes.code === 200) {
+      toolRankingList.value = toolRes.data;
+    }
+  }
+  catch (error) {
+    console.error('获取排行榜数据失败:', error);
+    ElMessage.error('获取排行榜数据失败');
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
+// 获取排名样式
+function getRankClass(rank: number) {
+  if (rank === 1) return 'rank-1';
+  if (rank === 2) return 'rank-2';
+  if (rank === 3) return 'rank-3';
+  return 'rank-normal';
+}
+
+// 更新时间
+const updateTime = computed(() => {
+  const now = new Date();
+  return now.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+});
+
+// AI编程能力计算器弹窗
+const calculatorVisible = ref(false);
+const calcStep = ref<1 | 2 | 3>(1);
+const selectedModel = ref<RankingItemDto | null>(null);
+const selectedTool = ref<RankingItemDto | null>(null);
+
+// 计算AI编程能力分数
+const calculatedScore = computed(() => {
+  if (!selectedModel.value || !selectedTool.value) return null;
+  const score = selectedModel.value.score * 0.65 + selectedTool.value.score * 0.35;
+  return score.toFixed(1);
+});
+
+// 根据得分获取描述
+const scoreDescription = computed(() => {
+  const score = parseFloat(calculatedScore.value || '0');
+  if (score === 100) return '天才大脑';
+  if (score >= 95) return '博士大脑';
+  if (score >= 90) return '程序员大脑';
+  if (score >= 80) return '实习生大脑';
+  if (score >= 70) return '猴脑';
+  if (score >= 60) return '猪脑';
+  return '傻逼';
+});
+
+// 打开计算器
+function openCalculator() {
+  calculatorVisible.value = true;
+  calcStep.value = 1;
+  selectedModel.value = null;
+  selectedTool.value = null;
+}
+
+// 关闭计算器
+function closeCalculator() {
+  calculatorVisible.value = false;
+}
+
+// 选择模型
+function selectModel(model: RankingItemDto) {
+  selectedModel.value = model;
+  if (calcStep.value === 1) {
+    calcStep.value = 2;
+  }
+}
+
+// 选择工具
+function selectTool(tool: RankingItemDto) {
+  selectedTool.value = tool;
+  if (calcStep.value === 2) {
+    calcStep.value = 3;
+  }
+}
+
+// 重新开始
+function restartCalculator() {
+  calcStep.value = 1;
+  selectedModel.value = null;
+  selectedTool.value = null;
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  fetchRankingData();
+});
+</script>
+
+<template>
+  <div class="ranking-container">
+    <!-- 页面标题 -->
+    <div class="ranking-header content-wrapper">
+      <div class="header-content">
+        <div class="title-section">
+          <div class="title-icon">
+            <el-icon size="40"><Trophy /></el-icon>
+          </div>
+          <div class="title-text">
+            <h1 class="main-title">意心Ai全球大模型实时排行榜（编程）</h1>
+            <p class="subtitle">基于综合性能、用户活跃度、代码质量等多维度评估</p>
+          </div>
+        </div>
+        <el-button type="primary" class="calculator-btn" @click="openCalculator">
+          <el-icon><CirclePlus /></el-icon>
+          点击测测当前你的Ai编程能力
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="ranking-content content-wrapper">
+      <!-- 左侧：模型排行 -->
+      <div class="ranking-section">
+        <div class="section-header">
+          <div class="section-title">
+            <el-icon size="24"><Cpu /></el-icon>
+            <span>模型排行（编程）</span>
+          </div>
+          <el-tag type="primary" effect="plain">Top {{ modelRankingList.length }}</el-tag>
+        </div>
+
+        <!-- 加载状态 -->
+        <div v-if="loading" class="loading-wrapper">
+          <el-skeleton :rows="8" animated />
+        </div>
+
+        <!-- 排行列表 -->
+        <div v-else class="ranking-list">
+          <div
+            v-for="(item, index) in modelRankingList"
+            :key="item.id"
+            class="ranking-item"
+            :class="getRankClass(index + 1)"
+          >
+            <div class="rank-number">
+              <span v-if="index + 1 <= 3" class="rank-medal">
+                <el-icon size="20"><Trophy /></el-icon>
+              </span>
+              <span v-else>{{ index + 1 }}</span>
+            </div>
+            <div class="rank-logo">
+              <el-image
+                v-if="item.logoUrl"
+                :src="item.logoUrl"
+                :alt="item.name"
+                class="logo-image"
+                fit="cover"
+              />
+              <div v-else class="logo-placeholder">
+                <el-icon><Cpu /></el-icon>
+              </div>
+            </div>
+            <div class="rank-middle">
+              <div class="rank-info">
+                <div class="rank-name">{{ item.name }}</div>
+                <div class="rank-meta">
+                  <span class="provider">{{ item.provider }}</span>
+                  <span v-if="item.description" class="divider">|</span>
+                  <span class="description">{{ item.description }}</span>
+                </div>
+              </div>
+              <div class="rank-progress">
+                <div class="progress-bar">
+                  <div
+                    class="progress-fill"
+                    :style="{ width: `${item.score}%` }"
+                  />
+                </div>
+                <div class="progress-score">
+                  <span class="score-value">{{ item.score }}</span>
+                  <span class="score-label">分</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：工具排行 -->
+      <div class="ranking-section">
+        <div class="section-header">
+          <div class="section-title">
+            <el-icon size="24"><User /></el-icon>
+            <span>工具排行（编程）</span>
+          </div>
+          <el-tag type="success" effect="plain">Top {{ toolRankingList.length }}</el-tag>
+        </div>
+
+        <!-- 加载状态 -->
+        <div v-if="loading" class="loading-wrapper">
+          <el-skeleton :rows="8" animated />
+        </div>
+
+        <!-- 排行列表 -->
+        <div v-else class="ranking-list">
+          <div
+            v-for="(item, index) in toolRankingList"
+            :key="item.id"
+            class="ranking-item"
+            :class="getRankClass(index + 1)"
+          >
+            <div class="rank-number">
+              <span v-if="index + 1 <= 3" class="rank-medal">
+                <el-icon size="20"><Trophy /></el-icon>
+              </span>
+              <span v-else>{{ index + 1 }}</span>
+            </div>
+            <div class="rank-logo">
+              <el-image
+                v-if="item.logoUrl"
+                :src="item.logoUrl"
+                :alt="item.name"
+                class="logo-image"
+                fit="cover"
+              />
+              <div v-else class="logo-placeholder">
+                <el-icon><User /></el-icon>
+              </div>
+            </div>
+            <div class="rank-middle">
+              <div class="rank-info">
+                <div class="rank-name">{{ item.name }}</div>
+                <div class="rank-meta">
+                  <span class="provider">{{ item.provider }}</span>
+                  <span v-if="item.description" class="divider">|</span>
+                  <span class="description">{{ item.description }}</span>
+                </div>
+              </div>
+              <div class="rank-progress">
+                <div class="progress-bar">
+                  <div
+                    class="progress-fill"
+                    :style="{ width: `${item.score}%` }"
+                  />
+                </div>
+                <div class="progress-score">
+                  <span class="score-value">{{ item.score }}</span>
+                  <span class="score-label">分</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- AI编程能力计算器弹窗 -->
+    <el-dialog
+      v-model="calculatorVisible"
+      title="AI编程能力计算器"
+      width="800px"
+      :close-on-click-modal="false"
+      class="calculator-dialog"
+    >
+      <!-- 步骤1：选择模型 -->
+      <div v-if="calcStep === 1" class="calc-step">
+        <div class="step-header">
+          <div class="step-number">1</div>
+          <div class="step-title">请选择你正在使用的大模型</div>
+        </div>
+        <div class="step-list">
+          <div
+            v-for="(item, index) in modelRankingList"
+            :key="item.id"
+            class="step-item"
+            :class="{ active: selectedModel?.id === item.id }"
+            @click="selectModel(item)"
+          >
+            <div class="step-item-rank" :class="getRankClass(index + 1)">{{ index + 1 }}</div>
+            <div class="step-item-logo">
+              <el-image
+                v-if="item.logoUrl"
+                :src="item.logoUrl"
+                :alt="item.name"
+                class="logo-image"
+                fit="cover"
+              />
+              <div v-else class="logo-placeholder">
+                <el-icon><Cpu /></el-icon>
+              </div>
+            </div>
+            <div class="step-item-info">
+              <div class="step-item-name">{{ item.name }}</div>
+              <div class="step-item-meta">
+                <span class="provider">{{ item.provider }}</span>
+                <span v-if="item.description" class="divider">|</span>
+                <span class="desc">{{ item.description }}</span>
+              </div>
+            </div>
+            <div class="step-item-score">{{ item.score }}分</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 步骤2：选择工具 -->
+      <div v-if="calcStep === 2" class="calc-step">
+        <div class="step-header">
+          <div class="step-number">2</div>
+          <div class="step-title">请选择你正在使用的编程工具</div>
+          <div v-if="selectedModel" class="step-selected">
+            已选模型：<span>{{ selectedModel.name }}</span>
+          </div>
+        </div>
+        <div class="step-list">
+          <div
+            v-for="(item, index) in toolRankingList"
+            :key="item.id"
+            class="step-item"
+            :class="{ active: selectedTool?.id === item.id }"
+            @click="selectTool(item)"
+          >
+            <div class="step-item-rank" :class="getRankClass(index + 1)">{{ index + 1 }}</div>
+            <div class="step-item-logo">
+              <el-image
+                v-if="item.logoUrl"
+                :src="item.logoUrl"
+                :alt="item.name"
+                class="logo-image"
+                fit="cover"
+              />
+              <div v-else class="logo-placeholder">
+                <el-icon><User /></el-icon>
+              </div>
+            </div>
+            <div class="step-item-info">
+              <div class="step-item-name">{{ item.name }}</div>
+              <div class="step-item-meta">
+                <span class="provider">{{ item.provider }}</span>
+                <span v-if="item.description" class="divider">|</span>
+                <span class="desc">{{ item.description }}</span>
+              </div>
+            </div>
+            <div class="step-item-score">{{ item.score }}分</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 步骤3：计算结果 -->
+      <div v-if="calcStep === 3" class="calc-step result-step">
+        <div class="result-header">
+          <el-icon size="48" color="#67c23a"><CircleCheck /></el-icon>
+          <h3>计算完成</h3>
+        </div>
+        <div class="result-content">
+          <div class="result-combination">
+            <div class="result-item">
+              <div class="result-label">大模型</div>
+              <div class="result-value">{{ selectedModel?.name }}</div>
+              <div class="result-score">{{ selectedModel?.score }}分 × 65%</div>
+            </div>
+            <div class="result-plus">+</div>
+            <div class="result-item">
+              <div class="result-label">编程工具</div>
+              <div class="result-value">{{ selectedTool?.name }}</div>
+              <div class="result-score">{{ selectedTool?.score }}分 × 35%</div>
+            </div>
+          </div>
+          <div class="result-divider" />
+          <div class="result-final">
+            <div class="result-final-label">AI编程能力综合评分</div>
+            <div class="result-final-score">{{ calculatedScore }}<span>分</span></div>
+            <div class="result-congrats">恭喜你，陪伴你的AI是一个<span class="brain-type">{{ scoreDescription }}</span></div>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-if="calcStep > 1" @click="calcStep--">上一步</el-button>
+          <el-button v-if="calcStep === 3" type="primary" @click="restartCalculator">重新计算</el-button>
+          <el-button @click="closeCalculator">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 底部说明 -->
+    <div class="ranking-footer content-wrapper">
+      <div class="footer-content">
+        <el-alert
+          title="排行榜说明"
+          type="info"
+          :closable="false"
+          show-icon
+        >
+          <template #default>
+            <div class="footer-desc">
+              <p>• 模型排行综合评估：主要全网编程能力指数、意心Ai平台实测指数、代码生成能力、推理速度、准确率、多语言支持等维度</p>
+              <p>• 工具排行综合评估：主要全网编程能力指数、意心Ai平台实测指数、用户活跃度、功能完整性、易用性、社区反馈等维度</p>
+              <p>• 数据实时更新，以上排行仅意心Ai平台模型综合编程能力对比</p>
+            </div>
+          </template>
+        </el-alert>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ranking-container {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+// 内容包装器 - 限制最大宽度并居中
+.content-wrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+// 页面头部
+.ranking-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 32px 40px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  .title-section {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    .title-icon {
+      width: 70px;
+      height: 70px;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    .title-text {
+      .main-title {
+        font-size: 32px;
+        font-weight: 800;
+        color: white;
+        margin: 0 0 8px 0;
+        letter-spacing: -0.5px;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .subtitle {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 0;
+      }
+    }
+  }
+
+  .update-time {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 14px;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 10px 18px;
+    border-radius: 30px;
+    backdrop-filter: blur(10px);
+  }
+
+  .calculator-btn {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 12px 24px;
+    height: auto;
+    border-radius: 30px;
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+    animation: btnPulse 2s ease-in-out infinite;
+
+    // 光效扫过动画
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.4),
+        transparent
+      );
+      animation: lightSweep 3s ease-in-out infinite;
+    }
+
+    // 发光光环
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      border-radius: 30px;
+      border: 2px solid rgba(255, 255, 255, 0.6);
+      opacity: 0;
+      animation: glowRing 2s ease-out infinite;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: translateY(-2px) scale(1.05);
+      box-shadow:
+        0 4px 20px rgba(0, 0, 0, 0.2),
+        0 0 30px rgba(255, 255, 255, 0.3);
+      animation: none;
+
+      &::before {
+        animation: none;
+      }
+
+      &::after {
+        animation: none;
+        opacity: 0;
+      }
+    }
+
+    .el-icon {
+      margin-right: 6px;
+      animation: iconBounce 1s ease-in-out infinite;
+    }
+  }
+}
+
+// 按钮脉冲动画
+@keyframes btnPulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow:
+      0 0 0 0 rgba(255, 255, 255, 0.4),
+      0 4px 15px rgba(0, 0, 0, 0.1);
+  }
+  50% {
+    transform: scale(1.03);
+    box-shadow:
+      0 0 0 8px rgba(255, 255, 255, 0),
+      0 6px 20px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// 光效扫过动画
+@keyframes lightSweep {
+  0% {
+    left: -100%;
+  }
+  50%, 100% {
+    left: 100%;
+  }
+}
+
+// 发光光环动画
+@keyframes glowRing {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.6;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}
+
+// 图标跳动动画
+@keyframes iconBounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+// 主内容区
+.ranking-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 24px;
+  width: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// 排行区域
+.ranking-section {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+  transition: transform 0.3s, box-shadow 0.3s;
+  min-width: 0;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid #f0f0f0;
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 20px;
+      font-weight: 700;
+      color: #303133;
+
+      .el-icon {
+        color: #667eea;
+      }
+    }
+
+  }
+
+  .loading-wrapper {
+    padding: 40px 20px;
+  }
+
+  .ranking-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .ranking-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px;
+    border-radius: 12px;
+    background: #f8f9fa;
+    transition: all 0.3s;
+    border: 2px solid transparent;
+
+    &:hover {
+      background: white;
+      border-color: #667eea;
+      transform: translateX(4px);
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+    }
+
+    // 前三名特殊样式
+    &.rank-1 {
+      background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
+      border-color: #ffc107;
+
+      .rank-number {
+        background: linear-gradient(135deg, #ffc107, #ff8f00);
+        color: white;
+      }
+
+      .progress-fill {
+        background: linear-gradient(90deg, #ffc107 0%, #ff8f00 100%);
+      }
+
+      .progress-score .score-value {
+        color: #ff8f00;
+      }
+    }
+
+    &.rank-2 {
+      background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
+      border-color: #9e9e9e;
+
+      .rank-number {
+        background: linear-gradient(135deg, #9e9e9e, #616161);
+        color: white;
+      }
+
+      .progress-fill {
+        background: linear-gradient(90deg, #9e9e9e 0%, #616161 100%);
+      }
+
+      .progress-score .score-value {
+        color: #616161;
+      }
+    }
+
+    &.rank-3 {
+      background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
+      border-color: #ff9800;
+
+      .rank-number {
+        background: linear-gradient(135deg, #ff9800, #f57c00);
+        color: white;
+      }
+
+      .progress-fill {
+        background: linear-gradient(90deg, #ff9800 0%, #f57c00 100%);
+      }
+
+      .progress-score .score-value {
+        color: #f57c00;
+      }
+    }
+
+    .rank-number {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 700;
+      color: #606266;
+      background: white;
+      border-radius: 50%;
+      flex-shrink: 0;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+
+      .rank-medal {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .rank-logo {
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+      border-radius: 8px;
+      overflow: hidden;
+      background: white;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .logo-image {
+        width: 100%;
+        height: 100%;
+      }
+
+      .logo-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        font-size: 18px;
+      }
+    }
+
+    .rank-middle {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .rank-info {
+      .rank-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .rank-meta {
+        font-size: 12px;
+        color: #909399;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+
+        .provider {
+          color: #667eea;
+          font-weight: 600;
+          background: rgba(102, 126, 234, 0.1);
+          padding: 1px 6px;
+          border-radius: 4px;
+          font-size: 11px;
+          flex-shrink: 0;
+        }
+
+        .divider {
+          color: #dcdfe6;
+          flex-shrink: 0;
+        }
+
+        .description {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          min-width: 0;
+        }
+      }
+    }
+
+    .rank-progress {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .progress-bar {
+        flex: 1;
+        height: 8px;
+        background: #e4e7ed;
+        border-radius: 4px;
+        overflow: hidden;
+
+        .progress-fill {
+          height: 100%;
+          background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+          border-radius: 4px;
+          transition: width 0.5s ease;
+        }
+      }
+
+      .progress-score {
+        display: flex;
+        align-items: baseline;
+        gap: 2px;
+        flex-shrink: 0;
+        min-width: 60px;
+        justify-content: flex-end;
+
+        .score-value {
+          font-size: 18px;
+          font-weight: 700;
+          color: #667eea;
+        }
+
+        .score-label {
+          font-size: 12px;
+          color: #909399;
+        }
+      }
+    }
+
+    .rank-score {
+      display: none;
+    }
+  }
+}
+
+// 计算器弹窗样式
+.calculator-dialog {
+  .calc-step {
+    .step-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+      padding-bottom: 16px;
+      border-bottom: 2px solid #f0f0f0;
+
+      .step-number {
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        font-size: 18px;
+        font-weight: 700;
+        border-radius: 50%;
+      }
+
+      .step-title {
+        font-size: 18px;
+        font-weight: 700;
+        color: #303133;
+      }
+
+      .step-selected {
+        margin-left: auto;
+        font-size: 13px;
+        color: #909399;
+        background: #f5f7fa;
+        padding: 6px 12px;
+        border-radius: 6px;
+
+        span {
+          color: #667eea;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .step-list {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      max-height: 400px;
+      overflow-y: auto;
+      padding-right: 8px;
+
+      .step-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px;
+        background: #f8f9fa;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: all 0.3s;
+        border: 2px solid transparent;
+
+        &:hover {
+          background: white;
+          border-color: #667eea;
+          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+          transform: translateX(4px);
+        }
+
+        &.active {
+          background: white;
+          border-color: #667eea;
+          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+
+          .step-item-rank {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+          }
+        }
+
+        .step-item-rank {
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 13px;
+          font-weight: 700;
+          color: #606266;
+          background: white;
+          border-radius: 6px;
+          flex-shrink: 0;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+
+          &.rank-1 {
+            background: linear-gradient(135deg, #ffc107, #ff8f00);
+            color: white;
+          }
+
+          &.rank-2 {
+            background: linear-gradient(135deg, #9e9e9e, #616161);
+            color: white;
+          }
+
+          &.rank-3 {
+            background: linear-gradient(135deg, #ff9800, #f57c00);
+            color: white;
+          }
+        }
+
+        .step-item-logo {
+          width: 36px;
+          height: 36px;
+          flex-shrink: 0;
+          border-radius: 6px;
+          overflow: hidden;
+          background: white;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .logo-image {
+            width: 100%;
+            height: 100%;
+          }
+
+          .logo-placeholder {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            font-size: 16px;
+          }
+        }
+
+        .step-item-info {
+          flex: 1;
+          min-width: 0;
+
+          .step-item-name {
+            font-size: 14px;
+            font-weight: 600;
+            color: #303133;
+            margin-bottom: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .step-item-meta {
+            font-size: 12px;
+            color: #909399;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            min-width: 0;
+
+            .provider {
+              color: #667eea;
+              font-weight: 600;
+              background: rgba(102, 126, 234, 0.1);
+              padding: 1px 6px;
+              border-radius: 4px;
+              font-size: 11px;
+              flex-shrink: 0;
+            }
+
+            .divider {
+              color: #dcdfe6;
+              flex-shrink: 0;
+            }
+
+            .desc {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              min-width: 0;
+            }
+          }
+        }
+
+        .step-item-score {
+          font-size: 15px;
+          font-weight: 700;
+          color: #667eea;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+
+  .result-step {
+    text-align: center;
+    padding: 20px;
+
+    .result-header {
+      margin-bottom: 30px;
+
+      h3 {
+        font-size: 24px;
+        font-weight: 700;
+        color: #303133;
+        margin: 16px 0 0 0;
+      }
+    }
+
+    .result-content {
+      background: #f8f9fa;
+      border-radius: 16px;
+      padding: 30px;
+
+      .result-combination {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        margin-bottom: 24px;
+
+        .result-item {
+          flex: 1;
+          max-width: 200px;
+          background: white;
+          padding: 20px;
+          border-radius: 12px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+          .result-label {
+            font-size: 13px;
+            color: #909399;
+            margin-bottom: 8px;
+          }
+
+          .result-value {
+            font-size: 16px;
+            font-weight: 700;
+            color: #303133;
+            margin-bottom: 8px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .result-score {
+            font-size: 14px;
+            color: #667eea;
+            font-weight: 500;
+          }
+        }
+
+        .result-plus {
+          font-size: 24px;
+          font-weight: 700;
+          color: #909399;
+        }
+      }
+
+      .result-divider {
+        height: 1px;
+        background: #e4e7ed;
+        margin: 24px 0;
+      }
+
+      .result-final {
+        .result-final-label {
+          font-size: 14px;
+          color: #909399;
+          margin-bottom: 12px;
+        }
+
+        .result-final-score {
+          font-size: 56px;
+          font-weight: 800;
+          color: #667eea;
+          line-height: 1;
+
+          span {
+            font-size: 20px;
+            font-weight: 500;
+            margin-left: 4px;
+          }
+        }
+
+        .result-congrats {
+          margin-top: 20px;
+          font-size: 16px;
+          color: #606266;
+
+          .brain-type {
+            font-size: 24px;
+            font-weight: 700;
+            color: #ff6b6b;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+}
+
+// 底部说明
+.ranking-footer {
+  .footer-content {
+    max-width: 100%;
+  }
+
+  .footer-desc {
+    p {
+      margin: 4px 0;
+      font-size: 13px;
+      color: #606266;
+    }
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .ranking-container {
+    padding: 16px;
+  }
+
+  .ranking-header {
+    padding: 24px 20px;
+
+    .title-section {
+      .title-icon {
+        width: 50px;
+        height: 50px;
+
+        .el-icon {
+          font-size: 24px;
+        }
+      }
+
+      .title-text {
+        .main-title {
+          font-size: 22px;
+        }
+
+        .subtitle {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+
+  .ranking-section {
+    padding: 16px;
+
+    .section-title {
+      font-size: 18px;
+    }
+
+    .ranking-item {
+      padding: 10px;
+      gap: 10px;
+
+      .rank-number {
+        width: 34px;
+        height: 34px;
+        font-size: 13px;
+      }
+
+      .rank-logo {
+        width: 36px;
+        height: 36px;
+      }
+
+      .rank-info {
+        .rank-name {
+          font-size: 14px;
+        }
+
+        .rank-meta {
+          font-size: 11px;
+          gap: 4px;
+
+          .provider {
+            font-size: 10px;
+            padding: 1px 4px;
+          }
+        }
+      }
+
+      .rank-score {
+        .score-value {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/routers/modules/staticRouter.ts b/Yi.Ai.Vue3/src/routers/modules/staticRouter.ts
index 89533bb1..39337a03 100644
--- a/Yi.Ai.Vue3/src/routers/modules/staticRouter.ts
+++ b/Yi.Ai.Vue3/src/routers/modules/staticRouter.ts
@@ -106,6 +106,19 @@ export const layoutRouter: RouteRecordRaw[] = [
         },
       },
 
+      // 排行榜
+      {
+        path: 'ranking',
+        name: 'ranking',
+        component: () => import('@/pages/ranking/index.vue'),
+        meta: {
+          title: '意心Ai全球大模型实时排行榜（编程）',
+          keepAlive: 0,
+          isDefaultChat: false,
+          layout: 'default',
+        },
+      },
+
       // 支付结果
       {
         path: 'pay-result',
diff --git a/Yi.Ai.Vue3/types/import_meta.d.ts b/Yi.Ai.Vue3/types/import_meta.d.ts
index c98d612e..8f2a798b 100644
--- a/Yi.Ai.Vue3/types/import_meta.d.ts
+++ b/Yi.Ai.Vue3/types/import_meta.d.ts
@@ -7,7 +7,6 @@ interface ImportMetaEnv {
   readonly VITE_WEB_BASE_API: string;
   readonly VITE_API_URL: string;
   readonly VITE_FILE_UPLOAD_API: string;
-  readonly VITE_BUILD_COMPRESS: string;
   readonly VITE_SSO_SEVER_URL: string;
   readonly VITE_APP_VERSION: string;
 }