修复聊天页面深色主题下输入框字体颜色问题

src/views/chat/index.vue

 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onActivated, onBeforeUnmount, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
+import { NConfigProvider, darkTheme } from 'naive-ui';
+import { useThemeStore } from '@/store/modules/theme';
 import { type ModelOption, deepSeekService } from '@/service/api/deepseek';
 import { renderMarkdownWithMath as renderContentWithMath } from '@/utils/katex-renderer';
 
+defineOptions({ name: 'ChatPage' });
+
 interface ChatMessage {
   id: string;
   from: 'user' | 'ai';
@@ -26,6 +30,14 @@ interface ChatHistory {
   messages: ChatMessage[];
 }
 
+// 页面激活状态管理
+const isActive = ref(true);
+const containerId = `chat-${Math.random().toString(36).substr(2, 9)}`;
+
+// 主题相关
+const themeStore = useThemeStore();
+const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined));
+
 // 响应式数据
 const searchText = ref('');
 const inputValue = ref('');
@@ -78,6 +90,34 @@ const currentModelName = computed(() => {
 // 聊天容器引用
 const chatContentRef = ref<HTMLElement | null>(null);
 
+// 清理函数
+function cleanup() {
+  try {
+    // 清理定时器
+    if (thinkingInterval.value) {
+      clearInterval(thinkingInterval.value);
+      thinkingInterval.value = null;
+    }
+
+    // 清空状态
+    isAiThinking.value = false;
+    thinkingTime.value = 0;
+
+    // 清空容器
+    const container = document.getElementById(containerId);
+    if (container) {
+      container.innerHTML = '';
+    }
+  } catch (e) {
+    console.error('清理聊天组件时出错:', e);
+  }
+}
+
+// 暴露清理方法给父组件
+defineExpose({
+  cleanup
+});
+
 // 滚动到底部
 const scrollToBottom = () => {
   if (chatContentRef.value) {
@@ -396,6 +436,7 @@ const showChatMenu = (_chatId: string) => {
 
 // 生命周期
 onMounted(() => {
+  isActive.value = true;
   // 加载可用模型选项
   modelOptions.value = deepSeekService.getModelOptions();
 
@@ -407,6 +448,19 @@ onMounted(() => {
   }
 });
 
+onActivated(() => {
+  isActive.value = true;
+});
+
+onDeactivated(() => {
+  isActive.value = false;
+});
+
+onBeforeUnmount(() => {
+  // 组件卸载前清理
+  cleanup();
+});
+
 onUnmounted(() => {
   // 清理定时器
   if (thinkingInterval.value) {
@@ -416,6 +470,14 @@ onUnmounted(() => {
 </script>
 
 <template>
+  <Teleport to="#extjs-root">
+    <div
+      v-show="isActive"
+      :id="containerId"
+      class="chat-container-wrapper"
+      :data-theme="themeStore.darkMode ? 'dark' : 'light'"
+    >
+      <NConfigProvider :theme="naiveDarkTheme" :theme-overrides="themeStore.naiveTheme">
         <div class="chat-container">
           <!-- 左侧侧边栏 -->
           <div class="sidebar">
@@ -592,7 +654,11 @@ onUnmounted(() => {
                   class="chat-input"
                   @keydown="handleKeyDown"
                 />
-          <button :disabled="!inputValue.trim() || !isApiConfigured || isAiThinking" class="send-btn" @click="onSubmit">
+                <button
+                  :disabled="!inputValue.trim() || !isApiConfigured || isAiThinking"
+                  class="send-btn"
+                  @click="onSubmit"
+                >
                   发送
                 </button>
               </div>
@@ -606,18 +672,46 @@ onUnmounted(() => {
             </div>
           </div>
         </div>
+      </NConfigProvider>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped lang="scss">
+.chat-container-wrapper {
+  width: 100%;
+  height: 100%;
+
+  // 浅色主题变量
+  --text-color: #252b3a;
+  --input-bg: #fff;
+  --placeholder-color: #999;
+  --disabled-text-color: #999;
+  --border-color: #ddd;
+  --sidebar-bg: #ffffff;
+  --main-bg: #f5f5f5;
+
+  // 深色主题适配
+  &[data-theme='dark'] {
+    --text-color: #e1e5e9;
+    --input-bg: #2d3748;
+    --placeholder-color: #718096;
+    --disabled-text-color: #718096;
+    --border-color: #4a5568;
+    --sidebar-bg: #1a202c;
+    --main-bg: #2d3748;
+  }
+}
+
 .chat-container {
   display: flex;
   height: 85vh;
-  background: #f5f5f5;
+  background: var(--main-bg);
 
   .sidebar {
     width: 300px;
-    background: #ffffff;
-    border-right: 1px solid #ddd;
+    background: var(--sidebar-bg);
+    border-right: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
 
@@ -685,9 +779,20 @@ onUnmounted(() => {
         select {
           width: 100%;
           padding: 8px;
-          border: 1px solid #ddd;
+          border: 1px solid var(--border-color);
           border-radius: 4px;
           font-size: 12px;
+          color: var(--text-color, #252b3a);
+          background: var(--input-bg, #fff);
+
+          &:focus {
+            border-color: #5e7ce0;
+            outline: none;
+          }
+
+          &::placeholder {
+            color: var(--placeholder-color, #999);
+          }
         }
 
         .model-description {
@@ -1038,10 +1143,12 @@ onUnmounted(() => {
         .chat-input {
           flex: 1;
           padding: 12px 16px;
-          border: 1px solid #ddd;
+          border: 1px solid var(--border-color);
           border-radius: 24px;
           outline: none;
           font-size: 14px;
+          color: var(--text-color, #252b3a);
+          background: var(--input-bg, #fff);
 
           &:focus {
             border-color: #5e7ce0;
@@ -1050,6 +1157,11 @@ onUnmounted(() => {
           &:disabled {
             background: #f5f5f5;
             cursor: not-allowed;
+            color: var(--disabled-text-color, #999);
+          }
+
+          &::placeholder {
+            color: var(--placeholder-color, #999);
           }
         }