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

feat(comment-panel): 新增回复目标原内容展示并优化回复提示样式

1. 扩展replyTarget类型新增rawContent字段用于存储原评论内容
2. 传递评论和回复的原始内容到回复处理函数
3. 在回复提示区展示被回复的原评论内容
4. 优化回复提示的排版布局,调整文字样式和间距
This commit is contained in:
小莫唐尼
2026-06-15 23:03:34 +08:00
parent 700eb10517
commit 1ba71ff43f
@@ -31,6 +31,7 @@ const replyTarget = ref<{
commentName: string
replyName?: string
displayName: string
rawContent: string
} | null>(null)
// --- 输入内容 ---
@@ -141,8 +142,8 @@ function handleLoadMoreReplies(commentName: string) {
}
// --- 设置回复目标 ---
function handleReply(commentName: string, replyName: string | undefined, displayName: string) {
replyTarget.value = { commentName, replyName, displayName }
function handleReply(commentName: string, replyName: string | undefined, displayName: string, rawContent: string) {
replyTarget.value = { commentName, replyName, displayName, rawContent }
}
// --- 取消回复 ---
@@ -292,7 +293,7 @@ onMounted(() => {
<view class="flex items-center gap-x-4">
<view
class="flex items-center gap-x-1"
@click="handleReply(comment.metadata.name, undefined, comment.owner.displayName || '匿名用户')"
@click="handleReply(comment.metadata.name, undefined, comment.owner.displayName || '匿名用户', comment.spec.raw)"
>
<wd-icon name="message" color="#9CA3AF" :size="14" />
<text class="text-[11px] text-gray-400">回复</text>
@@ -346,7 +347,7 @@ onMounted(() => {
<view
class="flex items-center gap-x-1"
@click="handleReply(comment.metadata.name, reply.metadata.name, reply.owner.displayName || '匿名用户')"
@click="handleReply(comment.metadata.name, reply.metadata.name, reply.owner.displayName || '匿名用户', reply.spec.raw)"
>
<wd-icon name="message" color="#9CA3AF" :size="12" />
<text class="text-[10px] text-gray-400">回复</text>
@@ -388,11 +389,14 @@ 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">
<view class="line-clamp-1 text-xs text-gray-500">
回复 {{ replyTarget.displayName }} <!-- 这里也要补充回复的内容,使用rich-text渲染 -->
<view v-if="replyTarget" class="mb-2 flex items-center gap-x-2 rounded-lg bg-gray-50 px-3 py-1.5">
<view class="flex flex-1 flex-col overflow-hidden">
<text class="text-[11px] text-gray-400 font-medium">回复 {{ replyTarget.displayName }}</text>
<view class="line-clamp-1 text-[11px] text-gray-500">
<rich-text :nodes="replyTarget.rawContent" />
</view>
<view @click="handleCancelReply">
</view>
<view class="shrink-0" @click="handleCancelReply">
<wd-icon name="close" color="#9CA3AF" :size="14" />
</view>
</view>