mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-14 11:01:06 +08:00
Compare commits
16 Commits
codex/add-
...
feature/da
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8657a06f52 | ||
|
|
09900b34aa | ||
|
|
4e1c3f5839 | ||
|
|
d97cc7df5e | ||
|
|
151242f3ba | ||
|
|
b2783a0168 | ||
|
|
c79bcac217 | ||
|
|
9a06da3bc1 | ||
|
|
98bbc36453 | ||
|
|
4a04f4ec17 | ||
|
|
77be2bfebb | ||
|
|
cf4ca89e19 | ||
|
|
094fc78d92 | ||
|
|
da3d2a6a71 | ||
|
|
15cba0c96e | ||
|
|
98a79acad9 |
@@ -18,14 +18,14 @@ public class ChannelInitializer implements CommandLineRunner {
|
||||
chat.setChannel(true);
|
||||
chat.setName("吹水群");
|
||||
chat.setDescription("吹水聊天");
|
||||
chat.setAvatar("/default-avatar.svg");
|
||||
chat.setAvatar("https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/32647273e2334d14adfd4a6ce9db0643.jpeg");
|
||||
conversationRepository.save(chat);
|
||||
|
||||
MessageConversation tech = new MessageConversation();
|
||||
tech.setChannel(true);
|
||||
tech.setName("技术讨论群");
|
||||
tech.setDescription("讨论技术相关话题");
|
||||
tech.setAvatar("/default-avatar.svg");
|
||||
tech.setAvatar("https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/5edde9a5864e471caa32491dbcdaa8b2.png");
|
||||
conversationRepository.save(tech);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,6 +121,7 @@ public class SecurityConfig {
|
||||
.requestMatchers(HttpMethod.GET, "/api/reaction-types").permitAll()
|
||||
.requestMatchers(HttpMethod.GET, "/api/activities/**").permitAll()
|
||||
.requestMatchers(HttpMethod.GET, "/api/sitemap.xml").permitAll()
|
||||
.requestMatchers(HttpMethod.GET, "/api/channels").permitAll()
|
||||
.requestMatchers(HttpMethod.GET, "/api/rss").permitAll()
|
||||
.requestMatchers(HttpMethod.GET, "/api/point-goods").permitAll()
|
||||
.requestMatchers(HttpMethod.POST, "/api/point-goods").permitAll()
|
||||
@@ -156,7 +157,7 @@ public class SecurityConfig {
|
||||
uri.startsWith("/api/search") || uri.startsWith("/api/users") ||
|
||||
uri.startsWith("/api/reaction-types") || uri.startsWith("/api/config") ||
|
||||
uri.startsWith("/api/activities") || uri.startsWith("/api/push/public-key") ||
|
||||
uri.startsWith("/api/point-goods") ||
|
||||
uri.startsWith("/api/point-goods") || uri.startsWith("/api/channels") ||
|
||||
uri.startsWith("/api/sitemap.xml") || uri.startsWith("/api/medals") ||
|
||||
uri.startsWith("/api/rss"));
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import com.openisle.dto.ChannelDto;
|
||||
import com.openisle.model.User;
|
||||
import com.openisle.repository.UserRepository;
|
||||
import com.openisle.service.ChannelService;
|
||||
import com.openisle.service.MessageService;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.security.core.Authentication;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
@@ -15,6 +16,7 @@ import java.util.List;
|
||||
@RequiredArgsConstructor
|
||||
public class ChannelController {
|
||||
private final ChannelService channelService;
|
||||
private final MessageService messageService;
|
||||
private final UserRepository userRepository;
|
||||
|
||||
private Long getCurrentUserId(Authentication auth) {
|
||||
@@ -32,4 +34,9 @@ public class ChannelController {
|
||||
public ChannelDto joinChannel(@PathVariable Long channelId, Authentication auth) {
|
||||
return channelService.joinChannel(channelId, getCurrentUserId(auth));
|
||||
}
|
||||
|
||||
@GetMapping("/unread-count")
|
||||
public long unreadCount(Authentication auth) {
|
||||
return messageService.getUnreadChannelCount(getCurrentUserId(auth));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ public class ChannelDto {
|
||||
private String name;
|
||||
private String description;
|
||||
private String avatar;
|
||||
private MessageDto lastMessage;
|
||||
private long memberCount;
|
||||
private boolean joined;
|
||||
private long unreadCount;
|
||||
|
||||
@@ -1,23 +1,22 @@
|
||||
package com.openisle.repository;
|
||||
|
||||
import com.openisle.model.MessageConversation;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.stereotype.Repository;
|
||||
|
||||
import com.openisle.model.User;
|
||||
import java.util.List;
|
||||
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
import org.springframework.data.repository.query.Param;
|
||||
import org.springframework.stereotype.Repository;
|
||||
|
||||
import java.util.Optional;
|
||||
import com.openisle.model.User;
|
||||
import java.util.List;
|
||||
|
||||
@Repository
|
||||
public interface MessageConversationRepository extends JpaRepository<MessageConversation, Long> {
|
||||
@Query("SELECT c FROM MessageConversation c JOIN c.participants p1 JOIN c.participants p2 WHERE p1.user = :user1 AND p2.user = :user2")
|
||||
Optional<MessageConversation> findConversationByUsers(@Param("user1") User user1, @Param("user2") User user2);
|
||||
@Query("SELECT c FROM MessageConversation c " +
|
||||
"WHERE c.channel = false AND size(c.participants) = 2 " +
|
||||
"AND EXISTS (SELECT 1 FROM c.participants p1 WHERE p1.user = :user1) " +
|
||||
"AND EXISTS (SELECT 1 FROM c.participants p2 WHERE p2.user = :user2) " +
|
||||
"ORDER BY c.createdAt DESC")
|
||||
List<MessageConversation> findConversationsByUsers(@Param("user1") User user1, @Param("user2") User user2);
|
||||
|
||||
@Query("SELECT DISTINCT c FROM MessageConversation c " +
|
||||
"JOIN c.participants p " +
|
||||
@@ -32,4 +31,4 @@ public interface MessageConversationRepository extends JpaRepository<MessageConv
|
||||
List<MessageConversation> findByChannelTrue();
|
||||
|
||||
long countByChannelTrue();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
package com.openisle.service;
|
||||
|
||||
import com.openisle.dto.ChannelDto;
|
||||
import com.openisle.dto.MessageDto;
|
||||
import com.openisle.dto.UserSummaryDto;
|
||||
import com.openisle.model.Message;
|
||||
import com.openisle.model.MessageConversation;
|
||||
import com.openisle.model.MessageParticipant;
|
||||
import com.openisle.model.User;
|
||||
@@ -54,6 +57,9 @@ public class ChannelService {
|
||||
dto.setName(channel.getName());
|
||||
dto.setDescription(channel.getDescription());
|
||||
dto.setAvatar(channel.getAvatar());
|
||||
if (channel.getLastMessage() != null) {
|
||||
dto.setLastMessage(toMessageDto(channel.getLastMessage()));
|
||||
}
|
||||
dto.setMemberCount(channel.getParticipants().size());
|
||||
boolean joined = channel.getParticipants().stream()
|
||||
.anyMatch(p -> p.getUser().getId().equals(userId));
|
||||
@@ -73,4 +79,20 @@ public class ChannelService {
|
||||
}
|
||||
return dto;
|
||||
}
|
||||
|
||||
private MessageDto toMessageDto(Message message) {
|
||||
MessageDto dto = new MessageDto();
|
||||
dto.setId(message.getId());
|
||||
dto.setContent(message.getContent());
|
||||
dto.setConversationId(message.getConversation().getId());
|
||||
dto.setCreatedAt(message.getCreatedAt());
|
||||
|
||||
UserSummaryDto userDto = new UserSummaryDto();
|
||||
userDto.setId(message.getSender().getId());
|
||||
userDto.setUsername(message.getSender().getUsername());
|
||||
userDto.setAvatar(message.getSender().getAvatar());
|
||||
dto.setSender(userDto);
|
||||
|
||||
return dto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,6 +120,9 @@ public class MessageService {
|
||||
long unreadCount = getUnreadMessageCount(participant.getUser().getId());
|
||||
String username = participant.getUser().getUsername();
|
||||
messagingTemplate.convertAndSendToUser(username, "/queue/unread-count", unreadCount);
|
||||
|
||||
long channelUnread = getUnreadChannelCount(participant.getUser().getId());
|
||||
messagingTemplate.convertAndSendToUser(username, "/queue/channel-unread", channelUnread);
|
||||
}
|
||||
|
||||
return message;
|
||||
@@ -151,7 +154,8 @@ public class MessageService {
|
||||
|
||||
private MessageConversation findOrCreateConversation(User user1, User user2) {
|
||||
log.info("Searching for existing conversation between {} and {}", user1.getUsername(), user2.getUsername());
|
||||
return conversationRepository.findConversationByUsers(user1, user2)
|
||||
return conversationRepository.findConversationsByUsers(user1, user2).stream()
|
||||
.findFirst()
|
||||
.orElseGet(() -> {
|
||||
log.info("No existing conversation found. Creating a new one.");
|
||||
MessageConversation conversation = new MessageConversation();
|
||||
@@ -260,10 +264,26 @@ public class MessageService {
|
||||
List<MessageParticipant> participations = participantRepository.findByUserId(userId);
|
||||
long totalUnreadCount = 0;
|
||||
for (MessageParticipant p : participations) {
|
||||
if (p.getConversation().isChannel()) continue;
|
||||
LocalDateTime lastRead = p.getLastReadAt() == null ? LocalDateTime.of(1970, 1, 1, 0, 0) : p.getLastReadAt();
|
||||
// 只计算别人发送给当前用户的未读消息
|
||||
totalUnreadCount += messageRepository.countByConversationIdAndCreatedAtAfterAndSenderIdNot(p.getConversation().getId(), lastRead, userId);
|
||||
}
|
||||
return totalUnreadCount;
|
||||
}
|
||||
|
||||
@Transactional(readOnly = true)
|
||||
public long getUnreadChannelCount(Long userId) {
|
||||
List<MessageParticipant> participations = participantRepository.findByUserId(userId);
|
||||
long unreadChannelCount = 0;
|
||||
for (MessageParticipant p : participations) {
|
||||
if (!p.getConversation().isChannel()) continue;
|
||||
LocalDateTime lastRead = p.getLastReadAt() == null ? LocalDateTime.of(1970, 1, 1, 0, 0) : p.getLastReadAt();
|
||||
long unread = messageRepository.countByConversationIdAndCreatedAtAfterAndSenderIdNot(p.getConversation().getId(), lastRead, userId);
|
||||
if (unread > 0) {
|
||||
unreadChannelCount++;
|
||||
}
|
||||
}
|
||||
return unreadChannelCount;
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,10 @@
|
||||
<button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<span v-if="isMobile && unreadMessageCount > 0" class="menu-unread-dot"></span>
|
||||
<span
|
||||
v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"
|
||||
class="menu-unread-dot"
|
||||
></span>
|
||||
</div>
|
||||
<NuxtLink class="logo-container" :to="`/`" @click="refrechData">
|
||||
<img
|
||||
@@ -53,6 +56,7 @@
|
||||
<span v-if="unreadMessageCount > 0" class="unread-badge">{{
|
||||
unreadMessageCount
|
||||
}}</span>
|
||||
<span v-else-if="hasChannelUnread" class="unread-dot"></span>
|
||||
</div>
|
||||
</ToolTip>
|
||||
|
||||
@@ -85,6 +89,7 @@ import ToolTip from '~/components/ToolTip.vue'
|
||||
import SearchDropdown from '~/components/SearchDropdown.vue'
|
||||
import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
|
||||
import { useUnreadCount } from '~/composables/useUnreadCount'
|
||||
import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
|
||||
import { useIsMobile } from '~/utils/screen'
|
||||
import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
|
||||
import { toast } from '~/main'
|
||||
@@ -103,6 +108,7 @@ const props = defineProps({
|
||||
const isLogin = computed(() => authState.loggedIn)
|
||||
const isMobile = useIsMobile()
|
||||
const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
|
||||
const { hasUnread: hasChannelUnread, fetchChannelUnread } = useChannelsUnreadCount()
|
||||
const avatar = ref('')
|
||||
const showSearch = ref(false)
|
||||
const searchDropdown = ref(null)
|
||||
@@ -227,8 +233,10 @@ onMounted(async () => {
|
||||
}
|
||||
const updateUnread = async () => {
|
||||
if (authState.loggedIn) {
|
||||
// Initialize the unread count composable
|
||||
fetchUnreadCount()
|
||||
fetchChannelUnread()
|
||||
} else {
|
||||
fetchChannelUnread()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -413,6 +421,16 @@ onMounted(async () => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.unread-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.rss-icon {
|
||||
animation: rss-glow 2s 3;
|
||||
}
|
||||
|
||||
92
frontend_nuxt/composables/useChannelsUnreadCount.js
Normal file
92
frontend_nuxt/composables/useChannelsUnreadCount.js
Normal file
@@ -0,0 +1,92 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useWebSocket } from './useWebSocket'
|
||||
import { getToken } from '~/utils/auth'
|
||||
|
||||
const count = ref(0)
|
||||
let isInitialized = false
|
||||
let wsSubscription = null
|
||||
|
||||
export function useChannelsUnreadCount() {
|
||||
const config = useRuntimeConfig()
|
||||
const API_BASE_URL = config.public.apiBaseUrl
|
||||
const { subscribe, isConnected, connect } = useWebSocket()
|
||||
|
||||
const fetchChannelUnread = async () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
count.value = 0
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/channels/unread-count`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
count.value = data
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch channel unread count:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const initialize = () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
count.value = 0
|
||||
return
|
||||
}
|
||||
fetchChannelUnread()
|
||||
if (!isConnected.value) {
|
||||
connect(token)
|
||||
}
|
||||
setupWebSocketListener()
|
||||
}
|
||||
|
||||
const setupWebSocketListener = () => {
|
||||
if (!wsSubscription) {
|
||||
watch(
|
||||
isConnected,
|
||||
(newValue) => {
|
||||
if (newValue && !wsSubscription) {
|
||||
wsSubscription = subscribe('/user/queue/channel-unread', (message) => {
|
||||
const unread = parseInt(message.body, 10)
|
||||
if (!isNaN(unread)) {
|
||||
count.value = unread
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const setFromList = (channels) => {
|
||||
count.value = Array.isArray(channels) ? channels.filter((c) => c.unreadCount > 0).length : 0
|
||||
}
|
||||
|
||||
const hasUnread = computed(() => count.value > 0)
|
||||
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
if (!isInitialized) {
|
||||
isInitialized = true
|
||||
initialize()
|
||||
} else {
|
||||
fetchChannelUnread()
|
||||
if (!isConnected.value) {
|
||||
connect(token)
|
||||
}
|
||||
setupWebSocketListener()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
count,
|
||||
hasUnread,
|
||||
fetchChannelUnread,
|
||||
initialize,
|
||||
setFromList,
|
||||
}
|
||||
}
|
||||
@@ -55,7 +55,10 @@ const subscribe = (destination, callback) => {
|
||||
try {
|
||||
const subscription = client.value.subscribe(destination, (message) => {
|
||||
try {
|
||||
if (destination.includes('/queue/unread-count')) {
|
||||
if (
|
||||
destination.includes('/queue/unread-count') ||
|
||||
destination.includes('/queue/channel-unread')
|
||||
) {
|
||||
callback(message)
|
||||
} else {
|
||||
const parsedMessage = JSON.parse(message.body)
|
||||
|
||||
@@ -22,8 +22,13 @@
|
||||
</div>
|
||||
<BaseTimeline :items="messages">
|
||||
<template #item="{ item }">
|
||||
<div class="message-timestamp">
|
||||
{{ TimeManager.format(item.createdAt) }}
|
||||
<div class="message-header">
|
||||
<div class="user-name">
|
||||
{{ item.sender.username }}
|
||||
</div>
|
||||
<div class="message-timestamp">
|
||||
{{ TimeManager.format(item.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="info-content-text" v-html="renderMarkdown(item.content)"></div>
|
||||
@@ -64,6 +69,7 @@ import { renderMarkdown } from '~/utils/markdown'
|
||||
import MessageEditor from '~/components/MessageEditor.vue'
|
||||
import { useWebSocket } from '~/composables/useWebSocket'
|
||||
import { useUnreadCount } from '~/composables/useUnreadCount'
|
||||
import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
|
||||
import TimeManager from '~/utils/time'
|
||||
import BaseTimeline from '~/components/BaseTimeline.vue'
|
||||
import BasePlaceholder from '~/components/BasePlaceholder.vue'
|
||||
@@ -73,6 +79,7 @@ const route = useRoute()
|
||||
const API_BASE_URL = config.public.apiBaseUrl
|
||||
const { connect, disconnect, subscribe, isConnected } = useWebSocket()
|
||||
const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
|
||||
const { fetchChannelUnread: refreshChannelUnread } = useChannelsUnreadCount()
|
||||
let subscription = null
|
||||
|
||||
const messages = ref([])
|
||||
@@ -253,6 +260,7 @@ async function markConversationAsRead() {
|
||||
})
|
||||
// After marking as read, refresh the global unread count
|
||||
refreshGlobalUnreadCount()
|
||||
refreshChannelUnread()
|
||||
} catch (e) {
|
||||
console.error('Failed to mark conversation as read', e)
|
||||
}
|
||||
@@ -448,10 +456,22 @@ onUnmounted(() => {
|
||||
.message-timestamp {
|
||||
font-size: 11px;
|
||||
color: var(--text-color-secondary);
|
||||
margin-top: 5px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.message-item.sent {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@@ -94,10 +94,17 @@
|
||||
{{ ch.name }}
|
||||
<span v-if="ch.unreadCount > 0" class="unread-dot"></span>
|
||||
</div>
|
||||
<div class="message-time">成员 {{ ch.memberCount }}</div>
|
||||
<div class="message-time">
|
||||
{{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-message-row">
|
||||
<div class="last-message">{{ ch.description }}</div>
|
||||
<div class="last-message">
|
||||
{{
|
||||
ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
|
||||
}}
|
||||
</div>
|
||||
<div class="member-count">成员 {{ ch.memberCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,6 +120,7 @@ import { getToken, fetchCurrentUser } from '~/utils/auth'
|
||||
import { toast } from '~/main'
|
||||
import { useWebSocket } from '~/composables/useWebSocket'
|
||||
import { useUnreadCount } from '~/composables/useUnreadCount'
|
||||
import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
|
||||
import TimeManager from '~/utils/time'
|
||||
import { stripMarkdownLength } from '~/utils/markdown'
|
||||
import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
|
||||
@@ -127,6 +135,8 @@ const currentUser = ref(null)
|
||||
const API_BASE_URL = config.public.apiBaseUrl
|
||||
const { connect, disconnect, subscribe, isConnected } = useWebSocket()
|
||||
const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
|
||||
const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadFromList } =
|
||||
useChannelsUnreadCount()
|
||||
let subscription = null
|
||||
|
||||
const activeTab = ref('messages')
|
||||
@@ -185,7 +195,9 @@ async function fetchChannels() {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
if (!response.ok) throw new Error('无法加载频道')
|
||||
channels.value = await response.json()
|
||||
const data = await response.json()
|
||||
channels.value = data
|
||||
setChannelUnreadFromList(data)
|
||||
} catch (e) {
|
||||
toast.error(e.message)
|
||||
} finally {
|
||||
@@ -224,6 +236,7 @@ onActivated(async () => {
|
||||
if (currentUser.value) {
|
||||
await fetchConversations()
|
||||
refreshGlobalUnreadCount() // Refresh global count when entering the list
|
||||
refreshChannelUnread()
|
||||
const token = getToken()
|
||||
if (token && !isConnected.value) {
|
||||
connect(token)
|
||||
@@ -244,6 +257,9 @@ watch(isConnected, (newValue) => {
|
||||
|
||||
subscription = subscribe(destination, (message) => {
|
||||
fetchConversations()
|
||||
if (activeTab.value === 'channels') {
|
||||
fetchChannels()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -262,8 +278,6 @@ function goToConversation(id) {
|
||||
|
||||
<style scoped>
|
||||
.messages-container {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
@@ -291,6 +305,8 @@ function goToConversation(id) {
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 24px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.messages-header {
|
||||
@@ -330,6 +346,8 @@ function goToConversation(id) {
|
||||
.conversation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
@@ -369,6 +387,12 @@ function goToConversation(id) {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.member-count {
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
@@ -415,8 +439,9 @@ function goToConversation(id) {
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.messages-container {
|
||||
padding: 10px 10px;
|
||||
.conversation-item {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.messages-title {
|
||||
|
||||
Reference in New Issue
Block a user