feat: add favorites tab to user profile

Feature/daily bugfix 0825 b

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

@@ -105,6 +105,17 @@ public class UserController {
                 .collect(java.util.stream.Collectors.toList());
     }
 
+    @GetMapping("/{identifier}/subscribed-posts")
+    public java.util.List<PostMetaDto> subscribedPosts(@PathVariable("identifier") String identifier,
+                                                       @RequestParam(value = "limit", required = false) Integer limit) {
+        int l = limit != null ? limit : defaultPostsLimit;
+        User user = userService.findByIdentifier(identifier).orElseThrow();
+        return subscriptionService.getSubscribedPosts(user.getUsername()).stream()
+                .limit(l)
+                .map(userMapper::toMetaDto)
+                .collect(java.util.stream.Collectors.toList());
+    }
+
     @GetMapping("/{identifier}/replies")
     public java.util.List<CommentInfoDto> userReplies(@PathVariable("identifier") String identifier,
                                                       @RequestParam(value = "limit", required = false) Integer limit) {

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

@@ -107,6 +107,11 @@ public class SubscriptionService {
         return commentSubRepo.findByComment(c).stream().map(CommentSubscription::getUser).toList();
     }
 
+    public List<Post> getSubscribedPosts(String username) {
+        User user = userRepo.findByUsername(username).orElseThrow();
+        return postSubRepo.findByUser(user).stream().map(PostSubscription::getPost).toList();
+    }
+
 
     public long countSubscribers(String username) {
         User user = userRepo.findByUsername(username).orElseThrow();

backend/src/test/java/com/openisle/controller/UserControllerTest.java

@@ -136,6 +136,30 @@ class UserControllerTest {
                 .andExpect(jsonPath("$[0].title").value("hello"));
     }
 
+    @Test
+    void listSubscribedPosts() throws Exception {
+        User user = new User();
+        user.setUsername("bob");
+        com.openisle.model.Category cat = new com.openisle.model.Category();
+        cat.setName("tech");
+        com.openisle.model.Post post = new com.openisle.model.Post();
+        post.setId(6L);
+        post.setTitle("fav");
+        post.setCreatedAt(java.time.LocalDateTime.now());
+        post.setCategory(cat);
+        post.setAuthor(user);
+        Mockito.when(userService.findByIdentifier("bob")).thenReturn(Optional.of(user));
+        Mockito.when(subscriptionService.getSubscribedPosts("bob")).thenReturn(java.util.List.of(post));
+        PostMetaDto meta = new PostMetaDto();
+        meta.setId(6L);
+        meta.setTitle("fav");
+        Mockito.when(userMapper.toMetaDto(post)).thenReturn(meta);
+
+        mockMvc.perform(get("/api/users/bob/subscribed-posts"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].title").value("fav"));
+    }
+
     @Test
     void listUserReplies() throws Exception {
         User user = new User();

frontend_nuxt/components/MessageFloatWindow.vue

@@ -1,8 +1,23 @@
 <template>
-  <div v-if="floatRoute" class="message-float-window">
+  <div v-if="floatRoute" class="message-float-window" :style="{ height: floatHeight }">
     <iframe :src="iframeSrc" frameborder="0"></iframe>
+
     <div class="float-actions">
-      <i class="fas fa-expand" @click="expand"></i>
+      <i
+        class="fas fa-chevron-down"
+        v-if="floatHeight !== MINI_HEIGHT"
+        title="收起至 100px"
+        @click="collapseToMini"
+      ></i>
+      <!-- 回弹：60vh -->
+      <i
+        class="fas fa-chevron-up"
+        v-if="floatHeight !== DEFAULT_HEIGHT"
+        title="回弹至 60vh"
+        @click="reboundToDefault"
+      ></i>
+      <!-- 全屏打开（原有逻辑） -->
+      <i class="fas fa-expand" title="在页面中打开" @click="expand"></i>
     </div>
   </div>
 </template>
@@ -10,17 +25,37 @@
 <script setup>
 const floatRoute = useState('messageFloatRoute')
 
+const DEFAULT_HEIGHT = '60vh'
+const MINI_HEIGHT = '45px'
+const floatHeight = ref(DEFAULT_HEIGHT)
+
 const iframeSrc = computed(() => {
   if (!floatRoute.value) return ''
   return floatRoute.value + (floatRoute.value.includes('?') ? '&' : '?') + 'float=1'
 })
 
+function collapseToMini() {
+  floatHeight.value = MINI_HEIGHT
+}
+
+function reboundToDefault() {
+  floatHeight.value = DEFAULT_HEIGHT
+}
+
 function expand() {
   if (!floatRoute.value) return
   const target = floatRoute.value
   floatRoute.value = null
   navigateTo(target)
 }
+
+// 当浮窗重新出现时，恢复默认高度
+watch(
+  () => floatRoute.value,
+  (v) => {
+    if (v) floatHeight.value = DEFAULT_HEIGHT
+  },
+)
 </script>
 
 <style scoped>
@@ -29,7 +64,7 @@ function expand() {
   bottom: 0;
   right: 0;
   width: 400px;
-  height: 60vh;
+  /* 高度由内联样式绑定控制：60vh / 100px */
   max-height: 90vh;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
@@ -37,6 +72,7 @@ function expand() {
   z-index: 2000;
   display: flex;
   flex-direction: column;
+  transition: height 0.25s ease; /* 平滑过渡 */
 }
 
 .message-float-window iframe {
@@ -48,18 +84,18 @@ function expand() {
   position: absolute;
   top: 4px;
   right: 8px;
+  padding: 12px;
+  display: flex;
+  gap: 10px;
 }
 
 .float-actions i {
   cursor: pointer;
+  font-size: 14px;
+  opacity: 0.9;
 }
 
-@media (max-width: 480px) {
-  .message-float-window {
-    width: 100%;
-    right: 0;
-    left: 0;
-    height: 100vh;
-  }
+.float-actions i:hover {
+  opacity: 1;
 }
 </style>

frontend_nuxt/pages/index.vue

@@ -125,6 +125,7 @@
 
 <script setup>
 import { computed, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import CategorySelect from '~/components/CategorySelect.vue'

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

@@ -2,15 +2,15 @@
   <div class="chat-container" :class="{ float: isFloatMode }">
     <div v-if="!loading" class="chat-header">
       <div class="header-main">
-        <NuxtLink to="/message-box" class="back-button">
+        <div class="back-button" @click="goBack">
           <i class="fas fa-arrow-left"></i>
-        </NuxtLink>
+        </div>
         <h2 class="participant-name">
           {{ isChannel ? conversationName : otherParticipant?.username }}
         </h2>
       </div>
-      <div v-if="!isFloatMode" class="header-actions" @click="minimize">
-        <i class="fas fa-window-minimize"></i>
+      <div v-if="!isFloatMode" class="float-control">
+        <i class="fas fa-compress" @click="minimize" title="最小化"></i>
       </div>
     </div>
 
@@ -415,12 +415,21 @@ function minimize() {
 }
 
 function openUser(id) {
-  if (isFloatMode.value && typeof window !== 'undefined') {
-    window.top.location.href = `/users/${id}`
+  if (isFloatMode.value) {
+    // 先不处理...
+    // navigateTo(`/users/${id}?float=1`)
   } else {
     navigateTo(`/users/${id}`, { replace: true })
   }
 }
+
+function goBack() {
+  if (isFloatMode.value) {
+    navigateTo('/message-box?float=1')
+  } else {
+    navigateTo('/message-box')
+  }
+}
 </script>
 
 <style scoped>
@@ -455,7 +464,16 @@ function openUser(id) {
   align-items: center;
 }
 
-.header-actions i {
+.float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  padding: 12px 12px;
+  cursor: pointer;
+}
+
+.float-control i {
   cursor: pointer;
 }
 
@@ -573,12 +591,6 @@ function openUser(id) {
   color: var(--text-color-secondary);
 }
 
-@media (max-width: 768px) {
-  .messages-list {
-    padding: 10px;
-  }
-}
-
 .message-input-area {
   margin-left: 10px;
   margin-right: 10px;
@@ -619,4 +631,17 @@ function openUser(id) {
   margin-left: 8px;
   cursor: pointer;
 }
+
+@media (max-height: 200px) {
+  .messages-list,
+  .message-input-area {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .messages-list {
+    padding: 10px;
+  }
+}
 </style>

frontend_nuxt/pages/message-box/index.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="messages-container">
+    <div class="page-title">
+      <i class="fas fa-comments"></i>
+      <span class="page-title-text">选择聊天</span>
+    </div>
     <div v-if="!isFloatMode" class="float-control">
-      <i class="fas fa-window-minimize" @click="minimize"></i>
+      <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
     <div class="tabs">
-      <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
+      <div :class="['tab', { active: activeTab === 'messages' }]" @click="switchToMessage">
         站内信
       </div>
       <div :class="['tab', { active: activeTab === 'channels' }]" @click="switchToChannels">
@@ -21,7 +25,7 @@
         <div class="error-text">{{ error }}</div>
       </div>
 
-      <div v-if="!loading" class="search-container">
+      <div v-if="!loading && !isFloatMode" class="search-container">
         <SearchPersonDropdown />
       </div>
 
@@ -143,11 +147,10 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
   useChannelsUnreadCount()
 let subscription = null
 
-const activeTab = ref('messages')
+const activeTab = ref('channels')
 const channels = ref([])
 const loadingChannels = ref(false)
-const route = useRoute()
-const isFloatMode = computed(() => route.query.float !== undefined)
+const isFloatMode = computed(() => route.query.float === '1')
 const floatRoute = useState('messageFloatRoute')
 
 async function fetchConversations() {
@@ -156,6 +159,7 @@ async function fetchConversations() {
     toast.error('请先登录')
     return
   }
+  loading.value = true
   try {
     const response = await fetch(`${API_BASE_URL}/api/messages/conversations`, {
       method: 'GET',
@@ -212,11 +216,14 @@ async function fetchChannels() {
   }
 }
 
+function switchToMessage() {
+  activeTab.value = 'messages'
+  fetchConversations()
+}
+
 function switchToChannels() {
   activeTab.value = 'channels'
-  if (channels.value.length === 0) {
-    fetchChannels()
-  }
+  fetchChannels()
 }
 
 async function goToChannel(id) {
@@ -230,19 +237,26 @@ async function goToChannel(id) {
       method: 'POST',
       headers: { Authorization: `Bearer ${token}` },
     })
-    navigateTo(`/message-box/${id}`)
+    if (isFloatMode.value) {
+      navigateTo(`/message-box/${id}?float=1`)
+    } else {
+      navigateTo(`/message-box/${id}`)
+    }
   } catch (e) {
     toast.error(e.message)
   }
 }
 
 onActivated(async () => {
-  loading.value = true
   currentUser.value = await fetchCurrentUser()
 
   if (currentUser.value) {
-    await fetchConversations()
-    refreshGlobalUnreadCount() // Refresh global count when entering the list
+    if (activeTab.value === 'messages') {
+      await fetchConversations()
+    } else {
+      await fetchChannels()
+    }
+    refreshGlobalUnreadCount()
     refreshChannelUnread()
     const token = getToken()
     if (token && !isConnected.value) {
@@ -279,7 +293,11 @@ onUnmounted(() => {
 })
 
 function goToConversation(id) {
-  navigateTo(`/message-box/${id}`)
+  if (isFloatMode.value) {
+    navigateTo(`/message-box/${id}?float=1`)
+  } else {
+    navigateTo(`/message-box/${id}`)
+  }
 }
 
 function minimize() {
@@ -290,11 +308,15 @@ function minimize() {
 
 <style scoped>
 .messages-container {
+  position: relative;
 }
 
 .float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
   text-align: right;
-  padding: 8px 12px;
+  padding: 12px 12px;
 }
 
 .float-control i {
@@ -334,6 +356,21 @@ function minimize() {
   margin-bottom: 24px;
 }
 
+.page-title {
+  padding: 12px;
+  display: none;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.page-title-text {
+  margin-left: 10px;
+}
+
+.page-title-text:hover {
+  text-decoration: underline;
+}
+
 .messages-title {
   font-size: 28px;
   font-weight: 600;
@@ -458,7 +495,21 @@ function minimize() {
   margin-left: 4px;
 }
 
-/* 响应式设计 */
+@media (max-height: 200px) {
+  .page-title {
+    display: block;
+  }
+
+  .tabs,
+  .loading-message,
+  .error-container,
+  .search-container,
+  .empty-container,
+  .conversation-item {
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
   .conversation-item {
     margin-left: 10px;

frontend_nuxt/pages/users/[id].vue

@@ -94,6 +94,13 @@
           <i class="fas fa-user-plus"></i>
           <div class="profile-tabs-item-label">关注</div>
         </div>
+        <div
+          :class="['profile-tabs-item', { selected: selectedTab === 'favorites' }]"
+          @click="selectedTab = 'favorites'"
+        >
+          <i class="fas fa-bookmark"></i>
+          <div class="profile-tabs-item-label">收藏</div>
+        </div>
         <div
           :class="['profile-tabs-item', { selected: selectedTab === 'achievements' }]"
           @click="selectedTab = 'achievements'"
@@ -318,6 +325,23 @@
           </div>
         </div>
 
+        <div v-else-if="selectedTab === 'favorites'" class="favorites-container">
+          <div v-if="favoritePosts.length > 0">
+            <BaseTimeline :items="favoritePosts">
+              <template #item="{ item }">
+                <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
+                  {{ item.post.title }}
+                </NuxtLink>
+                <div class="timeline-snippet">
+                  {{ stripMarkdown(item.post.snippet) }}
+                </div>
+                <div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
+              </template>
+            </BaseTimeline>
+          </div>
+          <div v-else class="summary-empty">暂无收藏文章</div>
+        </div>
+
         <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
           <AchievementList :medals="medals" :can-select="isMine" />
         </div>
@@ -352,6 +376,7 @@ const user = ref({})
 const hotPosts = ref([])
 const hotReplies = ref([])
 const hotTags = ref([])
+const favoritePosts = ref([])
 const timelineItems = ref([])
 const timelineFilter = ref('all')
 const filteredTimelineItems = computed(() => {
@@ -369,7 +394,7 @@ const subscribed = ref(false)
 const isLoading = ref(true)
 const tabLoading = ref(false)
 const selectedTab = ref(
-  ['summary', 'timeline', 'following', 'achievements'].includes(route.query.tab)
+  ['summary', 'timeline', 'following', 'favorites', 'achievements'].includes(route.query.tab)
     ? route.query.tab
     : 'summary',
 )
@@ -472,6 +497,16 @@ const fetchFollowUsers = async () => {
   followings.value = followingRes.ok ? await followingRes.json() : []
 }
 
+const fetchFavorites = async () => {
+  const res = await fetch(`${API_BASE_URL}/api/users/${username}/subscribed-posts`)
+  if (res.ok) {
+    const data = await res.json()
+    favoritePosts.value = data.map((p) => ({ icon: 'fas fa-bookmark', post: p }))
+  } else {
+    favoritePosts.value = []
+  }
+}
+
 const loadSummary = async () => {
   tabLoading.value = true
   await fetchSummary()
@@ -490,6 +525,12 @@ const loadFollow = async () => {
   tabLoading.value = false
 }
 
+const loadFavorites = async () => {
+  tabLoading.value = true
+  await fetchFavorites()
+  tabLoading.value = false
+}
+
 const fetchAchievements = async () => {
   const res = await fetch(`${API_BASE_URL}/api/medals?userId=${user.value.id}`)
   if (res.ok) {
@@ -578,6 +619,8 @@ const init = async () => {
       await loadTimeline()
     } else if (selectedTab.value === 'following') {
       await loadFollow()
+    } else if (selectedTab.value === 'favorites') {
+      await loadFavorites()
     } else if (selectedTab.value === 'achievements') {
       await loadAchievements()
     }
@@ -596,6 +639,8 @@ watch(selectedTab, async (val) => {
     await loadTimeline()
   } else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {
     await loadFollow()
+  } else if (val === 'favorites' && favoritePosts.value.length === 0) {
+    await loadFavorites()
   } else if (val === 'achievements' && medals.value.length === 0) {
     await loadAchievements()
   }