From d30043e5e3cf9213dc1f04b88e7c16b8d02ae285 Mon Sep 17 00:00:00 2001
From: MerCry <jiong1114>
Date: Sat, 28 Feb 2026 14:16:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E4=BC=98=E5=8C=96=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E8=8F=9C=E5=8D=95=E5=B8=83=E5=B1=80=E4=B8=8EDashboard?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将系统配置下拉菜单改为直接展示的菜单项，提升操作便捷性

- Dashboard使用说明区域扩展为9个功能卡片

- 所有卡片支持点击跳转到对应功能页面

- 优化响应式布局，支持3列/2列/1列自适应
---
 ai-service-admin/src/App.vue                  | 123 ++++--------------
 .../src/views/dashboard/index.vue             |  73 +++++++++--
 2 files changed, 91 insertions(+), 105 deletions(-)

diff --git a/ai-service-admin/src/App.vue b/ai-service-admin/src/App.vue
index d6650a0..749046b 100644
--- a/ai-service-admin/src/App.vue
+++ b/ai-service-admin/src/App.vue
@@ -30,53 +30,30 @@
             <span>会话监控</span>
           </router-link>
           <div class="nav-divider"></div>
-          <el-dropdown trigger="hover" placement="bottom-start">
-            <div class="nav-item dropdown-trigger" :class="{ active: isAdminActive }">
-              <el-icon><Setting /></el-icon>
-              <span>系统配置</span>
-              <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu class="admin-dropdown-menu">
-                <el-dropdown-item>
-                  <router-link to="/admin/embedding" class="dropdown-link">
-                    <el-icon><Connection /></el-icon>
-                    嵌入模型
-                  </router-link>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <router-link to="/admin/llm" class="dropdown-link">
-                    <el-icon><ChatDotSquare /></el-icon>
-                    LLM 配置
-                  </router-link>
-                </el-dropdown-item>
-                <el-dropdown-item divided>
-                  <router-link to="/admin/prompt-templates" class="dropdown-link">
-                    <el-icon><Document /></el-icon>
-                    Prompt 模板
-                  </router-link>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <router-link to="/admin/intent-rules" class="dropdown-link">
-                    <el-icon><Aim /></el-icon>
-                    意图规则
-                  </router-link>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <router-link to="/admin/script-flows" class="dropdown-link">
-                    <el-icon><Share /></el-icon>
-                    话术流程
-                  </router-link>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <router-link to="/admin/guardrails" class="dropdown-link">
-                    <el-icon><Warning /></el-icon>
-                    输出护栏
-                  </router-link>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <router-link to="/admin/embedding" class="nav-item" :class="{ active: isActive('/admin/embedding') }">
+            <el-icon><Connection /></el-icon>
+            <span>嵌入模型</span>
+          </router-link>
+          <router-link to="/admin/llm" class="nav-item" :class="{ active: isActive('/admin/llm') }">
+            <el-icon><ChatDotSquare /></el-icon>
+            <span>LLM 配置</span>
+          </router-link>
+          <router-link to="/admin/prompt-templates" class="nav-item" :class="{ active: isActive('/admin/prompt-templates') }">
+            <el-icon><Document /></el-icon>
+            <span>Prompt 模板</span>
+          </router-link>
+          <router-link to="/admin/intent-rules" class="nav-item" :class="{ active: isActive('/admin/intent-rules') }">
+            <el-icon><Aim /></el-icon>
+            <span>意图规则</span>
+          </router-link>
+          <router-link to="/admin/script-flows" class="nav-item" :class="{ active: isActive('/admin/script-flows') }">
+            <el-icon><Share /></el-icon>
+            <span>话术流程</span>
+          </router-link>
+          <router-link to="/admin/guardrails" class="nav-item" :class="{ active: isActive('/admin/guardrails') }">
+            <el-icon><Warning /></el-icon>
+            <span>输出护栏</span>
+          </router-link>
         </nav>
       </div>
       <div class="header-right">
@@ -105,11 +82,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useTenantStore } from '@/stores/tenant'
 import { getTenantList, type Tenant } from '@/api/tenant'
-import { Odometer, FolderOpened, Cpu, Monitor, Connection, ChatDotSquare, Setting, ArrowDown, Document, Aim, Share, Warning } from '@element-plus/icons-vue'
+import { Odometer, FolderOpened, Cpu, Monitor, Connection, ChatDotSquare, Document, Aim, Share, Warning } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 
 const route = useRoute()
@@ -123,10 +100,6 @@ const isActive = (path: string) => {
   return route.path === path || route.path.startsWith(path + '/')
 }
 
-const isAdminActive = computed(() => {
-  return route.path.startsWith('/admin')
-})
-
 const handleTenantChange = (val: string) => {
   tenantStore.setTenant(val)
   // 刷新页面以加载新租户的数据
@@ -255,21 +228,6 @@ onMounted(() => {
   font-size: 16px;
 }
 
-.dropdown-trigger {
-  cursor: pointer;
-}
-
-.dropdown-arrow {
-  font-size: 12px;
-  margin-left: 4px;
-  transition: transform 0.2s;
-}
-
-.dropdown-trigger:hover .dropdown-arrow,
-.dropdown-trigger.active .dropdown-arrow {
-  transform: rotate(180deg);
-}
-
 .nav-divider {
   width: 1px;
   height: 20px;
@@ -332,32 +290,3 @@ onMounted(() => {
   }
 }
 </style>
-
-<style>
-.admin-dropdown-menu {
-  min-width: 160px;
-}
-
-.admin-dropdown-menu .el-dropdown-menu__item {
-  padding: 0;
-}
-
-.dropdown-link {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  width: 100%;
-  color: var(--text-primary, #1E293B);
-  text-decoration: none;
-  font-size: 14px;
-}
-
-.dropdown-link:hover {
-  color: var(--primary-color, #4F7CFF);
-}
-
-.dropdown-link .el-icon {
-  font-size: 16px;
-}
-</style>
diff --git a/ai-service-admin/src/views/dashboard/index.vue b/ai-service-admin/src/views/dashboard/index.vue
index 2070348..3f55882 100644
--- a/ai-service-admin/src/views/dashboard/index.vue
+++ b/ai-service-admin/src/views/dashboard/index.vue
@@ -320,7 +320,7 @@
             </div>
           </template>
           <div class="help-content">
-            <div class="help-item">
+            <div class="help-item" @click="navigateTo('/admin/knowledge-bases')">
               <div class="help-icon primary">
                 <el-icon><FolderOpened /></el-icon>
               </div>
@@ -329,7 +329,7 @@
                 <p>上传文档并建立向量索引，支持 PDF、Word、TXT 等格式。</p>
               </div>
             </div>
-            <div class="help-item">
+            <div class="help-item" @click="navigateTo('/rag-lab')">
               <div class="help-icon success">
                 <el-icon><Cpu /></el-icon>
               </div>
@@ -338,24 +338,69 @@
                 <p>测试检索增强生成效果，查看检索结果和 AI 响应。</p>
               </div>
             </div>
-            <div class="help-item">
+            <div class="help-item" @click="navigateTo('/monitoring')">
               <div class="help-icon warning">
+                <el-icon><Monitor /></el-icon>
+              </div>
+              <div class="help-text">
+                <h4>会话监控</h4>
+                <p>实时监控用户会话，查看对话记录和系统响应。</p>
+              </div>
+            </div>
+            <div class="help-item" @click="navigateTo('/admin/embedding')">
+              <div class="help-icon info">
                 <el-icon><Connection /></el-icon>
               </div>
               <div class="help-text">
-                <h4>嵌入模型配置</h4>
+                <h4>嵌入模型</h4>
                 <p>配置文本嵌入模型，用于文档向量化。</p>
               </div>
             </div>
-            <div class="help-item">
-              <div class="help-icon info">
+            <div class="help-item" @click="navigateTo('/admin/llm')">
+              <div class="help-icon primary">
                 <el-icon><ChatDotSquare /></el-icon>
               </div>
               <div class="help-text">
-                <h4>LLM 模型配置</h4>
+                <h4>LLM 配置</h4>
                 <p>配置大语言模型，支持 OpenAI、DeepSeek、Ollama 等。</p>
               </div>
             </div>
+            <div class="help-item" @click="navigateTo('/admin/prompt-templates')">
+              <div class="help-icon success">
+                <el-icon><DocumentCopy /></el-icon>
+              </div>
+              <div class="help-text">
+                <h4>Prompt 模板</h4>
+                <p>管理和配置提示词模板，优化 AI 响应效果。</p>
+              </div>
+            </div>
+            <div class="help-item" @click="navigateTo('/admin/intent-rules')">
+              <div class="help-icon warning">
+                <el-icon><Aim /></el-icon>
+              </div>
+              <div class="help-text">
+                <h4>意图规则</h4>
+                <p>配置意图识别规则，实现智能对话路由。</p>
+              </div>
+            </div>
+            <div class="help-item" @click="navigateTo('/admin/script-flows')">
+              <div class="help-icon info">
+                <el-icon><Share /></el-icon>
+              </div>
+              <div class="help-text">
+                <h4>话术流程</h4>
+                <p>设计和管理对话流程，实现多轮对话控制。</p>
+              </div>
+            </div>
+            <div class="help-item" @click="navigateTo('/admin/guardrails')">
+              <div class="help-icon danger">
+                <el-icon><Warning /></el-icon>
+              </div>
+              <div class="help-text">
+                <h4>输出护栏</h4>
+                <p>配置敏感词过滤和内容审核规则，保障输出安全。</p>
+              </div>
+            </div>
           </div>
         </el-card>
       </el-col>
@@ -891,7 +936,7 @@ onMounted(() => {
 
 .help-content {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }
 
@@ -902,6 +947,7 @@ onMounted(() => {
   background-color: var(--bg-tertiary);
   border-radius: 12px;
   transition: all 0.2s ease;
+  cursor: pointer;
 }
 
 .help-item:hover {
@@ -939,6 +985,11 @@ onMounted(() => {
   color: #4F46E5;
 }
 
+.help-icon.danger {
+  background-color: #FEE2E2;
+  color: #DC2626;
+}
+
 .help-text h4 {
   margin: 0 0 4px 0;
   font-size: 14px;
@@ -953,6 +1004,12 @@ onMounted(() => {
   line-height: 1.5;
 }
 
+@media (max-width: 1024px) {
+  .help-content {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 @media (max-width: 768px) {
   .dashboard-page {
     padding: 16px;