feat: show channel unread indicator

feat: add channel support

backend/src/main/java/com/openisle/config/ChannelInitializer.java

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

backend/src/main/java/com/openisle/config/SecurityConfig.java

@@ -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"));
 

backend/src/main/java/com/openisle/dto/ChannelDto.java

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

frontend_nuxt/components/HeaderComponent.vue

@@ -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 && (messageUnreadCount > 0 || channelUnreadCount > 0)"
+            class="menu-unread-dot"
+          ></span>
         </div>
         <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
           <img
@@ -50,9 +53,10 @@
           <ToolTip v-if="isLogin" content="站内信和频道" placement="bottom">
             <div class="messages-icon" @click="goToMessages">
               <i class="fas fa-comments"></i>
-              <span v-if="unreadMessageCount > 0" class="unread-badge">{{
-                unreadMessageCount
-              }}</span>
+              <span v-if="messageUnreadCount > 0" class="unread-badge">
+                {{ messageUnreadCount }}
+              </span>
+              <span v-else-if="channelUnreadCount > 0" class="messages-unread-dot"></span>
             </div>
           </ToolTip>
 
@@ -102,7 +106,10 @@ const props = defineProps({
 
 const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
-const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
+const { count: totalUnreadCount, channelUnreadCount, fetchUnreadCount } = useUnreadCount()
+const messageUnreadCount = computed(() =>
+  Math.max(totalUnreadCount.value - channelUnreadCount.value, 0),
+)
 const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
@@ -413,6 +420,16 @@ onMounted(async () => {
   box-sizing: border-box;
 }
 
+.messages-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/useUnreadCount.js

@@ -1,93 +1,123 @@
-import { ref, watch, onMounted } from 'vue';
-import { useWebSocket } from './useWebSocket';
-import { getToken } from '~/utils/auth';
+import { ref, watch } from 'vue'
+import { useWebSocket } from './useWebSocket'
+import { getToken } from '~/utils/auth'
 
-const count = ref(0);
-let isInitialized = false;
-let wsSubscription = null;
+const count = ref(0)
+const channelUnreadCount = ref(0)
+let isInitialized = false
+let wsSubscription = null
 
 export function useUnreadCount() {
-  const config = useRuntimeConfig();
-  const API_BASE_URL = config.public.apiBaseUrl;
-  const { subscribe, isConnected, connect } = useWebSocket();
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
+  const { subscribe, isConnected, connect } = useWebSocket()
 
-  const fetchUnreadCount = async () => {
-    const token = getToken();
+  const fetchTotalUnreadCount = async () => {
+    const token = getToken()
     if (!token) {
-      count.value = 0;
-      return;
+      count.value = 0
+      return
     }
     try {
       const response = await fetch(`${API_BASE_URL}/api/messages/unread-count`, {
         headers: { Authorization: `Bearer ${token}` },
-      });
+      })
       if (response.ok) {
-        const data = await response.json();
-        count.value = data;
+        const data = await response.json()
+        count.value = data
       }
     } catch (error) {
-      console.error('Failed to fetch unread count:', error);
+      console.error('Failed to fetch unread count:', error)
     }
-  };
+  }
+
+  const fetchChannelUnreadCount = async () => {
+    const token = getToken()
+    if (!token) {
+      channelUnreadCount.value = 0
+      return
+    }
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/channels`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+      if (response.ok) {
+        const channels = await response.json()
+        channelUnreadCount.value = channels.reduce((sum, ch) => sum + (ch.unreadCount || 0), 0)
+      }
+    } catch (error) {
+      console.error('Failed to fetch channel unread count:', error)
+    }
+  }
+
+  const fetchUnreadCount = async () => {
+    await Promise.all([fetchTotalUnreadCount(), fetchChannelUnreadCount()])
+  }
 
   const initialize = async () => {
-    const token = getToken();
+    const token = getToken()
     if (!token) {
-      count.value = 0;
-      return;
+      count.value = 0
+      channelUnreadCount.value = 0
+      return
     }
 
     // 总是获取最新的未读数量
-    fetchUnreadCount();
-    
+    fetchUnreadCount()
+
     // 确保WebSocket连接
     if (!isConnected.value) {
-      connect(token);
+      connect(token)
     }
-    
+
     // 设置WebSocket监听
-    await setupWebSocketListener();
-  };
+    await setupWebSocketListener()
+  }
 
   const setupWebSocketListener = async () => {
     // 只有在还没有订阅的情况下才设置监听
     if (!wsSubscription) {
-      
-      watch(isConnected, (newValue) => {
-        if (newValue && !wsSubscription) {
-          const destination = `/user/queue/unread-count`;
-          wsSubscription = subscribe(destination, (message) => {
-            const unreadCount = parseInt(message.body, 10);
-            if (!isNaN(unreadCount)) {
-              count.value = unreadCount;
-            }
-          });
-        }
-      }, { immediate: true });
+      watch(
+        isConnected,
+        (newValue) => {
+          if (newValue && !wsSubscription) {
+            const destination = `/user/queue/unread-count`
+            wsSubscription = subscribe(destination, (message) => {
+              const unreadCount = parseInt(message.body, 10)
+              if (!isNaN(unreadCount)) {
+                count.value = unreadCount
+                fetchChannelUnreadCount()
+              }
+            })
+          }
+        },
+        { immediate: true },
+      )
     }
-  };
+  }
 
   // 自动初始化逻辑 - 确保每次调用都能获取到未读数量并设置监听
-  const token = getToken();
+  const token = getToken()
   if (token) {
     if (!isInitialized) {
-      isInitialized = true;
-      initialize(); // 完整初始化，包括WebSocket监听
+      isInitialized = true
+      initialize() // 完整初始化，包括WebSocket监听
     } else {
       // 即使已经初始化，也要确保获取最新的未读数量并确保WebSocket监听存在
-      fetchUnreadCount();
-      
+      fetchUnreadCount()
+
       // 确保WebSocket连接和监听都存在
       if (!isConnected.value) {
-        connect(token);
+        connect(token)
       }
-      setupWebSocketListener();
+      setupWebSocketListener()
     }
   }
 
   return {
     count,
+    channelUnreadCount,
     fetchUnreadCount,
     initialize,
-  };
-}
+  }
+}

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

@@ -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>
@@ -448,10 +453,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;

frontend_nuxt/pages/message-box/index.vue

@@ -97,7 +97,11 @@
               <div class="message-time">成员 {{ ch.memberCount }}</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>
           </div>
         </div>
@@ -262,8 +266,6 @@ function goToConversation(id) {
 
 <style scoped>
 .messages-container {
-  margin: 0 auto;
-  padding: 20px;
 }
 
 .tabs {
@@ -291,6 +293,8 @@ function goToConversation(id) {
 
 .search-container {
   margin-bottom: 24px;
+  margin-left: 20px;
+  margin-right: 20px;
 }
 
 .messages-header {
@@ -330,6 +334,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;
@@ -415,8 +421,9 @@ function goToConversation(id) {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .messages-container {
-    padding: 10px 10px;
+  .conversation-item {
+    margin-left: 10px;
+    margin-right: 10px;
   }
 
   .messages-title {