【需求 17679】 perf: 继续优化

src/api/article/index.ts

@@ -335,7 +335,7 @@ export const getSecondCommentChildren = (data: {
   articleId: number
 }) => {
   return service.request<BackendServicePageResult<CommentItemDto>>({
-    url: `/api/cultureComment/comment/children`,
+    url: `/api/cultureComment/getAllComment`,
     method: 'POST',
     data,
   })

src/api/article/types.ts

@@ -178,6 +178,7 @@ export interface ArticleItemDto {
     type: ArticleTypeEnum
     userId: string
     viewCount: number
+    childNum: number
   }
 }
 

src/components/common/Comment/index.vue

@@ -298,11 +298,13 @@
             <el-pagination
               v-model:current-page="searchParams.current"
               v-model:page-size="searchParams.size"
-              :total="total"
+              :total="firstComentTotal"
               @current-change="handleCurrentChange"
               @size-change="changePageSize"
-              layout="prev, pager, next, total"
-            />
+              layout="prev, pager, next, slot"
+            >
+              <div>共 {{ total }} 条</div>
+            </el-pagination>
           </div>
         </div>
       </div>
@@ -318,7 +320,7 @@ import {
   getCommentChildren,
   getSecondCommentList,
 } from '@/api'
-import { usePageSearch, useScrollTop, useHintAnimation } from '@/hooks'
+import { usePageSearch, useScrollTop } from '@/hooks'
 import { BooleanFlag } from '@/constants'
 import type { CommentItemDto } from '@/api'
 import dayjs from 'dayjs'
@@ -333,7 +335,7 @@ const {
   isQuestion = false,
   commentId = 0,
 } = defineProps<{
-  id: number
+  id: number // 文章ID
   defaultSize?: number
   isReal: BooleanFlag
   isQuestion?: boolean // 如果是问题的话 展示有点不一样
@@ -351,7 +353,6 @@ const total = defineModel<number>('total', { required: true, default: 0 })
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const userAvatar = computed(() => (isReal ? userInfo.value.avatar : userInfo.value.hiddenAvatar))
-console.log(userAvatar)
 const commentRef = useTemplateRef<HTMLElement | null>('commentRef')
 const commentDialogRef = useTemplateRef<HTMLElement | null>('commentDialogRef')
 const commentInputRef = useTemplateRef<HTMLElement | null>('commentInputRef')
@@ -361,52 +362,52 @@ const { handleBackTop } = useScrollTop(commentRef)
 // 回滚到子评论框
 const { handleBackTop: handleBackTopChildren } = useScrollTop(commentItemRefList)
 
-const { triggerAnimation } = useHintAnimation(commentInputRef, {
-  classes: ['scale-bounce', 'highlight', 'shake-x'],
-})
-
-const { list, searchParams, goToPage, loading, changePageSize, refresh, search } = usePageSearch(
-  isQuestion ? getSecondCommentList : getCommentList,
-  {
-    defaultParams: {
-      ...(commentId
-        ? { pid: commentId, sortType: 2 }
-        : {
-            articleId: id,
-            sortType: 2,
-          }),
-    },
-    defaultSize,
-    formatList(list: CommentItemDto[]) {
-      return list.map((item) => {
-        // 初始化的时候 添加新的字段 是否展示分页子评论 默认是false 当前子评论分页current 以及子评论分页列表 loading效果
+console.log(commentId, 'commentId')
+const {
+  list,
+  searchParams,
+  goToPage,
+  loading,
+  changePageSize,
+  refresh,
+  search,
+  total: firstComentTotal,
+} = usePageSearch(isQuestion ? getSecondCommentList : getCommentList, {
+  defaultParams: {
+    ...(commentId
+      ? { pid: commentId, sortType: 2 }
+      : {
+          articleId: id,
+          sortType: 2,
+        }),
+  },
+  defaultSize,
+  formatList(list: CommentItemDto[]) {
+    return list.map((item) => {
+      // 初始化的时候 添加新的字段 是否展示分页子评论 默认是false 当前子评论分页current 以及子评论分页列表 loading效果
 
-        const obj: CommentItemDto = { ...item }
-        // if (obj.showChildrenPage == undefined) {
-        obj.showChildrenPage = false
-        // }
-        // if (obj.childrenPageCurrent == undefined) {
-        obj.childrenPageCurrent = 1
-        // }
-        // if (obj.childrenPageList == undefined) {
-        obj.childrenPageList = []
-        // }
-        // if (obj.loadingChildren == undefined) {
-        obj.loadingChildren = false
-        // }
+      const obj: CommentItemDto = { ...item }
+      // if (obj.showChildrenPage == undefined) {
+      obj.showChildrenPage = false
+      // }
+      // if (obj.childrenPageCurrent == undefined) {
+      obj.childrenPageCurrent = 1
+      // }
+      // if (obj.childrenPageList == undefined) {
+      obj.childrenPageList = []
+      // }
+      // if (obj.loadingChildren == undefined) {
+      obj.loadingChildren = false
+      // }
 
-        return obj
-      })
-    },
-    immediate,
+      return obj
+    })
   },
-)
+  immediate,
+})
 const handleCurrentChange = async (e: number) => {
   await goToPage(e)
   handleBackTop()
-  setTimeout(() => {
-    triggerAnimation()
-  }, 500)
 }
 
 // 自己发出的评论

src/components/common/CommentDialog/index.vue

@@ -3,7 +3,7 @@
     v-model="visible"
     :title="dialogTitle"
     width="600px"
-    class="comment-reply-dialog rounded-xl overflow-hidden"
+    class="rounded-xl overflow-hidden"
     :show-close="false"
     append-to-body
     destroy-on-close
@@ -168,7 +168,8 @@
           <input
             ref="bottomInputRef"
             v-model="bottomCommentContent"
-            type="text"
+            :autosize="{ minRows: 1, maxRows: 4 }"
+            type="textarea"
             class="bg-transparent w-full outline-none text-sm text-gray-700 placeholder-gray-400"
             :placeholder="`回复 ${parentComment?.replyUser || '...'}`"
             @keyup.enter="submitReply(parentComment?.id)"
@@ -233,16 +234,14 @@ const scrollContainer = ref<HTMLElement>()
 
 // --- Actions ---
 
-const { list, total, search, searchParams, goToPage, changePageSize } = usePageSearch(
-  getSecondCommentChildren,
-  {
+const { list, total, search, searchParams, goToPage, changePageSize, refresh, loading } =
+  usePageSearch(getSecondCommentChildren, {
     defaultParams: {
       articleId: articleId,
       pid: 0,
     },
     immediate: false,
-  },
-)
+  })
 
 const open = async (item: CommentItemDto) => {
   //   const { data } = await getSecondCommentChildren({

src/views/homePage/askTab/index.vue

@@ -109,9 +109,10 @@
                   </el-button>
 
                   <!-- 回答按钮保持不变 -->
+                  <!-- 当前最热评论的评论有几条 -->
                   <el-button size="small" plain @click.stop="handleComment(item, index)">
                     <el-icon><Edit /></el-icon>
-                    回答
+                    {{ item.cultureCommentListVo?.childNum || 0 }}条评论
                   </el-button>
 
                   <ActionMore class="ml-4" :articleDetail="item" />
@@ -121,13 +122,13 @@
               <!-- 右侧：统计信息 -->
               <div class="flex items-center">
                 <!-- 浏览量 -->
-                <el-button text class="flex items-center gap-2 text-gray-500">
+                <!-- <el-button text class="flex items-center gap-2 text-gray-500">
                   <el-icon><View /></el-icon>
                   <span class="text-sm">{{ item.viewCount || 0 }}</span>
-                </el-button>
+                </el-button> -->
 
                 <!-- 收藏 -->
-                <el-button
+                <!-- <el-button
                   text
                   class="flex items-center gap-2 text-gray-500 transition-colors"
                   @click.stop="handleCollect(item)"
@@ -136,17 +137,17 @@
                   <span class="text-sm" :class="{ 'text-blue-500': item.hasCollect }">{{
                     item.collectionCount || 0
                   }}</span>
-                </el-button>
+                </el-button> -->
 
                 <!-- 评论 -->
-                <el-button
+                <!-- <el-button
                   text
                   class="flex items-center gap-2 text-gray-500 transition-colors"
                   @click.stop="handleComment(item, index)"
                 >
                   <el-icon><ChatDotRound /></el-icon>
-                  <span class="text-sm">{{ item.replyCount || 0 }}</span>
-                </el-button>
+                  <span class="text-sm">{{ item.cultureCommentListVo?.childNum || 0 }}</span>
+                </el-button> -->
               </div>
             </div>
             <Transition name="fade">
@@ -154,7 +155,7 @@
                 v-show="item.showComment"
                 :ref="(e) => (commentRefList[index] = e as InstanceType<typeof Comment>)"
                 :id="item.id"
-                :total="item.replyCount"
+                :total="item.cultureCommentListVo?.childNum || 0"
                 :defaultSize="5"
                 :isReal="0"
                 :immediate="false"
@@ -211,19 +212,14 @@
 
 <script setup lang="ts">
 import Tabs from '@/components/common/Tabs'
-import { Star, View, ChatDotRound, Refresh } from '@element-plus/icons-vue'
+import { Refresh } from '@element-plus/icons-vue'
 import Comment from '@/components/common/Comment/index.vue'
 import { useScrollTop, usePageSearch } from '@/hooks'
 import { TABS_REF_KEY } from '@/constants'
 import PublishBox from '@/components/common/PublishBox/index.vue'
 import { ArticleTypeEnum } from '@/constants'
 import dayjs from 'dayjs'
-import {
-  getArticleList,
-  addOrCanceArticlelCollect,
-  addOrCancelToAnswerList,
-  getSecondCommentList,
-} from '@/api'
+import { getArticleList, addOrCanceArticlelCollect, addOrCancelToAnswerList } from '@/api'
 import type { ArticleItemDto } from '@/api/article/types'
 import { useQuestionStore } from '@/stores/question'
 import ActionMore from '@/components/common/ActionMore/index.vue'
@@ -271,7 +267,7 @@ const handleComment = (item: ArticleItemDto, index: number) => {
 }
 
 const handleCommentSuccess = (item: ArticleItemDto) => {
-  item.replyCount++
+  item.cultureCommentListVo.childNum++
   // 同时更新下
   // 如果已经添加了回答 则改为未添加 并且更新问题数量
   if (item.hasAddQuestion) {

src/views/homePage/yaTab/components/practiceList.vue

@@ -6,18 +6,26 @@
     <!-- 标签导航 -->
     <div class="bg-white p-4 mb-6 rounded-lg shadow-sm">
       <div class="flex flex-wrap gap-2 mb-2">
-        <el-tag v-for="tag in filterOptions" :key="tag.id"
+        <el-tag
+          v-for="tag in filterOptions"
+          :key="tag.id"
           :type="tag.id === searchParams.sortLogic ? 'primary' : 'info'"
-          :effect="tag.id === searchParams.sortLogic ? 'dark' : 'plain'" class="cursor-pointer"
-          @click="toggleFilter(tag.id)">
+          :effect="tag.id === searchParams.sortLogic ? 'dark' : 'plain'"
+          class="cursor-pointer"
+          @click="toggleFilter(tag.id)"
+        >
           {{ tag.title }}
         </el-tag>
       </div>
       <div class="flex flex-wrap gap-2">
-        <el-tag v-for="tag in tagList" :key="tag.id"
+        <el-tag
+          v-for="tag in tagList"
+          :key="tag.id"
           :type="searchParams.tagIdList?.includes(tag.id) ? 'primary' : 'info'"
-          :effect="searchParams.tagIdList?.includes(tag.id) ? 'dark' : 'plain'" class="cursor-pointer"
-          @click="toggleTag(tag.id)">
+          :effect="searchParams.tagIdList?.includes(tag.id) ? 'dark' : 'plain'"
+          class="cursor-pointer"
+          @click="toggleTag(tag.id)"
+        >
           {{ tag.title }}
         </el-tag>
       </div>
@@ -33,40 +41,51 @@
             {{ filterText }}
           </h2>
         </div>
-        <div class="text-#999 cursor-pointer text-sm" @click="
-          router.push({
-            path: '/searchPage',
-            query: {
-              type: ArticleTypeEnum.PRACTICE,
-            },
-          })
-          ">
+        <div
+          class="text-#999 cursor-pointer text-sm"
+          @click="
+            router.push({
+              path: '/searchPage',
+              query: {
+                type: ArticleTypeEnum.PRACTICE,
+              },
+            })
+          "
+        >
           查看更多 >>
         </div>
       </div>
       <div class="divide-y bg-#fff">
-        <div @click="openArticleDetail(item.id)" v-for="item in list" :key="item.id"
-          class="p-4 hover:bg-gray-50 transition-colors cursor-pointer pl-8" >
-          <div class="flex gap-3 items-center h-100%" style="border-bottom: 1.5px solid #ddd;">
+        <div
+          @click="openArticleDetail(item.id)"
+          v-for="item in list"
+          :key="item.id"
+          class="p-4 hover:bg-gray-50 transition-colors cursor-pointer pl-8"
+        >
+          <div class="flex gap-3 items-center h-100%" style="border-bottom: 1.5px solid #ddd">
             <!-- 左侧内容 -->
             <div class="flex-1">
-              <h1 class="font-medium text-gray-900 mb-2 leading-relaxed line-clamp-1 text-18px">
+              <h1 class="font-medium text-gray-900 mb-2 leading-relaxed line-clamp-1 text-lg">
                 {{ item.title }}
               </h1>
 
               <!-- 带图片的内容 -->
-              <div class="flex gap-3 mb-3 align-center" style="border-right: 1.5px solid #ddd;">
-                <img v-if="item.faceUrl" :src="item.faceUrl" :alt="item.title"
-                  class="w-40 h-25 object-cover rounded-lg flex-shrink-0" />
+              <div class="flex gap-3 mb-2 align-center">
+                <img
+                  v-if="item.faceUrl"
+                  :src="item.faceUrl"
+                  :alt="item.title"
+                  class="w-40 h-25 object-cover rounded-lg flex-shrink-0"
+                />
                 <div class="flex-1 mr-4">
-                  <div class="text-gray-600 text-sm leading-relaxed line-clamp-4">
+                  <div class="text-gray-600 text-base leading-relaxed line-clamp-4">
                     {{ item.content }}
                   </div>
                 </div>
               </div>
 
               <!-- 互动数据 -->
-              <div class="flex items-center gap-5 text-gray-400 text-base mb-3">
+              <div class="flex items-center gap-5 text-gray-400 text-sm mb-2">
                 <div class="flex items-center gap-1">
                   <el-icon class="text-sm">
                     <View />
@@ -111,14 +130,23 @@
 
           <!-- 右侧：分页器 -->
           <div class="right">
-            <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
-              <el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
-                :page-sizes="[5, 20, 1]" layout="prev, pager, next, jumper, total" :total="total"
-                class="custom-pagination" @current-change="
+            <div
+              class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+            >
+              <el-pagination
+                v-model:current-page="searchParams.current"
+                v-model:page-size="searchParams.size"
+                :page-sizes="[5, 20, 1]"
+                layout="prev, pager, next, jumper, total"
+                :total="total"
+                class="custom-pagination"
+                @current-change="
                   (e) => {
-                    ; (handleBackTop(), goToPage(e))
+                    ;(handleBackTop(), goToPage(e))
                   }
-                " @size-change="changePageSize" />
+                "
+                @size-change="changePageSize"
+              />
             </div>
           </div>
         </div>