feat: add timeline filters on profile page

frontend_nuxt/pages/index.vue

@@ -147,17 +147,9 @@ const categoryOptions = ref([])
 const isLoadingMore = ref(false)
 
 const topics = ref(['最新回复', '最新', '排行榜' /*, '热门', '类别'*/])
-const selectedTopicCookie = useCookie('homeTab')
 const selectedTopic = ref(
-  selectedTopicCookie.value
-    ? selectedTopicCookie.value
-    : route.query.view === 'ranking'
-      ? '排行榜'
-      : route.query.view === 'latest'
-        ? '最新'
-        : '最新回复',
+  route.query.view === 'ranking' ? '排行榜' : route.query.view === 'latest' ? '最新' : '最新回复',
 )
-if (!selectedTopicCookie.value) selectedTopicCookie.value = selectedTopic.value
 const articles = ref([])
 const page = ref(0)
 const pageSize = 10
@@ -183,11 +175,6 @@ onMounted(() => {
   const { category, tags } = route.query
   if (category) selectedCategorySet(category)
   if (tags) selectedTagsSet(tags)
-
-  const saved = localStorage.getItem('homeTab')
-  if (saved) {
-    selectedTopic.value = saved
-  }
 })
 
 /** 路由变更时同步筛选 **/
@@ -353,13 +340,9 @@ watch(
 watch([selectedCategory, selectedTags], () => {
   loadOptions()
 })
-watch(selectedTopic, (val) => {
+watch(selectedTopic, () => {
   // 仅当需要额外选项时加载
   loadOptions()
-  selectedTopicCookie.value = val
-  if (process.client) {
-    localStorage.setItem('homeTab', val)
-  }
 })
 
 /** 选项首屏加载：服务端执行一次；客户端兜底 **/

frontend_nuxt/pages/users/[id].vue

@@ -204,12 +204,32 @@
         </div>
 
         <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
+          <div class="timeline-tabs">
+            <div
+              :class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
+              @click="timelineFilter = 'all'"
+            >
+              全部
+            </div>
+            <div
+              :class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
+              @click="timelineFilter = 'articles'"
+            >
+              文章
+            </div>
+            <div
+              :class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
+              @click="timelineFilter = 'comments'"
+            >
+              评论和回复
+            </div>
+          </div>
           <BasePlaceholder
-            v-if="timelineItems.length === 0"
+            v-if="filteredTimelineItems.length === 0"
             text="暂无时间线"
             icon="fas fa-inbox"
           />
-          <BaseTimeline :items="timelineItems">
+          <BaseTimeline :items="filteredTimelineItems">
             <template #item="{ item }">
               <template v-if="item.type === 'post'">
                 发布了文章
@@ -324,6 +344,15 @@ const hotPosts = ref([])
 const hotReplies = ref([])
 const hotTags = ref([])
 const timelineItems = ref([])
+const timelineFilter = ref('all')
+const filteredTimelineItems = computed(() => {
+  if (timelineFilter.value === 'articles') {
+    return timelineItems.value.filter((item) => item.type === 'post')
+  } else if (timelineFilter.value === 'comments') {
+    return timelineItems.value.filter((item) => item.type === 'comment' || item.type === 'reply')
+  }
+  return timelineItems.value
+})
 const followers = ref([])
 const followings = ref([])
 const medals = ref([])
@@ -777,6 +806,23 @@ watch(selectedTab, async (val) => {
   width: 40%;
 }
 
+.timeline-tabs {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--normal-border-color);
+  margin-bottom: 10px;
+}
+
+.timeline-tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.timeline-tab-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
 .profile-timeline {
   padding: 20px;
 }