chuan/WeChatDataAnalysis
1
0
Fork 0
mirror of https://github.com/LifeArchiveProject/WeChatDataAnalysis.git synced 2026-06-18 15:54:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chat-style): 修复深色主题下聊天浮层与卡片配色

Browse Source
This commit is contained in:
2977094657
2026-03-22 19:52:19 +08:00
Unverified
parent bcd8f67c25
commit 1ba6599483
6 changed files with 248 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/css/chat.css
+29 -25
View File
@@ -24,7 +24,7 @@
.wechat-link-card.wechat-link-card--disabled:hover,
.wechat-link-card-cover.wechat-link-card--disabled:hover {
background: #fff;
background: var(--merged-history-bg);
}
/* 滚动条样式 */
@@ -704,7 +704,7 @@
/* 文件消息样式 - 基于红包样式覆盖 */
.wechat-file-card {
width: 210px;
background: #fff;
background: var(--merged-history-bg);
cursor: pointer;
transition: background-color 0.15s ease;
}
@@ -728,11 +728,11 @@
left: 13px;
right: 13px;
height: 1.5px;
background: #e8e8e8;
background: var(--merged-history-divider);
}
.wechat-file-card:hover {
background: #f5f5f5;
background: var(--merged-history-hover);
}
.wechat-file-card .wechat-file-info {
@@ -742,7 +742,7 @@
.wechat-file-name {
font-size: 14px;
color: #1a1a1a;
color: var(--merged-history-title);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -753,7 +753,7 @@
.wechat-file-size {
font-size: 12px;
color: #b2b2b2;
color: var(--merged-history-footer);
margin-top: 4px;
}
@@ -765,12 +765,16 @@
}
.wechat-file-bottom {
border-top: 1px solid #e8e8e8;
border-top: 1px solid var(--merged-history-divider);
}
.wechat-file-bottom span {
font-size: 12px;
color: #b2b2b2;
color: var(--merged-history-footer);
}
.wechat-file-card :is(.text-gray-500, .text-gray-400) {
color: var(--merged-history-preview);
}
.wechat-file-logo {
@@ -785,7 +789,7 @@
width: 210px;
min-width: 210px;
max-width: 210px;
background: #fff;
background: var(--merged-history-bg);
display: flex;
flex-direction: column;
box-sizing: border-box;
@@ -798,7 +802,7 @@
}
.wechat-link-card:hover {
background: #f5f5f5;
background: var(--merged-history-hover);
}
.wechat-link-content {
@@ -819,7 +823,7 @@
.wechat-link-title {
font-size: 14px;
color: #1a1a1a;
color: var(--merged-history-title);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -830,7 +834,7 @@
.wechat-link-desc {
font-size: 12px;
color: #8c8c8c;
color: var(--merged-history-preview);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -847,7 +851,7 @@
flex: 0 0 auto;
border-radius: 0;
overflow: hidden;
background: #f2f2f2;
background: var(--app-surface-muted);
align-self: flex-start;
}
@@ -905,7 +909,7 @@
.wechat-link-mini-header-name {
font-size: 13px;
color: #7d7d7d;
color: var(--merged-history-preview);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -916,7 +920,7 @@
.wechat-link-mini-title {
font-size: 13px;
line-height: 1.45;
color: #1a1a1a;
color: var(--merged-history-title);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -930,12 +934,12 @@
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
background: #f2f2f2;
background: var(--app-surface-muted);
margin-top: auto;
}
.wechat-link-mini-preview--empty {
background: #f7f7f7;
background: var(--app-surface-soft);
}
.wechat-link-mini-preview-img {
@@ -964,7 +968,7 @@
left: 12px;
right: 12px;
height: 1px;
background: #e8e8e8;
background: var(--merged-history-divider);
}
.wechat-link-mini-footer-icon {
@@ -976,7 +980,7 @@
.wechat-link-mini-footer-text {
font-size: 10px;
color: #8c8c8c;
color: var(--merged-history-preview);
}
.wechat-link-from {
@@ -996,7 +1000,7 @@
left: 11px;
right: 11px;
height: 1.5px;
background: #e8e8e8;
background: var(--merged-history-divider);
}
.wechat-link-from-avatar {
@@ -1024,7 +1028,7 @@
.wechat-link-from-name {
font-size: 12px;
color: #b2b2b2;
color: var(--merged-history-footer);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1035,7 +1039,7 @@
width: 137px;
min-width: 137px;
max-width: 137px;
background: #fff;
background: var(--merged-history-bg);
display: flex;
flex-direction: column;
box-sizing: border-box;
@@ -1048,7 +1052,7 @@
}
.wechat-link-card-cover:hover {
background: #f5f5f5;
background: var(--merged-history-hover);
}
.wechat-link-cover-image-wrap {
@@ -1057,7 +1061,7 @@
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
background: #f2f2f2;
background: var(--app-surface-muted);
flex-shrink: 0;
}
@@ -1126,7 +1130,7 @@
box-sizing: border-box;
font-size: 12px;
line-height: 1.24;
color: #1a1a1a;
color: var(--merged-history-title);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
frontend/assets/css/tailwind.css
+148
View File
@@ -1597,6 +1597,154 @@
background-color: var(--search-panel-bg);
}
.chat-overlay-dropdown,
.chat-context-menu,
.chat-floating-window,
.chat-edit-modal {
background-color: var(--app-surface-bg);
border: 1px solid var(--app-border);
color: var(--app-text-primary);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
}
html[data-theme='dark'] :is(.chat-overlay-dropdown, .chat-context-menu, .chat-floating-window, .chat-edit-modal) {
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
}
.chat-overlay-dropdown input {
background-color: var(--app-input-bg);
border-color: var(--app-input-border);
color: var(--app-text-primary);
}
.chat-overlay-dropdown input::placeholder {
color: var(--app-text-muted);
}
.chat-overlay-dropdown :is(.bg-gray-200, .bg-gray-300),
.chat-floating-window :is(.bg-gray-200, .bg-gray-300) {
background-color: var(--app-border-soft);
}
.chat-overlay-dropdown :is(.border-gray-100, .border-gray-200, .border-gray-300),
.chat-floating-window :is(.border-gray-100, .border-gray-200, .border-gray-300) {
border-color: var(--app-border);
}
.chat-overlay-dropdown :is(.text-gray-900, .text-gray-800, .text-gray-700),
.chat-floating-window :is(.text-gray-900, .text-gray-800, .text-gray-700) {
color: var(--app-text-primary);
}
.chat-overlay-dropdown :is(.text-gray-600, .text-gray-500, .text-gray-400),
.chat-floating-window :is(.text-gray-600, .text-gray-500, .text-gray-400) {
color: var(--app-text-muted);
}
.chat-overlay-option {
color: var(--app-text-primary);
transition: background-color 0.15s ease;
}
.chat-overlay-option:hover {
background-color: var(--app-neutral-btn-hover);
}
.chat-overlay-option--active {
background-color: var(--app-surface-soft);
}
.chat-overlay-option--active:hover {
background-color: var(--app-neutral-btn-hover);
}
.chat-context-menu__item {
color: inherit;
transition: background-color 0.15s ease;
}
.chat-context-menu__item:hover {
background-color: var(--app-neutral-btn-hover);
}
.chat-context-menu :is(.border-gray-100, .border-gray-200, .border-gray-300) {
border-color: var(--app-border);
}
.chat-floating-window__header,
.chat-floating-window__body,
.chat-floating-window__row {
background-color: var(--app-surface-soft);
}
.chat-floating-window__header {
border-bottom: 1px solid var(--app-border);
}
.chat-floating-window__row {
border-bottom: 1px solid var(--app-border);
}
.chat-floating-window__title {
color: var(--app-text-primary);
}
.chat-floating-window__close {
color: var(--app-text-secondary);
transition: background-color 0.15s ease, color 0.15s ease;
}
.chat-floating-window__close:hover {
background-color: var(--app-neutral-btn-hover);
color: var(--app-text-primary);
}
.chat-floating-window .bg-white {
background-color: var(--app-surface-bg);
}
.chat-floating-window .bg-gray-50 {
background-color: var(--app-surface-soft);
}
.chat-floating-window [class*='hover:bg-gray-50']:hover {
background-color: var(--app-neutral-btn-hover);
}
.chat-edit-modal :is(.border-gray-100, .border-gray-200, .border-gray-300) {
border-color: var(--app-border);
}
.chat-edit-modal .bg-white {
background-color: var(--app-surface-bg);
}
.chat-edit-modal .bg-gray-50 {
background-color: var(--app-surface-soft);
}
.chat-edit-modal :is(.text-gray-900, .text-gray-800, .text-gray-700) {
color: var(--app-text-primary);
}
.chat-edit-modal :is(.text-gray-600, .text-gray-500, .text-gray-400) {
color: var(--app-text-muted);
}
.chat-edit-modal :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
background-color: var(--app-input-bg);
border-color: var(--app-input-border);
color: var(--app-text-primary);
}
.chat-edit-modal :is(input:not([type='checkbox']):not([type='radio']), textarea, select)::placeholder {
color: var(--app-text-muted);
}
.chat-edit-modal [class*='hover:bg-gray-50']:hover {
background-color: var(--app-neutral-btn-hover);
}
.search-input-combined {
background-color: var(--search-input-bg);
border-color: var(--search-input-border);
frontend/components/ChatLocationCard.vue
+6
View File
@@ -267,4 +267,10 @@ const openLocation = () => {
width: 100%;
height: 100%;
}
html[data-theme='dark'] .wechat-location-card-wrap {
--location-card-bg: var(--merged-history-bg);
--location-card-text: var(--merged-history-title);
--location-card-muted: var(--merged-history-preview);
}
</style>
frontend/components/chat/ChatOverlays.vue
+24 -24
View File
@@ -258,7 +258,7 @@
<div
v-if="messageSearchSenderDropdownOpen"
class="absolute left-0 right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-50 overflow-hidden"
class="chat-overlay-dropdown absolute left-0 right-0 mt-1 rounded-md z-50 overflow-hidden"
>
<div class="p-2 border-b border-gray-100">
<input
@@ -274,8 +274,8 @@
<div class="max-h-64 overflow-y-auto">
<button
type="button"
class="w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-gray-50"
:class="!messageSearchSender ? 'bg-gray-50' : ''"
class="chat-overlay-option w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs"
:class="!messageSearchSender ? 'chat-overlay-option--active' : ''"
@click="selectMessageSearchSender('')"
>
<span class="w-6 h-6 rounded-md overflow-hidden bg-gray-200 flex-shrink-0 flex items-center justify-center text-[10px] text-gray-500">
@@ -298,8 +298,8 @@
v-for="s in filteredMessageSearchSenderOptions"
:key="s.username"
type="button"
class="w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-gray-50"
:class="messageSearchSender === s.username ? 'bg-gray-50' : ''"
class="chat-overlay-option w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs"
:class="messageSearchSender === s.username ? 'chat-overlay-option--active' : ''"
@click="selectMessageSearchSender(s.username)"
>
<div class="w-6 h-6 rounded-md overflow-hidden bg-gray-300 flex-shrink-0" :class="{ 'privacy-blur': privacyMode }">
@@ -560,29 +560,29 @@
@mousedown="focusFloatingWindow(win.id)"
>
<div
class="bg-[#f7f7f7] rounded-xl shadow-xl overflow-hidden border border-gray-200 flex flex-col"
class="chat-floating-window rounded-xl overflow-hidden flex flex-col"
:style="{ width: win.width + 'px', height: win.height + 'px' }"
>
<div
class="px-3 py-2 bg-[#f7f7f7] border-b border-gray-200 flex items-center justify-between select-none cursor-move"
class="chat-floating-window__header px-3 py-2 flex items-center justify-between select-none cursor-move"
@mousedown.stop="startFloatingWindowDrag(win.id, $event)"
@touchstart.stop="startFloatingWindowDrag(win.id, $event)"
>
<div class="text-sm text-[#161616] truncate min-w-0">{{ win.title || (win.kind === 'link' ? '链接' : '聊天记录') }}</div>
<div class="chat-floating-window__title text-sm truncate min-w-0">{{ win.title || (win.kind === 'link' ? '链接' : '聊天记录') }}</div>
<button
type="button"
class="p-2 rounded hover:bg-black/5 flex-shrink-0"
class="chat-floating-window__close p-2 rounded flex-shrink-0"
@click.stop="closeFloatingWindow(win.id)"
aria-label="关闭"
title="关闭"
>
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="flex-1 overflow-auto bg-[#f7f7f7]">
<div class="chat-floating-window__body flex-1 overflow-auto">
<!-- Chat history window -->
<template v-if="win.kind === 'chatHistory'">
<div v-if="win.loading" class="text-xs text-gray-500 text-center py-2">加载中...</div>
@@ -593,7 +593,7 @@
<div
v-for="(rec, idx) in win.records"
:key="rec.id || idx"
class="px-4 py-3 flex gap-3 border-b border-gray-100 bg-[#f7f7f7]"
class="chat-floating-window__row px-4 py-3 flex gap-3"
>
<div class="w-9 h-9 rounded-md overflow-hidden bg-gray-200 flex-shrink-0" :class="{ 'privacy-blur': privacyMode }">
<img
@@ -1087,19 +1087,19 @@
<div
v-if="contextMenu.visible"
ref="contextMenuElement"
class="fixed z-[12000] max-h-[calc(100vh-16px)] overflow-y-auto bg-white border border-gray-200 rounded-md shadow-lg text-sm"
class="chat-context-menu fixed z-[12000] max-h-[calc(100vh-16px)] overflow-y-auto rounded-md text-sm"
:style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
@click.stop
>
<button
class="block w-full text-left px-3 py-2 hover:bg-gray-100"
class="chat-context-menu__item block w-full text-left px-3 py-2"
type="button"
@click="onCopyMessageTextClick"
>
复制文本
</button>
<button
class="block w-full text-left px-3 py-2 hover:bg-gray-100"
class="chat-context-menu__item block w-full text-left px-3 py-2"
type="button"
@click="onCopyMessageJsonClick"
>
@@ -1107,14 +1107,14 @@
</button>
<button
v-if="contextMenu.message?.renderType === 'quote' && contextMenu.message?.quoteServerId"
class="block w-full text-left px-3 py-2 hover:bg-gray-100"
class="chat-context-menu__item block w-full text-left px-3 py-2"
type="button"
@click="onLocateQuotedMessageClick"
>
定位引用消息
</button>
<button
class="block w-full text-left px-3 py-2 hover:bg-gray-100"
class="chat-context-menu__item block w-full text-left px-3 py-2"
type="button"
:disabled="contextMenu.disabled"
:class="contextMenu.disabled ? 'opacity-50 cursor-not-allowed' : ''"
@@ -1127,7 +1127,7 @@
<button
v-if="contextMenu.message?.id"
class="block w-full text-left px-3 py-2 hover:bg-gray-100"
class="chat-context-menu__item block w-full text-left px-3 py-2"
type="button"
@click="onEditMessageClick"
>
@@ -1135,7 +1135,7 @@
</button>
<button
v-if="contextMenu.message?.id"
class="block w-full text-left px-3 py-2 hover:bg-gray-100"
class="chat-context-menu__item block w-full text-left px-3 py-2"
type="button"
@click="onEditMessageFieldsClick"
>
@@ -1143,7 +1143,7 @@
</button>
<button
v-if="contextMenu.editStatus?.modified"
class="block w-full text-left px-3 py-2 hover:bg-gray-100 text-red-600"
class="chat-context-menu__item block w-full text-left px-3 py-2 text-red-600"
type="button"
@click="onResetEditedMessageClick"
>
@@ -1151,7 +1151,7 @@
</button>
<button
v-if="contextMenu.message?.id"
class="block w-full text-left px-3 py-2 hover:bg-gray-100"
class="chat-context-menu__item block w-full text-left px-3 py-2"
type="button"
@click="onRepairMessageSenderAsMeClick"
>
@@ -1159,7 +1159,7 @@
</button>
<button
v-if="contextMenu.message?.id"
class="block w-full text-left px-3 py-2 hover:bg-gray-100 text-orange-600"
class="chat-context-menu__item block w-full text-left px-3 py-2 text-orange-600"
type="button"
@click="onFlipWechatMessageDirectionClick"
>
@@ -1171,7 +1171,7 @@
<!-- 修改消息弹窗 -->
<div v-if="messageEditModal.open" class="fixed inset-0 z-[11000] flex items-center justify-center">
<div class="absolute inset-0 bg-black/40" @click="closeMessageEditModal"></div>
<div class="relative w-[860px] max-w-[95vw] bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden">
<div class="chat-edit-modal relative w-[860px] max-w-[95vw] rounded-lg overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 flex items-center">
<div class="text-base font-medium text-gray-900">{{ messageEditModal.mode === 'content' ? '修改消息' : '编辑源码' }}</div>
<button class="ml-auto text-gray-400 hover:text-gray-600" type="button" @click="closeMessageEditModal">
@@ -1218,7 +1218,7 @@
<!-- 字段编辑弹窗 -->
<div v-if="messageFieldsModal.open" class="fixed inset-0 z-[11000] flex items-center justify-center">
<div class="absolute inset-0 bg-black/40" @click="closeMessageFieldsModal"></div>
<div class="relative w-[920px] max-w-[95vw] bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden">
<div class="chat-edit-modal relative w-[920px] max-w-[95vw] rounded-lg overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 flex items-center">
<div class="text-base font-medium text-gray-900">字段编辑</div>
<button class="ml-auto text-gray-400 hover:text-gray-600" type="button" @click="closeMessageFieldsModal">
frontend/components/chat/LinkCard.vue
+3 -3
View File
@@ -116,7 +116,7 @@ export default defineComponent({
flexDirection: 'column',
boxSizing: 'border-box',
flex: '0 0 auto',
background: '#fff',
background: 'var(--merged-history-bg)',
border: 'none',
boxShadow: 'none',
textDecoration: 'none',
@@ -167,7 +167,7 @@ export default defineComponent({
flexDirection: 'column',
boxSizing: 'border-box',
flex: '0 0 auto',
background: '#fff',
background: 'var(--merged-history-bg)',
border: 'none',
boxShadow: 'none',
textDecoration: 'none',
@@ -236,7 +236,7 @@ export default defineComponent({
flexDirection: 'column',
boxSizing: 'border-box',
flex: '0 0 auto',
background: '#fff',
background: 'var(--merged-history-bg)',
border: 'none',
boxShadow: 'none',
textDecoration: 'none',
frontend/components/chat/MessageItem.vue
+38 -1
View File
@@ -49,7 +49,7 @@
<div
v-if="contactProfileCardOpen && contactProfileCardMessageId === String(message.id ?? '')"
class="absolute z-40 w-[360px] max-w-[88vw] bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden"
class="chat-contact-card absolute z-40 w-[360px] max-w-[88vw] rounded-lg overflow-hidden"
:class="message.isSent ? 'right-0 top-[calc(100%+8px)]' : 'left-0 top-[calc(100%+8px)]'"
@mouseenter="onContactCardMouseEnter"
@mouseleave="onMessageAvatarMouseLeave"
@@ -146,3 +146,40 @@ export default defineComponent({
}
})
</script>
<style scoped>
.chat-contact-card {
background-color: var(--app-surface-bg);
border: 1px solid var(--app-border);
color: var(--app-text-primary);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
}
html[data-theme='dark'] .chat-contact-card {
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
}
.chat-contact-card .bg-white {
background-color: var(--app-surface-bg);
}
.chat-contact-card [class*='bg-[#F6F6F6]'] {
background-color: var(--app-surface-soft);
}
.chat-contact-card .bg-gray-200 {
background-color: var(--app-border-soft);
}
.chat-contact-card :is(.border-gray-100, .border-gray-200, .border-gray-300) {
border-color: var(--app-border);
}
.chat-contact-card :is(.text-gray-900, .text-gray-800, .text-gray-700) {
color: var(--app-text-primary);
}
.chat-contact-card :is(.text-gray-600, .text-gray-500, .text-gray-400) {
color: var(--app-text-muted);
}
</style>