fix: fix dark mode white background in conversation preview dialog (#3881)

* Initial plan

* Fix dark mode background issue in conversation data preview

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

* style: update conversation messages container background color and add debug log for dark mode detection

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>
Co-authored-by: Soulter <905617992@qq.com>
This commit is contained in:
Copilot
2025-12-02 17:03:59 +08:00
committed by GitHub
parent e9be8cf69f
commit a708901e7f
+17 -3
View File
@@ -187,7 +187,7 @@
</div>
<!-- 预览模式 - 聊天界面 -->
<div v-else class="conversation-messages-container">
<div v-else class="conversation-messages-container" style="background-color: var(--v-theme-surface);">
<!-- 空对话提示 -->
<div v-if="conversationHistory.length === 0" class="text-center py-5">
<v-icon size="48" color="grey">mdi-chat-remove</v-icon>
@@ -195,7 +195,7 @@
</div>
<!-- 消息列表组件 -->
<MessageList v-else :messages="formattedMessages" :isDark="false" />
<MessageList v-else :messages="formattedMessages" :isDark="isDark" />
</div>
</v-card-text>
@@ -320,6 +320,7 @@ import { debounce } from 'lodash';
import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
import MarkdownIt from 'markdown-it';
import { useCommonStore } from '@/stores/common';
import { useCustomizerStore } from '@/stores/customizer';
import { useI18n, useModuleI18n } from '@/i18n/composables';
import MessageList from '@/components/chat/MessageList.vue';
@@ -341,11 +342,13 @@ export default {
setup() {
const { t, locale } = useI18n();
const { tm } = useModuleI18n('features/conversation');
const customizerStore = useCustomizerStore();
return {
t,
tm,
locale
locale,
customizerStore
};
},
@@ -485,6 +488,12 @@ export default {
};
},
// 检测是否为暗色模式
isDark() {
console.log('isDark', this.customizerStore.uiTheme);
return this.customizerStore.uiTheme === 'PurpleThemeDark';
},
// 将对话历史转换为 MessageList 组件期望的格式
formattedMessages() {
return this.conversationHistory.map(msg => {
@@ -987,6 +996,11 @@ export default {
background-color: #f9f9f9;
}
/* 暗色模式下的聊天消息容器 */
.v-theme--dark .conversation-messages-container {
background-color: #1e1e1e;
}
/* 对话详情卡片 */
.conversation-detail-card {
max-height: 90vh;