【需求 20331】 feat: 新增跳转hooks，以及返回上一页button组件，并且修改相关跳转方式

src/api/backend/activity/types.ts

@@ -103,4 +103,6 @@ export type BackendLotteryConfigDto = {
   status: BooleanFlag
   updatedAt: number
   winner: number
+  inRegistrationTime: BooleanFlag
+  registrationTimeDesc: string
 } | null

src/components/common/ArticleContent/index.vue

@@ -238,14 +238,15 @@ import dayjs from 'dayjs'
 import type { ArticleItemDto } from '@/api'
 import { articleTypeListOptions, ArticleTypeEnum, VideoPositionEnum } from '@/constants'
 import ActionMore from '@/components/common/ActionMore/index.vue'
-import { jumpToUserHomePage } from '@/utils'
 import { useUserStore } from '@/stores/user'
 import { storeToRefs } from 'pinia'
 import type { Directive } from 'vue'
+import { useNavigation } from '@/hooks'
+
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const router = useRouter()
-
+const { jumpToUserHomePage } = useNavigation()
 const { articleDetail } = defineProps<{
   articleDetail: ArticleItemDto
   isAudit: boolean // 是否是审核页面

src/components/common/BackButton/index.vue

+<template>
+  <div
+    class="absolute -left-12 top-2 z-10 flex flex-col items-center bg-white rounded-lg shadow-md shadow-black/6 border border-gray-100 cursor-pointer hover:shadow-lg hover:border-indigo-200 transition-all duration-300 group w-9 h-9 hover:h-18 overflow-hidden"
+    @click="handleBack"
+  >
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="w-4.5 h-4.5 shrink-0 mt-2.25 text-gray-400 group-hover:text-indigo-500 transition-colors duration-200"
+    >
+      <polyline points="15 18 9 12 15 6" />
+    </svg>
+    <span
+      class="text-12px text-indigo-500 whitespace-nowrap opacity-0 group-hover:opacity-100 translate-y-(-1) group-hover:translate-y-0 transition-all duration-300 mt-1.5 tracking-[0.3em] leading-relaxed writing-vertical"
+    >
+      返回
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+
+const handleBack = () => {
+  if (window.history.length > 1) {
+    router.back()
+  } else {
+    router.push('/')
+  }
+}
+</script>
+
+<style scoped>
+.writing-vertical {
+  writing-mode: vertical-rl;
+}
+</style>

src/components/common/Comment/index.vue

@@ -361,11 +361,12 @@ import type { CommentItemDto } from '@/api'
 import { useUserStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import CommentListDialog from '../CommentListDialog/index.vue'
-import { jumpToUserHomePage } from '@/utils'
+import { useNavigation } from '@/hooks'
 import { parseEmoji } from '@/utils/emoji'
 import CommentBox from '../CommentBox/index.vue'
 import dayjs from 'dayjs'
 
+const { jumpToUserHomePage } = useNavigation()
 const {
   id,
   defaultSize = 10,

src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './usePageSearch'
 export * from './useScrollTop'
 export * from './useHintAnimation'
 export * from './useUploadImg'
+export * from './useNavigation'

src/hooks/useNavigation.ts

+import { ArticleTypeEnum } from '@/constants'
+import { useUserStore } from '@/stores/user'
+import { storeToRefs } from 'pinia'
+
+export function useNavigation() {
+  const router = useRouter()
+  const userStore = useUserStore()
+  const { userInfo } = storeToRefs(userStore)
+
+  // 根据文章类型跳到对应的文章详情页面
+  const jumpToArticleDetailPage = ({ type, id }: { type: ArticleTypeEnum; id: number }) => {
+    if (type === ArticleTypeEnum.VIDEO) {
+      router.push(`/videoDetail/${id}`)
+    } else if (type === ArticleTypeEnum.QUESTION) {
+      router.push(`/questionDetail/${id}`)
+    } else {
+      router.push(`/articleDetail/${id}`)
+    }
+  }
+
+  // 点击头像跳转用户首页 【实践 专访 问吧】 是 1 实名 其他是 0 匿名
+  const jumpToUserHomePage = ({ userId, type }: { userId: string; type: ArticleTypeEnum }) => {
+    const isSelf = userInfo.value.userId === userId
+    if (isSelf) {
+      router.push(`/userPage/selfPublish`)
+    } else {
+      let isReal = 0
+      if (
+        type === ArticleTypeEnum.PRACTICE ||
+        type === ArticleTypeEnum.INTERVIEW ||
+        type === ArticleTypeEnum.QUESTION
+      ) {
+        isReal = 1
+      }
+      router.push(`/otherUserPage/${userId}/${isReal}`)
+    }
+  }
+
+  return {
+    router,
+    jumpToArticleDetailPage,
+    jumpToUserHomePage,
+  }
+}

src/utils/app/index.ts

-import { ArticleTypeEnum } from '@/constants'
-import { useUserStore } from '@/stores'
-import { storeToRefs } from 'pinia'
 import dayjs from 'dayjs'
 /**
  * 页面改变标题
@@ -64,37 +61,6 @@ export function isCulturePath() {
   return path.includes('/culture')
 }
 
-// 点击头像跳转用户首页 【实践 专访 问吧】 是 1 实名 其他是 0 匿名
-export function jumpToUserHomePage({ userId, type }: { userId: string; type: ArticleTypeEnum }) {
-  const userStore = useUserStore()
-  const { userInfo } = storeToRefs(userStore)
-  const isSelf = userInfo.value.userId === userId
-  if (isSelf) {
-    window.open(`/userPage/selfPublish`)
-  } else {
-    let isReal = 0
-    if (
-      type === ArticleTypeEnum.PRACTICE ||
-      type === ArticleTypeEnum.INTERVIEW ||
-      type === ArticleTypeEnum.QUESTION
-    ) {
-      isReal = 1
-    }
-    window.open(`/otherUserPage/${userId}/${isReal}`)
-  }
-}
-
-// 根据文章类型跳到对应的文章详情页面
-export function jumpToArticleDetailPage({ type, id }: { type: ArticleTypeEnum; id: number }) {
-  if (type === ArticleTypeEnum.VIDEO) {
-    window.open(`/videoDetail/${id}`)
-  } else if (type === ArticleTypeEnum.QUESTION) {
-    window.open(`/questionDetail/${id}`)
-  } else {
-    window.open(`/articleDetail/${id}`)
-  }
-}
-
 // 根据oss视频链接获取视频元信息
 export function getVideoMetadata(url: string): Promise<{
   duration: string

src/views/articleDetail/index.vue

@@ -5,7 +5,8 @@
       v-model="articleDetail"
       @scrollToCommentBox="commentRef?.scrollToCommentBox()"
     ></ActionButtons>
-    <div class="lg:col-span-3">
+    <div class="lg:col-span-3 relative">
+      <BackButton />
       <!-- 帖子主体 -->
       <ArticleContent :articleDetail="articleDetail" :isAudit="false" />
 
@@ -26,6 +27,7 @@ import { getArticleDetail, type ArticleItemDto } from '@/api'
 import ActionButtons from './components/actionButtons.vue'
 import Comment from '@/components/common/Comment/index.vue'
 import ArticleContent from '@/components/common/ArticleContent/index.vue'
+import BackButton from '@/components/common/BackButton/index.vue'
 const commentRef = useTemplateRef<typeof Comment | null>('commentRef')
 
 const route = useRoute()

src/views/homePage/homeTab/components/recommendList.vue

@@ -133,10 +133,9 @@
 import { usePageSearch } from '@/hooks'
 import { getArticleList } from '@/api'
 import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
-import { useScrollTop } from '@/hooks'
-import dayjs from 'dayjs'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useScrollTop, useNavigation } from '@/hooks'
 import { articleTypeListOptions } from '@/constants'
+import dayjs from 'dayjs'
 
 const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
   getArticleList,
@@ -151,6 +150,8 @@ const tabsRef = inject(TABS_REF_KEY)
 
 const { ScrollTopComp, handleBackTop } = useScrollTop(tabsRef!)
 
+const { jumpToArticleDetailPage } = useNavigation()
+
 defineExpose({
   refresh: (sortLogic?: number) => {
     console.log('sortLogic', sortLogic)

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

@@ -427,11 +427,12 @@ import { ArticleTypeEnum, TABS_REF_KEY } from '@/constants'
 import { usePageSearch } from '@/hooks'
 import { getArticleList } from '@/api'
 import dayjs from 'dayjs'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 const tabsRef = inject(TABS_REF_KEY)
 
 const { ScrollTopComp, handleBackTop } = useScrollTop(tabsRef!)
+const { jumpToArticleDetailPage } = useNavigation()
 const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
   getArticleList,
   {

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

@@ -146,7 +146,7 @@ import { usePageSearch, useScrollTop } from '@/hooks'
 import { TABS_REF_KEY } from '@/constants'
 import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const smallerThanXl = breakpoints.smaller('xl')
@@ -154,7 +154,7 @@ const smallerThanXl = breakpoints.smaller('xl')
 const router = useRouter()
 const tabsRef = inject(TABS_REF_KEY)
 const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
-
+const { jumpToArticleDetailPage } = useNavigation()
 const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch(
   getColumnList,
   {

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

@@ -132,17 +132,16 @@
 
 <script setup lang="ts">
 import { getInterviewList } from '@/api'
-import { usePageSearch, useScrollTop } from '@/hooks'
+import { usePageSearch, useScrollTop, useNavigation } from '@/hooks'
 import { TABS_REF_KEY } from '@/constants'
 import dayjs from 'dayjs'
-import { jumpToArticleDetailPage } from '@/utils'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const smallerThanXl = breakpoints.smaller('xl')
 const tabsRef = inject(TABS_REF_KEY)
 
 const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
-
+const { jumpToArticleDetailPage } = useNavigation()
 const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch(
   getInterviewList,
   {

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

@@ -232,13 +232,13 @@ import { TABS_REF_KEY } from '@/constants'
 // import { storeToRefs } from 'pinia'
 import PublishPractice from '@/components/common/PublishBox/index.vue'
 import { ArticleTypeEnum } from '@/constants'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 // const tagsStore = useTagsStore()
 // const { tagList } = storeToRefs(tagsStore)
 
 const router = useRouter()
-
+const { jumpToArticleDetailPage } = useNavigation()
 const tabsRef = inject(TABS_REF_KEY)
 
 const filterOptions = ref([

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

@@ -303,12 +303,12 @@ import { usePageSearch, useScrollTop } from '@/hooks'
 import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
 import { useRouter } from 'vue-router'
 import dayjs from 'dayjs'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 const router = useRouter()
 const tabsRef = inject(TABS_REF_KEY)
 const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
-
+const { jumpToArticleDetailPage } = useNavigation()
 const tabs = [
   { label: '最新发布', sortLogic: 1 },
   { label: '最多播放', sortLogic: 0 },

src/views/questionDetail/index.vue

@@ -3,8 +3,9 @@
     <div class="w-full space-y-4">
       <!-- 1. 问题卡片 -->
       <div
-        class="bg-white rounded-lg p-6 shadow-[0_1px_3px_rgba(0,0,0,0.02)] border border-slate-100"
+        class="bg-white rounded-lg p-6 shadow-[0_1px_3px_rgba(0,0,0,0.02)] border border-slate-100 relative"
       >
+        <BackButton />
         <el-skeleton
           :rows="5"
           animated
@@ -392,16 +393,17 @@ import type { ArticleItemDto } from '@/api'
 import { usePageSearch } from '@/hooks'
 import Comment from '@/components/common/Comment/index.vue'
 import CommentDialog from '@/components/common/CommentDialog/index.vue'
+import BackButton from '@/components/common/BackButton/index.vue'
 import dayjs from 'dayjs'
 import { useUserStore } from '@/stores/user'
 import { storeToRefs } from 'pinia'
-import { jumpToUserHomePage } from '@/utils'
+import { useNavigation } from '@/hooks'
 import { parseEmoji } from '@/utils/emoji'
 import { ArticleTypeEnum } from '@/constants'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
-
+const { jumpToUserHomePage } = useNavigation()
 const route = useRoute()
 const router = useRouter()
 

src/views/userPage/components/SelfComplaint.vue

@@ -126,7 +126,7 @@ import dayjs from 'dayjs'
 import { AuditStatusEnum } from '@/constants'
 import type { AuditComplaintDto } from '@/api'
 import type { TabPaneName } from 'element-plus'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.status = key as AuditStatusEnum
@@ -142,7 +142,7 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     },
   },
 )
-
+const { jumpToArticleDetailPage } = useNavigation()
 const handleAudit = async (data: AuditComplaintDto) => {
   if (data.status === AuditStatusEnum.REJECTED) {
     const { value } = await ElMessageBox.prompt('请输入拒绝理由', '提示', {

src/views/userPage/components/selfAnswer.vue

@@ -73,7 +73,7 @@
 import { answerQuestionPage } from '@/api'
 import { usePageSearch } from '@/hooks'
 import dayjs from 'dayjs'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 import { ArticleTypeEnum } from '@/constants'
 
 const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
@@ -82,6 +82,8 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     immediate: false,
   },
 )
+const { jumpToArticleDetailPage } = useNavigation()
+
 onActivated(() => {
   refresh()
 })

src/views/userPage/components/selfCollect.vue

@@ -89,7 +89,7 @@ import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
 import type { TabPaneName } from 'element-plus'
 import { IS_REAL_KEY } from '@/constants/symbolKey'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 const isReal = inject(IS_REAL_KEY)
 
@@ -114,7 +114,7 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     immediate: false,
   },
 )
-
+const { jumpToArticleDetailPage } = useNavigation()
 onActivated(() => {
   searchParams.value.type = filterArticleType.value[0]!.value
   refresh()

src/views/userPage/components/selfComment.vue

@@ -105,7 +105,7 @@ import dayjs from 'dayjs'
 import { CommentTypeEnum, ArticleTypeEnum } from '@/constants/enums'
 import type { TabPaneName } from 'element-plus'
 import { IS_REAL_KEY } from '@/constants/symbolKey'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 const route = useRoute()
 const isReal = inject(IS_REAL_KEY)
@@ -132,7 +132,7 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     },
   },
 )
-
+const { jumpToArticleDetailPage } = useNavigation()
 const handleDelete = async (id: number) => {
   await ElMessageBox.confirm('确定删除该评论吗？', '提示', {
     confirmButtonText: '确定',

src/views/userPage/components/selfPraise.vue

@@ -88,7 +88,7 @@ import {
 import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
 import { IS_REAL_KEY } from '@/constants/symbolKey'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 const isReal = inject(IS_REAL_KEY)
 
@@ -113,7 +113,7 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     immediate: false,
   },
 )
-
+const { jumpToArticleDetailPage } = useNavigation()
 onActivated(() => {
   searchParams.value.type = filterArticleType.value[0]!.value
   refresh()

src/views/userPage/components/selfPublish.vue

@@ -94,7 +94,7 @@ import dayjs from 'dayjs'
 import { ArticleTypeEnum } from '@/constants/enums'
 import type { TabPaneName } from 'element-plus'
 import { IS_REAL_KEY } from '@/constants/symbolKey'
-import { jumpToArticleDetailPage } from '@/utils'
+import { useNavigation } from '@/hooks'
 
 const router = useRouter()
 
@@ -120,7 +120,7 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
     immediate: false,
   },
 )
-
+const { jumpToArticleDetailPage } = useNavigation()
 onActivated(() => {
   searchParams.value.type = filterArticleType.value[0]!.value
   refresh()

src/views/videoDetail/index.vue

 <template>
-  <div>
-    <!-- 一定要保证过度里面的内容是 只有一个根节点！！！！ 纯字符串也不行 -->
-    <!-- 整体页面容器：浅灰背景 -->
+  <div class="relative">
+    <BackButton />
     <!-- 卡片1: 视频播放器区域 -->
     <div class="bg-white rounded-lg shadow-sm overflow-hidden">
       <el-skeleton :rows="5" animated :loading="loading" :throttle="{ leading: 0, trailing: 300 }">
@@ -323,12 +322,13 @@ import type { ArticleItemDto } from '@/api/article/types'
 import Comment from '@/components/common/Comment/index.vue'
 import RewardDialog from './components/rewardDialog.vue'
 import ActionMore from '@/components/common/ActionMore/index.vue'
-import { jumpToUserHomePage } from '@/utils'
+import BackButton from '@/components/common/BackButton/index.vue'
+import { useNavigation } from '@/hooks'
 import { ArticleTypeEnum } from '@/constants'
 
 const route = useRoute()
 const videoId = Number(route.params.id)
-
+const { jumpToUserHomePage } = useNavigation()
 // 视频详情
 const videoDetail = ref({} as ArticleItemDto)
 const loading = computed(() => !videoDetail.value.title)