From 700eb105174b72f055ad58e3a67b9ec3199d55ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?=
 <tzxiaomo@outlook.com>
Date: Mon, 15 Jun 2026 22:40:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(comment-panel):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=9B=9E=E5=A4=8D=E5=B1=95=E7=A4=BA=E4=B8=8E?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增查找被引用回复的工具函数
2. 优化加载状态的展示样式与文案
3. 调整回复列表间距与引用回复的渲染逻辑
4. 更新输入框占位文案与回复提示区域的展示
5. 优化回复内容的文字颜色与排版
---
 .../post-detail/uh-post-comment-panel.vue     | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/post-detail/uh-post-comment-panel.vue b/src/components/post-detail/uh-post-comment-panel.vue
index 15b0a2d..73cda7e 100644
--- a/src/components/post-detail/uh-post-comment-panel.vue
+++ b/src/components/post-detail/uh-post-comment-panel.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { createComment, createReply, listCommentReplies, listComments } from '@/api/halo-base/comment'
-import { completeUrl } from '@/utils/url'
 import { avatar } from '@/utils/imageHelper'
 import { timeFrom } from '@/utils/base/timeFrom'
 import type { CommentV1alpha1PublicApiListCommentRepliesRequest, CommentV1alpha1PublicApiListComments1Request, CommentWithReplyVo, ReplyVo } from '@halo-dev/api-client'
@@ -201,6 +200,11 @@ async function handleSubmit() {
   }
 }
 
+// --- 查找被引用的回复 ---
+function findQuotedReply(comment: CommentWithReplyVo, quoteReplyName: string): ReplyVo | undefined {
+  return comment.replies?.items?.find(r => r.metadata.name === quoteReplyName)
+}
+
 // --- 关闭面板 ---
 function handleClose() {
   emits('close')
@@ -247,7 +251,9 @@ onMounted(() => {
           <view class="box-border h-full px-4 pt-3">
             <!-- 加载中 -->
             <view v-if="commentLoading && commentList.length === 0" class="box-border h-full center">
-              <wd-loading />
+              <wd-loading :size="32" color="#1a1a1a">
+                加载中...
+              </wd-loading>
             </view>
 
             <!-- 空状态 -->
@@ -308,7 +314,7 @@ onMounted(() => {
                     </view>
 
                     <!-- 回复列表 -->
-                    <view v-if="expandedReplies.has(comment.metadata.name)" class="mt-2 flex flex-col gap-y-2 rounded-xl bg-gray-50 p-3">
+                    <view v-if="expandedReplies.has(comment.metadata.name)" class="mt-2 flex flex-col gap-y-2.5 rounded-xl bg-gray-50 p-3">
                       <view
                         v-for="reply in (comment.replies?.items ?? [])"
                         :key="reply.metadata.name"
@@ -325,11 +331,16 @@ onMounted(() => {
                             <text class="text-[10px] text-gray-400">{{ timeFrom(reply.spec.creationTime || reply.metadata.creationTimestamp) }}</text>
                           </view>
 
-                          <view v-if="reply.spec.quoteReply" class="rounded-lg bg-gray-100 px-2.5 py-1.5">
-                            <text class="text-[11px] text-gray-400">回复 {{ reply.spec.quoteReply }}：</text>
+                          <view v-if="reply.spec.quoteReply" class="box-border rounded-lg bg-gray-100 px-2.5 py-1.5">
+                            <view v-if="findQuotedReply(comment, reply.spec.quoteReply)" class="w-full flex items-center gap-x-1 text-[11px] text-gray-400">
+                              <text class="shrink-0">回复 {{ findQuotedReply(comment, reply.spec.quoteReply)?.owner.displayName || '匿名用户' }}：</text> <rich-text class="line-clamp-1" :nodes="findQuotedReply(comment, reply.spec.quoteReply)?.spec.raw" />
+                            </view>
+                            <view v-else class="line-clamp-1 w-full flex items-center gap-x-1 text-[11px] text-gray-400">
+                              <text class="shrink-0">回复 {{ comment.owner.displayName || '匿名用户' }}：</text> <rich-text class="line-clamp-1" :nodes="comment.spec.raw" />
+                            </view>
                           </view>
 
-                          <text class="text-xs text-gray-700 leading-4.5">
+                          <text class="text-xs text-gray-900 leading-4.5">
                             <rich-text :nodes="reply.spec.raw" />
                           </text>
 
@@ -355,7 +366,9 @@ onMounted(() => {
                       </view>
 
                       <view v-if="replyLoadingMap[comment.metadata.name] && !(comment.replies?.items?.length)" class="center py-2">
-                        <wd-loading :size="20" color="#1a1a1a" > 加载中 </wd-loading>
+                        <wd-loading :size="20" color="#1a1a1a" direction="horizontal">
+                          加载中
+                        </wd-loading>
                       </view>
                     </view>
                   </view>
@@ -376,7 +389,9 @@ onMounted(() => {
         <view class="box-border border-t border-gray-100 px-4 pt-2">
           <!-- 回复提示 -->
           <view v-if="replyTarget" class="mb-2 flex items-center justify-between rounded-lg bg-gray-50 px-3 py-1.5">
-            <text class="text-xs text-gray-500">回复 {{ replyTarget.displayName }}</text>
+            <view class="line-clamp-1 text-xs text-gray-500">
+              回复 {{ replyTarget.displayName }} <!-- 这里也要补充回复的内容,使用rich-text渲染 -->
+            </view>
             <view @click="handleCancelReply">
               <wd-icon name="close" color="#9CA3AF" :size="14" />
             </view>
@@ -386,7 +401,7 @@ onMounted(() => {
             <input
               v-model="inputText"
               class="flex-1 rounded-xl bg-gray-50 px-4 py-2.5 text-sm active:bg-gray-100 focus:bg-gray-100"
-              :placeholder="replyTarget ? `回复 ${replyTarget.displayName}...` : '写评论...'"
+              :placeholder="replyTarget ? `回复 ${replyTarget.displayName}...` : '说点什么吧...'"
               confirm-type="send"
               :adjust-position="true"
               @confirm="handleSubmit"