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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user