This commit is contained in:
Professional 2025-05-25 00:02:25 +07:00
parent 8594a7dd0e
commit 579a9a0346
2 changed files with 21 additions and 7 deletions

View File

@ -77,8 +77,12 @@ const handleNewMessage = (message) => {
conversationId: message.conversationId conversationId: message.conversationId
}); });
// ВАЖНО: Правильно сравниваем ID отправителя
// message.sender может быть как объектом, так и строкой ID
const senderId = typeof message.sender === 'object' ? message.sender._id : message.sender;
// ВАЖНО: Увеличиваем счетчик ТОЛЬКО если сообщение пришло от другого пользователя // ВАЖНО: Увеличиваем счетчик ТОЛЬКО если сообщение пришло от другого пользователя
if (message.sender !== user.value?._id) { if (senderId !== user.value?._id) {
const conversation = conversations.value.find(c => c._id === message.conversationId); const conversation = conversations.value.find(c => c._id === message.conversationId);
if (conversation) { if (conversation) {
conversation.unreadCount = (conversation.unreadCount || 0) + 1; conversation.unreadCount = (conversation.unreadCount || 0) + 1;

View File

@ -54,9 +54,10 @@
<h3 class="user-name">{{ getOtherParticipantName(conversation) || 'Собеседник' }}</h3> <h3 class="user-name">{{ getOtherParticipantName(conversation) || 'Собеседник' }}</h3>
<div class="timestamp-container"> <div class="timestamp-container">
<span class="timestamp">{{ formatTimestamp(conversation.updatedAt) }}</span> <span class="timestamp">{{ formatTimestamp(conversation.updatedAt) }}</span>
<!-- Индикатор теперь с абсолютным позиционированием -->
<span <span
v-if="conversation.unreadCount > 0" v-if="conversation.unreadCount > 0"
class="unread-badge-under-time" class="unread-badge-floating"
> >
{{ conversation.unreadCount < 100 ? conversation.unreadCount : '99+' }} {{ conversation.unreadCount < 100 ? conversation.unreadCount : '99+' }}
</span> </span>
@ -223,9 +224,12 @@ const handleNewMessageEvent = (message) => {
conversation.lastMessage = message; conversation.lastMessage = message;
conversation.updatedAt = new Date().toISOString(); conversation.updatedAt = new Date().toISOString();
// ВАЖНО: Правильно сравниваем ID отправителя
// message.sender может быть как объектом, так и строкой ID
const senderId = typeof message.sender === 'object' ? message.sender._id : message.sender;
// ВАЖНО: Увеличиваем счетчик ТОЛЬКО если сообщение пришло от другого пользователя // ВАЖНО: Увеличиваем счетчик ТОЛЬКО если сообщение пришло от другого пользователя
// И НЕ увеличиваем, если сообщение отправили мы сами if (senderId !== user.value._id) {
if (message.sender !== user.value._id) {
conversation.unreadCount = (conversation.unreadCount || 0) + 1; conversation.unreadCount = (conversation.unreadCount || 0) + 1;
console.log('[ChatListView] Увеличен счетчик непрочитанных для диалога:', message.conversationId, 'новый счетчик:', conversation.unreadCount); console.log('[ChatListView] Увеличен счетчик непрочитанных для диалога:', message.conversationId, 'новый счетчик:', conversation.unreadCount);
} else { } else {
@ -617,10 +621,11 @@ const getDialogsCountText = (count) => {
/* Контейнер времени и индикатора */ /* Контейнер времени и индикатора */
.timestamp-container { .timestamp-container {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: 0.25rem; /* Убираем gap, чтобы индикатор не создавал пространства */
} }
.timestamp { .timestamp {
@ -629,8 +634,12 @@ const getDialogsCountText = (count) => {
flex-shrink: 0; flex-shrink: 0;
} }
/* Новый индикатор непрочитанных сообщений под временем */ /* Плавающий индикатор - абсолютное позиционирование */
.unread-badge-under-time { .unread-badge-floating {
position: absolute;
top: 100%; /* Позиционируем под временем */
right: 0;
margin-top: 2px; /* Небольшой отступ от времени */
background: linear-gradient(135deg, #ff6b6b, #ff5252); background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white; color: white;
font-size: 0.6rem; font-size: 0.6rem;
@ -645,6 +654,7 @@ const getDialogsCountText = (count) => {
box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4); box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
border: 1.5px solid white; border: 1.5px solid white;
animation: subtle-pulse 2s ease-in-out infinite; animation: subtle-pulse 2s ease-in-out infinite;
z-index: 1;
} }
/* Адаптивные стили */ /* Адаптивные стили */