super_video/src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { BasicElements, Film, Interview, Vlog } from './modules'
import { allTrackedRouteNames, getModuleNameByRouteName } from '@/config/moduleStepMap'
import { useFilmStore, useInterviewStore, useVlogStore } from '@/stores'

const NotFound = {
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('@/views/not-found.vue'),
  meta: {
    title: '404'
  }
}

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/home/index.tsx'),
    meta: {
      title: '首页'
    }
  },
  //vlog模块
  ...Vlog,
  //电影感模块
  ...Film,
  //访谈感模块
  ...Interview,
  //三大基础要素
  ...BasicElements,
  {
    path: '/action',
    name: 'Action',
    component: () => import('@/views/home/action.vue'),
    meta: {
      title: '开始拍摄'
    }
  },
  //技能树
  {
    path: '/skill',
    name: 'Skill',
    component: () => import('@/views/skill/index.vue'),
    meta: {
      title: '技能树'
    }
  },
  {
    path: '/skill/video',
    name: 'SkillVdieo',
    component: () => import('@/views/skill/video.vue'),
    meta: {
      title: '技能树视频'
    }
  },
  NotFound
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

const VIEW_THRESHOLD_MS = 3000
let currentTrackedRouteName: string | null = null
let currentEnterAt = 0

// 路由守卫
router.beforeEach((to, from, next) => {
  // 设置页面标题
  if (to.meta?.title) {
    document.title = `${to.meta.title} - 短视频达人`
  }

  // 结算离开：from 是上一个页面
  const fromName = typeof from.name === 'string' ? from.name : null
  if (
    fromName &&
    currentTrackedRouteName === fromName &&
    allTrackedRouteNames.has(fromName) &&
    currentEnterAt > 0
  ) {
    const stayedMs = Date.now() - currentEnterAt
    if (stayedMs >= VIEW_THRESHOLD_MS) {
      const moduleName = getModuleNameByRouteName(fromName)
      if (moduleName === 'film') useFilmStore().markViewed(fromName)
      if (moduleName === 'vlog') useVlogStore().markViewed(fromName)
      if (moduleName === 'interview') useInterviewStore().markViewed(fromName)
    }
  }
  next()
})

router.afterEach(to => {
  // 记录进入：to 是当前页面
  const toName = typeof to.name === 'string' ? to.name : null
  if (toName && allTrackedRouteNames.has(toName)) {
    currentTrackedRouteName = toName
    currentEnterAt = Date.now()
  } else {
    currentTrackedRouteName = null
    currentEnterAt = 0
  }
})

export default router