wip: 继续修复

src/composables/config/tags.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationNormalized, Router } from 'vue-router'
+import type { RouteLocationNormalized, Router } from 'vue-router/auto'
 import { TabActionEnum } from '~/constants'
 
 export function useTabs(_router?: Router) {
@@ -8,7 +8,7 @@ export function useTabs(_router?: Router) {
     const { show } = unref(appStore.tabTar)
     if (!show) {
       throw new Error(
-        'The multi-tab page is currently not open, please open it in the settings！',
+        'The multi-tab page is currently not open, please open it in the settings!',
       )
     }
     return !!show

src/composables/page.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationRaw, Router } from 'vue-router'
+import type { RouteLocationRaw, Router } from 'vue-router/auto'
 import { PageEnum, REDIRECT_NAME } from '~/constants'
 
 export type PathAsPageEnum<T> = T extends { path: string } ? T & { path: PageEnum } : T
@@ -29,13 +29,18 @@ export function useRedo(_router?: Router) {
         return
       }
       if (name && Object.keys(params).length > 0) {
+        // @ts-expect-error tstype
         params._redirect_type = 'name'
+        // @ts-expect-error tstype
         params.path = String(name)
       }
       else {
+        // @ts-expect-error tstype
         params._redirect_type = 'path'
+        // @ts-expect-error tstype
         params.path = fullPath
       }
+      // @ts-expect-error tstype
       push({ name: REDIRECT_NAME, params, query }).then(() => resolve(true))
     })
   }

src/composables/web/full-content.ts

@@ -1,4 +1,4 @@
-import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router/auto'
 
 export function useFullContent() {
   const configStore = useAppConfigStore()

src/layouts/nlayout/components/breadcrumb/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RouteLocationMatched } from 'vue-router'
+import type { RouteLocationMatched } from 'vue-router/auto'
 import { REDIRECT_NAME } from '~/constants'
 import { filterTree, getAllParentPath, isString } from '~/utils'
 

src/layouts/nlayout/components/menu/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" name="LayoutMenu">
 import type { MenuInst } from 'naive-ui'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { RouterLink } from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router/auto'
+import { RouterLink } from 'vue-router/auto'
 import type { MenuMixedOption } from 'naive-ui/es/menu/src/interface'
 import Logo from '../logo/index.vue'
 import FooterTrigger from '../trigger/footer-trigger.vue'
@@ -190,30 +190,13 @@ function clickMenu(key: any) {
     <Logo v-if="showSidebarLogo" :class="bem('logo')" :show-title="getCollapsedShowTitle" />
     <NScrollbar :class="bem('scrollbar')">
       <NMenu
-        v-if="options && options.length > 0"
-        ref="menuRef"
-        v-model:value="activeKey"
-        class="w-full"
-        :style="{
+        v-if="options && options.length > 0" ref="menuRef" v-model:value="activeKey" class="w-full" :style="{
           justifyContent: getTopMenuAlign === 'center' ? 'center' : `flex-${getTopMenuAlign}`,
-        }"
-        :options="options"
-        :collapsed="getMenuCollapsed"
-        :collapsed-width="48"
-        :collapsed-icon-size="22"
-        :indent="18"
-        :root-indent="18"
-        :mode="props.mode"
-        :accordion="menu.accordion"
-        :inverted="inverted"
+        }" :options="options" :collapsed="getMenuCollapsed" :collapsed-width="48" :collapsed-icon-size="22" :indent="18"
+        :root-indent="18" :mode="props.mode" :accordion="menu.accordion" :inverted="inverted"
         @update:value="clickMenu"
       />
-      <NEmpty
-        v-else
-        class="py-8"
-        :size="getCollapsed ? 'small' : 'huge'"
-        description="当前主菜单下无子菜单"
-      >
+      <NEmpty v-else class="py-8" :size="getCollapsed ? 'small' : 'huge'" description="当前主菜单下无子菜单">
         <template #icon>
           <LIcon icon="ant-design:unordered-list-outlined" :size="getCollapsed ? 24 : 42" />
         </template>

src/layouts/nlayout/components/menu/mix-menu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
-import type { RouteLocationNormalized } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto'
 import Logo from '../logo/index.vue'
 import SiderTrigger from '../trigger/sider-trigger.vue'
 import MixSubMenu from './mix-sub-menu.vue'

src/layouts/nlayout/components/menu/mix-sub-menu.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { MenuInst } from 'naive-ui'
 import type { MenuMixedOption } from 'naive-ui/es/menu/src/interface'
-import { RouterLink } from 'vue-router'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { RouterLink } from 'vue-router/auto'
+import type { RouteLocationNormalizedLoaded } from 'vue-router/auto'
 import { REDIRECT_NAME } from '~/constants'
 import { createNamespace, listenerRouteChange, mapTree } from '~/utils'
 
@@ -86,16 +86,8 @@ const { isSidebarDark } = useAppTheme()
   <div :class="bem()">
     <NScrollbar :class="bem('scrollbar')">
       <NMenu
-        ref="menuRef"
-        v-model:value="activeKey"
-        :options="menuListRef"
-        :collapsed-width="48"
-        :collapsed="false"
-        :collapsed-icon-size="22"
-        :indent="18"
-        :root-indent="18"
-        :accordion="getAccordion"
-        :inverted="isSidebarDark"
+        ref="menuRef" v-model:value="activeKey" :options="menuListRef" :collapsed-width="48" :collapsed="false"
+        :collapsed-icon-size="22" :indent="18" :root-indent="18" :accordion="getAccordion" :inverted="isSidebarDark"
       />
     </NScrollbar>
   </div>
@@ -106,6 +98,7 @@ const { isSidebarDark } = useAppTheme()
   display: flex;
   flex-direction: column;
   height: 100%;
+
   &__scrollbar {
     flex: 1;
     flex-basis: auto;

src/layouts/nlayout/components/tabs/components/tab-dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RouteLocationNormalized } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto'
 import { TabActionEnum } from '~/constants'
 
 const { t } = useI18n()

src/layouts/nlayout/components/tabs/components/tab-quick.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { RouteLocationNormalized } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto'
 import { TabActionEnum } from '~/constants'
 
 const props = defineProps({

src/layouts/nlayout/components/tabs/components/types.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationNormalized } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto'
 
 export interface TabDropDownInst {
   openDropdown: (e: MouseEvent, tabItem: RouteLocationNormalized) => void

src/layouts/nlayout/components/tabs/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import type { RouteLocationNormalized } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto'
 import TabRedo from './components/tab-redo.vue'
 import TabQuick from './components/tab-quick.vue'
 import TabFoldButton from './components/tab-foldbutton.vue'

src/modules/router/router.ts

@@ -17,7 +17,7 @@ export function initRouter(path: string): Router {
     scrollBehavior: () => ({ left: 0, top: 0 }),
     extendRoutes: (routes: RouteRecordRaw[]) => {
       const initialRoutes = routeStore.initRoutes(routes)
-      console.log('🚀 ~ initRouter ~ setupLayouts(initialRoutes):', initialRoutes, setupLayouts(initialRoutes))
+      // console.log('🚀 ~ initRouter ~ setupLayouts(initialRoutes):', initialRoutes, setupLayouts(initialRoutes))
       return setupLayouts(initialRoutes)
     },
   })

src/modules/router/routes/basic.ts

@@ -1,4 +1,4 @@
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router/auto'
 import { PAGE_NOT_FOUND_NAME, REDIRECT_NAME } from '~/constants'
 
 const PAGE_NOT_FOUND_ROUTE: RouteRecordRaw = {

src/pages/index.vue

@@ -2,6 +2,13 @@
 defineOptions({
   name: 'IndexPage',
 })
+definePage({
+  meta: {
+    title: 'menu.home',
+    order: 1,
+    icon: 'carbon-home',
+  },
+})
 useHead({
   title: '首页',
 })
@@ -10,6 +17,7 @@ useHead({
 <template>
   <div>
     <NInput />
+    <NButton>Button</NButton>
     <div>placeholder</div>
     <div>placeholder</div>
     <div>placeholder</div>
@@ -73,13 +81,6 @@ useHead({
   </div>
 </template>
 
-<route lang="yaml">
-meta:
-  title: menu.home
-  order: 1
-  icon: carbon-home
-</route>
-
 <style lang="less" scoped>
 .setting-btn {
   background: var(--card-color);

src/stores/multiple-tab.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { RouteLocationNormalized, RouteLocationRaw, Router } from 'vue-router'
+import type { RouteLocationNormalized, RouteLocationRaw, Router } from 'vue-router/auto'
 import { PAGE_NOT_FOUND_NAME, PageEnum, REDIRECT_NAME, TabActionEnum } from '~/constants'
 import { getRawRoute } from '~/utils'
 
@@ -89,12 +89,12 @@ export const useMultipleTabStore = defineStore('MULTIPLE_TAB', () => {
       [PageEnum.ERROR_PAGE, PageEnum.BASE_LOGIN, PageEnum.BASE_REGISTER, PageEnum.BASE_LOCK].includes(
         path as PageEnum,
       )
-            || meta?.hideInTab
-            || !name
-            || [
-              REDIRECT_NAME,
-              PAGE_NOT_FOUND_NAME,
-            ].includes(name as string)
+      || meta?.hideInTab
+      || !name
+      || [
+        REDIRECT_NAME,
+        PAGE_NOT_FOUND_NAME,
+      ].includes(name as string)
     ) {
       return
     }

src/typed-router.d.ts

@@ -25,6 +25,7 @@ declare module 'vue-router/auto-routes' {
     '/login/components/account': RouteRecordInfo<'/login/components/account', '/login/components/account', Record<never, never>, Record<never, never>>,
     '/login/components/sms': RouteRecordInfo<'/login/components/sms', '/login/components/sms', Record<never, never>, Record<never, never>>,
     '/README': RouteRecordInfo<'/README', '/README', Record<never, never>, Record<never, never>>,
+    'Redirect': RouteRecordInfo<'Redirect', '/redirect/:path(.*):_redirect_type(.*)', { path: ParamValue<true>, _redirect_type: ParamValue<true> }, { path: ParamValue<false>, _redirect_type: ParamValue<false> }>,
     '/register': RouteRecordInfo<'/register', '/register', Record<never, never>, Record<never, never>>,
     '/register/': RouteRecordInfo<'/register/', '/register', Record<never, never>, Record<never, never>>,
     '/register/components/account': RouteRecordInfo<'/register/components/account', '/register/components/account', Record<never, never>, Record<never, never>>,

src/types/tabs.d.ts

@@ -1,5 +1,5 @@
 import type { RemovableRef } from '@vueuse/core'
-import type { RouteLocationNormalized } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto'
 
 declare global {
   interface DefineMultipleTabOptions {

src/utils/router/helper.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router'
+import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router/auto'
 
 export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
   if (!route)

src/utils/router/menus/index.ts

@@ -1,4 +1,4 @@
-import type { RouteRecordNormalized, RouteRecordRaw } from 'vue-router'
+import type { RouteRecordNormalized, RouteRecordRaw } from 'vue-router/auto'
 import { pathToRegexp } from 'path-to-regexp'
 import { cloneDeep, findParentPath, isUrl, mapTree } from '~/utils'
 

src/utils/router/mitt/index.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationNormalized } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto'
 import { getRawRoute, mitt } from '~/utils'
 
 export const emitter = mitt()

vite.config.ts

@@ -21,6 +21,7 @@ import Layouts from 'vite-plugin-vue-layouts'
 
 // vue-router
 import VueRouter from 'unplugin-vue-router/vite'
+import type { EditableTreeNode } from 'unplugin-vue-router'
 import { VueRouterAutoImports } from 'unplugin-vue-router'
 
 import WebFontDownload from 'vite-plugin-webfont-dl'
@@ -52,6 +53,8 @@ import pkg from './package.json'
 
 type Algorithm = 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'
 
+let routeExtended = false
+
 export default defineConfig(({ command, mode }: ConfigEnv) => {
   console.log('command', command)
   const viteEnv = loadEnv(mode, process.cwd())
@@ -69,6 +72,31 @@ export default defineConfig(({ command, mode }: ConfigEnv) => {
       // 忽略 pages 中的所有 components 下的组件路由
       // exclude: ['**/components/*'],
       dts: 'src/typed-router.d.ts',
+      extendRoute: (route: EditableTreeNode) => {
+        if (routeExtended) {
+          return
+        }
+
+        const findRoot = (route: EditableTreeNode): EditableTreeNode => {
+          if (route.parent) {
+            return findRoot(route.parent)
+          }
+          return route
+        }
+        const root = findRoot(route)
+
+        const redirectRoute = root.insert('/redirect/:path(.*):_redirect_type(.*)', '~/layouts/page/redirect.vue')
+
+        redirectRoute.name = 'Redirect'
+        redirectRoute.path = '/redirect/:path(.*):_redirect_type(.*)'
+        redirectRoute.meta = {
+          title: 'Redirect',
+          hideInMenu: true,
+          hideInBreadcrumb: true,
+        }
+
+        routeExtended = true
+      },
     }),
 
     VueMacros({