style: rewrite routing type derivation

src/components-business/secondary-bar/index.tsx

@@ -1,13 +1,19 @@
+import { CustomizeRouteRecordRaw } from '@/interface'
 import { defineComponent, toRefs, PropType, toRaw } from 'vue'
-import { RouterLink, RouteRecordRaw, useRoute } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import './index.less'
 
 const prefix = 'secondary'
 
-export const renderNavList = (origin: RouteRecordRaw[], name: string) => {
+export const renderNavList = (
+  origin: CustomizeRouteRecordRaw[],
+  name: string
+): CustomizeRouteRecordRaw[] => {
   const nav = origin.find(item => item.name === name)
   if (nav && nav.children) {
-    return nav.children.filter(item => item.meta?.name)
+    return (nav.children as CustomizeRouteRecordRaw[]).filter(
+      item => item.meta?.name
+    )
   }
   return []
 }
@@ -16,7 +22,7 @@ export const SecondaryBar = defineComponent({
   name: 'SecondaryBar',
   props: {
     nav: {
-      type: Object as PropType<RouteRecordRaw[]>,
+      type: Object as PropType<CustomizeRouteRecordRaw[]>,
       required: true
     },
     size: {

src/interface/index.ts

@@ -6,5 +6,6 @@ export * from './service/artists'
 export * from './service/songs'
 export * from './service/avatar'
 export * from './audio-convolver'
+export * from './router'
 export * from '@/layout/interface'
 export * from '@/pages/index'

src/interface/router.ts

@@ -0,0 +1,31 @@
+import { RouteRecordRaw } from 'vue-router'
+
+export type RouteMeta = Partial<{
+  name: string
+  auth: boolean
+  nonav: boolean
+  browser: boolean
+  electron: boolean
+  canBeCollect: boolean
+}>
+
+export type ChildrenRouteMeta = Partial<{
+  name: string
+  path:
+    | string
+    | {
+        name: string
+        query: {
+          [x: string]: unknown
+        }
+      }
+}>
+
+export type CustomizeChildrenRouteRecordRaw = RouteRecordRaw & {
+  meta?: ChildrenRouteMeta
+}
+
+export type CustomizeRouteRecordRaw = RouteRecordRaw & {
+  meta?: RouteMeta
+  children?: CustomizeChildrenRouteRecordRaw[]
+}

src/pages/artist/view/index.tsx

@@ -9,14 +9,14 @@ import {
 } from 'vue'
 import { SecondaryLayout } from '@/layout/secondary/secondary'
 import { Image } from '@/components/image/index'
-import { RouterView, RouteRecordRaw } from 'vue-router'
+import { RouterView } from 'vue-router'
 import { contentRouter } from '@/router/index'
 import { SecondaryBar } from '@/components-business/secondary-bar/index'
-import { ArtistActions } from '@/interface'
+import { ArtistActions, CustomizeRouteRecordRaw } from '@/interface'
 import { parentAP } from '../logic/ap'
 import './index.less'
 
-const formatNav = (id: string | string[]): RouteRecordRaw[] => {
+const formatNav = (id: string | string[]): CustomizeRouteRecordRaw[] => {
   let tp = contentRouter.filter(route => route.path.includes('/artist'))
   if (tp[0]) {
     if (tp[0].children) {

src/pages/main/view/index.tsx

@@ -15,7 +15,7 @@ export const Main = defineComponent({
     const Slots = {
       default: (component: { Component: Component }) => {
         return (
-          <KeepAlive exclude={/FollowView/}>
+          <KeepAlive exclude={['FollowView']}>
             {resolveDynamicComponent(component.Component)}
           </KeepAlive>
         )

src/pages/news/view/index.tsx

@@ -4,12 +4,13 @@ import {
   Component,
   resolveDynamicComponent
 } from 'vue'
-import { RouteRecordRaw, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
 import {
   SecondaryBar,
   renderNavList
 } from '@/components-business/secondary-bar/index'
 import { navRouter } from '@/router/index'
+import { CustomizeRouteRecordRaw } from '@/interface'
 import './index.less'
 
 export const News = defineComponent({
@@ -18,7 +19,7 @@ export const News = defineComponent({
     const nav = renderNavList(navRouter, News.name)
 
     // eslint-disable-next-line
-    const handleChangeRoute = (route: RouteRecordRaw) => {}
+    const handleChangeRoute = (route: CustomizeRouteRecordRaw) => {}
 
     const Slots = {
       default: (component: { Component: Component }) => (

src/pages/sidebar/view/index.tsx

@@ -1,8 +1,9 @@
 import { defineComponent } from 'vue'
-import { RouteRecordRaw, RouterLink, useRoute } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import classnames from 'classnames'
 import { navRouter } from '@/router/index'
 import { SidebarAuth } from '@/pages/auth/component/sidebar-auth'
+import { CustomizeRouteRecordRaw } from '@/interface'
 import './index.less'
 
 // TODO 登录页面 我先做成内嵌的模式，后续再升级成 electron 模式
@@ -14,7 +15,7 @@ export const Sidebar = defineComponent({
       return (
         <aside class="sidebar">
           <SidebarAuth></SidebarAuth>
-          {navRouter.map((routerGroup: RouteRecordRaw) => {
+          {navRouter.map((routerGroup: CustomizeRouteRecordRaw) => {
             // TODO hack
             if (routerGroup.meta?.nonav) {
               return null

src/router/base.ts

@@ -1,8 +1,8 @@
-import { RouteRecordRaw } from 'vue-router'
 import { $404 } from '@/pages/404/view/index'
+import { CustomizeRouteRecordRaw } from '@/interface'
 
 // Internationalization is not currently supported
-export const baseRouter: RouteRecordRaw[] = [
+export const baseRouter: CustomizeRouteRecordRaw[] = [
   {
     path: '/:pathMatch(.*)', // https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes
     name: $404.name,

src/router/content.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import { CustomizeRouteRecordRaw } from '@/interface'
 
 const List = () => import('@/pages/list/view/index')
 
@@ -60,7 +60,7 @@ const SearchLyrice = () =>
     component => component.SearchLyrice
   )
 
-export const contentBaseRouter: RouteRecordRaw[] = [
+export const contentBaseRouter: CustomizeRouteRecordRaw[] = [
   {
     path: '/list/:type/:playlist',
     component: List,

src/router/index.ts

@@ -2,31 +2,19 @@ import {
   createRouter,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   createWebHistory,
-  createWebHashHistory,
-  RouteRecordRaw
+  createWebHashHistory
 } from 'vue-router'
-import { ComponentPublicInstance } from 'vue'
 import { hook } from './hook'
 import { baseRouter } from './base'
 import { contentBaseRouter } from './content'
 import { baseNavRouter } from './nav'
 
 import { isBrowser, isElectron } from '@/utils'
-
-export interface Meta {
-  name?: string
-}
-
-export interface RouterChildren {
-  path: string
-  comments: ComponentPublicInstance
-  name?: string
-  meta?: Meta
-}
+import { CustomizeRouteRecordRaw } from '@/interface'
 
 export const LYRICE_PATH = '/electron-lyrice-float'
 
-const renderRouter = (nav: RouteRecordRaw[]) => {
+const renderRouter = (nav: CustomizeRouteRecordRaw[]) => {
   return nav.filter(n => {
     if (isBrowser()) {
       return n?.meta?.browser

src/router/nav.ts

@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router'
 import { News, Recommend, SongList, TopList, Artists } from '@/pages/news/index'
 // Use this method when you need to load dynamically
 // const video = () => import(/* webpackChunkName: "video" */ '@/pages/video/index')
@@ -12,8 +11,9 @@ import { FollowView } from '@/pages/userinfo/views/follow-view'
 import { EventView } from '@/pages/userinfo/views/event-view'
 import { FansView } from '@/pages/userinfo/views/fans-view'
 import { UserSetting } from '@/pages/userinfo/views/user-setting'
+import { CustomizeRouteRecordRaw } from '@/interface'
 
-export const baseNavRouter: RouteRecordRaw[] = [
+export const baseNavRouter: CustomizeRouteRecordRaw[] = [
   {
     path: '/userinfo/:uid',
     component: Profile,