【需求 17679】 feat: 优化用户信息页面的展示，跳转到别的用户首页优化

src/components/common/ArticleContent/index.vue

@@ -9,7 +9,8 @@
           <img
             :src="articleDetail?.createUserAvatar"
             alt=""
-            class="w-12 h-12 rounded-full object-cover"
+            class="w-12 h-12 rounded-full object-cover cursor-pointer"
+            @click="router.push(`/otherUserPage/${articleDetail?.createUserId}/0`)"
           />
           <!-- <div
             class="absolute -bottom-1 -right-1 w-6 h-6 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full flex items-center justify-center text-xs font-bold text-white"
@@ -105,6 +106,7 @@ import type { ArticleItemDto } from '@/api'
 import { articleTypeListOptions, ArticleTypeEnum } from '@/constants'
 import ActionMore from '@/components/common/ActionMore/index.vue'
 
+const router = useRouter()
 const { articleDetail } = defineProps<{
   articleDetail: ArticleItemDto
 }>()

src/components/common/Comment/index.vue

@@ -60,7 +60,12 @@
       <!-- 发表评论 -->
       <div class="p-4 border-b border-gray-100">
         <div class="flex gap-3">
-          <img :src="userAvatar" alt="" class="w-10 h-10 rounded-full object-cover" />
+          <img
+            :src="userAvatar"
+            alt=""
+            class="w-10 h-10 rounded-full object-cover cursor-pointer"
+            @click="router.push(`/userPage`)"
+          />
           <div class="flex-1">
             <div ref="commentInputRef">
               <el-input
@@ -232,7 +237,12 @@
                 <!-- 展示 回复评论的输入框 -->
                 <!-- <transition name="fade" mode="out-in"> -->
                 <div v-show="showCommentBox(item)" class="flex gap-3 mt-4">
-                  <img :src="userAvatar" alt="" class="w-10 h-10 rounded-full object-cover" />
+                  <img
+                    :src="userAvatar"
+                    alt=""
+                    class="w-10 h-10 rounded-full object-cover cursor-pointer"
+                    @click="router.push(`/userPage`)"
+                  />
                   <div class="flex-1">
                     <el-input
                       v-model="comment"

src/constants/options.ts

@@ -60,6 +60,36 @@ export const articleTypeListOptions: { label: string; value: ArticleTypeEnum }[]
   },
 ]
 
+export const articleTypeListOptionsForReal: { label: string; value: ArticleTypeEnum }[] = [
+  {
+    label: '实践',
+    value: ArticleTypeEnum.PRACTICE,
+  },
+  {
+    label: '专访',
+    value: ArticleTypeEnum.INTERVIEW,
+  },
+]
+export const articleTypeListOptionsForNotReal: { label: string; value: ArticleTypeEnum }[] = [
+  {
+    label: '帖子',
+    value: ArticleTypeEnum.POST,
+  },
+  {
+    label: '视频',
+    value: ArticleTypeEnum.VIDEO,
+  },
+  {
+    label: '问题',
+    value: ArticleTypeEnum.QUESTION,
+  },
+
+  {
+    label: '专栏',
+    value: ArticleTypeEnum.COLUMN,
+  },
+]
+
 // 审核类型列表
 export const auditTypeListOptions: { label: string; value: AuditStatusEnum }[] = [
   {

src/constants/symbolKey.ts

@@ -3,3 +3,5 @@ import type { InjectionKey, Ref } from 'vue'
 export const TABS_REF_KEY = Symbol('tabsRef') as InjectionKey<Ref<HTMLElement | null>>
 
 export const COMMENT_REF_KEY = Symbol('commentRef') as InjectionKey<Ref<HTMLElement | null>>
+
+export const IS_REAL_KEY = Symbol('isReal') as InjectionKey<Ref<number>>

src/views/otherUserPage/index.vue

@@ -19,7 +19,7 @@
                 class="border-4 border-white shadow-lg"
               />
               <div class="flex-1">
-                <h2 class="text-xl font-semibold text-gray-800 mb-1">{{ userInfo?.name }}</h2>
+                <h2 class="text-xl font-semibold text-gray-800 mb-1 mt-4">{{ userInfo?.name }}</h2>
                 <p class="text-gray-500 text-sm mb-2">{{ userInfo?.signature }}</p>
                 <!-- <el-button type="warning" size="small" plain @click="handleEdit">
                   <el-icon>

src/views/userPage/components/selfCollect.vue

@@ -4,7 +4,7 @@
       <div class="relative">
         <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
           <el-tab-pane
-            v-for="tab in articleTypeListOptions"
+            v-for="tab in filterArticleType"
             :key="tab.value"
             :label="tab.label"
             :name="tab.value"
@@ -78,11 +78,24 @@ import { Document, Refresh } from '@element-plus/icons-vue'
 
 import { getSelfCollectList } from '@/api'
 import { usePageSearch } from '@/hooks'
-import { articleTypeListOptions } from '@/constants/options'
+import {
+  articleTypeListOptionsForReal,
+  articleTypeListOptionsForNotReal,
+} from '@/constants/options'
 import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
 import type { TabPaneName } from 'element-plus'
 import type { SelfCollectDetailDto } from '@/api'
+import { IS_REAL_KEY } from '@/constants/symbolKey'
+
+const isReal = inject(IS_REAL_KEY)
+
+const filterArticleType = computed(() => {
+  if (isReal?.value === 1) {
+    return articleTypeListOptionsForReal
+  }
+  return articleTypeListOptionsForNotReal
+})
 
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.type = key as ArticleTypeEnum
@@ -105,4 +118,11 @@ const handleView = (item: SelfCollectDetailDto) => {
     window.open(`/articleDetail/${item.id}`)
   }
 }
+
+defineExpose({
+  refresh: () => {
+    searchParams.value.type = filterArticleType.value[0]!.value
+    refresh()
+  },
+})
 </script>

src/views/userPage/components/selfComment.vue

@@ -5,7 +5,7 @@
       <div class="relative">
         <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
           <el-tab-pane
-            v-for="tab in articleTypeListOptions"
+            v-for="tab in filterArticleType"
             :key="tab.value"
             :label="tab.label"
             :name="tab.value"
@@ -92,13 +92,26 @@
 import { Document, Refresh } from '@element-plus/icons-vue'
 import { getSelfCommentList, deleteComment } from '@/api'
 import { usePageSearch } from '@/hooks'
-import { commentTypeListOptions, articleTypeListOptions } from '@/constants/options'
+import {
+  commentTypeListOptions,
+  articleTypeListOptionsForReal,
+  articleTypeListOptionsForNotReal,
+} from '@/constants/options'
 import dayjs from 'dayjs'
 import { CommentTypeEnum, ArticleTypeEnum } from '@/constants/enums'
+import type { SelfCommentItemDto } from '@/api'
 import type { TabPaneName } from 'element-plus'
-import type { SelfCommentItemDto } from '@/api/user/types'
+import { IS_REAL_KEY } from '@/constants/symbolKey'
 
 const route = useRoute()
+const isReal = inject(IS_REAL_KEY)
+
+const filterArticleType = computed(() => {
+  if (isReal?.value === 1) {
+    return articleTypeListOptionsForReal
+  }
+  return articleTypeListOptionsForNotReal
+})
 
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.type = key as ArticleTypeEnum
@@ -144,4 +157,11 @@ onActivated(() => {
   }
   refresh()
 })
+
+defineExpose({
+  refresh: () => {
+    searchParams.value.type = filterArticleType.value[0]!.value
+    refresh()
+  },
+})
 </script>

src/views/userPage/components/selfDraft.vue

@@ -5,7 +5,7 @@
       <div class="relative">
         <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
           <el-tab-pane
-            v-for="tab in articleTypeListOptions"
+            v-for="tab in filterArticleType"
             :key="tab.value"
             :label="tab.label"
             :name="tab.value"
@@ -82,10 +82,23 @@ import { Document, Refresh } from '@element-plus/icons-vue'
 
 import { getSelfDraftList } from '@/api'
 import { usePageSearch } from '@/hooks'
-import { articleTypeListOptions } from '@/constants/options'
+import {
+  articleTypeListOptionsForReal,
+  articleTypeListOptionsForNotReal,
+} from '@/constants/options'
 import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
 import type { TabPaneName } from 'element-plus'
+import { IS_REAL_KEY } from '@/constants/symbolKey'
+
+const isReal = inject(IS_REAL_KEY)
+
+const filterArticleType = computed(() => {
+  if (isReal?.value === 1) {
+    return articleTypeListOptionsForReal
+  }
+  return articleTypeListOptionsForNotReal
+})
 
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.type = key as ArticleTypeEnum
@@ -100,4 +113,11 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     },
   },
 )
+
+defineExpose({
+  refresh: () => {
+    searchParams.value.type = filterArticleType.value[0]!.value
+    refresh()
+  },
+})
 </script>

src/views/userPage/components/selfPraise.vue

@@ -4,7 +4,7 @@
       <div class="relative">
         <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
           <el-tab-pane
-            v-for="tab in articleTypeListOptions"
+            v-for="tab in filterArticleType"
             :key="tab.value"
             :label="tab.label"
             :name="tab.value"
@@ -77,10 +77,23 @@ import { Document } from '@element-plus/icons-vue'
 import type { TabPaneName } from 'element-plus'
 import { getSelfPraiseList } from '@/api'
 import { usePageSearch } from '@/hooks'
-import { articleTypeListOptions } from '@/constants/options'
+import {
+  articleTypeListOptionsForReal,
+  articleTypeListOptionsForNotReal,
+} from '@/constants/options'
 import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
-import type { SelfPraiseDetailDto } from '@/api/user/types'
+import type { SelfPraiseDetailDto } from '@/api'
+import { IS_REAL_KEY } from '@/constants/symbolKey'
+
+const isReal = inject(IS_REAL_KEY)
+
+const filterArticleType = computed(() => {
+  if (isReal?.value === 1) {
+    return articleTypeListOptionsForReal
+  }
+  return articleTypeListOptionsForNotReal
+})
 
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.type = key as ArticleTypeEnum
@@ -103,4 +116,11 @@ const handleView = (item: SelfPraiseDetailDto) => {
     window.open(`/articleDetail/${item.id}`)
   }
 }
+
+defineExpose({
+  refresh: () => {
+    searchParams.value.type = filterArticleType.value[0]!.value
+    refresh()
+  },
+})
 </script>

src/views/userPage/components/selfPublish.vue

@@ -4,7 +4,7 @@
       <div class="relative">
         <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
           <el-tab-pane
-            v-for="tab in articleTypeListOptions"
+            v-for="tab in filterArticleType"
             :key="tab.value"
             :label="tab.label"
             :name="tab.value"
@@ -78,11 +78,23 @@
 import { Document, Refresh } from '@element-plus/icons-vue'
 import { getSelfPublishList, deleteArticle } from '@/api'
 import { usePageSearch } from '@/hooks'
-import { articleTypeListOptions } from '@/constants/options'
+import {
+  articleTypeListOptionsForReal,
+  articleTypeListOptionsForNotReal,
+} from '@/constants/options'
 import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
 import type { SelfPublishDetailDto } from '@/api'
 import type { TabPaneName } from 'element-plus'
+import { IS_REAL_KEY } from '@/constants/symbolKey'
+
+const isReal = inject(IS_REAL_KEY)
+const filterArticleType = computed(() => {
+  if (isReal?.value === 1) {
+    return articleTypeListOptionsForReal
+  }
+  return articleTypeListOptionsForNotReal
+})
 
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.type = key as ArticleTypeEnum
@@ -115,4 +127,11 @@ const handleDelete = async (articleId: number) => {
   refresh()
   ElMessage.success('删除成功')
 }
+
+defineExpose({
+  refresh: () => {
+    searchParams.value.type = filterArticleType.value[0]!.value
+    refresh()
+  },
+})
 </script>

src/views/userPage/index.vue

@@ -101,7 +101,10 @@
             </div>
           </div>
           <!-- 左侧菜单 —— 官方账号菜单 审核操作等 -->
-          <div class="bg-white rounded-lg shadow-sm">
+          <div
+            v-if="userInfo.isOfficialAccount || userInfo.isAdmin"
+            class="bg-white rounded-lg shadow-sm"
+          >
             <div
               v-for="item in menuOfficialItems"
               :key="item.path"
@@ -127,7 +130,7 @@
             <router-view v-slot="{ Component, route }">
               <transition name="fade" mode="out-in">
                 <keep-alive>
-                  <component :is="Component" :key="getThirdLevelKey(route)" />
+                  <component :is="Component" :key="getThirdLevelKey(route)" ref="componentRef" />
                 </keep-alive>
               </transition>
             </router-view>
@@ -169,6 +172,7 @@ import type { OfficialAccountItemDto } from '@/api/user/types'
 import { wxLogin } from '@/utils/wxUtil'
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router'
 import type { TabPaneName } from 'element-plus'
+import { IS_REAL_KEY } from '@/constants/symbolKey'
 
 const router = useRouter()
 const route = useRoute()
@@ -186,6 +190,7 @@ const getThirdLevelKey = (route: RouteLocationNormalizedLoadedGeneric) => {
   console.log(route.fullPath, '三级路由用户信息页面')
   return route.path
 }
+const componentRef = useTemplateRef<InstanceType<typeof SelfPublish>>('componentRef')
 const editUserInfoRef = useTemplateRef<InstanceType<typeof EditUserInfo>>('editUserInfoRef')
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
@@ -226,7 +231,15 @@ const menuOfficialItems = [
   },
 ]
 
-const isReal = ref(1)
+const isReal = ref(0)
+
+provide(IS_REAL_KEY, isReal)
+
+watch(isReal, () => {
+  // 重新刷新一次
+  componentRef.value?.refresh?.()
+})
+
 const currentUserInfo = computed(() =>
   isReal.value
     ? {

src/views/videoDetail/index.vue

@@ -39,6 +39,7 @@
           <!-- 左侧：UP主信息 -->
           <div class="flex items-center gap-3">
             <img
+              @click="router.push(`/otherUserPage/${videoDetail?.createUserId}/0`)"
               :src="videoDetail?.createUserAvatar"
               class="w-12 h-12 rounded-full object-cover cursor-pointer hover:opacity-80 transition-opacity ring-2 ring-gray-100"
             />
@@ -244,7 +245,7 @@ import RewardDialog from './components/rewardDialog.vue'
 import ActionMore from '@/components/common/ActionMore/index.vue'
 
 const route = useRoute()
-
+const router = useRouter()
 const videoId = route.params.id as string
 
 // 视频详情

src/views/videoSearchList/index.vue

@@ -217,7 +217,7 @@ const handleSearch = () => {
 }
 
 const handleClick = (item: SearchMoreVideoItemDto) => {
-  window.open(`/articleDetail/${item.articleId}`)
+  window.open(`/videoDetail/${item.articleId}`)
 }
 </script>