cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-27 04:20:43 +08:00
Code Issues Activity

feat(comment-panel): 优化评论回复展示与交互细节

Browse Source 
1. 新增查找被引用回复的工具函数
2. 优化加载状态的展示样式与文案
3. 调整回复列表间距与引用回复的渲染逻辑
4. 更新输入框占位文案与回复提示区域的展示
5. 优化回复内容的文字颜色与排版
This commit is contained in:
小莫唐尼
2026-06-15 22:40:39 +08:00
parent 9c028bdc1b
commit 700eb10517
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-detail/uh-post-comment-panel.vue
+24 -9
View File
@@ -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"