feat: 完成全站深色主题改造

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

@@ -626,7 +626,7 @@ function toggleSidebar() {
 
   .conversation-item {
     transition: all 0.3s ease;
-    width: 100% !important;
+    //width: 100% !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
 

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

@@ -170,7 +170,7 @@ function openVipGuide() {
           <el-avatar :src="getUserProfilePicture()" :size="28" fit="fit" shape="circle" />
         </template>
 
-        <div class="popover-content-box shadow-lg">
+        <div class="popover-content-box shadow-lg popover-box-item">
           <!-- 用户信息 -->
           <div class="user-info-box flex items-center gap-8px p-8px rounded-lg mb-2">
             <el-avatar :src="getUserProfilePicture()" :size="32" fit="fit" shape="circle" />

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useColorMode } from '@vueuse/core';
+import logoDark from '@/assets/images/logo-dark.png';
 import logo from '@/assets/images/logo.png';
 import ConsoleBtn from '@/layouts/components/Header/components/ConsoleBtn.vue';
 import { useUserStore } from '@/stores';
@@ -17,6 +19,22 @@ const router = useRouter();
 const route = useRoute();
 const userStore = useUserStore();
 
+// 使用 VueUse 的 useColorMode 获取主题状态
+const mode = useColorMode({
+  attribute: 'data-theme',
+  modes: {
+    light: 'light',
+    dark: 'dark',
+  },
+  storageKey: 'yi-theme',
+  initialValue: 'light',
+});
+
+// 根据主题切换 logo
+const currentLogo = computed(() => {
+  return mode.value === 'dark' ? logoDark : logo;
+});
+
 // 移动端菜单抽屉状态
 const mobileMenuVisible = ref(false);
 
@@ -73,7 +91,7 @@ function toggleMobileMenu() {
       <!-- 左侧品牌区域 -->
       <div class="menu-left">
         <div class="brand-container" @click="router.push('/')">
-          <el-image :src="logo" alt="logo" fit="contain" class="logo-img" />
+          <el-image :src="currentLogo" alt="logo" fit="contain" class="logo-img" />
           <span class="brand-text">意心AI</span>
         </div>
       </div>
@@ -175,7 +193,7 @@ function toggleMobileMenu() {
     <!-- 移动端头部 -->
     <div class="mobile-header">
       <div class="mobile-brand" @click="router.push('/')">
-        <el-image :src="logo" alt="logo" fit="contain" class="mobile-logo" />
+        <el-image :src="currentLogo" alt="logo" fit="contain" class="mobile-logo" />
         <span class="mobile-brand-text">意心AI</span>
       </div>