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 @@ ...@@ -36,7 +36,7 @@
</div> </div>
<p class="text-sm text-gray-500 mt-1"> <p class="text-sm text-gray-500 mt-1">
{{ dayjs((articleDetail?.createTime || 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }} {{ dayjs((articleDetail?.createTime || 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }}
· {{ articleDetail?.viewCount || 0 }} 阅读 · {{ articleDetail?.viewCount || 0 }} 阅读 · {{ articleDetail?.region || 0 }}
</p> </p>
</div> </div>
<!-- 再次编辑按钮 --> <!-- 再次编辑按钮 -->
......
src/components/common/Comment/index.vue
...@@ -137,8 +137,14 @@ ...@@ -137,8 +137,14 @@
</div> </div>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-8 text-sm text-gray-500"> <div class="flex items-center gap-6 text-gray-500">
<span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span> <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 gap-2 items-center hover:text-blue-500">
<div <div
class="flex items-center gap-1 cursor-pointer" class="flex items-center gap-1 cursor-pointer"
...@@ -151,7 +157,7 @@ ...@@ -151,7 +157,7 @@
</div> </div>
</div> </div>
<button <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)" @click="handleReply(item, index)"
> >
回复 回复
...@@ -176,14 +182,18 @@ ...@@ -176,14 +182,18 @@
class="w-8 h-8 rounded-full object-cover cursor-pointer" class="w-8 h-8 rounded-full object-cover cursor-pointer"
/> />
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-1">
<span class="font-medium text-sm text-gray-800"> <span class="font-semibold text-gray-600 text-base">{{
<span class="text-gray-600">{{ child.replyUser }} </span> 回复 child.replyUser
<span>{{ child.replyName }}</span></span }}</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> </div>
<p <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)" v-html="parseEmoji(child.content)"
></p> ></p>
<!-- 评论图片列表 --> <!-- 评论图片列表 -->
...@@ -204,10 +214,14 @@ ...@@ -204,10 +214,14 @@
</div> </div>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4 text-sm text-gray-500"> <div class="flex items-center gap-6 text-gray-500 text-[14px]">
<span>{{ <span class="flex items-center gap-2">
dayjs(child.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') <span
}}</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 gap-2 items-center hover:text-blue-500">
<div <div
class="flex items-center gap-1 cursor-pointer" class="flex items-center gap-1 cursor-pointer"
...@@ -344,13 +358,14 @@ import { ...@@ -344,13 +358,14 @@ import {
import { usePageSearch, useScrollTop } from '@/hooks' import { usePageSearch, useScrollTop } from '@/hooks'
import { BooleanFlag } from '@/constants' import { BooleanFlag } from '@/constants'
import type { CommentItemDto } from '@/api' import type { CommentItemDto } from '@/api'
import dayjs from 'dayjs'
import { useUserStore } from '@/stores' import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import CommentListDialog from '../CommentListDialog/index.vue' import CommentListDialog from '../CommentListDialog/index.vue'
import { jumpToUserHomePage } from '@/utils' import { jumpToUserHomePage } from '@/utils'
import { parseEmoji } from '@/utils/emoji' import { parseEmoji } from '@/utils/emoji'
import CommentBox from '../CommentBox/index.vue' import CommentBox from '../CommentBox/index.vue'
import dayjs from 'dayjs'
const { const {
id, id,
defaultSize = 10, defaultSize = 10,
......
src/components/common/CommentListDialog/index.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
@click="close" @click="close"
:size="24" :size="24"
> >
<ArrowLeft /> <IEpArrowLeft />
</el-icon> </el-icon>
<span :id="titleId" :class="titleClass" class="text-lg font-bold text-gray-800"> <span :id="titleId" :class="titleClass" class="text-lg font-bold text-gray-800">
评论回复 评论回复
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<span class="font-bold text-gray-900 text-base">{{ parentComment.hiddenName }}</span> <span class="font-bold text-gray-900 text-base">{{ parentComment.hiddenName }}</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(parentComment)" @click="handleLike(parentComment)"
> >
<el-icon :size="18"> <el-icon :size="18">
...@@ -49,10 +49,10 @@ ...@@ -49,10 +49,10 @@
</div> </div>
</div> </div>
<p <div
class="text-gray-800 text-base leading-relaxed mb-3" class="text-gray-800 text-base leading-relaxed mb-2"
v-html="parseEmoji(parentComment.content)" v-html="parseEmoji(parentComment.content)"
></p> ></div>
<!-- 下方图片 --> <!-- 下方图片 -->
<div class="flex flex-wrap gap-2" v-if="parentComment.imgUrl"> <div class="flex flex-wrap gap-2" v-if="parentComment.imgUrl">
...@@ -72,8 +72,9 @@ ...@@ -72,8 +72,9 @@
</div> </div>
</div> </div>
<div class="text-sm text-gray-400 flex items-center gap-4"> <div class="text-sm text-gray-500 flex items-center gap-2">
<span>{{ dayjs(parentComment.createTime * 1000).format('MM-DD HH:mm') }}</span> <span>{{ dayjs(parentComment.createTime * 1000).format('MM-DD HH:mm') }}</span> ·
<span class="text-xs text-gray-500">{{ parentComment.region }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -92,11 +93,11 @@ ...@@ -92,11 +93,11 @@
<div class="flex-1 border-b border-gray-100"> <div class="flex-1 border-b border-gray-100">
<div class="flex items-center justify-between mb-2"> <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> <span class="font-semibold text-gray-900 text-base">{{ item.replyUser }}</span>
<!-- v-if="item.replyName && item.replyName !== parentComment?.replyUser" --> <!-- v-if="item.replyName && item.replyName !== parentComment?.replyUser" -->
<span class="text-gray-400 text-sm flex items-center"> <span class="text-gray-500 text-sm flex items-center gap-1">
<el-icon class="mx-1"><CaretRight /></el-icon> <el-icon class="mx-1"><IEpCaretRight /></el-icon>
{{ item.replyName }} {{ item.replyName }}
</span> </span>
</div> </div>
...@@ -104,13 +105,13 @@ ...@@ -104,13 +105,13 @@
<!-- 列表项点赞 --> <!-- 列表项点赞 -->
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<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="handleReplyInline(item, index)" @click="handleReplyInline(item, index)"
> >
<span class="text-sm font-medium">回复</span> <span class="text-sm font-medium">回复</span>
</div> </div>
<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)" @click="handleLike(item)"
> >
<el-icon :size="18"> <el-icon :size="18">
...@@ -122,7 +123,7 @@ ...@@ -122,7 +123,7 @@
</div> </div>
<p <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)" v-html="parseEmoji(item.content)"
></p> ></p>
<!-- 下方图片 --> <!-- 下方图片 -->
...@@ -143,8 +144,9 @@ ...@@ -143,8 +144,9 @@
</div> </div>
</div> </div>
<div class="text-sm text-gray-400"> <div class="text-[14px] text-gray-500 flex items-center gap-2">
<span>{{ formatDate(item.createTime) }}</span> <span>{{ dayjs(item.createTime * 1000).format('MM-DD HH:mm') }}</span> ·
<span class="text-xs text-gray-500">{{ item.region }}</span>
</div> </div>
<!-- 内嵌回复框 --> <!-- 内嵌回复框 -->
...@@ -212,7 +214,7 @@ ...@@ -212,7 +214,7 @@
:disabled="!bottomCommentContent.trim() || bottomLoadingBtn" :disabled="!bottomCommentContent.trim() || bottomLoadingBtn"
@click="submitReply(parentComment?.id)" @click="submitReply(parentComment?.id)"
> >
<el-icon :size="20"><Position /></el-icon> <el-icon :size="20"><IEpPosition /></el-icon>
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -220,8 +222,6 @@ ...@@ -220,8 +222,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ArrowLeft, CaretRight, Position } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores' import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { import {
...@@ -303,10 +303,6 @@ const open = async () => { ...@@ -303,10 +303,6 @@ const open = async () => {
visible.value = true visible.value = true
} }
const formatDate = (time: number) => {
return dayjs(time * 1000).format('MM-DD HH:mm')
}
// 点击列表中的“回复” // 点击列表中的“回复”
const handleReplyInline = (item: CommentItemDto, index: number) => { const handleReplyInline = (item: CommentItemDto, index: number) => {
if (currentInlineReplyId.value === item.id) { if (currentInlineReplyId.value === item.id) {
......
src/views/questionDetail/index.vue
...@@ -44,8 +44,11 @@ ...@@ -44,8 +44,11 @@
<span class="text-sm font-medium text-slate-900"> <span class="text-sm font-medium text-slate-900">
{{ questionDetail.createUserName }} {{ questionDetail.createUserName }}
</span> </span>
<span class="text-xs text-slate-500"> <span class="text-xs text-slate-500 flex items-center gap-1">
发布于 {{ dayjs(questionDetail.createTime * 1000).format('YYYY-MM-DD HH:mm') }} 发布于 {{ 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> </span>
</div> </div>
</div> </div>
...@@ -197,13 +200,13 @@ ...@@ -197,13 +200,13 @@
</div> </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 }} 人赞同了该回答 {{ answer.postPriseCount || 0 }} 人赞同了该回答
</div> </div>
<!-- 正文 换行 --> <!-- 正文 换行 -->
<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)" v-html="parseEmoji(answer.content)"
></div> ></div>
<!-- 评论图片列表 --> <!-- 评论图片列表 -->
...@@ -224,12 +227,13 @@ ...@@ -224,12 +227,13 @@
</div> </div>
</div> </div>
<div class="text-xs text-slate-500 mb-3"> <div class="text-[14px] text-slate-500 mb-3 flex items-center gap-3">
发布于 {{ dayjs(answer.createTime * 1000).format('YYYY-MM-DD HH:mm') }} 发布于 {{ dayjs(answer.createTime * 1000).format('YYYY-MM-DD HH:mm') }} ·
{{ answer.region }}
</div> </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"> <div class="flex items-center bg-blue-50/60 rounded-[4px] overflow-hidden">
<button <button
......
src/views/videoDetail/index.vue
...@@ -12,15 +12,16 @@ ...@@ -12,15 +12,16 @@
{{ videoDetail?.title }} {{ videoDetail?.title }}
<ActionMore :articleDetail="videoDetail" /> <ActionMore :articleDetail="videoDetail" />
</h1> </h1>
<div class="flex items-center text-14px text-gray-500 gap-4 flex-wrap"> <div class="flex items-center text-14px text-gray-500 gap-2 flex-wrap">
<span class="flex items-center gap-1"> <span class="flex items-center">
<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>
{{ dayjs(videoDetail?.createTime * 1000).format('YYYY-MM-DD HH:mm') }} {{ dayjs(videoDetail?.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
</span> </span>
·
<span class="flex items-center"> {{ formatNumber(videoDetail?.playCount) }}播放 </span>
·
<span class="flex items-center">
{{ videoDetail?.region }}
</span>
</div> </div>
</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