feat: add channel tabs and chat support

This reverts commit e05d65cf49.

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

@@ -0,0 +1,35 @@
+package com.openisle.config;
+
+import com.openisle.model.Channel;
+import com.openisle.model.MessageConversation;
+import com.openisle.repository.ChannelRepository;
+import com.openisle.repository.MessageConversationRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.boot.CommandLineRunner;
+import org.springframework.stereotype.Component;
+
+@Component
+@RequiredArgsConstructor
+public class ChannelInitializer implements CommandLineRunner {
+    private final ChannelRepository channelRepository;
+    private final MessageConversationRepository conversationRepository;
+
+    @Override
+    public void run(String... args) {
+        if (channelRepository.count() == 0) {
+            createChannel("吹水群", "闲聊讨论", "/default-avatar.svg");
+            createChannel("技术讨论群", "技术交流", "/default-avatar.svg");
+        }
+    }
+
+    private void createChannel(String name, String description, String avatar) {
+        MessageConversation conversation = new MessageConversation();
+        conversation = conversationRepository.save(conversation);
+        Channel channel = new Channel();
+        channel.setName(name);
+        channel.setDescription(description);
+        channel.setAvatar(avatar);
+        channel.setConversation(conversation);
+        channelRepository.save(channel);
+    }
+}

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

@@ -92,19 +92,20 @@ public class SecurityConfig {
         cfg.setAllowedHeaders(List.of("*"));
         cfg.setAllowCredentials(true);
         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
-        source.registerCorsConfiguration("/**", cfg);
+        source.registerCorsConfiguration("/api/**", cfg);
         return source;
     }
 
     @Bean
     public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
         http.csrf(csrf -> csrf.disable())
-                .cors(Customizer.withDefaults())         // 让 Spring 自带 CorsFilter 处理预检
-            .sessionManagement(sm -> sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
+                .cors(Customizer.withDefaults())
+                .headers(h -> h.frameOptions(f -> f.sameOrigin()))
+                .sessionManagement(sm -> sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
             .exceptionHandling(eh -> eh.accessDeniedHandler(customAccessDeniedHandler))
             .authorizeHttpRequests(auth -> auth
                     .requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()
-                    .requestMatchers("/ws/**").permitAll()
+                    .requestMatchers("/api/ws/**", "/api/sockjs/**").permitAll()
                     .requestMatchers(HttpMethod.POST, "/api/auth/**").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/posts/**").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/comments/**").permitAll()
@@ -173,7 +174,8 @@ public class SecurityConfig {
                         response.getWriter().write("{\"error\": \"Invalid or expired token\"}");
                         return;
                     }
-                } else if (!uri.startsWith("/api/auth") && !publicGet && !uri.startsWith("/ws")) {
+                } else if (!uri.startsWith("/api/auth") && !publicGet
+                        && !uri.startsWith("/api/ws") && !uri.startsWith("/api/sockjs")) {
                     response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                     response.setContentType("application/json");
                     response.getWriter().write("{\"error\": \"Missing token\"}");

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

@@ -41,28 +41,38 @@ public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 
     @Override
     public void registerStompEndpoints(StompEndpointRegistry registry) {
-        // Registers the "/ws" endpoint, enabling SockJS fallback options so that alternate transports may be used if WebSocket is not available.
-        registry.addEndpoint("/ws")
-                // 安全改进：使用具体的允许源，而不是通配符
-                .setAllowedOrigins(
-                    "http://127.0.0.1:8080",
-                    "http://127.0.0.1:3000",
-                    "http://127.0.0.1:3001",
-                    "http://127.0.0.1",
-                    "http://localhost:8080",
-                    "http://localhost:3000",
-                    "http://localhost:3001",
-                    "http://localhost",
-                    "http://30.211.97.238:3000",
-                    "http://30.211.97.238",
-                    "http://192.168.7.98",
-                    "http://192.168.7.98:3000",
-                    websiteUrl,
-                    websiteUrl.replace("://www.", "://")
+        // 1) 原生 WebSocket（不带 SockJS）
+        registry.addEndpoint("/api/ws")
+                .setAllowedOriginPatterns(
+                        "https://staging.open-isle.com",
+                        "https://www.staging.open-isle.com",
+                        websiteUrl,
+                        websiteUrl.replace("://www.", "://"),
+                        "http://localhost:*",
+                        "http://127.0.0.1:*",
+                        "http://192.168.7.98:*",
+                        "http://30.211.97.238:*"
+                );
+
+        // 2) SockJS 回退：单独路径
+        registry.addEndpoint("/api/sockjs")
+                .setAllowedOriginPatterns(
+                        "https://staging.open-isle.com",
+                        "https://www.staging.open-isle.com",
+                        websiteUrl,
+                        websiteUrl.replace("://www.", "://"),
+                        "http://localhost:*",
+                        "http://127.0.0.1:*",
+                        "http://192.168.7.98:*",
+                        "http://30.211.97.238:*"
                 )
-                .withSockJS();
+                .withSockJS()
+                .setWebSocketEnabled(true)
+                .setSessionCookieNeeded(false);
     }
 
+
+
     @Override
     public void configureClientInboundChannel(ChannelRegistration registration) {
         registration.interceptors(new ChannelInterceptor() {

backend/src/main/java/com/openisle/controller/ChannelController.java

@@ -0,0 +1,82 @@
+package com.openisle.controller;
+
+import com.openisle.dto.ChannelDto;
+import com.openisle.model.Channel;
+import com.openisle.model.MessageParticipant;
+import com.openisle.model.MessageConversation;
+import com.openisle.model.User;
+import com.openisle.repository.ChannelRepository;
+import com.openisle.repository.MessageParticipantRepository;
+import com.openisle.repository.UserRepository;
+import com.openisle.repository.MessageRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+@RestController
+@RequestMapping("/api/channels")
+@RequiredArgsConstructor
+public class ChannelController {
+    private final ChannelRepository channelRepository;
+    private final MessageParticipantRepository participantRepository;
+    private final UserRepository userRepository;
+    private final MessageRepository messageRepository;
+
+    private Long getCurrentUserId(Authentication auth) {
+        User user = userRepository.findByUsername(auth.getName()).orElseThrow(() -> new IllegalArgumentException("User not found"));
+        return user.getId();
+    }
+
+    @GetMapping
+    public ResponseEntity<List<ChannelDto>> listChannels(Authentication auth) {
+        Long userId = auth == null ? null : getCurrentUserId(auth);
+        List<ChannelDto> channels = channelRepository.findAll().stream()
+                .map(c -> toDto(c, userId))
+                .collect(Collectors.toList());
+        return ResponseEntity.ok(channels);
+    }
+
+    @PostMapping("/{id}/join")
+    public ResponseEntity<Void> joinChannel(@PathVariable Long id, Authentication auth) {
+        Channel channel = channelRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("Channel not found"));
+        Long userId = getCurrentUserId(auth);
+        boolean exists = channel.getConversation().getParticipants().stream().anyMatch(p -> p.getUser().getId().equals(userId));
+        if (!exists) {
+            MessageParticipant participant = new MessageParticipant();
+            participant.setConversation(channel.getConversation());
+            participant.setUser(userRepository.findById(userId).orElseThrow(() -> new IllegalArgumentException("User not found")));
+            participantRepository.save(participant);
+        }
+        return ResponseEntity.ok().build();
+    }
+
+    private ChannelDto toDto(Channel channel, Long userId) {
+        ChannelDto dto = new ChannelDto();
+        dto.setId(channel.getId());
+        dto.setName(channel.getName());
+        dto.setDescription(channel.getDescription());
+        dto.setAvatar(channel.getAvatar());
+        if (channel.getConversation() != null) {
+            MessageConversation conversation = channel.getConversation();
+            dto.setConversationId(conversation.getId());
+            dto.setMemberCount(conversation.getParticipants().size());
+            if (userId != null) {
+                MessageParticipant self = conversation.getParticipants().stream()
+                        .filter(p -> p.getUser().getId().equals(userId))
+                        .findFirst().orElse(null);
+                if (self != null) {
+                    var lastRead = self.getLastReadAt();
+                    dto.setUnreadCount(messageRepository
+                            .countByConversationIdAndCreatedAtAfterAndSenderIdNot(conversation.getId(),
+                                    lastRead == null ? java.time.LocalDateTime.of(1970,1,1,0,0) : lastRead,
+                                    userId));
+                }
+            }
+        }
+        return dto;
+    }
+}

backend/src/main/java/com/openisle/controller/MessageController.java

@@ -59,6 +59,14 @@ public class MessageController {
         return ResponseEntity.ok(toDto(message));
     }
 
+    @PostMapping("/conversations/{conversationId}/messages")
+    public ResponseEntity<MessageDto> sendMessageToConversation(@PathVariable Long conversationId,
+                                                                @RequestBody ContentRequest req,
+                                                                Authentication auth) {
+        Message message = messageService.sendMessageToConversation(getCurrentUserId(auth), conversationId, req.getContent());
+        return ResponseEntity.ok(toDto(message));
+    }
+
     @PostMapping("/conversations/{conversationId}/read")
     public ResponseEntity<Void> markAsRead(@PathVariable Long conversationId, Authentication auth) {
         messageService.markConversationAsRead(conversationId, getCurrentUserId(auth));
@@ -114,4 +122,16 @@ public class MessageController {
             this.content = content;
         }
     }
+
+    static class ContentRequest {
+        private String content;
+
+        public String getContent() {
+            return content;
+        }
+
+        public void setContent(String content) {
+            this.content = content;
+        }
+    }
 }

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

@@ -0,0 +1,16 @@
+package com.openisle.dto;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class ChannelDto {
+    private Long id;
+    private String name;
+    private String description;
+    private String avatar;
+    private Long conversationId;
+    private int memberCount;
+    private long unreadCount;
+}

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

@@ -10,4 +10,5 @@ public class ConversationDetailDto {
     private Long id;
     private List<UserSummaryDto> participants;
     private Page<MessageDto> messages;
+    private ChannelDto channel;
 }

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

@@ -3,6 +3,7 @@ package com.openisle.dto;
 import lombok.Getter;
 import lombok.Setter;
 
+
 import java.time.LocalDateTime;
 import java.util.List;
 
@@ -14,4 +15,5 @@ public class ConversationDto {
     private List<UserSummaryDto> participants;
     private LocalDateTime createdAt;
     private long unreadCount;
+    private ChannelDto channel;
 }

backend/src/main/java/com/openisle/model/Channel.java

@@ -0,0 +1,27 @@
+package com.openisle.model;
+
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+import lombok.NoArgsConstructor;
+
+@Entity
+@Table(name = "channels")
+@Getter
+@Setter
+@NoArgsConstructor
+public class Channel {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    private String name;
+
+    private String description;
+
+    private String avatar;
+
+    @OneToOne
+    @JoinColumn(name = "conversation_id")
+    private MessageConversation conversation;
+}

backend/src/main/java/com/openisle/repository/ChannelRepository.java

@@ -0,0 +1,10 @@
+package com.openisle.repository;
+
+import com.openisle.model.Channel;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.Optional;
+
+public interface ChannelRepository extends JpaRepository<Channel, Long> {
+    Optional<Channel> findByConversationId(Long conversationId);
+}

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

@@ -8,6 +8,9 @@ import com.openisle.repository.MessageConversationRepository;
 import com.openisle.repository.MessageParticipantRepository;
 import com.openisle.repository.MessageRepository;
 import com.openisle.repository.UserRepository;
+import com.openisle.repository.ChannelRepository;
+import com.openisle.model.Channel;
+import com.openisle.dto.ChannelDto;
 import com.openisle.dto.ConversationDetailDto;
 import com.openisle.dto.ConversationDto;
 import com.openisle.dto.MessageDto;
@@ -33,6 +36,7 @@ public class MessageService {
     private final MessageConversationRepository conversationRepository;
     private final MessageParticipantRepository participantRepository;
     private final UserRepository userRepository;
+    private final ChannelRepository channelRepository;
     private final SimpMessagingTemplate messagingTemplate;
 
     @Transactional
@@ -82,6 +86,39 @@ public class MessageService {
         return message;
     }
 
+    @Transactional
+    public Message sendMessageToConversation(Long senderId, Long conversationId, String content) {
+        User sender = userRepository.findById(senderId)
+                .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
+        MessageConversation conversation = conversationRepository.findById(conversationId)
+                .orElseThrow(() -> new IllegalArgumentException("Conversation not found"));
+
+        Message message = new Message();
+        message.setConversation(conversation);
+        message.setSender(sender);
+        message.setContent(content);
+        message = messageRepository.save(message);
+
+        conversation.setLastMessage(message);
+        conversationRepository.save(conversation);
+
+        MessageDto messageDto = toDto(message);
+        String conversationDestination = "/topic/conversation/" + conversation.getId();
+        messagingTemplate.convertAndSend(conversationDestination, messageDto);
+
+        conversation.getParticipants().forEach(p -> {
+            if (!p.getUser().getId().equals(senderId)) {
+                String userDestination = "/topic/user/" + p.getUser().getId() + "/messages";
+                messagingTemplate.convertAndSend(userDestination, messageDto);
+                long unreadCount = getUnreadMessageCount(p.getUser().getId());
+                String recipientUsername = p.getUser().getUsername();
+                messagingTemplate.convertAndSendToUser(recipientUsername, "/queue/unread-count", unreadCount);
+            }
+        });
+
+        return message;
+    }
+
     private MessageDto toDto(Message message) {
         MessageDto dto = new MessageDto();
         dto.setId(message.getId());
@@ -98,6 +135,19 @@ public class MessageService {
         return dto;
     }
 
+    private ChannelDto toDto(Channel channel) {
+        ChannelDto dto = new ChannelDto();
+        dto.setId(channel.getId());
+        dto.setName(channel.getName());
+        dto.setDescription(channel.getDescription());
+        dto.setAvatar(channel.getAvatar());
+        if (channel.getConversation() != null) {
+            dto.setConversationId(channel.getConversation().getId());
+            dto.setMemberCount(channel.getConversation().getParticipants().size());
+        }
+        return dto;
+    }
+
     public MessageConversation findOrCreateConversation(Long user1Id, Long user2Id) {
         User user1 = userRepository.findById(user1Id)
                 .orElseThrow(() -> new IllegalArgumentException("User1 not found"));
@@ -154,6 +204,9 @@ public class MessageService {
                 })
                 .collect(Collectors.toList()));
 
+        channelRepository.findByConversationId(conversation.getId())
+                .ifPresent(channel -> dto.setChannel(toDto(channel)));
+
         MessageParticipant self = conversation.getParticipants().stream()
                 .filter(p -> p.getUser().getId().equals(userId))
                 .findFirst()
@@ -191,6 +244,8 @@ public class MessageService {
         detailDto.setId(conversation.getId());
         detailDto.setParticipants(participants);
         detailDto.setMessages(messageDtoPage);
+        channelRepository.findByConversationId(conversation.getId())
+                .ifPresent(channel -> detailDto.setChannel(toDto(channel)));
 
         return detailDto;
     }

frontend_nuxt/composables/useWebSocket.js

@@ -1,85 +1,83 @@
-import { ref } from 'vue';
-import { Client } from '@stomp/stompjs';
-import SockJS from 'sockjs-client/dist/sockjs.min.js';
-import { useRuntimeConfig } from '#app';
+import { ref } from 'vue'
+import { Client } from '@stomp/stompjs'
+import SockJS from 'sockjs-client/dist/sockjs.min.js'
+import { useRuntimeConfig } from '#app'
 
-const client = ref(null);
-const isConnected = ref(false);
+const client = ref(null)
+const isConnected = ref(false)
 
 const connect = (token) => {
-    if (isConnected.value) {
-        return;
-    }
+  if (isConnected.value) {
+    return
+  }
 
-    const config = useRuntimeConfig();
-    const API_BASE_URL = config.public.apiBaseUrl;
-    const socketUrl = `${API_BASE_URL}/ws`;
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
+  const socketUrl = `${API_BASE_URL}/api/sockjs`
 
-    const socket = new SockJS(socketUrl);
-    const stompClient = new Client({
-        webSocketFactory: () => socket,
-        connectHeaders: {
-            Authorization: `Bearer ${token}`,
-        },
-        debug: function (str) {
-        },
-        reconnectDelay: 5000,
-        heartbeatIncoming: 4000,
-        heartbeatOutgoing: 4000,
-    });
+  const socket = new SockJS(socketUrl)
+  const stompClient = new Client({
+    webSocketFactory: () => socket,
+    connectHeaders: {
+      Authorization: `Bearer ${token}`,
+    },
+    debug: function (str) {},
+    reconnectDelay: 5000,
+    heartbeatIncoming: 4000,
+    heartbeatOutgoing: 4000,
+  })
 
-    stompClient.onConnect = (frame) => {
-        isConnected.value = true;
-    };
+  stompClient.onConnect = (frame) => {
+    isConnected.value = true
+  }
 
-    stompClient.onStompError = (frame) => {
-        console.error('WebSocket STOMP error:', frame);
-    };
+  stompClient.onStompError = (frame) => {
+    console.error('WebSocket STOMP error:', frame)
+  }
 
-    stompClient.activate();
-    client.value = stompClient;
-};
+  stompClient.activate()
+  client.value = stompClient
+}
 
 const disconnect = () => {
-    if (client.value) {
-        isConnected.value = false;
-        client.value.deactivate();
-        client.value = null;
-    }
-};
+  if (client.value) {
+    isConnected.value = false
+    client.value.deactivate()
+    client.value = null
+  }
+}
 
 const subscribe = (destination, callback) => {
-    
-    if (!isConnected.value || !client.value || !client.value.connected) {
-        return null;
-    }
+  if (!isConnected.value || !client.value || !client.value.connected) {
+    return null
+  }
 
-    try {
-        const subscription = client.value.subscribe(destination, (message) => {
-            try {
-                if (destination.includes('/queue/unread-count')) {
-                    callback(message);
-                } else {
-                    const parsedMessage = JSON.parse(message.body);
-                    callback(parsedMessage);
-                }
-            } catch (error) {
-                callback(message);
-            }
-        });
-        
-        return subscription;
-    } catch (error) {
-        return null;
-    }
-};
+  try {
+    const subscription = client.value.subscribe(destination, (message) => {
+      try {
+        if (destination.includes('/queue/unread-count')) {
+          callback(message)
+        } else {
+          const parsedMessage = JSON.parse(message.body)
+          callback(parsedMessage)
+        }
+      } catch (error) {
+        callback(message)
+      }
+    })
+
+    return subscription
+  } catch (error) {
+    return null
+  }
+}
 
 export function useWebSocket() {
-    return {
-        client,
-        isConnected,
-        connect,
-        disconnect,
-        subscribe,
-    };
-}
+  return {
+    client,
+    isConnected,
+    connect,
+    disconnect,
+    subscribe,
+  }
+}

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

@@ -1,10 +1,10 @@
 <template>
   <div class="chat-container">
-    <div v-if="!loading && otherParticipant" class="chat-header">
+    <div v-if="!loading" class="chat-header">
       <NuxtLink to="/message-box" class="back-button">
         <i class="fas fa-arrow-left"></i>
       </NuxtLink>
-      <h2 class="participant-name">{{ otherParticipant.username }}</h2>
+      <h2 class="participant-name">{{ channel ? channel.name : otherParticipant?.username }}</h2>
     </div>
 
     <div class="messages-list" ref="messagesListEl">
@@ -65,6 +65,7 @@ let subscription = null
 
 const messages = ref([])
 const participants = ref([])
+const channel = ref(null)
 const loading = ref(true)
 const sending = ref(false)
 const error = ref(null)
@@ -126,6 +127,7 @@ async function fetchMessages(page = 0) {
 
     if (page === 0) {
       participants.value = conversationData.participants
+      channel.value = conversationData.channel
     }
 
     // Since the backend sorts by descending, we need to reverse for correct chat order
@@ -173,25 +175,31 @@ async function loadMoreMessages() {
 async function sendMessage(content, clearInput) {
   if (!content.trim()) return
 
-  const recipient = otherParticipant.value
-  if (!recipient) {
-    toast.error('无法确定收信人')
-    return
-  }
-
-  sending.value = true
   const token = getToken()
+  sending.value = true
   try {
-    const response = await fetch(`${API_BASE_URL}/api/messages`, {
+    let url
+    let body
+    if (channel.value) {
+      url = `${API_BASE_URL}/api/messages/conversations/${conversationId}/messages`
+      body = { content: content }
+    } else {
+      const recipient = otherParticipant.value
+      if (!recipient) {
+        toast.error('无法确定收信人')
+        sending.value = false
+        return
+      }
+      url = `${API_BASE_URL}/api/messages`
+      body = { recipientId: recipient.id, content: content }
+    }
+    const response = await fetch(url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`,
       },
-      body: JSON.stringify({
-        recipientId: recipient.id,
-        content: content,
-      }),
+      body: JSON.stringify(body),
     })
     if (!response.ok) throw new Error('发送失败')
 
@@ -281,7 +289,13 @@ watch(isConnected, (newValue) => {
       subscription = subscribe(`/topic/conversation/${conversationId}`, (message) => {
         // 避免重复显示当前用户发送的消息
         if (message.sender.id !== currentUser.value.id) {
-          messages.value.push(message)
+          messages.value.push({
+            ...message,
+            src: message.sender.avatar,
+            iconClick: () => {
+              navigateTo(`/users/${message.sender.id}`, { replace: true })
+            },
+          })
           // 实时收到消息时自动标记为已读
           markConversationAsRead()
           setTimeout(() => {

frontend_nuxt/pages/message-box/index.vue

@@ -1,50 +1,105 @@
 <template>
   <div class="messages-container">
-    <div v-if="loading" class="loading-message">
-      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="tabs">
+      <div
+        class="tab"
+        :class="{ active: activeTab === 'messages' }"
+        @click="activeTab = 'messages'"
+      >
+        站内信
+      </div>
+      <div
+        class="tab"
+        :class="{ active: activeTab === 'channels' }"
+        @click="activeTab = 'channels'"
+      >
+        频道
+      </div>
     </div>
 
-    <div v-else-if="error" class="error-container">
-      <div class="error-text">{{ error }}</div>
-    </div>
-
-    <div v-else-if="conversations.length === 0" class="empty-container">
-      <div class="empty-text">暂无会话</div>
-    </div>
-
-    <div
-      v-for="convo in conversations"
-      :key="convo.id"
-      class="conversation-item"
-      @click="goToConversation(convo.id)"
-    >
-      <div class="conversation-avatar">
-        <img
-          :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-          :alt="getOtherParticipant(convo)?.username || '用户'"
-          class="avatar-img"
-          @error="handleAvatarError"
-        />
+    <div v-if="activeTab === 'messages'">
+      <div v-if="loading" class="loading-message">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
 
-      <div class="conversation-content">
-        <div class="conversation-header">
-          <div class="participant-name">
-            {{ getOtherParticipant(convo)?.username || '未知用户' }}
-          </div>
-          <div class="message-time">
-            {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
-          </div>
+      <div v-else-if="error" class="error-container">
+        <div class="error-text">{{ error }}</div>
+      </div>
+
+      <div v-else-if="conversations.length === 0" class="empty-container">
+        <div class="empty-text">暂无会话</div>
+      </div>
+
+      <div
+        v-for="convo in conversations"
+        :key="convo.id"
+        class="conversation-item"
+        @click="goToConversation(convo.id)"
+      >
+        <div class="conversation-avatar">
+          <img
+            :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+            :alt="getOtherParticipant(convo)?.username || '用户'"
+            class="avatar-img"
+            @error="handleAvatarError"
+          />
         </div>
 
-        <div class="last-message-row">
-          <div class="last-message">
-            {{
-              convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
-            }}
+        <div class="conversation-content">
+          <div class="conversation-header">
+            <div class="participant-name">
+              {{ getOtherParticipant(convo)?.username || '未知用户' }}
+            </div>
+            <div class="message-time">
+              {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
+            </div>
           </div>
-          <div v-if="convo.unreadCount > 0" class="unread-count-badge">
-            {{ convo.unreadCount }}
+
+          <div class="last-message-row">
+            <div class="last-message">
+              {{
+                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
+              }}
+            </div>
+            <div v-if="convo.unreadCount > 0" class="unread-count-badge">
+              {{ convo.unreadCount }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <div v-if="channelsLoading" class="loading-message">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+      <div v-else-if="channelsError" class="error-container">
+        <div class="error-text">{{ channelsError }}</div>
+      </div>
+      <div v-else-if="channels.length === 0" class="empty-container">
+        <div class="empty-text">暂无频道</div>
+      </div>
+      <div
+        v-for="channel in channels"
+        :key="channel.id"
+        class="conversation-item"
+        @click="goToChannel(channel)"
+      >
+        <div class="conversation-avatar" style="position: relative">
+          <img
+            :src="channel.avatar || '/default-avatar.svg'"
+            :alt="channel.name"
+            class="avatar-img"
+            @error="handleAvatarError"
+          />
+          <span v-if="channel.unreadCount > 0" class="unread-dot"></span>
+        </div>
+        <div class="conversation-content">
+          <div class="conversation-header">
+            <div class="participant-name">{{ channel.name }}</div>
+          </div>
+          <div class="last-message-row">
+            <div class="last-message">{{ channel.description }}</div>
           </div>
         </div>
       </div>
@@ -63,9 +118,13 @@ import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
 
 const config = useRuntimeConfig()
+const activeTab = ref('messages')
 const conversations = ref([])
 const loading = ref(true)
 const error = ref(null)
+const channels = ref([])
+const channelsLoading = ref(true)
+const channelsError = ref(null)
 const router = useRouter()
 const currentUser = ref(null)
 const API_BASE_URL = config.public.apiBaseUrl
@@ -88,7 +147,7 @@ async function fetchConversations() {
       throw new Error(`HTTP error! status: ${response.status}`)
     }
     const data = await response.json()
-    conversations.value = data
+    conversations.value = data.filter((c) => !c.channel)
   } catch (e) {
     error.value = '无法加载会话列表。'
   } finally {
@@ -96,6 +155,28 @@ async function fetchConversations() {
   }
 }
 
+async function fetchChannels() {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/channels`, {
+      method: 'GET',
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    channels.value = await response.json()
+  } catch (e) {
+    channelsError.value = '无法加载频道。'
+  } finally {
+    channelsLoading.value = false
+  }
+}
+
 // 获取对话中的另一个参与者（非当前用户）
 function getOtherParticipant(conversation) {
   if (!currentUser.value || !conversation.participants) return null
@@ -119,6 +200,7 @@ onActivated(async () => {
 
   if (currentUser.value) {
     await fetchConversations()
+    await fetchChannels()
     refreshGlobalUnreadCount() // Refresh global count when entering the list
     const token = getToken()
     if (token && !isConnected.value) {
@@ -140,6 +222,7 @@ watch(isConnected, (newValue) => {
 
     subscription = subscribe(destination, (message) => {
       fetchConversations()
+      fetchChannels()
     })
   }
 })
@@ -154,6 +237,19 @@ onUnmounted(() => {
 function goToConversation(id) {
   router.push(`/message-box/${id}`)
 }
+
+async function goToChannel(channel) {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  await fetch(`${API_BASE_URL}/api/channels/${channel.id}/join`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  router.push(`/message-box/${channel.conversationId}`)
+}
 </script>
 
 <style scoped>
@@ -162,6 +258,22 @@ function goToConversation(id) {
   padding: 20px;
 }
 
+.tabs {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 10px;
+}
+
+.tab {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.tab.active {
+  border-bottom: 2px solid var(--primary-color);
+  font-weight: 600;
+}
+
 .loading-message {
   display: flex;
   justify-content: center;
@@ -280,6 +392,16 @@ function goToConversation(id) {
   flex-shrink: 0;
 }
 
+.unread-dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  background-color: #f56c6c;
+  border-radius: 50%;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .messages-container {