Browse Source

修改黑夜样式

yangg 3 tuần trước cách đây
mục cha
commit
64ec0ac5d7

+ 1 - 1
.env.development

@@ -1,3 +1,3 @@
 NODE_ENV=development
-VITE_BASE_AI_API=http://58.246.234.210:8082
+VITE_BASE_AI_API=http://192.168.100.187:8082
 VITE_BASE_AI_F_API=http://58.246.234.210:8082

BIN
src/assets/logo.png


+ 56 - 0
src/assets/styles/theme.css

@@ -0,0 +1,56 @@
+/* 全局主题变量 */
+:root {
+  /* 浅色主题变量 */
+  --primary-bg: #ffffff;
+  --secondary-bg: #f5f5f5;
+  --primary-text: #333333;
+  --secondary-text: #666666;
+  --border-color: #e0e0e0;
+  --hover-bg: #f0f0f0;
+  --card-bg: #ffffff;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --highlight-color: #1890ff;
+  
+  /* 动画时间 */
+  --theme-transition: 0.3s ease;
+}
+
+/* 深色主题变量 */
+:root.dark-theme {
+  --primary-bg: #1a1a1a;
+  --secondary-bg: #2d2d2d;
+  --primary-text: #ffffff;
+  --secondary-text: #b3b3b3;
+  --border-color: #404040;
+  --hover-bg: #363636;
+  --card-bg: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --highlight-color: #40a9ff;
+}
+
+/* 主题过渡动画 */
+* {
+  transition: background-color var(--theme-transition),
+              color var(--theme-transition),
+              border-color var(--theme-transition),
+              box-shadow var(--theme-transition);
+}
+
+/* 滚动条样式适配 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--secondary-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--hover-bg);
+} 

+ 4 - 0
src/assets/svg/moon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

+ 12 - 0
src/assets/svg/sun.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
+  <path d="M12 2V4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M12 20V22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M4 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M22 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M19.778 19.778L17.657 17.657" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M6.343 6.343L4.222 4.222" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M19.778 4.222L17.657 6.343" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M6.343 17.657L4.222 19.778" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg> 

+ 4 - 3
src/components/KnowledgeConfig/index.vue

@@ -163,7 +163,8 @@ onMounted(async () => {
 <style scoped>
 .knowledge-config {
   border-top: 1px solid rgba(0, 0, 0, 0.06);
-  background: #fff;
+  background: var(--secondary-bg);
+  color: var(--primary-text);
 }
 
 .config-header {
@@ -209,7 +210,7 @@ onMounted(async () => {
 
 .group-header {
   font-size: 13px;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--primary-text);
   margin-bottom: 8px;
 }
 
@@ -227,7 +228,7 @@ onMounted(async () => {
 .item-desc {
   margin-left: 8px;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--primary-text);
 }
 
 .action-buttons {

+ 4 - 3
src/components/KnowledgeResults/index.vue

@@ -216,10 +216,11 @@ export default defineComponent({
 }
 
 .knowledge-results {
+  color: var(--primary-text);
   height: 94%;
   display: flex;
   flex-direction: column;
-  background: #fff;
+  background: var(--secondary-bg);
   width: 100%;
   overflow: hidden;
   font-size: var(--base-font-size);
@@ -431,7 +432,7 @@ export default defineComponent({
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: rgba(0, 0, 0, 0.45);
+    color: var(--primary-text);
     
     .loading-spinner {
       width: 24px;
@@ -452,7 +453,7 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
     padding: 16px;
-    color: rgba(0, 0, 0, 0.45);
+    color: var(--primary-text);
     gap: 8px;
   }
 }

+ 5 - 4
src/components/ModelConfig/index.vue

@@ -270,7 +270,8 @@ onMounted(async () => {
 <style scoped>
 .model-config {
   border-top: 1px solid rgba(0, 0, 0, 0.06);
-  background: #fff;
+  background: var(--secondary-bg);
+  color: var(--primary-text);
 }
 
 .config-header {
@@ -309,7 +310,7 @@ onMounted(async () => {
 .model-item {
   margin-bottom: 16px;
   padding: 12px;
-  background: #fafafa;
+  background: var(--secondary-bg);
   border-radius: 4px;
 }
 
@@ -322,7 +323,7 @@ onMounted(async () => {
 
 .model-title {
   font-size: 13px;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--primary-text);
 }
 
 .model-form {
@@ -338,7 +339,7 @@ onMounted(async () => {
 .form-item label {
   display: block;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--primary-text);
   margin-bottom: 8px;
 }
 

+ 7 - 7
src/components/SearchResults/index.vue

@@ -207,13 +207,13 @@ export default defineComponent({
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: #fff;
+  background: var(--secondary-bg);
   width: 100%;
   overflow: hidden;
 
   .search-box {
     padding: 16px 24px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--border-color);
     display: flex;
     gap: 0;
 
@@ -283,18 +283,18 @@ export default defineComponent({
 
   .results-header {
     padding: 16px 24px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--border-color);
     
     h2 {
       margin: 0;
       font-size: 18px;
-      color: rgba(0, 0, 0, 0.85);
+      color: var(--primary-text);
     }
 
     .result-stats {
       margin-top: 4px;
       font-size: 14px;
-      color: rgba(0, 0, 0, 0.45);
+      color: var(--primary-text);
     }
   }
 
@@ -356,7 +356,7 @@ export default defineComponent({
   .no-results {
     text-align: center;
     padding: 48px 0;
-    color: rgba(0, 0, 0, 0.45);
+    color: var(--primary-text);
 
     .no-results-icon {
       font-size: 48px;
@@ -371,7 +371,7 @@ export default defineComponent({
   .loading-more {
     text-align: center;
     padding: 20px 0;
-    color: rgba(0, 0, 0, 0.45);
+    color: var(--primary-text);
     font-size: 14px;
   }
 

+ 14 - 11
src/components/VoiceConfig/index.vue

@@ -265,7 +265,8 @@ onUnmounted(() => {
 <style scoped>
 .voice-config {
   border-top: 1px solid rgba(0, 0, 0, 0.06);
-  background: #fff;
+  background: var(--secondary-bg);
+  color: var(--primary-text);
 }
 
 .config-header {
@@ -308,7 +309,7 @@ onUnmounted(() => {
 .config-item label {
   display: block;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--primary-text);
   margin-bottom: 8px;
 }
 
@@ -318,8 +319,8 @@ select {
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.88);
-  background: #fff;
+  color: var(--primary-text);
+  background: var(--secondary-bg);
 }
 
 .slider-container {
@@ -349,7 +350,7 @@ input[type="range"]::-webkit-slider-thumb {
 
 .slider-value {
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--primary-text);
   min-width: 36px;
 }
 
@@ -364,7 +365,8 @@ input[type="range"]::-webkit-slider-thumb {
   height: 32px;
   border-radius: 4px;
   border: 1px solid #d9d9d9;
-  background: #fff;
+  background: var(--secondary-bg);
+  color: var(--primary-text);
   cursor: pointer;
   transition: all 0.3s;
   white-space: nowrap;
@@ -376,9 +378,9 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 .switch-button:disabled {
-  color: rgba(0, 0, 0, 0.25);
+  color: var(--primary-text);
   border-color: #d9d9d9;
-  background: #f5f5f5;
+  background: var(--secondary-bg);
   cursor: not-allowed;
 }
 
@@ -392,7 +394,8 @@ select {
   height: 32px;
   border-radius: 4px;
   border: 1px solid #d9d9d9;
-  background: #fff;
+  background: var(--secondary-bg);
+  color: var(--primary-text);
   cursor: pointer;
   transition: all 0.3s;
   white-space: nowrap;
@@ -404,9 +407,9 @@ select {
 }
 
 .preview-button:disabled {
-  color: rgba(0, 0, 0, 0.25);
+  color: var(--primary-text);
   border-color: #d9d9d9;
-  background: #f5f5f5;
+  background: var(--secondary-bg);
   cursor: not-allowed;
 }
 

+ 1 - 0
src/main.js

@@ -7,6 +7,7 @@ import store from './store'
 import antdUse from './antdUse'
 import 'dayjs/locale/zh-cn';
 import './app.less'
+import './assets/styles/theme.css';
 
 // 创建应用上下文
 const app = createApp(App)

+ 421 - 109
src/views/report.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout">
+  <div class="layout" :class="{ 'dark-theme': isDarkTheme }">
     <!-- 添加密码修改弹窗组件 -->
     <ChangePasswordDialog
       v-model:visible="showPasswordDialog"
@@ -9,14 +9,24 @@
       <div class="user-profile-bar">
          <div class="logo">
           <img
-            src="../assets/logos.JPG"
-            
+            src="../assets/logo.png"
             alt="logo"
             class="logo-img"
           />
        <!--  <span>Raycos Tech</span> -->
       </div>
       <div class="user-info-bar">
+        <!-- 添加主题切换按钮 -->
+        <div class="theme-switch" @click="toggleTheme" :title="isDarkTheme ? '切换到浅色模式' : '切换到深色模式'">
+          <transition name="theme-icon" mode="out-in">
+            <img 
+              :key="isDarkTheme" 
+              :src="isDarkTheme ? '../assets/svg/sun.svg' : '../assets/svg/moon.svg'" 
+              :alt="isDarkTheme ? '切换到浅色模式' : '切换到深色模式'"
+              class="theme-icon" 
+            />
+          </transition>
+        </div>
         <div class="user-info" @click="toggleDropdown">
           <div class="user-name">商户名称:{{ userInfo.merchant?.merchant_name || '未登录用户' }}</div>
           <div class="user-name">当前用户:{{ userInfo.username || '未登录用户' }}</div>
@@ -559,7 +569,7 @@
 
         <!-- 搜索面板 -->
         <div v-show="activeTab === 'search'" class="panel-container">
-          <div class="search-header">
+          <!-- <div class="search-header">
             <span>搜索结果</span>
             <div class="web-search-toggle">
               <input
@@ -572,7 +582,7 @@
                 {{ enableWebSearch ? '搜索已开启' : '搜索已关闭' }}
               </label>
             </div>
-          </div>
+          </div> -->
           <!-- v-if="enableWebSearch" -->
           <SearchResults
             :searchResults="searchResults"
@@ -614,7 +624,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, nextTick, onUnmounted, onMounted, computed } from "vue";
+import { ref, reactive, nextTick, onUnmounted, onMounted, computed, watch } from "vue";
 import {
   PlusOutlined,
   FireOutlined,
@@ -1927,6 +1937,49 @@ const updateCollapsedState = () => {
     }
   };
 
+  // 主题状态
+  const isDarkTheme = ref(false);
+
+  // 应用主题
+  const applyTheme = (isDark) => {
+    document.documentElement.classList.toggle('dark-theme', isDark);
+  };
+
+  // 切换主题
+  const toggleTheme = () => {
+    isDarkTheme.value = !isDarkTheme.value;
+    localStorage.setItem('theme', isDarkTheme.value ? 'dark' : 'light');
+    applyTheme(isDarkTheme.value);
+  };
+
+  // 初始化主题
+  onMounted(() => {
+    // 优先使用存储的主题设置
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      isDarkTheme.value = savedTheme === 'dark';
+    } else {
+      // 如果没有存储的主题,则使用系统主题
+      isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    applyTheme(isDarkTheme.value);
+
+    // 监听系统主题变化
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', (e) => {
+      if (!localStorage.getItem('theme')) {
+        isDarkTheme.value = e.matches;
+        applyTheme(e.matches);
+      }
+    });
+  });
+
+  /* return {
+    isDarkTheme,
+    toggleTheme,
+    // ... existing return values ...
+  }; */
+
  </script>
 
 <style scoped>
@@ -1991,7 +2044,7 @@ const updateCollapsedState = () => {
 .user-name {
   font-size: 14px;
   font-weight: 500;
-  color: #333;
+  color: var(--primary-text);
 }
 
 .dropdown-menu {
@@ -2010,7 +2063,7 @@ const updateCollapsedState = () => {
   padding: 12px 16px;
   display: flex;
   align-items: center;
-  color: #333;
+  color: var(--primary-text);
   transition: background-color 0.2s;
 }
 
@@ -2068,6 +2121,7 @@ const updateCollapsedState = () => {
   top: 0;
   bottom: 0;
   justify-content: space-between;
+  background-color: var(--primary-bg);
 }
 
 .menu:not(.collapsed) + .chat {
@@ -2107,10 +2161,10 @@ const updateCollapsedState = () => {
   padding: 0 20px;
 }
 
-/* .logo-img {
-  width: 24px;
-  height: 24px;
-} */
+.logo-img {
+  /* width: 24px; */
+  height: 60px;
+}
 
 .logo span {
   margin-left: 12px;
@@ -2140,7 +2194,9 @@ const updateCollapsedState = () => {
 }
 
 .conversation-list {
+  background: var(--secondary-bg);
   flex: 1;
+  color: var(--primary-text);
   padding: 0 8px;
   overflow-y: auto;
 }
@@ -2149,7 +2205,7 @@ const updateCollapsedState = () => {
   padding: 12px;
   margin: 4px 0;
   border-radius: 8px;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--primary-text);
   font-size: 14px;
   cursor: pointer;
   transition: background-color 0.2s;
@@ -2160,7 +2216,7 @@ const updateCollapsedState = () => {
 }
 
 .conversation-item.active {
-  background: #fff;
+  background: var(--secondary-bg);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
@@ -2270,9 +2326,9 @@ const updateCollapsedState = () => {
   display: flex;
   align-items: center;
   padding: 8px 12px;
-  border: 1px solid #e5e6eb;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  background: white;
+  background: var(--primary-bg);
 }
 
 .message-input {
@@ -2285,7 +2341,7 @@ const updateCollapsedState = () => {
 }
 
 .message-input::placeholder {
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--primary-text);
 }
 
 .attachment-btn,
@@ -2776,8 +2832,8 @@ const updateCollapsedState = () => {
   transform: translateY(-50%);
   width: 20px;
   height: 40px;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--secondary-bg);
+  border: 1px solid var(--border-color);
   border-right: none;
   border-radius: 4px 0 0 4px;
   display: flex;
@@ -2790,7 +2846,7 @@ const updateCollapsedState = () => {
 
 .menu-collapsed {
   left: 0px;
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
+  border-right: 1px solid var(--border-color);
   border-left: none;
   border-radius: 0 4px 4px 0;
 }
@@ -3209,7 +3265,7 @@ const updateCollapsedState = () => {
 
 .toggle-label {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--primary-text);
   cursor: pointer;
 }
 
@@ -3219,13 +3275,13 @@ const updateCollapsedState = () => {
 }
 
 .toggle-label.disabled {
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--primary-text);
   cursor: not-allowed;
 }
 
 .disabled-hint {
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--primary-text);
   margin-left: 4px;
 }
 
@@ -3248,8 +3304,8 @@ const updateCollapsedState = () => {
   transform: translateY(-50%);
   width: 20px;
   height: 40px;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--secondary-bg);
+  border: 1px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3259,7 +3315,7 @@ const updateCollapsedState = () => {
 }
 
 .collapse-button:hover {
-  background: #f5f5f5;
+  background: var(--secondary-bg);
 }
 
 .collapse-icon {
@@ -3638,7 +3694,7 @@ button,
   justify-content: space-between;
   align-items: center;
   padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .search-header span {
@@ -3650,6 +3706,7 @@ button,
 .web-search-toggle {
   display: flex;
   align-items: center;
+  color: var(--primary-text);
 }
 
 .toggle-input {
@@ -3694,7 +3751,7 @@ button,
 .right-menu-tabs {
   display: flex;
   border-bottom: 1px solid #f0f0f0;
-  background: #fff;
+  background: var(--secondary-bg);
 }
 
 .tab-item {
@@ -3735,7 +3792,8 @@ button,
 /* 预览面板样式 */
 .preview-header {
   padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--primary-text);
   font-size: 16px;
   font-weight: bold;
 }
@@ -3744,7 +3802,7 @@ button,
   display: flex;
   gap: 12px;
   padding: 8px 12px;
-  background: rgba(0, 0, 0, 0.02);
+  background: var(--secondary-bg);
   border-radius: 8px;
   margin-bottom: 8px;
   transition: all 0.3s ease;
@@ -3775,7 +3833,8 @@ button,
   position: relative;
   display: flex;
   align-items: center;
-  background: #fff;
+  background: var(--primary-bg);
+  color: var(--primary-text);
   border-radius: 6px;
   padding: 6px 12px;
   transition: all 0.3s;
@@ -3808,7 +3867,7 @@ button,
     font-size: 14px;
     transition: all 0.3s;
     white-space: nowrap;
-    color: #000000a6;
+    color: var(--primary-text);
   }
 }
 
@@ -4000,7 +4059,8 @@ button,
 /* Tab 样式调整 */
 .right-menu-tabs {
   display: flex;
-  background: #fff;
+  background: var(--secondary-bg);
+  color: var(--primary-text);
   border-bottom: 1px solid #f0f0f0;
   padding: 0;
   height: 46px;
@@ -4014,7 +4074,7 @@ button,
   justify-content: center;
   gap: 8px;
   padding: 12px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--primary-text);
   cursor: pointer;
   transition: all 0.3s;
   border-bottom: 2px solid transparent;
@@ -4035,7 +4095,7 @@ button,
 .panel-container {
   flex: 1;
   overflow-y: auto;
-  background: #fff;
+  background: var(--secondary-bg);
   display: flex;
   flex-direction: column;
 }
@@ -4043,18 +4103,18 @@ button,
 /* 搜索头部样式 */
 .search-header {
   padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
+  background: var(--secondary-bg);
   flex-shrink: 0;
 }
 
 .search-header span {
   font-size: 16px;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--primary-text);
 }
 
 /* 知识库结果面板样式 */
@@ -4134,6 +4194,7 @@ button,
 /* 确保内容不会溢出 */
 .right-menu-content {
   max-height: 100%;
+  background-color: var(--secondary-bg) !important;
 }
 
 .panel-container {
@@ -4202,93 +4263,344 @@ button,
     padding: 2px 4px;
   }
 }
-</style>
-<style lang="less" scoped>
-::v-deep .message-content {
-  /* 确保 scoped 样式能够渗透到动态生成的内容 */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 16px;
-    margin-bottom: 8px;
-    font-weight: 600;
-  }
 
-  p {
-    margin-bottom: 8px;
-  }
+/* 全局主题变量 */
+:root {
+  /* 浅色主题变量 */
+  --primary-bg: #ffffff;
+  --secondary-bg: #f5f5f5;
+  --primary-text: #333333;
+  --secondary-text: #666666;
+  --border-color: #e0e0e0;
+  --hover-bg: #f0f0f0;
+  --card-bg: #ffffff;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --highlight-color: #1890ff;
+  
+  /* 动画时间 */
+  --theme-transition: 0.3s ease;
+}
 
-  code {
-    background: #f5f5f5;
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-family: monospace;
-  }
+/* 深色主题变量 */
+:root.dark-theme {
+  --primary-bg: #1a1a1a;
+  --secondary-bg: #2d2d2d;
+  --primary-text: #ffffff;
+  --secondary-text: #b3b3b3;
+  --border-color: #404040;
+  --hover-bg: #363636;
+  --card-bg: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --highlight-color: #40a9ff;
+}
 
-  pre {
-    background: #f5f5f5;
-    padding: 16px;
-    border-radius: 8px;
-    overflow-x: auto;
-  }
+/* 主题过渡动画 */
+.layout * {
+  transition: background-color var(--theme-transition),
+              color var(--theme-transition),
+              border-color var(--theme-transition),
+              box-shadow var(--theme-transition);
+}
 
-  ul,
-  ol {
-    padding-left: 24px;
-    margin-bottom: 8px;
-  }
+/* 主题切换按钮样式 */
+.theme-switch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+  padding: 8px;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: var(--hover-bg);
+  transition: all var(--theme-transition);
+}
 
-  blockquote {
-    border-left: 4px solid #ddd;
-    padding-left: 16px;
-    margin: 8px 0;
-    color: rgba(0, 0, 0, 0.65);
-  }
+.theme-switch:hover {
+  background-color: var(--border-color);
+}
 
-  a {
-    color: #1677ff;
-    text-decoration: none;
-  }
+.theme-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--primary-text);
+}
 
-  a:hover {
-    text-decoration: underline;
-  }
+/* 主题图标切换动画 */
+.theme-icon-enter-active,
+.theme-icon-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
 
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    margin-bottom: 16px;
-  }
+.theme-icon-enter-from,
+.theme-icon-leave-to {
+  opacity: 0;
+  transform: scale(0.8) rotate(-45deg);
+}
 
-  th,
-  td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
-  }
+.theme-icon-enter-to,
+.theme-icon-leave-from {
+  opacity: 1;
+  transform: scale(1) rotate(0);
+}
 
-  th {
-    background: #f5f5f5;
-  }
+/* 应用主题样式到现有组件 */
+:deep(.layout) {
+  background-color: var(--primary-bg);
+  color: var(--primary-text);
+}
+
+:deep(.header) {
+  background-color: var(--secondary-bg);
+  border-bottom: 1px solid var(--border-color);
+}
+
+:deep(.menu) {
+  background-color: var(--secondary-bg);
+  border-right: 1px solid var(--border-color);
+}
+
+:deep(.user-info-bar) {
+  background-color: var(--secondary-bg);
+  color: var(--primary-text);
+}
+
+:deep(.dropdown-menu) {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 8px var(--shadow-color);
+}
+
+:deep(.dropdown-item) {
+  color: var(--primary-text);
+}
+
+:deep(.dropdown-item:hover) {
+  background-color: var(--hover-bg);
+}
+
+:deep(.suggestion-card) {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
 }
 
-.message-actions {
+:deep(.suggestion-item) {
+  color: var(--primary-text);
+}
+
+:deep(.suggestion-item:hover) {
+  background-color: var(--hover-bg);
+}
+
+:deep(.message-bubble) {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+}
+
+/* 确保主题样式应用到聊天消息 */
+:deep(.message-item.user .message-bubble) {
+  background-color: var(--highlight-color);
+  color: var(--primary-text);
+}
+
+:deep(.message-item.assistant .message-bubble) {
+  background-color: var(--card-bg);
+  color: var(--primary-text);
+}
+
+/* 搜索区域样式 */
+:deep(.search-section) {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  padding: 20px;
+  border-radius: 8px;
+}
+
+:deep(.search-input) {
+  background-color: var(--primary-bg);
+  border: 1px solid var(--border-color);
+  color: var(--primary-text);
+}
+
+:deep(.search-input:hover),
+:deep(.search-input:focus) {
+  border-color: var(--highlight-color);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+/* 提示问题区域样式 */
+:deep(.suggestion-section) {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+:deep(.suggestion-section h3) {
+  color: var(--primary-text);
+  margin-bottom: 16px;
+}
+
+:deep(.cards-container) {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+:deep(.suggestion-card) {
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all var(--theme-transition);
+}
+
+:deep(.suggestion-card:hover) {
+  border-color: var(--highlight-color);
+  box-shadow: 0 2px 8px var(--shadow-color);
+}
+
+:deep(.card-header) {
   display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 
-.message-actions :deep(.export-button) {
-  opacity: 0.6;
-  transition: opacity 0.2s;
+:deep(.card-header h4) {
+  color: var(--primary-text);
+  margin: 0;
 }
 
-.message-actions :deep(.export-button:hover) {
-  opacity: 1;
+:deep(.card-subtitle) {
+  color: var(--secondary-text);
+  margin-bottom: 12px;
+}
+
+:deep(.suggestion-items) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+:deep(.suggestion-item) {
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: var(--primary-bg);
+  color: var(--primary-text);
+  cursor: pointer;
+  transition: all var(--theme-transition);
+}
+
+:deep(.suggestion-item:hover) {
+  background-color: var(--hover-bg);
+  color: var(--highlight-color);
+}
+
+/* 保存问题区域样式 */
+:deep(.save-question) {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+:deep(.save-question-title) {
+  color: var(--primary-text);
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+
+:deep(.save-question-input) {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background-color: var(--primary-bg);
+  color: var(--primary-text);
+  margin-bottom: 8px;
+}
+
+:deep(.save-question-input:focus) {
+  border-color: var(--highlight-color);
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+/* 搜索结果区域样式 */
+:deep(.search-results) {
+  background-color: var(--secondary-bg);
+  /* border: 1px solid var(--border-color); */
+  border-radius: 8px;
+  padding: 20px;
+ /*  margin-top: 20px; */
+}
+
+:deep(.search-results-title) {
+  color: var(--primary-text);
+  margin-bottom: 16px;
+}
+
+:deep(.no-results) {
+  color: var(--secondary-text);
+  text-align: center;
+  padding: 40px 0;
+}
+
+/* 输入框和按钮样式 */
+:deep(.ant-input),
+:deep(.ant-input-search-button) {
+  background-color: var(--primary-bg);
+  border-color: var(--border-color);
+  color: var(--primary-text);
+}
+
+:deep(.ant-input:hover),
+:deep(.ant-input:focus) {
+  border-color: var(--highlight-color);
+}
+
+:deep(.ant-input-search-button) {
+  background-color: var(--highlight-color);
+  border-color: var(--highlight-color);
+  color: #ffffff;
+}
+
+:deep(.ant-input-search-button:hover) {
+  background-color: var(--highlight-color);
+  opacity: 0.9;
+}
+
+/* 标签页样式 */
+:deep(.ant-tabs-tab) {
+  color: var(--secondary-text);
+}
+
+:deep(.ant-tabs-tab-active) {
+  color: var(--highlight-color) !important;
+}
+
+:deep(.ant-tabs-ink-bar) {
+  background-color: var(--highlight-color);
+}
+
+/* 图标样式适配 */
+:deep(.tab-icon) {
+  filter: var(--icon-filter);
+}
+
+/* 其他已有的样式保持不变 */
+</style>
+
+<style>
+/* 添加图标滤镜变量 */
+:root {
+  --icon-filter: none;
+}
+
+:root.dark-theme {
+  --icon-filter: brightness(0) invert(1);
 }
 </style>