Merge pull request #97 from nagisa77/codex/expand-and-locate-link-in-nested-comments

Fix nested comment links

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

@@ -50,6 +50,7 @@
           :key="r.id"
           :comment="r"
           :level="level + 1"
+          :default-show-replies="r.openReplies"
         />
       </div>
     </div>
@@ -72,10 +73,14 @@ const CommentItem = {
     level: {
       type: Number,
       default: 0
+    },
+    defaultShowReplies: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
-    const showReplies = ref(false)
+    const showReplies = ref(props.defaultShowReplies)
     const showEditor = ref(false)
     const isWaitingForReply = ref(false)
     const toggleReplies = () => {
@@ -114,8 +119,10 @@ const CommentItem = {
               time: new Date(r.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
               avatar: r.avatar,
               text: r.content,
-              reply: []
-            }))
+              reply: [],
+              openReplies: false
+            })),
+            openReplies: false
           })
           showEditor.value = false
           toast.success('回复成功')

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

@@ -68,7 +68,14 @@
       <CommentEditor @submit="postComment" :loading="isWaitingPostingComment" />
 
       <div class="comments-container">
-        <CommentItem v-for="comment in comments" :key="comment.id" :comment="comment" :level="0" ref="postItems" />
+        <CommentItem
+          v-for="comment in comments"
+          :key="comment.id"
+          :comment="comment"
+          :level="0"
+          :default-show-replies="comment.openReplies"
+          ref="postItems"
+        />
       </div>
     </div>
 
@@ -125,9 +132,31 @@ export default {
       time: new Date(c.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
       avatar: c.author.avatar,
       text: c.content,
-      reply: (c.replies || []).map(mapComment)
+      reply: (c.replies || []).map(mapComment),
+      openReplies: false
     })
 
+    const findCommentPath = (id, list) => {
+      for (const item of list) {
+        if (item.id === Number(id) || item.id === id) {
+          return [item]
+        }
+        if (item.reply && item.reply.length) {
+          const sub = findCommentPath(id, item.reply)
+          if (sub) return [item, ...sub]
+        }
+      }
+      return null
+    }
+
+    const expandCommentPath = (id) => {
+      const path = findCommentPath(id, comments.value)
+      if (!path) return
+      for (let i = 0; i < path.length - 1; i++) {
+        path[i].openReplies = true
+      }
+    }
+
     const fetchPost = async () => {
       try {
         isWaitingFetchingPost.value = true;
@@ -220,7 +249,10 @@ export default {
     }
 
     onMounted(async () => {
+      const hash = location.hash
+      const id = hash.startsWith('#comment-') ? hash.substring('#comment-'.length) : null
       await fetchPost()
+      if (id) expandCommentPath(id)
       updateCurrentIndex()
       await jumpToHashComment()
     })