【需求 17679】 perf: 最新最热展示优化

src/views/columnSearchList/index.vue

@@ -5,19 +5,15 @@
       <div class="p-4">
         <div class="flex items-center gap-2 justify-between">
           <el-button link @click="router.back()" class="text-gray-600 hover:text-primary">
-            <el-icon class="mr-1"><ArrowLeft /></el-icon>
+            <el-icon class="mr-1">
+              <ArrowLeft />
+            </el-icon>
             返回
           </el-button>
 
           <div class="w-auto flex items-center gap-2">
-            <el-input
-              v-model="searchParams.title"
-              placeholder="输入关键词搜索"
-              class="w-400px"
-              size="default"
-              @keyup.enter="handleSearch"
-              clearable
-            />
+            <el-input v-model="searchParams.title" placeholder="输入关键词搜索" class="w-400px" size="default"
+              @keyup.enter="handleSearch" clearable />
 
             <el-button type="primary" @click="handleSearch">搜索</el-button>
           </div>
@@ -48,35 +44,20 @@
           </template> -->
         </div>
         <div class="text-gray-500 text-14px">
-          <el-select
-            v-model="searchParams.sortLogic"
-            placeholder="请选择排序方式"
-            class="w-100px!"
-            @change="changeSort"
-          >
-            <el-option
-              v-for="sort in sortOptions"
-              :key="sort.value"
-              :label="sort.label"
-              :value="sort.value"
-            />
-          </el-select>
+          <el-radio-group size="default" v-model="searchParams.sortLogic" @change="changeSort">
+            <el-radio-button v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
+          </el-radio-group>
         </div>
       </div>
 
       <div v-show="list.length">
         <div class="space-y-4">
-          <div
-            v-for="item in list"
-            :key="item.articleId"
+          <div v-for="item in list" :key="item.articleId"
             class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
-            @click="handleClick(item)"
-          >
+            @click="handleClick(item)">
             <!-- 封面图 -->
-            <div
-              v-if="item.faceUrl"
-              class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
-            >
+            <div v-if="item.faceUrl"
+              class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative">
               <img :src="item.faceUrl" class="w-full h-full object-cover" />
               <!-- <div
                 v-if="item.type === ArticleTypeEnum.VIDEO"
@@ -144,20 +125,13 @@
               <!-- 右侧：分页器 -->
               <div class="right">
                 <div class="pr-4">
-                  <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="
+                  <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>
@@ -219,7 +193,7 @@ const handleClick = (item: SearchMoreColumnItemDto) => {
   window.open(`/articleDetail/${item.articleId}`)
 }
 
-onActivated(() => {})
+onActivated(() => { })
 </script>
 
 <style scoped></style>

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

@@ -31,9 +31,9 @@
     </div>
     <div v-loading="loadingMore" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
       <div
-        @click="router.push(`/videoDetail/${item.articleId}`)"
+        @click="handleOpenPage(item.articleId)  "
         v-for="item in listMore"
-        :key="item.id"
+        :key="item.articleId"
         class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
       >
         <div class="relative overflow-hidden">
@@ -98,9 +98,11 @@
             {{ item.title }}
           </h3>
           <div class="flex items-center justify-between text-gray-500 text-xs">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2 max-w-55%">
               <img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
+              <el-tooltip :content="item.showName" placement="top">
                 <span class="font-medium">{{ item.showName }}</span>
+              </el-tooltip>
             </div>
             <span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
           </div>
@@ -144,7 +146,7 @@
                 v-for="i in item.yaColumnVoList"
                 :key="i.articleId"
                 class="group cursor-pointer"
-                @click="router.push(`/videoDetail/${i.articleId}`)"
+                @click="handleOpenPage(i.articleId)"
               >
                 <div class="relative mb-3 overflow-hidden rounded-lg">
                   <img
@@ -159,10 +161,10 @@
                     <div class="text-12px text-#000 line-height-12px">推荐</div>
                   </div>
                 </div>
-                <h3 class="text font-medium text-gray-800 mb-2 transition-colors">
+                <h3 class="text font-medium text-gray-800 mb-2 transition-colors line-clamp-1">
                   {{ i.title }}
                 </h3>
-                <p class="text-sm text-gray-500 mb-3 line-clamp-2">
+                <p class="text-sm text-gray-500 mb-3 line-clamp-1">
                   {{ i.content }}
                 </p>
                 <div class="flex items-center justify-between text-xs text-gray-500">
@@ -240,7 +242,7 @@
 import { View, ChatDotRound, Star } from '@element-plus/icons-vue'
 import { getVideoList, getVideoListViewMore } from '@/api'
 import { usePageSearch, useScrollTop } from '@/hooks'
-import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
+import { TABS_REF_KEY } from '@/constants'
 import { useRouter } from 'vue-router'
 import dayjs from 'dayjs'
 
@@ -249,8 +251,8 @@ const tabsRef = inject(TABS_REF_KEY)
 const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
 
 const tabs = [
-  { label: '最多播放', sortLogic: 0 },
   { label: '最新发布', sortLogic: 1 },
+  { label: '最多播放', sortLogic: 0 },
 ]
 
 const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch(
@@ -272,7 +274,7 @@ const {
 } = usePageSearch(getVideoListViewMore, {
   defaultSize: 3,
   defaultParams: {
-    sortLogic: 0,
+    sortLogic: 1,
   },
   immediate: false,
 })
@@ -280,6 +282,11 @@ const changeSort = (sortLogic: number) => {
   searchParamsMore.value.sortLogic = sortLogic
   refreshMore()
 }
+
+const handleOpenPage = (articleId: number) => {
+  window.open(`/videoDetail/${articleId}`)
+}
+
 defineExpose({
   refresh: () => {
     // searchParams.value.current = 0

src/views/searchPage/index.vue

@@ -5,19 +5,15 @@
       <div class="p-4">
         <div class="flex items-center gap-2 justify-between">
           <el-button link @click="router.back()" class="text-gray-600 hover:text-primary">
-            <el-icon class="mr-1"><ArrowLeft /></el-icon>
+            <el-icon class="mr-1">
+              <ArrowLeft />
+            </el-icon>
             返回
           </el-button>
 
           <div class="w-auto flex items-center gap-2">
-            <el-input
-              v-model="searchParams.title"
-              placeholder="输入关键词搜索"
-              class="w-400px"
-              size="default"
-              @keyup.enter="handleSearch"
-              clearable
-            />
+            <el-input v-model="searchParams.title" placeholder="输入关键词搜索" class="w-400px" size="default"
+              @keyup.enter="handleSearch" clearable />
 
             <el-button type="primary" @click="handleSearch">搜索</el-button>
           </div>
@@ -29,34 +25,19 @@
         <div class="flex items-center gap-2">
           <span class="text-gray-600 text-14px">分类：</span>
           <div class="flex gap-2">
-            <button
-              v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]"
-              :key="sort.value"
-              class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer"
-              :class="{
+            <button v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]" :key="sort.value"
+              class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer" :class="{
                 'text-blue-600 bg-blue-50': searchParams.type === sort.value,
                 'text-gray-600 hover:text-blue-600': searchParams.type !== sort.value,
-              }"
-              @click="changeType(sort.value)"
-            >
+              }" @click="changeType(sort.value)">
               {{ sort.label }}
             </button>
           </div>
         </div>
         <div class="text-gray-500 text-14px">
-          <el-select
-            v-model="searchParams.sortLogic"
-            placeholder="请选择排序方式"
-            class="w-100px!"
-            @change="changeSort"
-          >
-            <el-option
-              v-for="sort in sortOptions"
-              :key="sort.value"
-              :label="sort.label"
-              :value="sort.value"
-            />
-          </el-select>
+          <el-radio-group size="default" v-model="searchParams.sortLogic" @change="changeSort">
+            <el-radio-button v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
+          </el-radio-group>
         </div>
       </div>
       <!-- 二级分类 -->
@@ -86,22 +67,15 @@
 
       <div v-show="list.length">
         <div class="space-y-4">
-          <div
-            v-for="item in list"
-            :key="item.id"
+          <div v-for="item in list" :key="item.id"
             class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
-            @click="handleClick(item)"
-          >
+            @click="handleClick(item)">
             <!-- 封面图 -->
-            <div
-              v-if="item.faceUrl"
-              class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
-            >
+            <div v-if="item.faceUrl"
+              class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative">
               <img :src="item.faceUrl" class="w-full h-full object-cover" />
-              <div
-                v-if="item.type === ArticleTypeEnum.VIDEO"
-                class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
-              >
+              <div v-if="item.type === ArticleTypeEnum.VIDEO"
+                class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded">
                 {{ item.videoDuration }}
               </div>
             </div>
@@ -164,20 +138,13 @@
               <!-- 右侧：分页器 -->
               <div class="right">
                 <div class="pr-4">
-                  <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="
+                  <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>

src/views/videoSearchList/index.vue

@@ -5,19 +5,14 @@
       <div class="p-4">
         <div class="flex items-center gap-2 justify-between">
           <el-button link @click="router.back()" class="text-gray-600 hover:text-primary">
-            <el-icon class="mr-1"><ArrowLeft /></el-icon>
+            <el-icon class="mr-1">
+              <ArrowLeft />
+            </el-icon>
             返回
           </el-button>
-
           <div class="w-auto flex items-center gap-2">
-            <el-input
-              v-model="searchParams.title"
-              placeholder="输入关键词搜索"
-              class="w-400px"
-              size="default"
-              @keyup.enter="handleSearch"
-              clearable
-            />
+            <el-input v-model="searchParams.title" placeholder="输入关键词搜索" class="w-400px" size="default"
+              @keyup.enter="handleSearch" clearable />
 
             <el-button type="primary" @click="handleSearch">搜索</el-button>
           </div>
@@ -25,11 +20,9 @@
       </div>
 
       <!-- 一级分类 -->
-      <div class="flex items-center justify-between mb-6 border-b border-gray-200 p-4">
+      <div class="flex items-center justify-between border-b border-gray-200 p-4">
         <div class="flex items-center gap-2">
-          <span v-if="columnTitle" class="text-gray-600 text-base"
-            >当前栏目：{{ columnTitle }}</span
-          >
+          <span v-if="columnTitle" class="text-gray-600 text-base">当前栏目：{{ columnTitle }}</span>
 
           <!-- <template v-else>
             <span class="text-gray-600 text-14px">分类：</span>
@@ -50,39 +43,22 @@
           </template> -->
         </div>
         <div class="text-gray-500 text-14px">
-          <el-select
-            v-model="searchParams.sortLogic"
-            placeholder="请选择排序方式"
-            class="w-100px!"
-            @change="changeSort"
-          >
-            <el-option
-              v-for="sort in sortOptions"
-              :key="sort.value"
-              :label="sort.label"
-              :value="sort.value"
-            />
-          </el-select>
+          <el-radio-group size="default" v-model="searchParams.sortLogic" @change="changeSort">
+            <el-radio-button v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
+          </el-radio-group>
         </div>
       </div>
 
       <div v-show="list.length">
         <div class="space-y-4">
-          <div
-            v-for="item in list"
-            :key="item.articleId"
+          <div v-for="item in list" :key="item.articleId"
             class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
-            @click="handleClick(item)"
-          >
+            @click="handleClick(item)">
             <!-- 封面图 -->
-            <div
-              v-if="item.faceUrl"
-              class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
-            >
+            <div v-if="item.faceUrl"
+              class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative">
               <img :src="item.faceUrl" class="w-full h-full object-cover" />
-              <div
-                class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
-              >
+              <div class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded">
                 {{ item.videoDuration }}
               </div>
             </div>
@@ -145,20 +121,13 @@
               <!-- 右侧：分页器 -->
               <div class="right">
                 <div class="pr-4">
-                  <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="
+                  <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>