From bcada6ead5b299a9adae6c5ff2d54692b72426e2 Mon Sep 17 00:00:00 2001
From: aylvn <aylvn@sina.com>
Date: Sun, 16 Mar 2025 16:22:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B7=B1=E8=89=B2/=E6=B5=85?=
 =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 desktop/frontend/src/components/AsideMenu.vue | 15 ++++++-
 desktop/frontend/src/components/MainFrame.vue |  3 +-
 desktop/frontend/src/components/TopHeader.vue | 45 ++++++++++++-------
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/desktop/frontend/src/components/AsideMenu.vue b/desktop/frontend/src/components/AsideMenu.vue
index bbbafc1..9736dae 100644
--- a/desktop/frontend/src/components/AsideMenu.vue
+++ b/desktop/frontend/src/components/AsideMenu.vue
@@ -115,12 +115,23 @@ watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
 function activeMenu() {
   const currRoute = router.currentRoute
   const path = currRoute.value.path
-  // console.log("currRoute path:", path)
+  console.log("currRoute path:", path)
   let index = getIndexByPath(path)
-  // console.log("index:", index)
+  console.log("index:", index)
   if (utils.notNull(index)) {
     return index
   }
+  // 没有匹配上,截取掉path最后一级,再匹配一次
+  const lastIndex = path.lastIndexOf('/')
+  if (lastIndex != -1) {
+    const newPath = path.substring(0, lastIndex)
+    console.log("截取后newPath:", newPath)
+    index = getIndexByPath(newPath)
+    console.log("截取后index:", index)
+    if (utils.notNull(index)) {
+      return index
+    }
+  }
   return "1"
 }
 
diff --git a/desktop/frontend/src/components/MainFrame.vue b/desktop/frontend/src/components/MainFrame.vue
index 4334ebc..83b2473 100644
--- a/desktop/frontend/src/components/MainFrame.vue
+++ b/desktop/frontend/src/components/MainFrame.vue
@@ -143,7 +143,7 @@ header {
   width: 100%;
   height: 44px;
   padding: 0px;
-  background-color: var(--el-bg-color);
+  background-color: var(--el-fg-color);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -169,6 +169,7 @@ main {
   width: 100%;
   padding: 0px;
   overflow: hidden;
+  background-color: var(--el-bg-color);
 }
 
 .menu-logo {
diff --git a/desktop/frontend/src/components/TopHeader.vue b/desktop/frontend/src/components/TopHeader.vue
index ec6cc4e..83d2ab5 100644
--- a/desktop/frontend/src/components/TopHeader.vue
+++ b/desktop/frontend/src/components/TopHeader.vue
@@ -27,31 +27,42 @@
       </el-link>
     </div>
 
-    <!-- 右侧固定下拉 -->
-    <el-dropdown trigger="click" @command="handleSwitchLang" class="fxc plr-16">
-      <span class="el-dropdown-link">
-        {{ selectedLang.name }}
-        <el-icon class="el-icon--right">
-          <arrow-down />
-        </el-icon>
-      </span>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item v-for="lang in langList" :key="lang" :command="lang">
-            {{ lang.name }}
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
+    <!-- 右侧 -->
+    <div class="fxc">
+      <div class="mlr-8">
+        <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" width="40"
+          style="--el-switch-on-color: #4c4d4f; --el-switch-off-color: #f2f2f2;" />
+      </div>
+
+      <!-- 右侧固定下拉 -->
+      <el-dropdown trigger="click" @command="handleSwitchLang" class="fxc plr-16">
+        <span class="el-dropdown-link">
+          {{ selectedLang.name }}
+          <el-icon class="el-icon--right">
+            <arrow-down />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="lang in langList" :key="lang" :command="lang">
+              {{ lang.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { ArrowDown, Refresh } from '@element-plus/icons-vue'
+import { ArrowDown, Refresh, Moon, Sunny } from '@element-plus/icons-vue'
 import { useConfig } from '@/store/config'
+/** 暗黑主题切换 */
+import { useDark } from '@vueuse/core'
 
 const config = useConfig()
+const isDark = useDark()
 
 const modelList = ref(config.modelList)