Skip to content

C
corporateCulture-qd
Commit 40dd4ba1 by lijiabin
Options

【需求 20331】 feat: 文章详情页以及评论相关加入用户地区

parent 3350ab36
Showing with 68 additions and 52 deletions
src/components/common/ArticleContent/index.vue
......@@ -36,7 +36,7 @@
</div>
<p class="text-sm text-gray-500 mt-1">
{{ dayjs((articleDetail?.createTime || 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }}
· {{ articleDetail?.viewCount || 0 }} 阅读
· {{ articleDetail?.viewCount || 0 }} 阅读 · {{ articleDetail?.region || 0 }}
</p>
</div>
<!-- 再次编辑按钮 -->
......
src/components/common/Comment/index.vue
......@@ -137,8 +137,14 @@
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-8 text-sm text-gray-500">
<span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
<div class="flex items-center gap-6 text-gray-500">
<span class="flex items-center gap-2 text-[14px]">
<span
>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</span>
<span>·</span>
<span class="text-gray-500">{{ item.region }}</span>
</span>
<div class="flex gap-2 items-center hover:text-blue-500">
<div
class="flex items-center gap-1 cursor-pointer"
......@@ -151,7 +157,7 @@
</div>
</div>
<button
class="cursor-pointer hover:text-blue-500 transition-colors"
class="cursor-pointer hover:text-blue-500 transition-colors text-[14px]"
@click="handleReply(item, index)"
>
回复
......@@ -176,14 +182,18 @@
class="w-8 h-8 rounded-full object-cover cursor-pointer"
/>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-medium text-sm text-gray-800">
<span class="text-gray-600">{{ child.replyUser }} </span> 回复
<span>{{ child.replyName }}</span></span
>
<div class="flex items-center gap-1">
<span class="font-semibold text-gray-600 text-base">{{
child.replyUser
}}</span>
<!-- v-if="item.replyName && item.replyName !== parentComment?.replyUser" -->
<span class="text-gray-500 text-sm flex items-center gap-1">
<el-icon class="mx-1"><IEpCaretRight /></el-icon>
{{ child.replyName }}
</span>
</div>
<p
class="text-gray-800 my-2 break-all whitespace-pre-wrap"
class="text-gray-800 my-2 break-all whitespace-pre-wrap text-[16px]"
v-html="parseEmoji(child.content)"
></p>
<!-- 评论图片列表 -->
......@@ -204,10 +214,14 @@
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 text-sm text-gray-500">
<span>{{
dayjs(child.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
}}</span>
<div class="flex items-center gap-6 text-gray-500 text-[14px]">
<span class="flex items-center gap-2">
<span
>{{ dayjs(child.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</span>
<span>·</span>
<span class="text-gray-500">{{ child.region }}</span>
</span>
<div class="flex gap-2 items-center hover:text-blue-500">
<div
class="flex items-center gap-1 cursor-pointer"
......@@ -344,13 +358,14 @@ import {
import { usePageSearch, useScrollTop } from '@/hooks'
import { BooleanFlag } from '@/constants'
import type { CommentItemDto } from '@/api'
import dayjs from 'dayjs'
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import CommentListDialog from '../CommentListDialog/index.vue'
import { jumpToUserHomePage } from '@/utils'
import { parseEmoji } from '@/utils/emoji'
import CommentBox from '../CommentBox/index.vue'
import dayjs from 'dayjs'
const {
id,
defaultSize = 10,
......
src/components/common/CommentListDialog/index.vue
......@@ -17,7 +17,7 @@
@click="close"
:size="24"
>
<ArrowLeft />
<IEpArrowLeft />
</el-icon>
<span :id="titleId" :class="titleClass" class="text-lg font-bold text-gray-800">
评论回复
......@@ -39,7 +39,7 @@
<span class="font-bold text-gray-900 text-base">{{ parentComment.hiddenName }}</span>
<!-- 点赞按钮 -->
<div
class="flex items-center gap-1.5 cursor-pointer text-gray-400 hover:text-blue-500 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
class="flex items-center gap-1.5 cursor-pointer text-gray-500 hover:text-blue-500 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
@click="handleLike(parentComment)"
>
<el-icon :size="18">
......@@ -49,10 +49,10 @@
</div>
</div>
<p
class="text-gray-800 text-base leading-relaxed mb-3"
<div
class="text-gray-800 text-base leading-relaxed mb-2"
v-html="parseEmoji(parentComment.content)"
></p>
></div>
<!-- 下方图片 -->
<div class="flex flex-wrap gap-2" v-if="parentComment.imgUrl">
......@@ -72,8 +72,9 @@
</div>
</div>
<div class="text-sm text-gray-400 flex items-center gap-4">
<span>{{ dayjs(parentComment.createTime * 1000).format('MM-DD HH:mm') }}</span>
<div class="text-sm text-gray-500 flex items-center gap-2">
<span>{{ dayjs(parentComment.createTime * 1000).format('MM-DD HH:mm') }}</span> ·
<span class="text-xs text-gray-500">{{ parentComment.region }}</span>
</div>
</div>
</div>
......@@ -92,11 +93,11 @@
<div class="flex-1 border-b border-gray-100">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<div class="flex items-center gap-1">
<span class="font-semibold text-gray-900 text-base">{{ item.replyUser }}</span>
<!-- v-if="item.replyName && item.replyName !== parentComment?.replyUser" -->
<span class="text-gray-400 text-sm flex items-center">
<el-icon class="mx-1"><CaretRight /></el-icon>
<span class="text-gray-500 text-sm flex items-center gap-1">
<el-icon class="mx-1"><IEpCaretRight /></el-icon>
{{ item.replyName }}
</span>
</div>
......@@ -104,13 +105,13 @@
<!-- 列表项点赞 -->
<div class="flex items-center gap-4">
<div
class="flex items-center gap-1.5 cursor-pointer text-gray-400 hover:text-blue-500 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
class="flex items-center gap-1.5 cursor-pointer text-gray-500 hover:text-blue-500 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
@click="handleReplyInline(item, index)"
>
<span class="text-sm font-medium">回复</span>
</div>
<div
class="flex items-center gap-1.5 cursor-pointer text-gray-400 hover:text-blue-500 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
class="flex items-center gap-1.5 cursor-pointer text-gray-500 hover:text-blue-500 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
@click="handleLike(item)"
>
<el-icon :size="18">
......@@ -122,7 +123,7 @@
</div>
<p
class="text-gray-700 text-base mb-3 break-all leading-relaxed"
class="text-gray-700 text-base mb-2 break-all leading-relaxed"
v-html="parseEmoji(item.content)"
></p>
<!-- 下方图片 -->
......@@ -143,8 +144,9 @@
</div>
</div>
<div class="text-sm text-gray-400">
<span>{{ formatDate(item.createTime) }}</span>
<div class="text-[14px] text-gray-500 flex items-center gap-2">
<span>{{ dayjs(item.createTime * 1000).format('MM-DD HH:mm') }}</span> ·
<span class="text-xs text-gray-500">{{ item.region }}</span>
</div>
<!-- 内嵌回复框 -->
......@@ -212,7 +214,7 @@
:disabled="!bottomCommentContent.trim() || bottomLoadingBtn"
@click="submitReply(parentComment?.id)"
>
<el-icon :size="20"><Position /></el-icon>
<el-icon :size="20"><IEpPosition /></el-icon>
</el-button>
</div>
</div>
......@@ -220,8 +222,6 @@
</template>
<script setup lang="ts">
import { ArrowLeft, CaretRight, Position } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import {
......@@ -303,10 +303,6 @@ const open = async () => {
visible.value = true
}
const formatDate = (time: number) => {
return dayjs(time * 1000).format('MM-DD HH:mm')
}
// 点击列表中的“回复”
const handleReplyInline = (item: CommentItemDto, index: number) => {
if (currentInlineReplyId.value === item.id) {
......
src/views/questionDetail/index.vue
......@@ -44,8 +44,11 @@
<span class="text-sm font-medium text-slate-900">
{{ questionDetail.createUserName }}
</span>
<span class="text-xs text-slate-500">
发布于 {{ dayjs(questionDetail.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
<span class="text-xs text-slate-500 flex items-center gap-1">
发布于 {{ dayjs(questionDetail.createTime * 1000).format('YYYY-MM-DD HH:mm') }} ·
<span class="text-xs text-slate-500 flex items-center gap-1">
{{ questionDetail.region }}
</span>
</span>
</div>
</div>
......@@ -197,13 +200,13 @@
</div>
<!-- 赞同票数 (微小的灰色文字，增加信息密度) -->
<div v-if="answer.postPriseCount" class="text-xs text-slate-500 mb-2">
<div v-if="answer.postPriseCount" class="text-[14px] text-slate-500 mb-2">
{{ answer.postPriseCount || 0 }} 人赞同了该回答
</div>
<!-- 正文 换行 -->
<div
class="text-slate-800 leading-7 text-[15px] mb-4 rich-text-content break-all"
class="text-slate-800 leading-7 mb-4 rich-text-content break-all"
v-html="parseEmoji(answer.content)"
></div>
<!-- 评论图片列表 -->
......@@ -224,12 +227,13 @@
</div>
</div>
<div class="text-xs text-slate-500 mb-3">
发布于 {{ dayjs(answer.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
<div class="text-[14px] text-slate-500 mb-3 flex items-center gap-3">
发布于 {{ dayjs(answer.createTime * 1000).format('YYYY-MM-DD HH:mm') }} ·
{{ answer.region }}
</div>
<!-- 底部吸附操作栏 -->
<div class="flex items-center gap-4 select-none sticky bottom-0 bg-white pt-2">
<!-- 底 部吸附操作栏 -->
<div class="flex items-center gap-4 select-none sticky bottom-0 bg-white">
<!-- 核心交互：赞同/反对胶囊 -->
<div class="flex items-center bg-blue-50/60 rounded-[4px] overflow-hidden">
<button
......
src/views/videoDetail/index.vue
......@@ -12,15 +12,16 @@
{{ videoDetail?.title }}
<ActionMore :articleDetail="videoDetail" />
</h1>
<div class="flex items-center text-14px text-gray-500 gap-4 flex-wrap">
<span class="flex items-center gap-1">
<i class="i-carbon-play-filled text-gray-400"></i>
{{ formatNumber(videoDetail?.playCount) }}播放
</span>
<span class="flex items-center gap-1">
<i class="i-carbon-time text-gray-400"></i>
<div class="flex items-center text-14px text-gray-500 gap-2 flex-wrap">
<span class="flex items-center">
{{ dayjs(videoDetail?.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
</span>
·
<span class="flex items-center"> {{ formatNumber(videoDetail?.playCount) }}播放 </span>
·
<span class="flex items-center">
{{ videoDetail?.region }}
</span>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment