Return and show last channel message

backend/src/main/java/com/openisle/service/ChannelService.java

@@ -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;
+    }
 }

frontend_nuxt/components/HeaderComponent.vue

@@ -6,10 +6,7 @@
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
             <i class="fas fa-bars"></i>
           </button>
-          <span
-            v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"
-            class="menu-unread-dot"
-          ></span>
+          <span v-if="isMobile && unreadMessageCount > 0" class="menu-unread-dot"></span>
         </div>
         <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
           <img
@@ -56,7 +53,6 @@
               <span v-if="unreadMessageCount > 0" class="unread-badge">{{
                 unreadMessageCount
               }}</span>
-              <span v-else-if="hasChannelUnread" class="unread-dot"></span>
             </div>
           </ToolTip>
 
@@ -89,7 +85,6 @@ 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 { useChannelUnread } from '~/composables/useChannelUnread'
 import { useIsMobile } from '~/utils/screen'
 import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
 import { toast } from '~/main'
@@ -108,7 +103,6 @@ const props = defineProps({
 const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
 const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
-const { hasUnread: hasChannelUnread, fetchChannelUnread } = useChannelUnread()
 const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
@@ -233,10 +227,8 @@ onMounted(async () => {
   }
   const updateUnread = async () => {
     if (authState.loggedIn) {
+      // Initialize the unread count composable
       fetchUnreadCount()
-      fetchChannelUnread()
-    } else {
-      fetchChannelUnread()
     }
   }
 
@@ -421,16 +413,6 @@ 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;
 }

frontend_nuxt/composables/useChannelUnread.js

@@ -1,38 +0,0 @@
-import { ref } from 'vue'
-import { getToken } from '~/utils/auth'
-
-const hasUnread = ref(false)
-
-export function useChannelUnread() {
-  const config = useRuntimeConfig()
-  const API_BASE_URL = config.public.apiBaseUrl
-
-  const setFromList = (channels) => {
-    hasUnread.value = Array.isArray(channels) && channels.some((c) => c.unreadCount > 0)
-  }
-
-  const fetchChannelUnread = async () => {
-    const token = getToken()
-    if (!token) {
-      hasUnread.value = false
-      return
-    }
-    try {
-      const response = await fetch(`${API_BASE_URL}/api/channels`, {
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (response.ok) {
-        const data = await response.json()
-        setFromList(data)
-      }
-    } catch (e) {
-      console.error('Failed to fetch channel unread status:', e)
-    }
-  }
-
-  return {
-    hasUnread,
-    fetchChannelUnread,
-    setFromList,
-  }
-}

frontend_nuxt/pages/message-box/[id].vue

@@ -69,7 +69,6 @@ import { renderMarkdown } from '~/utils/markdown'
 import MessageEditor from '~/components/MessageEditor.vue'
 import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
-import { useChannelUnread } from '~/composables/useChannelUnread'
 import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
@@ -79,7 +78,6 @@ const route = useRoute()
 const API_BASE_URL = config.public.apiBaseUrl
 const { connect, disconnect, subscribe, isConnected } = useWebSocket()
 const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
-const { fetchChannelUnread: refreshChannelUnread } = useChannelUnread()
 let subscription = null
 
 const messages = ref([])
@@ -260,7 +258,6 @@ 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)
   }

frontend_nuxt/pages/message-box/index.vue

@@ -94,7 +94,9 @@
                 {{ 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">
@@ -102,6 +104,7 @@
                   ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
                 }}
               </div>
+              <div class="member-count">成员 {{ ch.memberCount }}</div>
             </div>
           </div>
         </div>
@@ -117,7 +120,6 @@ import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
 import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
-import { useChannelUnread } from '~/composables/useChannelUnread'
 import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
 import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
@@ -132,8 +134,6 @@ 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 } =
-  useChannelUnread()
 let subscription = null
 
 const activeTab = ref('messages')
@@ -192,9 +192,7 @@ async function fetchChannels() {
       headers: { Authorization: `Bearer ${token}` },
     })
     if (!response.ok) throw new Error('无法加载频道')
-    const data = await response.json()
-    channels.value = data
-    setChannelUnreadFromList(data)
+    channels.value = await response.json()
   } catch (e) {
     toast.error(e.message)
   } finally {
@@ -233,7 +231,6 @@ 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)