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