feat: 项目添加评论模块

apps/web-antd/src/views/license/project/comment/index.vue

@@ -0,0 +1,109 @@
+<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);
+};
+</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">{{
+          comments?.length ?? 0
+        }}</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>