feat: add channel tabs and chat support

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

@@ -1,6 +1,8 @@
 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;
@@ -9,24 +11,25 @@ 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 (conversationRepository.countByChannelTrue() == 0) {
-            MessageConversation chat = new MessageConversation();
-            chat.setChannel(true);
-            chat.setName("吹水群");
-            chat.setDescription("吹水聊天");
-            chat.setAvatar("/default-avatar.svg");
-            conversationRepository.save(chat);
-
-            MessageConversation tech = new MessageConversation();
-            tech.setChannel(true);
-            tech.setName("技术讨论群");
-            tech.setDescription("讨论技术相关话题");
-            tech.setAvatar("/default-avatar.svg");
-            conversationRepository.save(tech);
+        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/controller/ChannelController.java

@@ -1,35 +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.service.ChannelService;
+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 ChannelService channelService;
+    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"));
+        User user = userRepository.findByUsername(auth.getName()).orElseThrow(() -> new IllegalArgumentException("User not found"));
         return user.getId();
     }
 
     @GetMapping
-    public List<ChannelDto> listChannels(Authentication auth) {
-        return channelService.listChannels(getCurrentUserId(auth));
+    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("/{channelId}/join")
-    public ChannelDto joinChannel(@PathVariable Long channelId, Authentication auth) {
-        return channelService.joinChannel(channelId, getCurrentUserId(auth));
+    @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

@@ -61,7 +61,7 @@ public class MessageController {
 
     @PostMapping("/conversations/{conversationId}/messages")
     public ResponseEntity<MessageDto> sendMessageToConversation(@PathVariable Long conversationId,
-                                                                @RequestBody ChannelMessageRequest req,
+                                                                @RequestBody ContentRequest req,
                                                                 Authentication auth) {
         Message message = messageService.sendMessageToConversation(getCurrentUserId(auth), conversationId, req.getContent());
         return ResponseEntity.ok(toDto(message));
@@ -123,7 +123,7 @@ public class MessageController {
         }
     }
 
-    static class ChannelMessageRequest {
+    static class ContentRequest {
         private String content;
 
         public String getContent() {

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

@@ -10,7 +10,7 @@ public class ChannelDto {
     private String name;
     private String description;
     private String avatar;
-    private long memberCount;
-    private boolean joined;
+    private Long conversationId;
+    private int memberCount;
     private long unreadCount;
 }

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

@@ -8,9 +8,7 @@ import java.util.List;
 @Data
 public class ConversationDetailDto {
     private Long id;
-    private String name;
-    private boolean channel;
-    private String avatar;
     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;
 
@@ -10,11 +11,9 @@ import java.util.List;
 @Setter
 public class ConversationDto {
     private Long id;
-    private String name;
-    private boolean channel;
-    private String avatar;
     private MessageDto lastMessage;
     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/model/MessageConversation.java

@@ -20,18 +20,6 @@ public class MessageConversation {
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
 
-    // Indicates whether this conversation represents a public channel
-    @Column(nullable = false)
-    private boolean channel = false;
-
-    // Channel metadata
-    private String name;
-
-    @Column(columnDefinition = "TEXT")
-    private String description;
-
-    private String avatar;
-
     @CreationTimestamp
     @Column(nullable = false, updatable = false)
     private LocalDateTime createdAt;

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/repository/MessageConversationRepository.java

@@ -28,8 +28,4 @@ public interface MessageConversationRepository extends JpaRepository<MessageConv
            "WHERE p.user.id = :userId " +
            "ORDER BY COALESCE(lm.createdAt, c.createdAt) DESC")
     List<MessageConversation> findConversationsByUserIdOrderByLastMessageDesc(@Param("userId") Long userId);
-
-    List<MessageConversation> findByChannelTrue();
-
-    long countByChannelTrue();
 }

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

@@ -1,76 +0,0 @@
-package com.openisle.service;
-
-import com.openisle.dto.ChannelDto;
-import com.openisle.model.MessageConversation;
-import com.openisle.model.MessageParticipant;
-import com.openisle.model.User;
-import com.openisle.repository.MessageConversationRepository;
-import com.openisle.repository.MessageParticipantRepository;
-import com.openisle.repository.MessageRepository;
-import com.openisle.repository.UserRepository;
-import lombok.RequiredArgsConstructor;
-import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
-
-import java.time.LocalDateTime;
-import java.util.List;
-import java.util.stream.Collectors;
-
-@Service
-@RequiredArgsConstructor
-public class ChannelService {
-    private final MessageConversationRepository conversationRepository;
-    private final MessageParticipantRepository participantRepository;
-    private final MessageRepository messageRepository;
-    private final UserRepository userRepository;
-
-    @Transactional(readOnly = true)
-    public List<ChannelDto> listChannels(Long userId) {
-        List<MessageConversation> channels = conversationRepository.findByChannelTrue();
-        return channels.stream().map(c -> toDto(c, userId)).collect(Collectors.toList());
-    }
-
-    @Transactional
-    public ChannelDto joinChannel(Long channelId, Long userId) {
-        MessageConversation channel = conversationRepository.findById(channelId)
-                .orElseThrow(() -> new IllegalArgumentException("Channel not found"));
-        User user = userRepository.findById(userId)
-                .orElseThrow(() -> new IllegalArgumentException("User not found"));
-        participantRepository.findByConversationIdAndUserId(channelId, userId)
-                .orElseGet(() -> {
-                    MessageParticipant p = new MessageParticipant();
-                    p.setConversation(channel);
-                    p.setUser(user);
-                    MessageParticipant saved = participantRepository.save(p);
-                    channel.getParticipants().add(saved);
-                    return saved;
-                });
-        return toDto(channel, userId);
-    }
-
-    private ChannelDto toDto(MessageConversation channel, Long userId) {
-        ChannelDto dto = new ChannelDto();
-        dto.setId(channel.getId());
-        dto.setName(channel.getName());
-        dto.setDescription(channel.getDescription());
-        dto.setAvatar(channel.getAvatar());
-        dto.setMemberCount(channel.getParticipants().size());
-        boolean joined = channel.getParticipants().stream()
-                .anyMatch(p -> p.getUser().getId().equals(userId));
-        dto.setJoined(joined);
-        if (joined) {
-            MessageParticipant participant = channel.getParticipants().stream()
-                    .filter(p -> p.getUser().getId().equals(userId))
-                    .findFirst().orElse(null);
-            LocalDateTime lastRead = participant.getLastReadAt() == null
-                    ? LocalDateTime.of(1970, 1, 1, 0, 0)
-                    : participant.getLastReadAt();
-            long unread = messageRepository
-                    .countByConversationIdAndCreatedAtAfterAndSenderIdNot(channel.getId(), lastRead, userId);
-            dto.setUnreadCount(unread);
-        } else {
-            dto.setUnreadCount(0);
-        }
-        return dto;
-    }
-}

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
@@ -89,15 +93,6 @@ public class MessageService {
         MessageConversation conversation = conversationRepository.findById(conversationId)
                 .orElseThrow(() -> new IllegalArgumentException("Conversation not found"));
 
-        // Join the conversation if not already a participant (useful for channels)
-        participantRepository.findByConversationIdAndUserId(conversationId, senderId)
-                .orElseGet(() -> {
-                    MessageParticipant p = new MessageParticipant();
-                    p.setConversation(conversation);
-                    p.setUser(sender);
-                    return participantRepository.save(p);
-                });
-
         Message message = new Message();
         message.setConversation(conversation);
         message.setSender(sender);
@@ -111,16 +106,15 @@ public class MessageService {
         String conversationDestination = "/topic/conversation/" + conversation.getId();
         messagingTemplate.convertAndSend(conversationDestination, messageDto);
 
-        // Notify all participants except sender for updates
-        for (MessageParticipant participant : conversation.getParticipants()) {
-            if (participant.getUser().getId().equals(senderId)) continue;
-            String userDestination = "/topic/user/" + participant.getUser().getId() + "/messages";
-            messagingTemplate.convertAndSend(userDestination, messageDto);
-
-            long unreadCount = getUnreadMessageCount(participant.getUser().getId());
-            String username = participant.getUser().getUsername();
-            messagingTemplate.convertAndSendToUser(username, "/queue/unread-count", unreadCount);
-        }
+        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;
     }
@@ -141,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"));
@@ -177,18 +184,12 @@ public class MessageService {
     @Transactional(readOnly = true)
     public List<ConversationDto> getConversations(Long userId) {
         List<MessageConversation> conversations = conversationRepository.findConversationsByUserIdOrderByLastMessageDesc(userId);
-        return conversations.stream()
-                .filter(c -> !c.isChannel())
-                .map(c -> toDto(c, userId))
-                .collect(Collectors.toList());
+        return conversations.stream().map(c -> toDto(c, userId)).collect(Collectors.toList());
     }
 
     private ConversationDto toDto(MessageConversation conversation, Long userId) {
         ConversationDto dto = new ConversationDto();
         dto.setId(conversation.getId());
-        dto.setChannel(conversation.isChannel());
-        dto.setName(conversation.getName());
-        dto.setAvatar(conversation.getAvatar());
         dto.setCreatedAt(conversation.getCreatedAt());
         if (conversation.getLastMessage() != null) {
             dto.setLastMessage(toDto(conversation.getLastMessage()));
@@ -203,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()
@@ -238,11 +242,10 @@ public class MessageService {
 
         ConversationDetailDto detailDto = new ConversationDetailDto();
         detailDto.setId(conversation.getId());
-        detailDto.setName(conversation.getName());
-        detailDto.setChannel(conversation.isChannel());
-        detailDto.setAvatar(conversation.getAvatar());
         detailDto.setParticipants(participants);
         detailDto.setMessages(messageDtoPage);
+        channelRepository.findByConversationId(conversation.getId())
+                .ifPresent(channel -> detailDto.setChannel(toDto(channel)));
 
         return detailDto;
     }

frontend_nuxt/assets/global.css

@@ -18,7 +18,7 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(228, 228, 228, 0.884);
+  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
   --menu-text-color: black;
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */

frontend_nuxt/components/BaseTimeline.vue

@@ -41,12 +41,6 @@ export default {
   margin-top: 10px;
 }
 
-.timeline-item:hover {
-  background-color: var(--menu-selected-background-color);
-  transition: background-color 0.2s;
-  border-radius: 10px;
-}
-
 .timeline-icon {
   position: sticky;
   top: 0;

frontend_nuxt/components/SearchPersonDropdown.vue

@@ -1,198 +0,0 @@
-<template>
-  <div class="search-dropdown">
-    <Dropdown
-      ref="dropdown"
-      v-model="selected"
-      :fetch-options="fetchResults"
-      remote
-      menu-class="search-menu"
-      option-class="search-option"
-      :show-search="isMobile"
-      @update:search="keyword = $event"
-      @close="onClose"
-    >
-      <template #display="{ setSearch }">
-        <div class="search-input">
-          <i class="search-input-icon fas fa-search"></i>
-          <input
-            class="text-input"
-            v-model="keyword"
-            placeholder="Search users"
-            @input="setSearch(keyword)"
-          />
-        </div>
-      </template>
-      <template #option="{ option }">
-        <div class="search-option-item">
-          <img
-            :src="option.avatar || '/default-avatar.svg'"
-            class="avatar"
-            @error="handleAvatarError"
-          />
-          <div class="result-body">
-            <div class="result-main" v-html="highlight(option.username)"></div>
-            <div
-              v-if="option.introduction"
-              class="result-sub"
-              v-html="highlight(option.introduction)"
-            ></div>
-          </div>
-        </div>
-      </template>
-    </Dropdown>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import Dropdown from '~/components/Dropdown.vue'
-import { stripMarkdown } from '~/utils/markdown'
-import { useIsMobile } from '~/utils/screen'
-import { getToken } from '~/utils/auth'
-const config = useRuntimeConfig()
-const API_BASE_URL = config.public.apiBaseUrl
-
-const emit = defineEmits(['close'])
-
-const keyword = ref('')
-const selected = ref(null)
-const results = ref([])
-const dropdown = ref(null)
-const isMobile = useIsMobile()
-
-const toggle = () => {
-  dropdown.value.toggle()
-}
-
-const onClose = () => emit('close')
-
-const fetchResults = async (kw) => {
-  if (!kw) return []
-  const res = await fetch(`${API_BASE_URL}/api/search/users?keyword=${encodeURIComponent(kw)}`)
-  if (!res.ok) return []
-  const data = await res.json()
-  results.value = data.map((u) => ({
-    id: u.id,
-    username: u.username,
-    avatar: u.avatar,
-    introduction: u.introduction,
-  }))
-  return results.value
-}
-
-const highlight = (text) => {
-  text = stripMarkdown(text || '')
-  if (!keyword.value) return text
-  const reg = new RegExp(keyword.value, 'gi')
-  return text.replace(reg, (m) => `<span class="highlight">${m}</span>`)
-}
-
-const handleAvatarError = (e) => {
-  e.target.src = '/default-avatar.svg'
-}
-
-watch(selected, async (val) => {
-  if (!val) return
-  const user = results.value.find((u) => u.id === val)
-  if (!user) return
-  const token = getToken()
-  if (!token) {
-    navigateTo('/login', { replace: true })
-  } else {
-    try {
-      const res = await fetch(`${API_BASE_URL}/api/messages/conversations`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ recipientId: user.id }),
-      })
-      if (res.ok) {
-        const data = await res.json()
-        navigateTo(`/message-box/${data.conversationId}`, { replace: true })
-      }
-    } catch (e) {
-      // ignore
-    }
-  }
-  selected.value = null
-  keyword.value = ''
-})
-
-defineExpose({
-  toggle,
-})
-</script>
-
-<style scoped>
-.search-dropdown {
-  margin-top: 20px;
-  width: 500px;
-}
-
-.search-input {
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.text-input {
-  background-color: var(--app-menu-background-color);
-  color: var(--text-color);
-  border: none;
-  outline: none;
-  width: 100%;
-  margin-left: 10px;
-  font-size: 16px;
-}
-
-.search-menu {
-  width: 100%;
-  max-width: 600px;
-}
-
-@media (max-width: 768px) {
-  .search-dropdown {
-    width: 100%;
-  }
-}
-
-.search-option-item {
-  display: flex;
-  gap: 10px;
-}
-
-.search-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 20px;
-}
-
-:deep(.highlight) {
-  color: var(--primary-color);
-}
-
-.avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.result-body {
-  display: flex;
-  flex-direction: column;
-}
-
-.result-main {
-  font-weight: bold;
-}
-
-.result-sub {
-  font-size: 12px;
-  color: #666;
-}
-</style>

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

@@ -4,21 +4,17 @@
       <NuxtLink to="/message-box" class="back-button">
         <i class="fas fa-arrow-left"></i>
       </NuxtLink>
-      <h2 class="participant-name">
-        {{ isChannel ? conversationName : otherParticipant?.username }}
-      </h2>
+      <h2 class="participant-name">{{ channel ? channel.name : otherParticipant?.username }}</h2>
     </div>
 
     <div class="messages-list" ref="messagesListEl">
-      <div v-if="loading" class="loading-container">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
+      <div v-if="loading" class="loading-container">加载中...</div>
       <div v-else-if="error" class="error-container">{{ error }}</div>
       <template v-else>
         <div class="load-more-container" v-if="hasMoreMessages">
-          <div @click="loadMoreMessages" :disabled="loadingMore" class="load-more-button">
+          <button @click="loadMoreMessages" :disabled="loadingMore" class="load-more-button">
             {{ loadingMore ? '加载中...' : '查看更多消息' }}
-          </div>
+          </button>
         </div>
         <BaseTimeline :items="messages">
           <template #item="{ item }">
@@ -30,13 +26,6 @@
             </div>
           </template>
         </BaseTimeline>
-        <div class="empty-container">
-          <BasePlaceholder
-            v-if="messages.length === 0"
-            text="暂无会话，发送消息试试 🎉"
-            icon="fas fa-inbox"
-          />
-        </div>
       </template>
     </div>
 
@@ -66,7 +55,6 @@ import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
-import BasePlaceholder from '~/components/BasePlaceholder.vue'
 
 const config = useRuntimeConfig()
 const route = useRoute()
@@ -77,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)
@@ -88,13 +77,11 @@ const currentPage = ref(0)
 const totalPages = ref(0)
 const loadingMore = ref(false)
 let scrollInterval = null
-const conversationName = ref('')
-const isChannel = ref(false)
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
 const otherParticipant = computed(() => {
-  if (isChannel.value || !currentUser.value || participants.value.length === 0) {
+  if (!currentUser.value || participants.value.length === 0) {
     return null
   }
   return participants.value.find((p) => p.id !== currentUser.value.id)
@@ -140,8 +127,7 @@ async function fetchMessages(page = 0) {
 
     if (page === 0) {
       participants.value = conversationData.participants
-      conversationName.value = conversationData.name
-      isChannel.value = conversationData.channel
+      channel.value = conversationData.channel
     }
 
     // Since the backend sorts by descending, we need to reverse for correct chat order
@@ -188,40 +174,33 @@ async function loadMoreMessages() {
 
 async function sendMessage(content, clearInput) {
   if (!content.trim()) return
-  sending.value = true
+
   const token = getToken()
+  sending.value = true
   try {
-    let response
-    if (isChannel.value) {
-      response = await fetch(
-        `${API_BASE_URL}/api/messages/conversations/${conversationId}/messages`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify({ content }),
-        },
-      )
+    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
       }
-      response = await fetch(`${API_BASE_URL}/api/messages`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          recipientId: recipient.id,
-          content: content,
-        }),
-      })
+      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(body),
+    })
     if (!response.ok) throw new Error('发送失败')
 
     const newMessage = await response.json()
@@ -411,21 +390,27 @@ onUnmounted(() => {
   padding-bottom: 100px;
   display: flex;
   flex-direction: column;
+  gap: 20px;
   margin-bottom: 10px;
 }
 
 .load-more-container {
   text-align: center;
+  margin-bottom: 20px;
 }
 
 .load-more-button {
-  color: var(--primary-color);
-  font-size: 12px;
+  background-color: var(--bg-color-soft);
+  border: 1px solid var(--border-color);
+  color: var(--text-color-primary);
+  padding: 8px 16px;
+  border-radius: 20px;
   cursor: pointer;
+  transition: background-color 0.2s;
 }
 
 .load-more-button:hover {
-  text-decoration: underline;
+  background-color: var(--border-color);
 }
 
 .message-item {
@@ -481,13 +466,7 @@ onUnmounted(() => {
   margin-right: 20px;
 }
 
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 300px;
-}
-
+.loading-container,
 .error-container {
   text-align: center;
   padding: 50px;

frontend_nuxt/pages/message-box/index.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="messages-container">
     <div class="tabs">
-      <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
+      <div
+        class="tab"
+        :class="{ active: activeTab === 'messages' }"
+        @click="activeTab = 'messages'"
+      >
         站内信
       </div>
-      <div :class="['tab', { active: activeTab === 'channels' }]" @click="switchToChannels">
+      <div
+        class="tab"
+        :class="{ active: activeTab === 'channels' }"
+        @click="activeTab = 'channels'"
+      >
         频道
       </div>
     </div>
@@ -18,16 +26,11 @@
         <div class="error-text">{{ error }}</div>
       </div>
 
-      <div v-if="!loading" class="search-container">
-        <SearchPersonDropdown />
-      </div>
-
-      <div v-if="!loading && conversations.length === 0" class="empty-container">
-        <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
+      <div v-else-if="conversations.length === 0" class="empty-container">
+        <div class="empty-text">暂无会话</div>
       </div>
 
       <div
-        v-if="!loading"
         v-for="convo in conversations"
         :key="convo.id"
         class="conversation-item"
@@ -67,38 +70,36 @@
     </div>
 
     <div v-else>
-      <div v-if="loadingChannels" class="loading-message">
+      <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>
-        <div v-if="channels.length === 0" class="empty-container">
-          <BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
+      <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
-          v-for="ch in channels"
-          :key="ch.id"
-          class="conversation-item"
-          @click="goToChannel(ch.id)"
-        >
-          <div class="conversation-avatar">
-            <img
-              :src="ch.avatar || '/default-avatar.svg'"
-              :alt="ch.name"
-              class="avatar-img"
-              @error="handleAvatarError"
-            />
+        <div class="conversation-content">
+          <div class="conversation-header">
+            <div class="participant-name">{{ channel.name }}</div>
           </div>
-          <div class="conversation-content">
-            <div class="conversation-header">
-              <div class="participant-name">
-                {{ ch.name }}
-                <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
-              </div>
-              <div class="message-time">成员 {{ ch.memberCount }}</div>
-            </div>
-            <div class="last-message-row">
-              <div class="last-message">{{ ch.description }}</div>
-            </div>
+          <div class="last-message-row">
+            <div class="last-message">{{ channel.description }}</div>
           </div>
         </div>
       </div>
@@ -115,13 +116,15 @@ import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
-import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
-import BasePlaceholder from '~/components/BasePlaceholder.vue'
 
 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
@@ -129,10 +132,6 @@ const { connect, disconnect, subscribe, isConnected } = useWebSocket()
 const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 let subscription = null
 
-const activeTab = ref('messages')
-const channels = ref([])
-const loadingChannels = ref(false)
-
 async function fetchConversations() {
   const token = getToken()
   if (!token) {
@@ -148,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 {
@@ -156,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
@@ -173,56 +194,13 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
-async function fetchChannels() {
-  const token = getToken()
-  if (!token) {
-    toast.error('请先登录')
-    return
-  }
-  loadingChannels.value = true
-  try {
-    const response = await fetch(`${API_BASE_URL}/api/channels`, {
-      headers: { Authorization: `Bearer ${token}` },
-    })
-    if (!response.ok) throw new Error('无法加载频道')
-    channels.value = await response.json()
-  } catch (e) {
-    toast.error(e.message)
-  } finally {
-    loadingChannels.value = false
-  }
-}
-
-function switchToChannels() {
-  activeTab.value = 'channels'
-  if (channels.value.length === 0) {
-    fetchChannels()
-  }
-}
-
-async function goToChannel(id) {
-  const token = getToken()
-  if (!token) {
-    toast.error('请先登录')
-    return
-  }
-  try {
-    await fetch(`${API_BASE_URL}/api/channels/${id}/join`, {
-      method: 'POST',
-      headers: { Authorization: `Bearer ${token}` },
-    })
-    router.push(`/message-box/${id}`)
-  } catch (e) {
-    toast.error(e.message)
-  }
-}
-
 onActivated(async () => {
   loading.value = true
   currentUser.value = await fetchCurrentUser()
 
   if (currentUser.value) {
     await fetchConversations()
+    await fetchChannels()
     refreshGlobalUnreadCount() // Refresh global count when entering the list
     const token = getToken()
     if (token && !isConnected.value) {
@@ -244,6 +222,7 @@ watch(isConnected, (newValue) => {
 
     subscription = subscribe(destination, (message) => {
       fetchConversations()
+      fetchChannels()
     })
   }
 })
@@ -258,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>
@@ -268,8 +260,8 @@ function goToConversation(id) {
 
 .tabs {
   display: flex;
-  border-bottom: 1px solid var(--normal-border-color);
-  margin-bottom: 16px;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 10px;
 }
 
 .tab {
@@ -278,8 +270,8 @@ function goToConversation(id) {
 }
 
 .tab.active {
-  font-weight: 600;
   border-bottom: 2px solid var(--primary-color);
+  font-weight: 600;
 }
 
 .loading-message {
@@ -289,10 +281,6 @@ function goToConversation(id) {
   height: 300px;
 }
 
-.search-container {
-  margin-bottom: 24px;
-}
-
 .messages-header {
   margin-bottom: 24px;
 }
@@ -405,12 +393,13 @@ function goToConversation(id) {
 }
 
 .unread-dot {
-  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
   width: 8px;
   height: 8px;
   background-color: #f56c6c;
   border-radius: 50%;
-  margin-left: 4px;
 }
 
 /* 响应式设计 */

frontend_nuxt/pages/users/[id].vue

@@ -12,27 +12,25 @@
         <div class="profile-page-header-user-info">
           <div class="profile-page-header-user-info-name">{{ user.username }}</div>
           <div class="profile-page-header-user-info-description">{{ user.introduction }}</div>
-          <div class="profile-page-header-user-info-buttons">
-            <div
-              v-if="!isMine && !subscribed"
-              class="profile-page-header-subscribe-button"
-              @click="subscribeUser"
-            >
-              <i class="fas fa-user-plus"></i>
-              关注
-            </div>
-            <div
-              v-if="!isMine && subscribed"
-              class="profile-page-header-unsubscribe-button"
-              @click="unsubscribeUser"
-            >
-              <i class="fas fa-user-minus"></i>
-              取消关注
-            </div>
-            <div v-if="!isMine" class="profile-page-header-subscribe-button" @click="sendMessage">
-              <i class="fas fa-paper-plane"></i>
-              发私信
-            </div>
+          <div
+            v-if="!isMine && !subscribed"
+            class="profile-page-header-subscribe-button"
+            @click="subscribeUser"
+          >
+            <i class="fas fa-user-plus"></i>
+            关注
+          </div>
+          <div
+            v-if="!isMine && subscribed"
+            class="profile-page-header-unsubscribe-button"
+            @click="unsubscribeUser"
+          >
+            <i class="fas fa-user-minus"></i>
+            取消关注
+          </div>
+          <div v-if="!isMine" class="profile-page-header-subscribe-button" @click="sendMessage">
+            <i class="fas fa-paper-plane"></i>
+            发私信
           </div>
           <LevelProgress
             :exp="levelInfo.exp"
@@ -642,12 +640,6 @@ watch(selectedTab, async (val) => {
   color: #666;
 }
 
-.profile-page-header-user-info-buttons {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-}
-
 .profile-page-header-subscribe-button {
   display: flex;
   flex-direction: row;