fix: add view history logic

frontend_nuxt/components/TimelineReadItem.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <div class="timeline-title">浏览了文章</div>
+      <div class="timeline-date">{{ formattedDate }}</div>
+    </div>
+    <div class="article-container">
+      <NuxtLink :to="postLink" class="timeline-article-link">
+        {{ item.post?.title }}
+      </NuxtLink>
+      <div class="timeline-snippet">
+        {{ strippedSnippet }}
+      </div>
+      <div class="article-meta" v-if="hasMeta">
+        <ArticleCategory v-if="item.post?.category" :category="item.post.category" />
+        <ArticleTags :tags="item.post?.tags" />
+        <div class="article-comment-count" v-if="item.post?.commentCount !== undefined">
+          <comment-one class="article-comment-count-icon" />
+          <span>{{ item.post?.commentCount }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { stripMarkdown } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const postLink = computed(() => {
+  const id = props.item.post?.id
+  return id ? `/posts/${id}` : '#'
+})
+
+const formattedDate = computed(() =>
+  TimeManager.format(props.item.lastReadAt ?? props.item.createdAt),
+)
+const strippedSnippet = computed(() => stripMarkdown(props.item.post?.snippet ?? ''))
+const hasMeta = computed(() => {
+  const tags = props.item.post?.tags ?? []
+  const hasTags = Array.isArray(tags) && tags.length > 0
+  const hasCategory = !!props.item.post?.category
+  const hasCommentCount =
+    props.item.post?.commentCount !== undefined && props.item.post?.commentCount !== null
+  return hasTags || hasCategory || hasCommentCount
+})
+</script>
+
+<style scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: 5px;
+  gap: 12px;
+  border-radius: 10px;
+  background: var(--timeline-card-background, transparent);
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeline-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: var(--timeline-date-color, #888);
+}
+
+.article-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  padding: 10px;
+  gap: 6px;
+}
+
+.timeline-article-link {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.timeline-article-link:hover {
+  text-decoration: underline;
+}
+
+.timeline-snippet {
+  color: var(--timeline-snippet-color, #666);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.article-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.article-tag {
+  background-color: var(--article-info-background-color);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.article-comment-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.article-comment-count-icon {
+  width: 16px;
+  height: 16px;
+}
+
+@media (max-width: 768px) {
+  .timeline-article-link {
+    font-size: 16px;
+  }
+
+  .timeline-snippet {
+    font-size: 13px;
+  }
+}
+</style>

frontend_nuxt/pages/users/[id].vue

@@ -191,14 +191,25 @@
               >
                 评论和回复
               </div>
+              <div
+                v-if="isMine"
+                :class="['timeline-tab-item', { selected: timelineFilter === 'reads' }]"
+                @click="timelineFilter = 'reads'"
+              >
+                浏览记录
+              </div>
             </div>
             <BasePlaceholder
-              v-if="filteredTimelineItems.length === 0"
-              text="暂无时间线"
+              v-if="
+                timelineFilter === 'reads'
+                  ? readPosts.length === 0
+                  : filteredTimelineItems.length === 0
+              "
+              :text="timelineFilter === 'reads' ? '暂无浏览记录' : '暂无时间线'"
               icon="inbox"
             />
             <div class="timeline-list">
-              <BaseTimeline :items="filteredTimelineItems">
+              <BaseTimeline v-if="timelineFilter !== 'reads'" :items="filteredTimelineItems">
                 <template #item="{ item }">
                   <template v-if="item.type === 'post'">
                     <TimelinePostItem :item="item" />
@@ -214,6 +225,11 @@
                   </template>
                 </template>
               </BaseTimeline>
+              <BaseTimeline v-else :items="readPosts">
+                <template #item="{ item }">
+                  <TimelineReadItem :item="item" />
+                </template>
+              </BaseTimeline>
             </div>
           </div>
 
@@ -276,6 +292,7 @@ import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import TimelineCommentGroup from '~/components/TimelineCommentGroup.vue'
 import TimelinePostItem from '~/components/TimelinePostItem.vue'
+import TimelineReadItem from '~/components/TimelineReadItem.vue'
 import TimelineTagItem from '~/components/TimelineTagItem.vue'
 import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import UserList from '~/components/UserList.vue'
@@ -299,12 +316,15 @@ const hotReplies = ref([])
 const hotTags = ref([])
 const favoritePosts = ref([])
 const timelineItems = ref([])
+const readPosts = 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')
+  } else if (timelineFilter.value === 'reads') {
+    return []
   }
   return timelineItems.value
 })
@@ -477,6 +497,27 @@ const fetchTimeline = async () => {
   timelineItems.value = combineDiscussionItems(mapped)
 }
 
+const fetchReadHistory = async () => {
+  if (!isMine.value) {
+    readPosts.value = []
+    return
+  }
+  const token = getToken()
+  if (!token) {
+    readPosts.value = []
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/users/${username}/read-posts?limit=50`, {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    const data = await res.json()
+    readPosts.value = data.map((r) => ({ ...r, icon: 'file-text' }))
+  } else {
+    readPosts.value = []
+  }
+}
+
 const fetchFollowUsers = async () => {
   const [followerRes, followingRes] = await Promise.all([
     fetch(`${API_BASE_URL}/api/users/${username}/followers`),
@@ -508,6 +549,12 @@ const loadTimeline = async () => {
   tabLoading.value = false
 }
 
+const loadReadHistory = async () => {
+  tabLoading.value = true
+  await fetchReadHistory()
+  tabLoading.value = false
+}
+
 const loadFollow = async () => {
   tabLoading.value = true
   await fetchFollowUsers()
@@ -624,8 +671,14 @@ onMounted(init)
 
 watch(selectedTab, async (val) => {
   // navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
-  if (val === 'timeline' && timelineItems.value.length === 0) {
-    await loadTimeline()
+  if (val === 'timeline') {
+    if (timelineFilter.value === 'reads') {
+      if (readPosts.value.length === 0) {
+        await loadReadHistory()
+      }
+    } else if (timelineItems.value.length === 0) {
+      await loadTimeline()
+    }
   } else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {
     await loadFollow()
   } else if (val === 'favorites' && favoritePosts.value.length === 0) {
@@ -634,6 +687,23 @@ watch(selectedTab, async (val) => {
     await loadAchievements()
   }
 })
+
+watch(timelineFilter, async (val) => {
+  if (selectedTab.value !== 'timeline') return
+  if (val === 'reads') {
+    if (readPosts.value.length === 0) {
+      await loadReadHistory()
+    }
+  } else if (timelineItems.value.length === 0) {
+    await loadTimeline()
+  }
+})
+
+watch(isMine, (val) => {
+  if (!val && timelineFilter.value === 'reads') {
+    timelineFilter.value = 'all'
+  }
+})
 </script>
 
 <style scoped>