【需求 20331】 perf: 系统内的跳转全部改为单tab路由跳转

src/views/backend/carousel/index.vue

@@ -188,9 +188,11 @@ import type {
   BackendCarouselListItemDto,
 } from '@/api/backend'
 import { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
-import { usePageSearch } from '@/hooks'
+import { usePageSearch, useNavigation } from '@/hooks'
 import dayjs from 'dayjs'
 
+const router = useRouter()
+const { jumpToArticleDetailPage } = useNavigation()
 // 列表数据
 const loading = ref(false)
 const list = ref<BackendCarouselListItemDto[]>([])
@@ -317,15 +319,11 @@ const handleSearchArticle = async () => {
 }
 
 const handleOpenNewTab = (url: string) => {
-  window.open(url)
+  router.push(url)
 }
 
 const handlePreviewArticle = (row: BackendArticleListItemDto) => {
-  if (row.type === ArticleTypeEnum.VIDEO) {
-    window.open(`/videoDetail/${row.id}`)
-  } else {
-    window.open(`/articleDetail/${row.id}`)
-  }
+  jumpToArticleDetailPage({ type: row.type, id: row.id })
 }
 
 const handleSelectArticle = (row: BackendArticleListItemDto) => {

src/views/columnSearchList/index.vue

@@ -179,7 +179,7 @@
 <script setup lang="ts">
 import { articleTypeListOptions } from '@/constants'
 import { getColumnListViewMore } from '@/api'
-import { usePageSearch, useScrollTop } from '@/hooks'
+import { usePageSearch, useScrollTop, useNavigation } from '@/hooks'
 import dayjs from 'dayjs'
 import type { SearchMoreColumnItemDto } from '@/api'
 
@@ -187,7 +187,7 @@ const router = useRouter()
 const route = useRoute()
 const searchPageRef = ref<HTMLElement | null>(null)
 const { handleBackTop } = useScrollTop(searchPageRef)
-
+const { jumpToArticleDetailPage } = useNavigation()
 const columnTitle = route.query.columnTitle || ''
 
 const sortOptions = [
@@ -219,7 +219,7 @@ const handleSearch = () => {
 }
 
 const handleClick = (item: SearchMoreColumnItemDto) => {
-  window.open(`/articleDetail/${item.articleId}`)
+  jumpToArticleDetailPage({ type: item.type, id: item.articleId })
 }
 
 onActivated(() => {})

src/views/homePage/askTab/index.vue

@@ -214,6 +214,7 @@ import { parseEmoji } from '@/utils/emoji'
 const { fetchUserQestionNum } = useQuestionStore()
 
 const route = useRoute()
+const router = useRouter()
 const open = ref(false)
 const publishBoxRef = useTemplateRef('publishBoxRef')
 const commentDialogRef = useTemplateRef<typeof CommentDialog>('commentDialogRef')
@@ -321,7 +322,7 @@ const handleExpand = (item: ArticleItemDto) => {
 }
 
 const openNewPage = (path: string) => {
-  window.open(path)
+  router.push(path)
 }
 
 // 是否打开漫游

src/views/otherUserPage/index.vue

@@ -48,7 +48,7 @@
 
             <div v-else class="space-y-4">
               <div
-                @click="handleOpenArticle(item)"
+                @click="jumpToArticleDetailPage({ type: item.type, id: item.id })"
                 v-for="item in list"
                 :key="item.id"
                 class="flex items-center p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer px-6"
@@ -96,12 +96,12 @@
 import { hasOfficialAccount, getOtherUserData, getOtherUserPostData } from '@/api'
 import type { OfficialAccountItemDto } from '@/api/user/types'
 import dayjs from 'dayjs'
-import { usePageSearch } from '@/hooks'
-import { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
+import { usePageSearch, useNavigation } from '@/hooks'
+import { articleTypeListOptions } from '@/constants'
 import type { OtherUserInfoDto } from '@/api/otherUserPage/types'
 
 const route = useRoute()
-
+const { jumpToArticleDetailPage } = useNavigation()
 const { list, total, searchParams, goToPage, changePageSize } = usePageSearch(
   getOtherUserPostData,
   {
@@ -127,14 +127,6 @@ onMounted(async () => {
   userInfo.value = data
 })
 
-const handleOpenArticle = (item: any) => {
-  if (item.type === ArticleTypeEnum.VIDEO) {
-    window.open(`/videoDetail/${item.id}`)
-  } else {
-    window.open(`/articleDetail/${item.id}`)
-  }
-}
-
 onMounted(() => {
   getIsOfficial()
 })

src/views/practiceSearchList/index.vue

@@ -130,7 +130,7 @@
             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="jumpToArticleDetailPage({ type: item.type, id: item.id })"
           >
             <!-- 封面图 -->
             <div
@@ -237,9 +237,8 @@
 <script setup lang="ts">
 import { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
 import { getPracticeList } from '@/api'
-import { usePageSearch, useScrollTop } from '@/hooks'
+import { usePageSearch, useScrollTop, useNavigation } from '@/hooks'
 import dayjs from 'dayjs'
-import type { PracticeItemDto } from '@/api'
 import { storeToRefs } from 'pinia'
 import { useTagsStore } from '@/stores/tags'
 const tagsStore = useTagsStore()
@@ -249,7 +248,7 @@ const router = useRouter()
 const route = useRoute()
 const searchPageRef = ref<HTMLElement | null>(null)
 const { handleBackTop } = useScrollTop(searchPageRef)
-
+const { jumpToArticleDetailPage } = useNavigation()
 const firstDepList = ref([
   { id: '1825', name: 'Amazon产品开发部' },
   { id: '76', name: 'Amazon销售部' },
@@ -292,10 +291,6 @@ const handleSearch = () => {
   refresh()
 }
 
-const handleClick = (item: PracticeItemDto) => {
-  window.open(`/articleDetail/${item.id}`)
-}
-
 onActivated(() => {
   searchParams.value.sortLogic = Number(route.query.sortLogic) || 0
   searchParams.value.tagIdList =

src/views/searchPage/index.vue

@@ -91,7 +91,7 @@
             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="jumpToArticleDetailPage({ type: item.type, id: item.id })"
           >
             <!-- 封面图 -->
             <div
@@ -208,16 +208,15 @@
 <script setup lang="ts">
 import { articleTypeListOptions } from '@/constants'
 import { getArticleList } from '@/api/article'
-import { usePageSearch, useScrollTop } from '@/hooks'
+import { usePageSearch, useScrollTop, useNavigation } from '@/hooks'
 import { ArticleTypeEnum } from '@/constants'
 import dayjs from 'dayjs'
-import type { ArticleItemDto } from '@/api'
 
 const router = useRouter()
 const route = useRoute()
 const searchPageRef = ref<HTMLElement | null>(null)
 const { handleBackTop } = useScrollTop(searchPageRef)
-
+const { jumpToArticleDetailPage } = useNavigation()
 const queryType = (route.query.type as ArticleTypeEnum) || ''
 const querySearchTitle = (route.query.title as string) || ''
 
@@ -251,14 +250,6 @@ const handleSearch = () => {
   refresh()
 }
 
-const handleClick = (item: ArticleItemDto) => {
-  if (item.type === ArticleTypeEnum.VIDEO) {
-    window.open(`/videoDetail/${item.id}`)
-  } else {
-    window.open(`/articleDetail/${item.id}`)
-  }
-}
-
 onActivated(() => {
   searchParams.value.title = (route.query.title as string) || ''
   searchParams.value.type = (route.query.type as ArticleTypeEnum) || ''

src/views/userPage/components/selfAudit.vue

@@ -99,7 +99,12 @@
             v-if="searchParams.isAudit === AuditStatusEnum.AGREED"
             class="flex items-center text-gray-400 text-sm ml-4"
           >
-            <el-button type="info" link @click="handleView(item)">查看</el-button>
+            <el-button
+              type="info"
+              link
+              @click="jumpToArticleDetailPage({ type: item.type, id: item.id })"
+              >查看</el-button
+            >
           </div>
         </div>
       </div>
@@ -127,14 +132,15 @@
 
 <script lang="ts" setup>
 import { getAuditList, auditArticle } from '@/api'
-import { usePageSearch } from '@/hooks'
+import { usePageSearch, useNavigation } from '@/hooks'
 import { auditTypeListOptions, articleTypeListOptions } from '@/constants/options'
 import { AuditStatusEnum } from '@/constants'
-import type { AuditArticleDto, AuditListItemDto } from '@/api'
+import type { AuditArticleDto } from '@/api'
 import type { TabPaneName } from 'element-plus'
-import { ArticleTypeEnum } from '@/constants'
-import dayjs from 'dayjs'
 
+import dayjs from 'dayjs'
+const router = useRouter()
+const { jumpToArticleDetailPage } = useNavigation()
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.isAudit = key as AuditStatusEnum
   refresh()
@@ -186,16 +192,8 @@ const handleAudit = async (data: AuditArticleDto) => {
   refresh()
 }
 
-const handleView = (item: AuditListItemDto) => {
-  if (item.type === ArticleTypeEnum.VIDEO) {
-    window.open(`/videoDetail/${item.id}`)
-  } else {
-    window.open(`/articleDetail/${item.id}`)
-  }
-}
-
 const openArticleDetail = (id: number) => {
-  window.open(`/auditArticle/${id}`)
+  router.push(`/auditArticle/${id}`)
 }
 onActivated(() => {
   refresh()

src/views/userPage/index.vue

@@ -395,7 +395,7 @@ const handleBackUser = () => {
 }
 
 const handleAdmin = () => {
-  window.open('/backend')
+  router.push('/backend')
 }
 
 const handleClearCache = async () => {

src/views/videoSearchList/index.vue

@@ -72,7 +72,7 @@
             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="jumpToArticleDetailPage({ type: item.type, id: item.articleId })"
           >
             <!-- 封面图 -->
             <div
@@ -179,15 +179,14 @@
 <script setup lang="ts">
 import { articleTypeListOptions } from '@/constants'
 import { getVideoListViewMore } from '@/api'
-import { usePageSearch, useScrollTop } from '@/hooks'
+import { usePageSearch, useScrollTop, useNavigation } from '@/hooks'
 import dayjs from 'dayjs'
-import type { SearchMoreVideoItemDto } from '@/api'
 
 const router = useRouter()
 const route = useRoute()
 const searchPageRef = ref<HTMLElement | null>(null)
 const { handleBackTop } = useScrollTop(searchPageRef)
-
+const { jumpToArticleDetailPage } = useNavigation()
 const columnTitle = (route.query.columnTitle as string) || ''
 
 const sortOptions = [
@@ -217,10 +216,6 @@ const changeSort = (value: number) => {
 const handleSearch = () => {
   refresh()
 }
-
-const handleClick = (item: SearchMoreVideoItemDto) => {
-  window.open(`/videoDetail/${item.articleId}`)
-}
 </script>
 
 <style scoped></style>