From 8feb488c0ed148745c914a9e727bae8b599aefbd Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 9 Jul 2025 18:03:50 +0800
Subject: [PATCH] Add clickable icons to timeline

---
 open-isle-cli/src/components/BaseTimeline.vue | 10 +++++++++-
 open-isle-cli/src/components/CommentItem.vue  | 14 ++++++++++----
 open-isle-cli/src/views/MessagePageView.vue   |  3 +++
 open-isle-cli/src/views/PostPageView.vue      |  1 +
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/open-isle-cli/src/components/BaseTimeline.vue b/open-isle-cli/src/components/BaseTimeline.vue
index 143881690..e3ebadc12 100644
--- a/open-isle-cli/src/components/BaseTimeline.vue
+++ b/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%;
diff --git a/open-isle-cli/src/components/CommentItem.vue b/open-isle-cli/src/components/CommentItem.vue
index e4dfcd4a0..b4e7c9dfa 100644
--- a/open-isle-cli/src/components/CommentItem.vue
+++ b/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('回复成功')
diff --git a/open-isle-cli/src/views/MessagePageView.vue b/open-isle-cli/src/views/MessagePageView.vue
index ac7547e30..7dde55195 100644
--- a/open-isle-cli/src/views/MessagePageView.vue
+++ b/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({
diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue
index 51063c9a8..10d2c2702 100644
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/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) => {