From f50541bff7c8d0687f78284d32797c5c647f23ea Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Sun, 10 Aug 2025 12:27:32 +0800
Subject: [PATCH] feat: scroll to comment editor when opened

---
 frontend_nuxt/components/CommentItem.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index d2ee2d415..9bb61b101 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -42,7 +42,7 @@
           </div>
         </ReactionsGroup>
       </div>
-      <div class="comment-editor-wrapper">
+      <div class="comment-editor-wrapper" ref="editorWrapper">
         <CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" :disabled="!loggedIn"
           :show-login-overlay="!loggedIn" />
       </div>
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, nextTick } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRouter } from 'vue-router'
 import CommentEditor from './CommentEditor.vue'
@@ -106,6 +106,7 @@ const CommentItem = {
       }
     )
     const showEditor = ref(false)
+    const editorWrapper = ref(null)
     const isWaitingForReply = ref(false)
     const lightboxVisible = ref(false)
     const lightboxIndex = ref(0)
@@ -118,6 +119,11 @@ const CommentItem = {
     }
     const toggleEditor = () => {
       showEditor.value = !showEditor.value
+      if (showEditor.value) {
+        nextTick(() => {
+          editorWrapper.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+        })
+      }
     }
 
     // 合并所有子回复为一个扁平数组
@@ -239,7 +245,7 @@ const CommentItem = {
         lightboxVisible.value = true
       }
     }
-    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList, getMedalTitle }
+    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList, getMedalTitle, editorWrapper }
   }
 }