137 lines
3.5 KiB
Vue
137 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import type { CommentApi } from '#/api/license/comment';
|
|
|
|
import { ref } from 'vue';
|
|
|
|
import { useUserStore } from '@vben/stores';
|
|
|
|
import ChildComment from './child-comment.vue';
|
|
import CreateComment from './create-comment.vue';
|
|
|
|
const props = defineProps<{
|
|
comments?: CommentApi.Comment[];
|
|
projectId?: number;
|
|
}>();
|
|
|
|
const emit = defineEmits(['getCommentByProjectId']);
|
|
const userStore = useUserStore();
|
|
|
|
const isSortAsc = ref<boolean>();
|
|
const sortByTime = () => {
|
|
isSortAsc.value = !isSortAsc.value;
|
|
emit('getCommentByProjectId', props.projectId, isSortAsc.value);
|
|
};
|
|
|
|
function countNodes(tree: CommentApi.Comment) {
|
|
if (tree === null) {
|
|
return 0;
|
|
}
|
|
let count = 1; // 当前节点
|
|
if (!tree.children || tree.children.length === 0 || (tree?.depth ?? 0) > 1) {
|
|
return count; // 如果没有子节点，直接返回当前节点数量
|
|
}
|
|
for (let i = 0; i < tree.children.length; i++) {
|
|
if (tree.children[i] !== undefined) {
|
|
count += countNodes(tree.children[i] as CommentApi.Comment); // 递归计算子节点的数量
|
|
}
|
|
}
|
|
return count;
|
|
}
|
|
|
|
function getCommentCount(comments?: CommentApi.Comment[]) {
|
|
if (!comments || comments.length === 0) {
|
|
return 0;
|
|
}
|
|
let count = 0;
|
|
for (const comment of comments) {
|
|
count += countNodes(comment);
|
|
}
|
|
return count;
|
|
}
|
|
</script>
|
|
<template>
|
|
<div id="article-comment" style="padding: 5px">
|
|
<div class="commentText">
|
|
<span style="margin-right: auto">
|
|
<span class="text">
|
|
{{ $t('comment.hotComment') }}
|
|
</span>
|
|
<span style="padding: 0 15px 0 5px; color: #9499a0">{{
|
|
getCommentCount(comments)
|
|
}}</span>
|
|
</span>
|
|
<span
|
|
v-if="comments?.length ?? 0 > 0"
|
|
style="padding: 5px; margin-left: auto; cursor: pointer"
|
|
>
|
|
<template v-if="isSortAsc">
|
|
<a-tooltip :title="$t('comment.sortByTime')">
|
|
<span
|
|
class="icon-[solar--sort-from-bottom-to-top-outline] size-5"
|
|
@click="sortByTime"
|
|
></span>
|
|
</a-tooltip>
|
|
</template>
|
|
<template v-else>
|
|
<a-tooltip :title="$t('comment.sortByTime')">
|
|
<span
|
|
class="icon-[solar--sort-from-top-to-bottom-outline] size-5"
|
|
@click="sortByTime"
|
|
></span>
|
|
</a-tooltip>
|
|
</template>
|
|
</span>
|
|
</div>
|
|
|
|
<a-empty v-if="(comments?.length ?? 0) === 0" :description="false" />
|
|
<ChildComment
|
|
v-for="(item, index) in comments"
|
|
:key="index"
|
|
:data="item"
|
|
:project-id="projectId"
|
|
:comments="comments"
|
|
@get-comment-by-project-id="emit('getCommentByProjectId', projectId)"
|
|
/>
|
|
<a-comment>
|
|
<template #avatar>
|
|
<a-avatar
|
|
:src="userStore.userInfo?.avatar"
|
|
:alt="userStore.userInfo?.nickname"
|
|
>
|
|
{{ userStore.userInfo?.nickname?.slice(-2).toUpperCase() }}
|
|
</a-avatar>
|
|
</template>
|
|
<template #content>
|
|
<CreateComment
|
|
:project-id="projectId"
|
|
:comments="comments"
|
|
@get-comment-by-project-id="emit('getCommentByProjectId', projectId)"
|
|
/>
|
|
</template>
|
|
</a-comment>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
#article-comment {
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #252933;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.commentText {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
|
|
.text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #252933;
|
|
}
|
|
}
|
|
}
|
|
</style>
|