jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-07 20:40:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(profile): enhance timeline display

Browse Source
This commit is contained in:
Tim
2025-07-09 14:54:13 +08:00
parent c7f5bb862a
commit 9fc3d0b6b1
1 changed files with 65 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
open-isle-cli/src/views/ProfileView.vue
View File

@@ -55,7 +55,43 @@
</div> </div>
<div v-else class="profile-timeline"> <div v-else class="profile-timeline">
<BaseTimeline :items="timelineItems" /> <BaseTimeline :items="timelineItems">
<template #item="{ item }">
<template v-if="item.type === 'post'">
发布了文章
<router-link :to="`/posts/${item.post.id}`" class="timeline-link">
{{ item.post.title }}
</router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
<template v-else-if="item.type === 'comment'">
在
<router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
{{ item.comment.post.title }}
</router-link>
下评论了
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
{{ item.comment.content }}
</router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
<template v-else-if="item.type === 'reply'">
在
<router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
{{ item.comment.post.title }}
</router-link>
下对
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`" class="timeline-link">
{{ item.comment.parentComment.content }}
</router-link>
回复了
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
{{ item.comment.content }}
</router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
</template>
</BaseTimeline>
</div> </div>
</div> </div>
</div> </div>
@@ -117,8 +153,18 @@ export default {
const posts = postsRes.ok ? await postsRes.json() : [] const posts = postsRes.ok ? await postsRes.json() : []
const replies = repliesRes.ok ? await repliesRes.json() : [] const replies = repliesRes.ok ? await repliesRes.json() : []
const mapped = [ const mapped = [
...posts.map(p => ({ icon: 'fas fa-book', content: p.title, createdAt: p.createdAt })), ...posts.map(p => ({
...replies.map(r => ({ icon: 'fas fa-comment', content: r.content, createdAt: r.createdAt })) type: 'post',
icon: 'fas fa-book',
post: p,
createdAt: p.createdAt
})),
...replies.map(r => ({
type: r.parentComment ? 'reply' : 'comment',
icon: 'fas fa-comment',
comment: r,
createdAt: r.createdAt
}))
] ]
mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)) mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
timelineItems.value = mapped timelineItems.value = mapped
@@ -236,4 +282,20 @@ export default {
.profile-timeline { .profile-timeline {
padding: 20px; padding: 20px;
} }
.timeline-date {
font-size: 12px;
color: gray;
margin-top: 5px;
}
.timeline-link {
font-weight: bold;
color: var(--primary-color);
text-decoration: none;
}
.timeline-link:hover {
text-decoration: underline;
}
</style> </style>