Add clickable icons to timeline

open-isle-cli/src/components/BaseTimeline.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="timeline">
     <div class="timeline-item" v-for="(item, idx) in items" :key="idx">
-      <div class="timeline-icon">
+      <div
+        class="timeline-icon"
+        :class="{ clickable: !!item.iconClick }"
+        @click="item.iconClick && item.iconClick()"
+      >
         <img v-if="item.src" :src="item.src" class="timeline-img" />
         <i v-else-if="item.icon" :class="item.icon"></i>
       </div>
@@ -48,6 +52,10 @@ export default {
   flex-shrink: 0;
 }
 
+.timeline-icon.clickable {
+  cursor: pointer;
+}
+
 .timeline-img {
   width: 100%;
   height: 100%;

open-isle-cli/src/components/CommentItem.vue

@@ -76,6 +76,7 @@
 
 <script>
 import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import CommentEditor from './CommentEditor.vue'
 import { renderMarkdown } from '../utils/markdown'
 import BaseTimeline from './BaseTimeline.vue'
@@ -98,6 +99,7 @@ const CommentItem = {
     }
   },
   setup(props) {
+    const router = useRouter()
     const showReplies = ref(props.defaultShowReplies)
     watch(
       () => props.defaultShowReplies,
@@ -135,18 +137,22 @@ const CommentItem = {
             id: data.id,
             userName: data.author.username,
             time: new Date(data.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
-            avatar: data.avatar.username,
+            avatar: data.author.avatar,
             text: data.content,
             reply: (data.replies || []).map(r => ({
               id: r.id,
               userName: r.author.username,
               time: new Date(r.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
-              avatar: r.avatar,
+              avatar: r.author.avatar,
               text: r.content,
               reply: [],
-              openReplies: false
+              openReplies: false,
+              src: r.author.avatar,
+              iconClick: () => router.push(`/users/${r.author.id}`)
             })),
-            openReplies: false
+            openReplies: false,
+            src: data.author.avatar,
+            iconClick: () => router.push(`/users/${data.author.id}`)
           })
           showEditor.value = false
           toast.success('回复成功')

open-isle-cli/src/views/MessagePageView.vue

@@ -59,6 +59,7 @@
 
 <script>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { API_BASE_URL } from '../main'
 import BaseTimeline from '../components/BaseTimeline.vue'
 import { getToken } from '../utils/auth'
@@ -71,6 +72,7 @@ export default {
   name: 'MessagePageView',
   components: { BaseTimeline },
   setup() {
+    const router = useRouter()
     const notifications = ref([])
     const isLoadingMessage = ref(false)
 
@@ -112,6 +114,7 @@ export default {
             notifications.value.push({
               ...n,
               src: n.comment.author.avatar,
+              iconClick: () => router.push(`/users/${n.comment.author.id}`)
             })
           } else {
             notifications.value.push({

open-isle-cli/src/views/PostPageView.vue

@@ -153,6 +153,7 @@ export default {
       reply: (c.replies || []).map(mapComment),
       openReplies: false,
       src: c.author.avatar,
+      iconClick: () => router.push(`/users/${c.author.id}`)
     })
 
     const getTopRelativeTo = (el, container) => {