feat(style): 优化主题和显示模式

- 新增经典、灰色主题
- 重构主题设置逻辑，支持平滑过渡
- 优化深色模式下的样式
- 调整按钮和图标的颜色设置
- 修复了一些样式相关的问题

src/components/chat/HistoryButton.vue

@@ -93,22 +93,23 @@ const handleDelete = async (conversationId) => {
   display: flex;
   align-items: center;
   gap: 4px;
-  border: none;
+  border: none !important;
   background: transparent !important;
-  
+  box-shadow: none !important;
+  outline: none !important;
+
   &.icon-only {
     width: 32px;
     padding: 0;
   }
 
-  &:hover {
+  &:hover,
-    color: #07c160 !important;
-    background: transparent !important;
-  }
-
   &:focus {
-    outline: none;
+    color: var(--el-color-primary) !important;
-    box-shadow: none;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
   }
 
   :deep(.el-icon) {
@@ -116,6 +117,24 @@ const handleDelete = async (conversationId) => {
   }
 }
 
+:deep(.el-dropdown__trigger) {
+  .el-button {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+
+    &:hover,
+    &:focus {
+      border: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      outline: none !important;
+      color: var(--el-color-primary) !important;
+    }
+  }
+}
+
 :deep(.el-dropdown-menu__item) {
   font-size: 13px;
   padding: 8px 16px;

src/components/settings/DisplayModeSettings.vue

@@ -7,13 +7,13 @@
       size="small"
       class="display-mode-group"
     >
-      <el-radio-button label="system">
+      <el-radio-button value="system">
         <span class="icon system"></span> 默认
       </el-radio-button>
-      <el-radio-button label="light">
+      <el-radio-button value="light">
         <span class="icon light"></span> 浅色
       </el-radio-button>
-      <el-radio-button label="dark">
+      <el-radio-button value="dark">
         <span class="icon dark"></span> 深色
       </el-radio-button>
     </el-radio-group>

src/components/settings/ThemeSettings.vue

@@ -32,8 +32,10 @@ const filteredThemes = computed(() => {
 const themeLabels = {
   default: '默认',
   fresh: '清新',
+  classic: '经典',
   warm: '暖色',
   business: '商务',
+  gray: '灰色',
 };
 
 const getThemeLabel = (themeName) => {

src/layouts/MainLayout.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import Sidebar from '../components/Sidebar.vue'
+import Sidebar from './Sidebar.vue'
 </script>
 
 <style scoped>

src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
-import "@/styles/style.css";
+import 'element-plus/theme-chalk/dark/css-vars.css'
-// 使用自定义主题
 import '@/styles/element-variables.scss'
+import "@/styles/style.css";
 import App from "./App.vue";
 import {router} from "@/router/index";
 import { createPinia } from "pinia";

src/store/settings.js

@@ -62,7 +62,14 @@ export const useSettingsStore = defineStore('settings', {
     updateDisplayMode(newMode) {
       if (['light', 'dark', 'system'].includes(newMode)) {
         this.displayMode = newMode;
-        applyDisplayMode(newMode); // Apply the change immediately
+        // Apply with transition if available
+        if (document.startViewTransition) {
+          document.startViewTransition(() => {
+            applyDisplayMode(newMode);
+          });
+        } else {
+          applyDisplayMode(newMode); // Fallback
+        }
         // Optional: Re-apply theme colors if they differ significantly in dark mode
         // setTheme(this.theme); // Uncomment if needed
       } else {
@@ -74,7 +81,14 @@ export const useSettingsStore = defineStore('settings', {
     updateTheme(newTheme) {
       if (themes.hasOwnProperty(newTheme)) { // Check if the theme exists
         this.theme = newTheme;
-        setTheme(newTheme); // Apply the theme colors
+        // Apply with transition if available
+        if (document.startViewTransition) {
+          document.startViewTransition(() => {
+            setTheme(newTheme);
+          });
+        } else {
+          setTheme(newTheme); // Fallback
+        }
       } else {
          console.warn(`Invalid theme: ${newTheme}`);
       }
@@ -83,14 +97,53 @@ export const useSettingsStore = defineStore('settings', {
     // 重置所有设置
     resetSettings() {
       this.$reset()
-      // Re-apply settings after reset
+      // Re-apply settings after reset, potentially with transition
-      setTheme(this.theme);
+      if (document.startViewTransition) {
-      applyDisplayMode(this.displayMode);
+        document.startViewTransition(() => {
-      this.toggleAnimations(this.animationsEnabled); // Re-apply animation class
+          setTheme(this.theme);
+          applyDisplayMode(this.displayMode);
+          this.toggleAnimations(this.animationsEnabled); // Include animation class update
+        });
+      } else {
+        setTheme(this.theme);
+        applyDisplayMode(this.displayMode);
+        this.toggleAnimations(this.animationsEnabled); // Fallback
+      }
     }
   }
 })
 
 // --- Helper Function to apply animation class --- 
 // Moved applying logic into the toggleAnimations action directly
-// export function applyAnimationSetting(enabled) { ... } 
+// export function applyAnimationSetting(enabled) { ... } 
+
+// --- Watch for system theme changes --- 
+// Ensure this runs after Pinia is initialized if useSettingsStore is called immediately
+// Placing it here runs it once when the module is imported.
+if (window.matchMedia) {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+  const handleSystemThemeChange = () => {
+    // Need to get the store instance inside the handler
+    // Ensure Pinia is active before calling this
+    try {
+      const settingsStore = useSettingsStore(); 
+      if (settingsStore.displayMode === 'system') {
+        console.log('System theme changed, re-applying display mode.');
+        applyDisplayMode('system');
+      }
+    } catch (error) {
+      console.error("Pinia store not available yet for system theme change handler", error);
+    }
+  };
+
+  // Add the listener
+  mediaQuery.addEventListener('change', handleSystemThemeChange);
+
+  // Optional: Cleanup listener if the store or app unmounts, 
+  // though usually not strictly necessary for a global listener like this.
+  // Example (would need proper context, e.g., within app setup):
+  // onUnmounted(() => { 
+  //   mediaQuery.removeEventListener('change', handleSystemThemeChange);
+  // });
+} 

src/styles/element-variables.scss

@@ -1,5 +1,4 @@
 /* 自定义主题变量 */
-$--color-primary: #07c160;
 
 /* 导入 Element Plus 样式 */
 @use "element-plus/theme-chalk/src/index.scss" as *; 

src/styles/style.css

@@ -1,10 +1,14 @@
 /* 基础样式 */
 :root {
-  --primary-color: #409eff;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  --success-color: #67c23a;
+  line-height: 1.5;
-  --warning-color: #e6a23c;
+  font-weight: 400;
-  --danger-color: #f56c6c;
+
-  --info-color: #909399;
+  color-scheme: light dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* 全局样式 */
@@ -17,30 +21,6 @@ body {
 }
 
 
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light only;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   padding: 0;
@@ -53,30 +33,6 @@ body {
  
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 #app {
   /* max-width: 100vh; */
   height: 100%;

src/styles/theme.js

@@ -2,18 +2,82 @@
 // { eager: true } 表示同步导入，立即获取模块内容
 const themeModules = import.meta.glob('./themes/*.js', { eager: true });
 
-// 构建 themes 对象
+// 构建 themes 对象，确保 default 优先
 export const themes = {};
+const defaultPath = './themes/default.js';
+
+// 1. 首先处理 default 主题
+if (themeModules[defaultPath] && themeModules[defaultPath].default) {
+    themes['default'] = themeModules[defaultPath].default;
+}
+
+// 2. 处理其他主题
 for (const path in themeModules) {
-  // 从路径中提取主题名称 (e.g., './themes/default.js' -> 'default')
+    // 跳过已经处理过的 default 主题
-  const themeName = path.replace('./themes/', '').replace('.js', '');
+    if (path === defaultPath) continue;
-  // 获取模块的默认导出 (即主题配置对象)
+
-  if (themeModules[path].default) {
+    // 从路径中提取主题名称 (e.g., './themes/default.js' -> 'default')
-      themes[themeName] = themeModules[path].default;
+    const themeName = path.replace('./themes/', '').replace('.js', '');
+    // 获取模块的默认导出 (即主题配置对象)
+    if (themeModules[path].default) {
+        themes[themeName] = themeModules[path].default;
+    }
+}
+
+// --- Color Manipulation Helpers ---
+
+/** Converts HEX color to RGB object */
+function hexToRgb(hex) {
+  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+/** Converts RGB object to HEX color */
+function rgbToHex(r, g, b) {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+}
+
+/** Mixes two colors (RGB objects) */
+function mixColors(rgb1, rgb2, weight) {
+  weight = Math.max(0, Math.min(1, weight));
+  let w1 = weight;
+  let w2 = 1 - weight;
+  return {
+    r: Math.round(rgb1.r * w1 + rgb2.r * w2),
+    g: Math.round(rgb1.g * w1 + rgb2.g * w2),
+    b: Math.round(rgb1.b * w1 + rgb2.b * w2)
+  };
+}
+
+// --- End Color Helpers ---
+
+// Helper function to apply display mode
+export function applyDisplayMode(mode) {
+  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  let darkModeEnabled = false;
+
+  if (mode === 'dark') {
+    darkModeEnabled = true;
+  } else if (mode === 'system') {
+    darkModeEnabled = prefersDark;
+  } // else mode === 'light', darkModeEnabled remains false
+
+  if (darkModeEnabled) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
   }
 }
 
-// 主题切换函数
+// --- Modified setTheme Function ---
 export function setTheme(themeName) {
   const theme = themes[themeName] || themes.default // Fallback to default
   if (!theme) {
@@ -22,14 +86,61 @@ export function setTheme(themeName) {
   }
 
   const root = document.documentElement
-  
+  const white = { r: 255, g: 255, b: 255 }; // RGB for white
-  // 设置主题色变量
+  const black = { r: 0, g: 0, b: 0 };     // RGB for black
+
+  // 设置主题色变量 (包括 primary 的派生色)
   Object.keys(theme).forEach(key => {
-    root.style.setProperty(`--el-color-${key}`, theme[key])
+    const colorHex = theme[key];
-  })
+    if (!colorHex) return; // Skip if color is undefined
+
+    root.style.setProperty(`--el-color-${key}`, colorHex);
+
+    // Calculate and set shades/darken for primary color
+    if (key === 'primary') {
+      try {
+        const primaryRgb = hexToRgb(colorHex);
+        if (!primaryRgb) throw new Error('Invalid primary hex color');
+
+        // Set light shades (mix with white)
+        for (let i = 1; i <= 9; i++) {
+          const mixedRgb = mixColors(white, primaryRgb, i / 10);
+          root.style.setProperty(`--el-color-primary-light-${i}`, rgbToHex(mixedRgb.r, mixedRgb.g, mixedRgb.b));
+        }
+
+        // Set dark shade - dark-2 (mix with black, 20%)
+        const dark2Rgb = mixColors(black, primaryRgb, 0.2);
+        root.style.setProperty(`--el-color-primary-dark-2`, rgbToHex(dark2Rgb.r, dark2Rgb.g, dark2Rgb.b));
+
+        // Set dark shade - dark-1 (mix with black, 10%) - NEW
+        const dark1Rgb = mixColors(black, primaryRgb, 0.1); 
+        root.style.setProperty(`--el-color-primary-dark-1`, rgbToHex(dark1Rgb.r, dark1Rgb.g, dark1Rgb.b));
+
+      } catch (error) {
+        console.error(`Failed to generate shades for primary color ${colorHex}:`, error);
+      }
+    }
+    // --- TODO: Optionally add shade generation for success, warning, danger, info here --- 
+    // Example for success:
+    /*
+    else if (key === 'success') {
+       try {
+           const successRgb = hexToRgb(colorHex);
+            if (!successRgb) throw new Error('Invalid success hex color');
+            for (let i = 1; i <= 9; i++) {
+                const mixedRgb = mixColors(white, successRgb, i / 10);
+                root.style.setProperty(`--el-color-success-light-${i}`, rgbToHex(mixedRgb.r, mixedRgb.g, mixedRgb.b));
+            }
+            // Add dark-2 if needed
+        } catch (error) {
+           console.error(`Failed to generate shades for success color ${colorHex}:`, error);
+        }
+    }
+    */
+    // Repeat for warning, danger, info if necessary based on your themes
+  });
   
   // 设置主题类名
-  // 查找 body 上是否已有 theme- 开头的类
   const currentThemeClass = Array.from(document.body.classList).find(cls => cls.startsWith('theme-'));
   if (currentThemeClass) {
     document.body.classList.remove(currentThemeClass);

src/styles/themes/classic.js

@@ -0,0 +1,7 @@
+export default {
+  primary: '#409EFF',
+  success: '#67C23A',
+  warning: '#E6A23C',
+  danger: '#F56C6C',
+  info: '#909399'
+}; 

src/styles/themes/dark.js

@@ -1,7 +0,0 @@
-export default {
-  primary: '#5CACEE',
-  success: '#85CE61',
-  warning: '#E6A23C',
-  danger: '#F78989',
-  info: '#A6A9AD'
-}; 

src/styles/themes/default.js

@@ -1,7 +1,7 @@
 export default {
-  primary: '#409EFF',
+  primary: '#368F7C',
   success: '#67C23A',
   warning: '#E6A23C',
   danger: '#F56C6C',
   info: '#909399'
-}; 
+};

src/styles/themes/gray.js

@@ -0,0 +1,7 @@
+export default {
+  primary: '#606266', // Use Regular Text grey as primary for White theme
+  success: '#67C23A', // 标准成功绿
+  warning: '#E6A23C', // 标准警告橙
+  danger: '#F56C6C',  // 标准危险红
+  info: '#909399'     // 标准信息灰
+}; 

src/views/chat/ChatHeader.vue

@@ -126,8 +126,8 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .chat-header {
   height: 60px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--el-border-color-light);
-  background: #FFF;
+  background: var(--el-color-primary-light-8);
   padding: 0 20px;
   flex-shrink: 0;
   
@@ -148,7 +148,7 @@ onUnmounted(() => {
       height: 24px;
       width: 24px;
       padding: 0;
-      color: #666;
+      color: var(--el-text-color-secondary);
       transition: all 0.3s ease;
       border: none;
       background: transparent !important;
@@ -159,7 +159,7 @@ onUnmounted(() => {
       margin-left: -4px;
       
       &:hover {
-        color: #07c160;
+        color: var(--el-color-primary);
         background: transparent !important;
       }
 
@@ -177,7 +177,7 @@ onUnmounted(() => {
     .title-text {
       font-size: 16px;
       font-weight: 500;
-      color: #333;
+      color: var(--el-text-color-primary);
       max-width: 500px;
       white-space: nowrap;
       overflow: hidden;
@@ -190,7 +190,7 @@ onUnmounted(() => {
       height: 24px;
       width: 24px;
       padding: 0;
-      color: #666;
+      color: var(--el-text-color-secondary);
       transition: all 0.3s ease;
       border: none;
       background: transparent !important;
@@ -199,7 +199,7 @@ onUnmounted(() => {
       align-items: center;
       justify-content: center;
       &:hover {
-        color: #07c160;
+        color: var(--el-color-primary);
         background: transparent !important;
       }
 
@@ -223,12 +223,13 @@ onUnmounted(() => {
       :deep(.history-btn) {
         height: 32px;
         padding: 0 12px;
-        color: #666;
+        color: var(--el-text-color-secondary);
         transition: all 0.3s ease;
         font-size: 14px;
         
         &:hover {
-          color: #07c160 !important;
+          color: var(--el-color-primary);
+          background-color: var(--el-color-primary-light-9);
         }
 
         :deep(.el-icon) {
@@ -248,20 +249,21 @@ onUnmounted(() => {
       height: 32px;
       width: 32px;
       padding: 0;
-      color: #666;
+      color: var(--el-text-color-secondary);
       transition: all 0.3s ease;
       border: none;
       background: transparent !important;
       font-size: 14px;
       
       &:hover {
-        color: #07c160;
+        color: var(--el-color-primary);
         background: transparent !important;
       }
 
       &.delete-btn {
         &:hover {
           color: var(--el-color-danger) !important;
+          background-color: var(--el-color-danger-light-9) !important;
         }
       }
 
@@ -277,6 +279,12 @@ onUnmounted(() => {
   }
 }
 
+// Dark mode override
+html.dark .chat-header {
+  background: var(--el-color-primary-dark-1);
+  border-bottom-color: var(--el-border-color-dark);
+}
+
 .user-info-content {
   padding: 20px;
 

src/views/chat/ChatInterface.vue

@@ -18,7 +18,7 @@
         <!-- 用户消息 -->
         <div class="message">
           <div class="message-wrapper user">
-            <div class="avatar"><span class="emoji">👤</span></div>
+            <el-avatar :src="userAvatarUrl" :size="40" class="avatar" />
             <div class="message-content">
               <div class="message-text-wrapper">
                 <!-- <div v-if="message.createdAt" class="message-timestamp">
@@ -27,13 +27,15 @@
                 <div class="message-text">{{ message.question }}</div>
               </div>
               <!-- 改进建议部分 -->
-              <div class="evaluation-toggle" @click="chatStore.toggleEvaluation(message.messageId)">
+              <el-button type="primary" link @click="chatStore.toggleEvaluation(message.messageId)" class="evaluation-toggle-btn">
-                <span class="evaluation-btn">改进建议</span>
+                改进建议
-                <span v-if="['pingfen', 'zongjie'].includes(message?.respondingType)" class="typing-indicator evaluation-icon">
+                <el-icon v-if="!['pingfen', 'zongjie'].includes(message?.respondingType)">
+                  <component :is="message.showEvaluation ? CaretBottom : CaretRight" />
+                </el-icon>
+                <span v-else class="typing-indicator evaluation-icon">
                     <span></span><span></span><span></span>
                 </span>
-                <span v-else class="evaluation-icon">{{ message.showEvaluation ? '▼' : '▶' }}</span>
+              </el-button>
-              </div>
               <!-- 评价总结内容 -->
               <div v-if="message.showEvaluation && (message.pingfen || message.zongjie)" class="evaluation-section">
                 <div class="evaluation-content">
@@ -50,7 +52,7 @@
         <!-- 回答 -->
         <div class="message">
           <div class="message-wrapper assistant">
-            <div class="avatar"><span class="emoji">🤖</span></div>
+            <el-avatar :src="customAvatarUrl" :size="40" class="avatar" />
             <div class="message-content">
               <div class="message-text-wrapper">
                 <!-- <div v-if="message.createdAt" class="message-timestamp">
@@ -102,7 +104,7 @@
     <div v-if="lastMessageWithDafen" class="summary-panel" :class="{ 'summary-panel-collapsed': isSummaryCollapsed }">
       <div class="summary-header" @click="toggleSummary">
         <span class="summary-title">会话总结</span>
-        <span v-if="['dafen'].includes(message?.respondingType)" class="typing-indicator evaluation-icon">
+        <span v-if="['dafen'].includes(lastMessageWithDafen?.respondingType)" class="typing-indicator evaluation-icon">
             <span></span><span></span><span></span>
         </span>
         <span class="summary-toggle-icon">{{ isSummaryCollapsed ? '▼' : '▲' }}</span>
@@ -118,8 +120,10 @@ import { marked } from 'marked'
 import * as echarts from 'echarts'
 import { useChatStore } from '@/store/chat'
 import ChatHeader from '@/views/chat/ChatHeader.vue'
-import { ElTag, ElButton, ElInput } from 'element-plus'
+import { ElTag, ElButton, ElInput, ElAvatar } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, CaretBottom, CaretRight } from '@element-plus/icons-vue'
+import userAvatarUrl from '@/assets/user.png';
+import customAvatarUrl from '@/assets/custom.png';
 
 defineOptions({
   name: 'ChatInterface'
@@ -323,11 +327,16 @@ onUnmounted(() => {
   flex-direction: column;
   height: 100%;
   width: 100%;
-  background-color: #f5f5f5;
+  background-color: var(--el-bg-color-page);
   position: relative;
   overflow: hidden;
 }
 
+// Dark mode override for chat container
+html.dark .chat-container {
+  background-color: var(--el-color-primary-dark-1); // Use the new lighter dark shade
+}
+
 .chat-background {
   margin: 0 0 20px 0;
   display: flex;
@@ -345,14 +354,14 @@ onUnmounted(() => {
     font-size: 12px;
     padding: 4px 12px;
     border-radius: 12px;
-    background-color: #f4f4f5;
+    background-color: var(--el-fill-color-light);
-    border: 1px solid #e9e9eb;
+    border: 1px solid var(--el-border-color-lighter);
-    color: #909399;
+    color: var(--el-text-color-secondary);
     transition: all 0.3s ease;
 
     &:hover {
-      background-color: #e9e9eb;
+      background-color: var(--el-fill-color);
-      color: #606266;
+      color: var(--el-text-color-regular);
     }
   }
 }
@@ -361,10 +370,10 @@ onUnmounted(() => {
   margin-top: 12px;
   width: 90%;
   max-width: 800px;
-  background: #fff;
+  background: var(--el-bg-color);
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--el-box-shadow-light);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--el-border-color-lighter);
 
   .background-content {
     padding: 16px 24px 16px 16px;
@@ -385,19 +394,19 @@ onUnmounted(() => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.2);
+      background: var(--el-border-color-darker);
       border-radius: 4px;
       border: 2px solid transparent;
       background-clip: padding-box;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.3);
+        background: var(--el-border-color);
       }
     }
 
     .background-text {
       opacity: 0.9;
-      color: #495057;
+      color: var(--el-text-color-regular);
       line-height: 1.6;
 
       :deep(p) {
@@ -414,7 +423,7 @@ onUnmounted(() => {
       }
 
       :deep(strong) {
-        color: #2c3e50;
+        color: var(--el-text-color-primary);
         font-weight: 600;
       }
 
@@ -422,26 +431,31 @@ onUnmounted(() => {
         font-size: 20px;
         font-weight: 600;
         margin: 0 0 16px 0;
-        color: #333;
+        color: var(--el-text-color-primary);
       }
 
       :deep(h2) {
         font-size: 18px;
         font-weight: 600;
         margin: 20px 0 12px 0;
-        color: #333;
+        color: var(--el-text-color-primary);
       }
 
       :deep(h3) {
         font-size: 16px;
         font-weight: 600;
         margin: 16px 0 8px 0;
-        color: #333;
+        color: var(--el-text-color-primary);
       }
     }
   }
 }
 
+// Dark mode override for background content
+html.dark .background-section .background-content {
+  background: var(--el-fill-color-light); // Use a neutral dark fill color
+}
+
 .chat-messages {
   flex: 1;
   overflow-y: scroll;
@@ -464,13 +478,13 @@ onUnmounted(() => {
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
+    background: var(--el-border-color-darker);
     border-radius: 4px;
     border: 2px solid transparent;
     background-clip: padding-box;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.3);
+      background: var(--el-border-color);
     }
   }
 }
@@ -491,7 +505,9 @@ onUnmounted(() => {
       flex-direction: row-reverse;
       justify-content: flex-start;
       .message-text {
-        background-color: #95ec69;
+        background-color: var(--el-color-primary);
+        color: var(--el-color-white);
+        border-color: transparent;
       }
       .message-content {
         display: flex;
@@ -504,8 +520,8 @@ onUnmounted(() => {
       flex-direction: row;
       justify-content: flex-start;
       .message-text {
-        background-color: #ffffff;
+        background-color: var(--el-bg-color);
-        color: #333333;
+        color: var(--el-text-color-primary);
       }
       .message-content {
         display: flex;
@@ -518,18 +534,6 @@ onUnmounted(() => {
       width: 40px;
       height: 40px;
       flex-shrink: 0;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: #fff;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-      border: 1px solid rgba(0, 0, 0, 0.05);
-
-      .emoji {
-        font-size: 20px;
-        line-height: 1;
-      }
     }
   }
 }
@@ -547,16 +551,15 @@ onUnmounted(() => {
     max-width: 100%;
     
     .message-text {
-      min-height: 36px;
+      // min-width: 60px;
-      min-width: 60px;
       line-height: 1.5;
       font-size: 16px;
       padding: 8px 12px;
       border-radius: 6px;
       white-space: pre-wrap;
       position: relative;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      box-shadow: var(--el-box-shadow-light);
-      border: 1px solid rgba(0, 0, 0, 0.05);
+      border: 1px solid var(--el-border-color-lighter);
       display: inline-block;
       max-width: 100%;
 
@@ -571,45 +574,28 @@ onUnmounted(() => {
     }
   }
 
-  .evaluation-toggle {
+  .evaluation-toggle-btn {
-    display: flex!important;
+    padding: 6px 0; // Adjust padding for link button
-    cursor: pointer;
-    color: #576b95;
     font-size: 13px;
-    margin-top: 8px;
-    padding: 6px 12px;
-    display: block;
-    width: fit-content;
-    align-items: center;
-    border-radius: 6px;
-    background: rgba(87, 107, 149, 0.08);
-    transition: all 0.3s ease;
-    border: 1px solid rgba(87, 107, 149, 0.1);
 
-    &:hover {
+    .el-icon {
-      background: rgba(87, 107, 149, 0.15);
+      margin-left: 4px;
-      border-color: rgba(87, 107, 149, 0.2);
+      vertical-align: middle;
-    }
-
-    .evaluation-btn {
-      padding-right: 4px;
-      font-weight: 500;
     }
 
     .evaluation-icon {
-      font-size: 12px;
-      transition: transform 0.3s ease;
-      
       &.typing-indicator {
         padding: 0;
         display: inline-flex;
         align-items: center;
         gap: 2px;
+        margin-left: 4px;
+        vertical-align: middle;
         
         span {
           width: 4px;
           height: 4px;
-          background: #576b95;
+          background: var(--el-color-primary);
           border-radius: 50%;
           animation: bounce 1.4s infinite ease-in-out;
           
@@ -624,18 +610,17 @@ onUnmounted(() => {
 .evaluation-section {
   margin-top: 12px;
   font-size: 14px;
-  background: #fff;
+  background: var(--el-bg-color);
   border-radius: 8px;
   overflow: visible;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--el-box-shadow-light);
   max-width: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--el-border-color-lighter);
   position: relative;
 
   .evaluation-content {
     padding: 16px 24px 16px 16px;
-    background: #f8f9fa;
+    background: var(--el-fill-color-light);
-    // max-height: 480px;
     overflow-y: scroll;
     position: relative;
     
@@ -651,19 +636,19 @@ onUnmounted(() => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.2);
+      background: var(--el-border-color-darker);
       border-radius: 4px;
       border: 2px solid transparent;
       background-clip: padding-box;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.3);
+        background: var(--el-border-color);
       }
     }
     
     .evaluation-text {
       opacity: 0.9;
-      color: #495057;
+      color: var(--el-text-color-regular);
       border: none;
       box-shadow: none;
       padding: 0;
@@ -686,12 +671,12 @@ onUnmounted(() => {
       }
 
       :deep(strong) {
-        color: #2c3e50;
+        color: var(--el-text-color-primary);
         font-weight: 600;
       }
 
       :deep(em) {
-        color: #6c757d;
+        color: var(--el-text-color-secondary);
         font-style: italic;
       }
     }
@@ -707,9 +692,9 @@ onUnmounted(() => {
   align-items: flex-end;
   gap: 12px;
   padding: 16px;
-  background: #f5f5f5;
+  background: var(--el-color-primary-light-8);
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid var(--el-border-color-light);
-
+  z-index: 3;
   :deep(.el-textarea) {
     flex: 1;
 
@@ -719,34 +704,40 @@ onUnmounted(() => {
       font-size: 14px;
       line-height: 1.5;
       border-radius: 4px;
-      border-color: #dcdfe6;
+      border-color: var(--el-border-color);
-      background-color: #fff;
+      background-color: var(--el-bg-color);
       transition: all 0.3s;
       resize: none;
 
       &:hover {
-        border-color: #c0c4cc;
+        border-color: var(--el-border-color-hover);
       }
 
       &:focus {
         border-color: var(--el-color-primary);
-        box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
+        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
       }
 
       &:disabled {
-        background-color: #f5f5f5;
+        background-color: var(--el-fill-color-light);
-        border-color: #e0e0e0;
+        border-color: var(--el-border-color-lighter);
-        color: #999;
+        color: var(--el-text-color-placeholder);
         cursor: not-allowed;
       }
 
       &::placeholder {
-        color: #999;
+        color: var(--el-text-color-placeholder);
       }
     }
   }
 }
 
+// Dark mode override for input area
+html.dark .input-area {
+  background: var(--el-color-primary-dark-1); // Dark 1 (Lighter dark)
+  border-top-color: var(--el-border-color-dark); // Use standard dark border
+}
+
 :deep(.el-button) {
   height: 40px;
   padding: 0 20px;
@@ -755,22 +746,22 @@ onUnmounted(() => {
   font-weight: 500;
   
   &.is-disabled {
-    background-color: #f5f5f5 !important;
+    background-color: var(--el-fill-color-light) !important;
-    border-color: #dcdfe6 !important;
+    border-color: var(--el-border-color) !important;
-    color: #999 !important;
+    color: var(--el-text-color-placeholder) !important;
     cursor: not-allowed;
   }
 
   &.new-chat-btn {
-    --el-button-bg-color: #f2f3f5;
+    --el-button-bg-color: var(--el-fill-color-light);
-    --el-button-border-color: #dcdfe6;
+    --el-button-border-color: var(--el-border-color);
-    --el-button-text-color: #606266;
+    --el-button-text-color: var(--el-text-color-regular);
-    --el-button-hover-bg-color: #e9ecef;
+    --el-button-hover-bg-color: var(--el-fill-color);
-    --el-button-hover-border-color: #c0c4cc;
+    --el-button-hover-border-color: var(--el-border-color-hover);
-    --el-button-hover-text-color: #303133;
+    --el-button-hover-text-color: var(--el-text-color-primary);
-    --el-button-active-bg-color: #e9ecef;
+    --el-button-active-bg-color: var(--el-fill-color);
-    --el-button-active-border-color: #c0c4cc;
+    --el-button-active-border-color: var(--el-border-color-hover);
-    --el-button-active-text-color: #303133;
+    --el-button-active-text-color: var(--el-text-color-primary);
     padding: 0 16px;
     font-size: 14px;
     display: flex;
@@ -792,9 +783,9 @@ onUnmounted(() => {
     }
     
     &.is-disabled {
-      background-color: #f5f5f5 !important;
+      background-color: var(--el-fill-color-light) !important;
-      border-color: #dcdfe6 !important;
+      border-color: var(--el-border-color) !important;
-      color: #999 !important;
+      color: var(--el-text-color-placeholder) !important;
       cursor: not-allowed;
     }
   }
@@ -805,12 +796,12 @@ onUnmounted(() => {
 }
 
 :deep(.el-button--primary) {
-  --el-button-bg-color: #07c160;
+  --el-button-bg-color: var(--el-color-primary);
-  --el-button-border-color: #07c160;
+  --el-button-border-color: var(--el-color-primary);
-  --el-button-hover-bg-color: #06ae56;
+  --el-button-hover-bg-color: var(--el-color-primary-light-3);
-  --el-button-hover-border-color: #06ae56;
+  --el-button-hover-border-color: var(--el-color-primary-light-3);
-  --el-button-active-bg-color: #06ae56;
+  --el-button-active-bg-color: var(--el-color-primary-light-3);
-  --el-button-active-border-color: #06ae56;
+  --el-button-active-border-color: var(--el-color-primary-light-3);
 }
 
 .new-chat-btn {
@@ -858,7 +849,8 @@ onUnmounted(() => {
 /* 统一的滚动条样式 */
 .chat-messages,
 .summary-content,
-.evaluation-content {
+.evaluation-content,
+.background-content {
   &::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -871,13 +863,13 @@ onUnmounted(() => {
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
+    background: var(--el-border-color-darker);
     border-radius: 4px;
     border: 2px solid transparent;
     background-clip: padding-box;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.3);
+      background: var(--el-border-color);
     }
   }
 }
@@ -905,11 +897,10 @@ onUnmounted(() => {
 
 .user {
   .message-text {
-    background-color: #95ec69;
+    border-color: transparent;
-    border-color: rgba(0, 0, 0, 0.08);
 
     &::before {
-      border-right-color: #95ec69;
+      border-right-color: var(--el-color-primary);
       right: 100%;
       transform: scaleX(-1);
     }
@@ -918,11 +909,11 @@ onUnmounted(() => {
 
 .assistant {
   .message-text {
-    background-color: #ffffff;
+    background-color: var(--el-bg-color);
-    border-color: rgba(0, 0, 0, 0.08);
+    border-color: var(--el-border-color-lighter);
 
     &::before {
-      border-right-color: #ffffff;
+      border-right-color: var(--el-bg-color);
       right: 100%;
     }
   }
@@ -944,7 +935,7 @@ onUnmounted(() => {
   span {
     width: 4px;
     height: 4px;
-    background: #999;
+    background: var(--el-text-color-placeholder);
     border-radius: 50%;
     animation: bounce 1.4s infinite ease-in-out;
     
@@ -958,36 +949,23 @@ onUnmounted(() => {
   40% { transform: scale(1); }
 }
 
-.evaluation-toggle {
-  transition: all 0.3s ease;
-}
-
-.evaluation-text {
-  position: relative;
-  margin-bottom: 12px;
-  
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .summary-panel {
   position: absolute;
   bottom: 80px;
   left: 20px;
   right: 20px;
-  background: #fff;
+  background: var(--el-bg-color);
   border-radius: 8px;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--el-box-shadow-light);
   transition: all 0.3s ease;
-  z-index: 100;
+  z-index: 2;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   max-height: 300px;
 
   &.summary-panel-collapsed {
-    max-height: 42px; // 标题栏的高度
+    max-height: 42px;
 
     .summary-content {
       opacity: 0;
@@ -1005,21 +983,21 @@ onUnmounted(() => {
     justify-content: space-between;
     align-items: center;
     padding: 10px 16px;
-    background: #f8f9fa;
+    background: var(--el-fill-color-light);
     cursor: pointer;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid var(--el-border-color-light);
     transition: all 0.3s ease;
     flex-shrink: 0;
-    height: 42px;
+    height: 24px;
 
     .summary-title {
       font-weight: 600;
-      color: #2c3e50;
+      color: var(--el-text-color-primary);
       font-size: 15px;
     }
 
     .summary-toggle-icon {
-      color: #6c757d;
+      color: var(--el-text-color-secondary);
       font-size: 14px;
       transition: transform 0.3s ease;
     }
@@ -1031,8 +1009,8 @@ onUnmounted(() => {
     max-height: 250px;
     overflow-y: auto;
     padding: 16px;
-    background: #fff;
+    background: var(--el-bg-color);
-    color: #495057;
+    color: var(--el-text-color-regular);
     line-height: 1.6;
     font-size: 14px;
     transition: all 0.3s ease;
@@ -1056,20 +1034,20 @@ onUnmounted(() => {
     }
 
     :deep(strong) {
-      color: #2c3e50;
+      color: var(--el-text-color-primary);
       font-weight: 600;
     }
 
     :deep(em) {
-      color: #6c757d;
+      color: var(--el-text-color-secondary);
       font-style: italic;
     }
 
     :deep(code) {
-      background: #f8f9fa;
+      background: var(--el-fill-color-light);
       padding: 2px 4px;
       border-radius: 4px;
-      color: #e83e8c;
+      color: var(--el-color-primary);
       font-family: 'Courier New', Courier, monospace;
     }
   }
@@ -1077,7 +1055,7 @@ onUnmounted(() => {
 
 .message-timestamp {
   font-size: 12px;
-  color: #999;
+  color: var(--el-text-color-secondary);
   position: absolute;
   top: -20px;
   opacity: 0;
@@ -1096,15 +1074,15 @@ onUnmounted(() => {
   }
   
   .message-text {
-    min-height: 36px;
+    // min-width: 60px;
     line-height: 1.5;
     font-size: 16px;
     padding: 8px 12px;
-    border-radius: 4px;
+    border-radius: 6px;
     white-space: pre-wrap;
     position: relative;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--el-box-shadow-light);
-    border: 1px solid rgba(0, 0, 0, 0.05);
+    border: 1px solid var(--el-border-color-lighter);
     display: inline-block;
     max-width: 100%;
 
@@ -1128,9 +1106,9 @@ onUnmounted(() => {
     font-size: 12px;
     padding: 4px 12px;
     border-radius: 12px;
-    background-color: #f4f4f5;
+    background-color: var(--el-fill-color-light);
-    border-color: #e9e9eb;
+    border-color: var(--el-border-color-lighter);
-    color: #909399;
+    color: var(--el-text-color-secondary);
   }
 }
 </style> 

src/views/chat/ChatModeSelector.vue

@@ -8,9 +8,14 @@
     ></div>
     <div class="mode-selector" :class="{ 'collapsed': settingsStore.sidebarCollapsed }">
       <div class="mode-header">
+        <!-- Expanded Logo -->
         <div class="mode-header-title" v-if="!settingsStore.sidebarCollapsed">
           <img src="/lgogo.svg"  alt="Logo"  class="mode-header-icon" />
         </div>
+        <!-- Collapsed Logo -->
+        <div class="mode-header-collapsed-logo" v-if="settingsStore.sidebarCollapsed">
+             <img src="/logo.svg" alt="Logo" class="mode-header-icon collapsed" />
+        </div>
       </div>
       <el-menu
         :default-active="chatStore.currentMode"
@@ -34,7 +39,7 @@
           <div class="sidebar-footer">
             <div class="settings-button" title="设置">
               <el-icon><Setting /></el-icon>
-              <span class="button-text">设置</span>
+              <span v-if="!settingsStore.sidebarCollapsed" class="button-text">设置</span>
             </div>
           </div>
         </template>
@@ -101,7 +106,7 @@ onUnmounted(() => {
 .mode-selector {
   width: 240px;
   height: 100%;
-  background-color: var(--el-bg-color);
+  background-color: var(--el-color-primary-light-7);
   border-right: 1px solid var(--el-border-color-light);
   position: relative;
   z-index: 10;
@@ -165,12 +170,12 @@ onUnmounted(() => {
     }
     
     &.is-active {
-      background-image: linear-gradient(135deg, var(--el-color-primary)  0%, var(--el-color-primary-light-3) 100%);
+      background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
-      color: white;
+      color: var(--el-color-white);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 
       .el-icon {
-        color: white;
+        color: var(--el-color-white);
       }
     }
     
@@ -234,6 +239,26 @@ onUnmounted(() => {
 }
 
 .mode-selector.collapsed {
+  .mode-header {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    
+    .mode-header-collapsed-logo {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .mode-header-icon.collapsed {
+        height: 32px;
+        filter: drop-shadow(0 0 0.75em rgba(var(--el-color-primary-rgb), 0.6));
+        vertical-align: middle;
+    }
+  }
+  
   .mode-menu {
     padding: 8px 12px;
   }
@@ -267,66 +292,236 @@ onUnmounted(() => {
 }
 
 .sidebar-footer {
-  padding: 8px;
+  height: 48px;
-  margin-top: auto;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .settings-button {
   display: flex;
   align-items: center;
-  height: 44px;
+  height: 40px;
-  line-height: 44px;
+  width: 100%;
+  padding: 0 12px;
   color: var(--el-text-color-regular);
   border-radius: 8px;
-  padding: 0 12px !important;
   cursor: pointer;
-  overflow: hidden;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-  
+
-  body:not(.no-animations) & {
-    transition: background-color 0.3s, color 0.3s;
-  }
-  
   .el-icon {
     margin-right: 12px;
     font-size: 18px;
     width: 18px;
-    color: var(--el-text-color-regular);
+  }
-    body:not(.no-animations) & {
+
-      transition: color 0.3s;
+  &:hover {
-    }
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-primary);
   }
 
   .button-text {
     font-size: 14px;
-    margin-left: 12px;
     white-space: nowrap;
     opacity: 1;
-    transform: translateX(0);
+    transition: opacity 0.3s ease-in-out;
-
-    body:not(.no-animations) & {
-       transition: opacity 0.3s ease-in-out;
-    }
-  }
-  
-  &:hover {
-    background-color: var(--el-color-primary-light-9);
-    color: var(--el-color-primary);
-
-    .el-icon {
-       color: var(--el-color-primary);
-    }
   }
 }
 
 .mode-selector.collapsed {
   .sidebar-footer {
-     padding: 8px 12px;
+    padding: 0;
-     .settings-button {
-        width: 40px;
-        height: 40px;
-     }
   }
 
+  .settings-button {
+    justify-content: center;
+    width: 40px;
+    padding: 0;
+
+    .el-icon {
+      margin-right: 0;
+    }
+
+    .button-text {
+      opacity: 0;
+      pointer-events: none;
+    }
+    
+    &:hover {
+      background-color: var(--el-fill-color-light);
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.settings-popover-popper {
+  min-width: 350px !important;
+  padding: 0 !important;
+  border: none !important;
+  box-shadow: var(--el-box-shadow-light);
+  border-radius: 8px;
+}
+</style>
+
+<style lang="scss" scoped>
+.mode-selector {
+  width: 240px;
+  height: 100%;
+  background-color: var(--el-color-primary-light-7);
+  border-right: 1px solid var(--el-border-color-light);
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+
+  body:not(.no-animations) & {
+    transition: width 0.3s ease-in-out;
+  }
+  
+  &.collapsed {
+    width: 64px;
+  }
+}
+
+.mode-header {
+  height: 60px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  
+  &-title {
+    display: flex;
+    align-items: center;
+    
+    .mode-header-icon {
+      height: 32px;
+      will-change: filter;
+      
+      body:not(.no-animations) & {
+        transition: filter 300ms;
+      }
+      
+      &:hover {
+        filter: drop-shadow(0 0 0.75em rgba(var(--el-color-primary-rgb), 0.6)); 
+      }
+    }
+  }
+}
+
+.mode-menu {
+  background-color: transparent;
+  border: none;
+  padding: 8px;
+  flex-grow: 1;
+  overflow-y: auto;
+  
+  :deep(.el-menu-item) {
+    height: 44px;
+    line-height: 44px;
+    color: var(--el-text-color-regular);
+    border-radius: 8px;
+    margin-bottom: 4px;
+    padding: 0 12px !important;
+    overflow: hidden;
+
+    .el-icon {
+      margin-right: 12px;
+      font-size: 18px;
+      width: 18px;
+    }
+    
+    &.is-active {
+      background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
+      color: var(--el-color-white);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+      .el-icon {
+        color: var(--el-color-white);
+      }
+    }
+    
+    &:not(.is-active):hover {
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+    }
+    
+    .mode-name {
+      font-size: 14px;
+      margin-left: 12px;
+      white-space: nowrap;
+      opacity: 1;
+      transform: translateX(0);
+      
+      body:not(.no-animations) & {
+         transition: opacity 0.3s ease-in-out;
+      }
+    }
+  }
+}
+
+.mode-setting-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--el-text-color-secondary);
+  
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+/* 移动端样式 */
+@media screen and (max-width: 768px) {
+  .mode-selector-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--el-overlay-color-lighter);
+    z-index: 9;
+    display: none;
+    
+    &.visible {
+      display: block;
+    }
+  }
+  
+  .mode-selector {
+    position: fixed;
+    left: 0;
+    top: 0;
+    
+    &.collapsed {
+      transform: translateX(-100%);
+    }
+  }
+}
+
+.mode-selector.collapsed {
+  .mode-header {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    
+    .mode-header-collapsed-logo {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .mode-header-icon.collapsed {
+        height: 32px;
+        filter: drop-shadow(0 0 0.75em rgba(var(--el-color-primary-rgb), 0.6));
+        vertical-align: middle;
+    }
+  }
+  
   .mode-menu {
     padding: 8px 12px;
   }
@@ -350,18 +545,99 @@ onUnmounted(() => {
   }
 
   .settings-button {
+    width: 40px;
+    height: 40px;
     .mode-name,
     .button-text {
       opacity: 0;
     }
   }
 }
+
+.sidebar-footer {
+  height: 48px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.settings-button {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  width: 100%;
+  padding: 0 12px;
+  color: var(--el-text-color-regular);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  .el-icon {
+    margin-right: 12px;
+    font-size: 18px;
+    width: 18px;
+  }
+
+  &:hover {
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-primary);
+  }
+
+  .button-text {
+    font-size: 14px;
+    white-space: nowrap;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+  }
+}
+
+.mode-selector.collapsed {
+  .sidebar-footer {
+    padding: 0;
+  }
+
+  .settings-button {
+    justify-content: center;
+    width: 40px;
+    padding: 0;
+
+    .el-icon {
+      margin-right: 0;
+    }
+
+    .button-text {
+      opacity: 0;
+      pointer-events: none;
+    }
+    
+    &:hover {
+      background-color: var(--el-fill-color-light);
+    }
+  }
+}
 </style>
 
 <style lang="scss">
 .settings-popover-popper {
+  min-width: 350px !important;
   padding: 0 !important;
-  min-width: 240px !important;
+  border: none !important;
-  width: auto !important;
+  box-shadow: var(--el-box-shadow-light);
+  border-radius: 8px;
+}
+</style>
+
+<style lang="scss">
+/* Dark mode override */
+html.dark .mode-selector {
+    background-color: var(--el-color-primary-dark-2);
+    border-right-color: var(--el-border-color-dark);
+  
+  /* Dark mode hover */
+  .mode-menu :deep(.el-menu-item):not(.is-active):hover {
+      background-color: var(--el-fill-color);
+      color: var(--el-color-primary);
+  }
 }
 </style> 

src/views/chat/index.vue

@@ -39,7 +39,7 @@ const handleModeChange = (mode) => {
   height: 100vh;
   margin: 0;
   padding: 0;
-  background-color: #f5f5f5;
+  background-color: var(--el-bg-color-page);
 }
 
 .chat-container {
@@ -52,7 +52,7 @@ const handleModeChange = (mode) => {
   flex: 1;
   height: 100%;
   overflow: hidden;
-  background-color: #f5f5f5;
+  background-color: var(--el-bg-color-page);
   position: relative;
 }
 

vite.config.js

@@ -9,7 +9,9 @@ import mkcert from "vite-plugin-mkcert";
 // https://vite.dev/config/
 export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd())
-  console.log('env', env)
+  console.log('\x1b[36m%s\x1b[0m', '[VITE_APP_ENV]', env.VITE_APP_ENV)
+  console.log('\x1b[33m%s\x1b[0m', '[VITE_APP_BASE_API]', env.VITE_APP_BASE_API)
+  
   // 将环境变量转换为 process.env 格式
   const processEnv = {}
   Object.keys(env).forEach(key => {
@@ -37,7 +39,7 @@ export default defineConfig(({ command, mode }) => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: ``
+          api: 'modern-compiler'
         }
       }
     },