【需求 17679】 perf: 优化个人中心页面相关内容

src/api/user/index.ts

@@ -11,6 +11,12 @@ import type {
   SelfPraiseSearchParams,
   SelfPraiseDetailDto,
   OfficialAccountItemDto,
+  SelfCaseItemDto,
+  SelfCommentItemDto,
+  SelfCommentSearchParams,
+  SelfDraftSearchParams,
+  SelfTaskSearchParams,
+  SelfTaskItemDto,
 } from './types'
 import type { BackendServicePageResult, PageSearchParams } from '@/utils/request/types'
 
@@ -50,7 +56,7 @@ export const getSelfPublishList = (data: SelfPublishSearchParams) => {
 /**
  * 获取我的草稿列表
  */
-export const getSelfDraftList = (data: PageSearchParams) => {
+export const getSelfDraftList = (data: SelfDraftSearchParams) => {
   return service.request<BackendServicePageResult<SelfPublishDetailDto>>({
     url: '/api/personalCenter/selfDraft',
     method: 'POST',
@@ -84,15 +90,7 @@ export const getSelfPraiseList = (data: SelfPraiseSearchParams) => {
  * 获取我的案例库列表
  */
 export const getSelfCaseList = (data: PageSearchParams) => {
-  return service.request<
-    BackendServicePageResult<{
-      id: number
-      title: string
-      content: string
-      createTime: string
-      updateTime: string
-    }>
-  >({
+  return service.request<BackendServicePageResult<SelfCaseItemDto>>({
     url: '/api/personalCenter/selfCase',
     method: 'POST',
     data,
@@ -102,8 +100,8 @@ export const getSelfCaseList = (data: PageSearchParams) => {
 /**
  * 获取我的任务列表
  */
-export const getSelfTaskList = (data: PageSearchParams) => {
-  return service.request<BackendServicePageResult<SelfPublishDetailDto>>({
+export const getSelfTaskList = (data: SelfTaskSearchParams) => {
+  return service.request<BackendServicePageResult<SelfTaskItemDto>>({
     url: '/api/personalCenter/selfTaskConfig',
     method: 'POST',
     data,
@@ -113,8 +111,8 @@ export const getSelfTaskList = (data: PageSearchParams) => {
 /**
  * 评论回复
  */
-export const getSelfCommentList = (data: PageSearchParams) => {
-  return service.request({
+export const getSelfCommentList = (data: SelfCommentSearchParams) => {
+  return service.request<BackendServicePageResult<SelfCommentItemDto>>({
     url: '/api/personalCenter/selfComment',
     method: 'POST',
     data,

src/api/user/types.ts

-import { ArticleTypeEnum, AuditStatusEnum, BooleanFlag } from '@/constants'
+import {
+  ArticleTypeEnum,
+  AuditStatusEnum,
+  BooleanFlag,
+  CommentTypeEnum,
+  TaskDateLimitTypeEnum,
+  TaskTypeEnum,
+} from '@/constants'
 import type { PageSearchParams } from '@/utils/request/types'
 
 export interface SelfPublishSearchParams extends PageSearchParams {
@@ -75,6 +82,11 @@ export interface SelfPraiseDetailDto {
   viewCount: number
 }
 
+//草稿搜索
+export interface SelfDraftSearchParams extends PageSearchParams {
+  type: ArticleTypeEnum
+}
+
 // 我的草稿 详情
 export interface SelfDraftDetailDto {
   id: number
@@ -126,7 +138,7 @@ export interface AuditListItemDto {
  */
 export interface AuditArticleDto {
   articleId: number
-  auditResult: Exclude<AuditStatusEnum, AuditStatusEnum.UNAUDITED>
+  auditResult: AuditStatusEnum
   auditRemark?: string
 }
 
@@ -171,3 +183,98 @@ export interface OfficialAccountItemDto {
   userId: number
   version: null
 }
+
+/**
+ * 我的案例库列表
+ */
+export interface SelfCaseItemDto {
+  caseType: string
+  content: string
+  createTime: number
+  createUser: number
+  cultureKeywordMain: string
+  cultureKeywordSecond: string
+  cultureRelation: number
+  dataSources: number
+  deptId: string
+  deptName: string
+  id: number
+  integrity: number
+  isDelete: number
+  isDispose: number
+  isUse: number
+  mainScene: string
+  minorScene: string
+  number: string
+  sceneKeywordMain: string
+  sceneKeywordSecond: string
+  sourceProject: string
+  sourceTime: number
+  sourceType: string
+  sourceUser: number
+  title: string
+  yearKeywordMain: null
+  yearKeywordSecond: null
+}
+
+/**
+ * 我的评论列表查询参数
+ */
+export interface SelfCommentSearchParams extends PageSearchParams {
+  messageType: CommentTypeEnum
+}
+
+/**
+ * 我的评论列表
+ */
+export interface SelfCommentItemDto {
+  articleId: number
+  avatar: string
+  children: null
+  content: string
+  createTime: number
+  createUserId: number
+  description: string
+  faceUrl: string
+  hasPraise: boolean
+  hiddenAvatar: string
+  hiddenName: string
+  id: number
+  isFeatured: boolean
+  isRecommend: boolean
+  isTop: boolean
+  pid: number
+  postPriseCount: number
+  region: string
+  regionHide: boolean
+  replyId: number
+  replyName: string
+  replyUser: string
+  title: string
+  type: string
+  userId: number
+  viewCount: number
+}
+
+// 我的任务
+export interface SelfTaskSearchParams extends PageSearchParams {
+  taskType: TaskTypeEnum
+}
+export interface SelfTaskItemDto {
+  completedTasks: number
+  currentCount: number
+  description: string
+  id: number
+  jumpUrl: string
+  limitCount: number
+  limitType: TaskDateLimitTypeEnum
+  periodKey: string
+  rewardType: number
+  rewardValue: number
+  status: number
+  svgName: string
+  taskKey: string
+  taskType: number
+  title: string
+  totalTasks: number
+}

src/views/auditArticle/index.vue

@@ -6,8 +6,20 @@
     <!-- 底部fixed -->
     <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg">
       <div class="max-w-7xl mx-auto px-6 py-4 flex justify-center items-center gap-4">
-        <el-button type="primary" @click="handleAgree" class="min-w-[120px]"> 通过 </el-button>
-        <el-button type="danger" @click="handleReject" class="min-w-[120px]"> 驳回 </el-button>
+        <el-button
+          type="primary"
+          @click="handleAudit(AuditStatusEnum.AGREED)"
+          class="min-w-[120px]"
+        >
+          通过
+        </el-button>
+        <el-button
+          type="danger"
+          @click="handleAudit(AuditStatusEnum.REJECTED)"
+          class="min-w-[120px]"
+        >
+          驳回
+        </el-button>
       </div>
     </div>
   </div>
@@ -18,37 +30,32 @@ import ArticleContent from '@/components/common/ArticleContent/index.vue'
 import { type ArticleItemDto } from '@/api'
 import { getArticleDetail, auditArticle } from '@/api'
 import { AuditStatusEnum } from '@/constants/enums'
-
+import type { AuditArticleDto } from '@/api'
 const route = useRoute()
 const router = useRouter()
 const id = route.params.id as string
 
 const articleDetail = ref({} as ArticleItemDto)
 const loading = ref(false)
-const handleAgree = async () => {
-  await auditArticle({
+
+const handleAudit = async (auditStatus: AuditStatusEnum) => {
+  const auditData: AuditArticleDto = {
     articleId: Number(id),
-    auditResult: AuditStatusEnum.AGREED,
-  })
-  ElMessage.success('审核通过')
-  router.push('/')
-}
+    auditResult: auditStatus,
+  }
+  if (auditStatus === AuditStatusEnum.REJECTED) {
+    const { value } = await ElMessageBox.prompt('请输入拒绝理由', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      inputPattern: /^\S+$/,
+      inputErrorMessage: '请输入拒绝理由',
+    })
 
-const handleReject = async () => {
-  const remark = await ElMessageBox.prompt('请输入审核驳回原因', '审核驳回', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-  })
-  if (!remark.value) {
-    ElMessage.warning('请输入审核驳回原因')
-    return
+    auditData.auditRemark = value
   }
-  await auditArticle({
-    articleId: Number(id),
-    auditResult: AuditStatusEnum.REJECTED,
-    auditRemark: remark.value,
-  })
-  ElMessage.success('审核驳回')
+  await auditArticle(auditData)
+  ElMessage.success('审核成功')
+  router.replace('/')
 }
 
 onMounted(async () => {

src/views/userPage/components/selfAudit.vue

@@ -2,21 +2,29 @@
   <div class="flex-1 flex flex-col" v-loading="loading">
     <!-- List Container -->
     <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.isAudit" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in auditTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
-
+      <div class="relative">
+        <el-tabs v-model="searchParams.isAudit" @tab-change="toggleTab">
+          <el-tab-pane
+            v-for="tab in auditTypeListOptions"
+            :key="tab.value"
+            :label="tab.label"
+            :name="tab.value"
+          />
+        </el-tabs>
+        <div class="absolute right-0 top-2.5 z-1000">
+          <el-icon
+            size="15"
+            class="cursor-pointer hover:rotate-180 transition-all duration-300"
+            @click="refresh"
+            ><Refresh
+          /></el-icon>
+        </div>
+      </div>
       <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
         <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
           <el-icon class="text-2xl text-gray-300"><Document /></el-icon>
         </div>
         <div class="text-gray-500 text-lg mb-2">暂无内容</div>
-        <div class="text-gray-400 text-sm">{{ getEmptyText() }}</div>
       </div>
 
       <div v-else class="space-y-4">
@@ -60,6 +68,10 @@
             v-if="searchParams.isAudit === AuditStatusEnum.UNAUDITED"
             class="flex items-center text-gray-400 text-sm ml-4"
           >
+            <el-button type="info" link @click="router.push(`/auditArticle/${item.id}`)"
+              >去详情页审核</el-button
+            >
+
             <el-button
               type="primary"
               link
@@ -112,9 +124,12 @@ import { auditTypeListOptions } from '@/constants/options'
 import dayjs from 'dayjs'
 import { AuditStatusEnum } from '@/constants'
 import type { AuditArticleDto } from '@/api'
+import type { TabPaneName } from 'element-plus'
+
+const router = useRouter()
 
-const toggleTab = (key: AuditStatusEnum) => {
-  searchParams.value.isAudit = key
+const toggleTab = (key: TabPaneName) => {
+  searchParams.value.isAudit = key as AuditStatusEnum
   refresh()
 }
 
@@ -129,20 +144,20 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
 )
 
 const handleAudit = async (data: AuditArticleDto) => {
+  if (data.auditResult === AuditStatusEnum.REJECTED) {
+    const { value } = await ElMessageBox.prompt('请输入拒绝理由', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      inputPattern: /^\S+$/,
+      inputErrorMessage: '请输入拒绝理由',
+    })
+
+    data.auditRemark = value
+  }
+
   await auditArticle(data)
   ElMessage.success('审核成功')
-  refresh()
-}
 
-const getEmptyText = () => {
-  const emptyTexts: Record<string, string> = {
-    posts: '还没有发布任何帖子',
-    videos: '还没有上传任何视频',
-    questions: '还没有提出任何问题',
-    articles: '还没有发表任何专栏文章',
-    practice: '还没有分享任何实践经验',
-    interviews: '还没有参与任何专访',
-  }
-  return emptyTexts[searchParams.value.isAudit] || '暂无数据'
+  refresh()
 }
 </script>

src/views/userPage/components/selfCase.vue

@@ -7,7 +7,6 @@
           <el-icon class="text-2xl text-gray-300"><Document /></el-icon>
         </div>
         <div class="text-gray-500 text-lg mb-2">暂无内容</div>
-        <div class="text-gray-400 text-sm">{{ getEmptyText() }}</div>
       </div>
 
       <div v-else class="space-y-4">
@@ -23,10 +22,10 @@
               <span class="mr-2">
                 {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
               </span>
-              <span class="mr-2">浏览 {{ item.viewCount }}</span>
+              <!-- <span class="mr-2">浏览 {{ item.viewCount }}</span>
               <span class="mr-2">点赞 {{ item.replyCount }}</span>
               <span class="mr-2">评论 {{ item.collectionCount }}</span>
-              <span class="mr-2">收藏 {{ item.praiseCount }}</span>
+              <span class="mr-2">收藏 {{ item.praiseCount }}</span> -->
             </div>
           </div>
 
@@ -64,35 +63,8 @@ import { Document } from '@element-plus/icons-vue'
 
 import { getSelfCaseList } from '@/api'
 import { usePageSearch } from '@/hooks'
-import { articleTypeListOptions } from '@/constants/options'
 import dayjs from 'dayjs'
-import { ArticleTypeEnum } from '@/constants/enums'
 
-const toggleTab = (key: string) => {
-  searchParams.value.type = key
-  refresh()
-}
-
-// State
-const { list, loading, searchParams, total, refresh, goToPage, changePageSize } =
+const { list, loading, searchParams, total, goToPage, changePageSize } =
   usePageSearch(getSelfCaseList)
-
-// Computed
-const paginatedList = computed(() => {
-  const start = (searchParams.value.current - 1) * searchParams.value.size
-  const end = start + searchParams.value.size
-  return list.value.slice(start, end)
-})
-
-const getEmptyText = () => {
-  const emptyTexts: Record<string, string> = {
-    posts: '还没有发布任何帖子',
-    videos: '还没有上传任何视频',
-    questions: '还没有提出任何问题',
-    articles: '还没有发表任何专栏文章',
-    practice: '还没有分享任何实践经验',
-    interviews: '还没有参与任何专访',
-  }
-  return emptyTexts[searchParams.type] || '暂无数据'
-}
 </script>

src/views/userPage/components/selfCollect.vue

 <template>
   <div class="flex-1 flex flex-col" v-loading="loading">
     <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in articleTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
+      <div class="relative">
+        <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
+          <el-tab-pane
+            v-for="tab in articleTypeListOptions"
+            :key="tab.value"
+            :label="tab.label"
+            :name="tab.value"
+          />
+        </el-tabs>
+        <div class="absolute right-0 top-2.5 z-1000">
+          <el-icon
+            size="15"
+            class="cursor-pointer hover:rotate-180 transition-all duration-300"
+            @click="refresh"
+            ><Refresh
+          /></el-icon>
+        </div>
+      </div>
 
       <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
         <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
@@ -64,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Document } from '@element-plus/icons-vue'
+import { Document, Refresh } from '@element-plus/icons-vue'
 
 import { getSelfCollectList } from '@/api'
 import { usePageSearch } from '@/hooks'

src/views/userPage/components/selfComment.vue

@@ -2,14 +2,24 @@
   <div class="flex-1 flex flex-col" v-loading="loading">
     <!-- List Container -->
     <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.messageType" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in commentTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
+      <div class="relative">
+        <el-tabs v-model="searchParams.messageType" @tab-change="toggleTab">
+          <el-tab-pane
+            v-for="tab in commentTypeListOptions"
+            :key="tab.value"
+            :label="tab.label"
+            :name="tab.value"
+          />
+        </el-tabs>
+        <div class="absolute right-0 top-2.5 z-1000">
+          <el-icon
+            size="15"
+            class="cursor-pointer hover:rotate-180 transition-all duration-300"
+            @click="refresh"
+            ><Refresh
+          /></el-icon>
+        </div>
+      </div>
 
       <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
         <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
@@ -31,10 +41,10 @@
               <span class="mr-2">
                 {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
               </span>
-              <span class="mr-2">浏览 {{ item.viewCount }}</span>
+              <!-- <span class="mr-2">浏览 {{ item.viewCount }}</span>
               <span class="mr-2">点赞 {{ item.replyCount }}</span>
               <span class="mr-2">评论 {{ item.collectionCount }}</span>
-              <span class="mr-2">收藏 {{ item.praiseCount }}</span>
+              <span class="mr-2">收藏 {{ item.praiseCount }}</span> -->
             </div>
           </div>
 
@@ -68,15 +78,16 @@
 </template>
 
 <script lang="ts" setup>
-import { Document } from '@element-plus/icons-vue'
+import { Document, Refresh } from '@element-plus/icons-vue'
 import { getSelfCommentList, deleteComment } from '@/api'
 import { usePageSearch } from '@/hooks'
 import { commentTypeListOptions } from '@/constants/options'
 import dayjs from 'dayjs'
 import { CommentTypeEnum } from '@/constants/enums'
+import type { TabPaneName } from 'element-plus'
 
-const toggleTab = (key: number) => {
-  searchParams.value.messageType = key
+const toggleTab = (key: TabPaneName) => {
+  searchParams.value.messageType = key as CommentTypeEnum
   refresh()
 }
 

src/views/userPage/components/selfDraft copy.vue

-<template>
-  <div class="flex-1 flex flex-col" v-loading="loading">
-    <!-- List Container -->
-    <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in articleTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
-
-      <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
-        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
-          <el-icon class="text-2xl text-gray-300"><Document /></el-icon>
-        </div>
-        <div class="text-gray-500 text-lg mb-2">暂无内容</div>
-        <div class="text-gray-400 text-sm">{{ getEmptyText() }}</div>
-      </div>
-
-      <div v-else class="space-y-4">
-        <div
-          v-for="item in list"
-          :key="item.id"
-          class="flex items-center p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
-        >
-          <!-- Content -->
-          <div class="flex-1 min-w-0">
-            <div class="text-gray-900 font-medium truncate">{{ item.title }}</div>
-            <div class="text-gray-500 text-sm mt-1 truncate">
-              <span class="mr-2">
-                {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
-              </span>
-              <span class="mr-2">浏览 {{ item.viewCount }}</span>
-              <span class="mr-2">点赞 {{ item.replyCount }}</span>
-              <span class="mr-2">评论 {{ item.collectionCount }}</span>
-              <span class="mr-2">收藏 {{ item.praiseCount }}</span>
-            </div>
-          </div>
-
-          <!-- Meta Info -->
-          <div class="flex items-center text-gray-400 text-sm ml-4">
-            <el-button type="primary" link>编辑</el-button>
-            <el-button type="danger" link>删除</el-button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="list.length"
-      class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
-    >
-      <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"
-          @size-change="changePageSize"
-          @current-change="goToPage"
-          :page-sizes="[10, 20, 30, 40]"
-          layout="prev, pager, next, jumper, total"
-          :total="total"
-          class="custom-pagination"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Document } from '@element-plus/icons-vue'
-
-import { getSelfDraftList } from '@/api'
-import { usePageSearch } from '@/hooks'
-import { articleTypeListOptions } from '@/constants/options'
-import dayjs from 'dayjs'
-import { ArticleTypeEnum } from '@/constants/enums'
-
-const toggleTab = (key: string) => {
-  searchParams.value.type = key
-  refresh()
-}
-
-// State
-const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
-  getSelfDraftList,
-  {
-    defaultParams: {
-      type: ArticleTypeEnum.POST,
-    },
-  },
-)
-
-// Computed
-const paginatedList = computed(() => {
-  const start = (searchParams.value.current - 1) * searchParams.value.size
-  const end = start + searchParams.value.size
-  return list.value.slice(start, end)
-})
-
-const getEmptyText = () => {
-  const emptyTexts: Record<string, string> = {
-    posts: '还没有发布任何帖子',
-    videos: '还没有上传任何视频',
-    questions: '还没有提出任何问题',
-    articles: '还没有发表任何专栏文章',
-    practice: '还没有分享任何实践经验',
-    interviews: '还没有参与任何专访',
-  }
-  return emptyTexts[searchParams.type] || '暂无数据'
-}
-</script>

src/views/userPage/components/selfDraft.vue

@@ -2,21 +2,30 @@
   <div class="flex-1 flex flex-col" v-loading="loading">
     <!-- List Container -->
     <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in articleTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
+      <div class="relative">
+        <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
+          <el-tab-pane
+            v-for="tab in articleTypeListOptions"
+            :key="tab.value"
+            :label="tab.label"
+            :name="tab.value"
+          />
+        </el-tabs>
+        <div class="absolute right-0 top-2.5 z-1000">
+          <el-icon
+            size="15"
+            class="cursor-pointer hover:rotate-180 transition-all duration-300"
+            @click="refresh"
+            ><Refresh
+          /></el-icon>
+        </div>
+      </div>
 
       <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
         <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
           <el-icon class="text-2xl text-gray-300"><Document /></el-icon>
         </div>
         <div class="text-gray-500 text-lg mb-2">暂无内容</div>
-        <div class="text-gray-400 text-sm">{{ getEmptyText() }}</div>
       </div>
 
       <div v-else class="space-y-4">
@@ -32,10 +41,10 @@
               <span class="mr-2">
                 {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
               </span>
-              <span class="mr-2">浏览 {{ item.viewCount }}</span>
+              <!-- <span class="mr-2">浏览 {{ item.viewCount }}</span>
               <span class="mr-2">点赞 {{ item.replyCount }}</span>
               <span class="mr-2">评论 {{ item.collectionCount }}</span>
-              <span class="mr-2">收藏 {{ item.praiseCount }}</span>
+              <span class="mr-2">收藏 {{ item.praiseCount }}</span> -->
             </div>
           </div>
 
@@ -69,20 +78,20 @@
 </template>
 
 <script lang="ts" setup>
-import { Document } from '@element-plus/icons-vue'
+import { Document, Refresh } from '@element-plus/icons-vue'
 
 import { getSelfDraftList } from '@/api'
 import { usePageSearch } from '@/hooks'
 import { articleTypeListOptions } from '@/constants/options'
 import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
+import type { TabPaneName } from 'element-plus'
 
-const toggleTab = (key: string) => {
-  searchParams.value.type = key
+const toggleTab = (key: TabPaneName) => {
+  searchParams.value.type = key as ArticleTypeEnum
   refresh()
 }
 
-// State
 const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
   getSelfDraftList,
   {
@@ -91,23 +100,4 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     },
   },
 )
-
-// Computed
-const paginatedList = computed(() => {
-  const start = (searchParams.value.current - 1) * searchParams.value.size
-  const end = start + searchParams.value.size
-  return list.value.slice(start, end)
-})
-
-const getEmptyText = () => {
-  const emptyTexts: Record<string, string> = {
-    posts: '还没有发布任何帖子',
-    videos: '还没有上传任何视频',
-    questions: '还没有提出任何问题',
-    articles: '还没有发表任何专栏文章',
-    practice: '还没有分享任何实践经验',
-    interviews: '还没有参与任何专访',
-  }
-  return emptyTexts[searchParams.type] || '暂无数据'
-}
 </script>

src/views/userPage/components/selfPraise.vue

 <template>
   <div class="flex-1 flex flex-col" v-loading="loading">
     <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in articleTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
-
+      <div class="relative">
+        <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
+          <el-tab-pane
+            v-for="tab in articleTypeListOptions"
+            :key="tab.value"
+            :label="tab.label"
+            :name="tab.value"
+          />
+        </el-tabs>
+        <div class="absolute right-0 top-2.5 z-1000">
+          <el-icon
+            size="15"
+            class="cursor-pointer hover:rotate-180 transition-all duration-300"
+            @click="refresh"
+            ><Refresh
+          /></el-icon>
+        </div>
+      </div>
       <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
         <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
           <el-icon class="text-2xl text-gray-300"><Document /></el-icon>
@@ -29,10 +38,10 @@
               <span class="mr-2">
                 {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
               </span>
-              <span class="mr-2">浏览 {{ item.viewCount }}</span>
+              <!-- <span class="mr-2">浏览 {{ item.viewCount }}</span>
               <span class="mr-2">点赞 {{ item.replyCount }}</span>
               <span class="mr-2">评论 {{ item.collectionCount }}</span>
-              <span class="mr-2">收藏 {{ item.praiseCount }}</span>
+              <span class="mr-2">收藏 {{ item.praiseCount }}</span> -->
             </div>
           </div>
 

src/views/userPage/components/selfPublish.vue

 <template>
   <div class="flex-1 flex flex-col" v-loading="loading">
     <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in articleTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
+      <div class="relative">
+        <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
+          <el-tab-pane
+            v-for="tab in articleTypeListOptions"
+            :key="tab.value"
+            :label="tab.label"
+            :name="tab.value"
+          />
+        </el-tabs>
+        <div class="absolute right-0 top-2.5 z-1000">
+          <el-icon
+            size="15"
+            class="cursor-pointer hover:rotate-180 transition-all duration-300"
+            @click="refresh"
+            ><Refresh
+          /></el-icon>
+        </div>
+      </div>
 
       <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
         <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
@@ -65,7 +75,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Document } from '@element-plus/icons-vue'
+import { Document, Refresh } from '@element-plus/icons-vue'
 import { getSelfPublishList, deleteArticle } from '@/api'
 import { usePageSearch } from '@/hooks'
 import { articleTypeListOptions } from '@/constants/options'

src/views/userPage/components/selfTask.vue

@@ -2,14 +2,24 @@
   <div class="flex-1 flex flex-col" v-loading="loading">
     <!-- List Container -->
     <div class="flex-1 p-4 pt-1">
-      <el-tabs v-model="searchParams.taskType" @tab-change="toggleTab">
-        <el-tab-pane
-          v-for="tab in taskTypeListOptions"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
-      </el-tabs>
+      <div class="relative">
+        <el-tabs v-model="searchParams.taskType" @tab-change="toggleTab">
+          <el-tab-pane
+            v-for="tab in taskTypeListOptions"
+            :key="tab.value"
+            :label="tab.label"
+            :name="tab.value"
+          />
+        </el-tabs>
+        <div class="absolute right-0 top-2.5 z-1000">
+          <el-icon
+            size="15"
+            class="cursor-pointer hover:rotate-180 transition-all duration-300"
+            @click="refresh"
+            ><Refresh
+          /></el-icon>
+        </div>
+      </div>
 
       <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
         <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
@@ -71,12 +81,11 @@
 </template>
 
 <script lang="ts" setup>
-import { Document } from '@element-plus/icons-vue'
+import { Document, Refresh } from '@element-plus/icons-vue'
 
 import { getSelfTaskList } from '@/api'
 import { usePageSearch } from '@/hooks'
 import { taskTypeListOptions } from '@/constants/options'
-import dayjs from 'dayjs'
 import { TaskTypeEnum } from '@/constants/enums'
 import type { TabPaneName } from 'element-plus'
 import { TaskDateLimitTypeText } from '@/constants'

src/views/userPage/index.vue

@@ -103,7 +103,7 @@
           <div class="bg-white rounded-lg shadow-sm min-h-500px">
             <transition name="fade" mode="out-in">
               <keep-alive>
-                <component :is="currentComponent" />
+                <component :is="currentComponent" ref="currentComponentRef" />
               </keep-alive>
             </transition>
           </div>
@@ -171,6 +171,7 @@ const menuOfficialItems = [
   { key: 'audit', label: '审核列表', icon: User, component: SelfAudit, tab: '审核列表' },
 ]
 
+const currentComponentRef = useTemplateRef<InstanceType<typeof SelfAudit>>('currentComponentRef')
 const currentComponent = computed(
   () =>
     [...menuUserItems, ...menuOfficialItems].find((item) => item.key === activeMenu.value)