补充 v3.3.0 的一些细节

.eslintrc.cjs

@@ -114,7 +114,7 @@ module.exports = {
     'no-multi-assign': 2, // 禁止连续声明变量
     'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调
     'vue/multi-word-component-names': [
-      'off',
+      'error',
       {
         ignores: [],
       },
@@ -136,5 +136,35 @@ module.exports = {
         allowNamedExports: false,
       },
     ],
+    'vue/component-definition-name-casing': ['error', 'PascalCase'],
+    'vue/html-closing-bracket-newline': [
+      'error',
+      {
+        singleline: 'never',
+        multiline: 'always',
+      },
+    ],
+    'vue/v-on-event-hyphenation': ['error', 'never'],
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['template', 'script', 'style'],
+      },
+    ],
+    'vue/no-v-html': ['error'],
+    'vue/no-v-text': ['error'],
+    'vue/component-api-style': [
+      'error',
+      ['script-setup', 'composition', 'composition-vue2'],
+    ],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+        globals: ['RouterView'],
+      },
+    ],
+    'vue/no-unused-refs': ['error'],
   },
 }

CHANGELOG.md

@@ -8,6 +8,8 @@
 - 新增 Route Meta keepAlive 配置开启页面缓存（可以在 AppConfig APP_KEEP_ALIVE 中进行缓存的配置管理）
 - 回退使用自动导入路由模块方式，具体使用方法查看 [路由配置](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/src/router/README.md)
 - 新增 Route Meta order 配置，配置菜单顺序
+- 新增 useVueRouter 方法，让你在 setup 环境之外使用 router hook
+- 补充引入了一些 eslint 规则
 - 支持更多 appConfig 配置
 
 ### 补充

components.d.ts

@@ -7,8 +7,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default']
+    RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default']
   }
 }

src/appConfig/requestConfig.ts

@@ -0,0 +1,22 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import type { AxiosConfig } from '@/types/appConfig'
+
+/** axios 相关配置 */
+export const AXIOS_CONFIG: AxiosConfig = {
+  baseURL: '', // `import.meta.env`,
+  withCredentials: false, // 是否允许跨域携带 `cookie`
+  timeout: 5 * 1000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+}

src/appConfig/routerConfig.ts

@@ -22,3 +22,33 @@ export const viewScrollContainerId = 'rayLayoutContentWrapperScopeSelector'
  * 可以控制内容区域当前滚动位置
  */
 export const LAYOUT_CONTENT_REF = ref<LayoutInst>()
+
+/** 是否启用路由切换时顶部加载条 */
+export const SETUP_ROUTER_LOADING_BAR = true
+
+/** 是否启用路由守卫, 如果设置为 false 则不会触发路由切换校验 */
+export const SETUP_ROUTER_GUARD = true
+
+/**
+ *
+ * 路由白名单(不进行权限校验路由)
+ *
+ * 路由表单白名单
+ *
+ * 如果需要启用该功能, 则需要配置路由 name 属性, 并且需要一一对应(对大小写敏感)
+ * 如果未设置, 则不会生效
+ *
+ * 配置该路由白名单列表后, 则不会对配置中的路由列表进行鉴权处理(配合 basic.ts 中的方法进行使用)
+ *
+ * 配置动态路由菜单
+ * 可以根据权限与白名单进行过滤, 但是 meta hidden 属性拥有最高的控制权限
+ * 如果 mete hidden 设置为 false 则永远不会显示菜单选项
+ */
+export const WHITE_ROUTES = ['login', 'error-page', 'doc']
+
+/**
+ *
+ * 超级管理员
+ * 配置默认超级管理员, 默认拥有全部最高权限
+ */
+export const SUPER_ADMIN = ['admin']

src/axios/helper/interceptor.ts

@@ -0,0 +1,33 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** axios 拦截器工具 */
+
+import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios'
+import type { RequestHeaderOptions } from '../type'
+
+/**
+ *
+ * @param instance axios instance
+ * @param options axios headers options
+ *
+ * @remark 自定义 `axios` 请求头配置
+ */
+export const appendRequestHeaders = (
+  instance: AxiosRequestConfig<unknown>,
+  options: RequestHeaderOptions[],
+) => {
+  const requestHeaders = instance.headers as RawAxiosRequestHeaders
+
+  options.forEach((curr) => {
+    requestHeaders[curr.key] = curr.value
+  })
+}

src/axios/instance.ts

@@ -18,39 +18,15 @@
 
 import axios from 'axios'
 import { getDetermineEnv } from '@use-utils/hook'
-import RequestCanceler from './canceler'
+import RequestCanceler from './helper/canceler'
+import { AXIOS_CONFIG } from '@/appConfig/requestConfig'
+import { appendRequestHeaders } from './helper/interceptor'
 
-import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios'
+import type { AxiosInstanceExpand } from './type'
-import type { RequestHeaderOptions, AxiosInstanceExpand } from './type'
 
 const canceler = new RequestCanceler()
 
-/**
+const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG)
- *
- * @param instance axios instance
- * @param options axios headers options
- *
- * @remark 自定义 `axios` 请求头配置
- */
-const appendRequestHeaders = (
-  instance: AxiosRequestConfig<unknown>,
-  options: RequestHeaderOptions[],
-) => {
-  const requestHeaders = instance.headers as RawAxiosRequestHeaders
-
-  options.forEach((curr) => {
-    requestHeaders[curr.key] = curr.value
-  })
-}
-
-const server: AxiosInstanceExpand = axios.create({
-  baseURL: '', // `import.meta.env`,
-  withCredentials: false, // 是否允许跨域携带 `cookie`
-  timeout: 5 * 1000,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
 
 server.interceptors.request.use(
   (request) => {

src/axios/type.ts

@@ -75,7 +75,7 @@ export interface AxiosInstanceExpand extends Axios {
     config?: AxiosRequestConfig<D>,
   ): Promise<R>
 
-  defaults: Omit<AxiosDefaults, 'headers'> & {
+  defaults: Omit<AxiosDefaults, 'headers' | 'cancelToken'> & {
     headers: HeadersDefaults & {
       [key: string]: AxiosHeaderValue
     }

src/components/RayTransitionComponent/TransitionComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-view>
+  <RouterView>
     <template #default="{ Component, route }">
       <transition
         :name="transitionPropName"
@@ -17,7 +17,7 @@
         <component :is="Component" v-else :key="route.fullPath" />
       </transition>
     </template>
-  </router-view>
+  </RouterView>
 </template>
 <script lang="ts" setup>
 import { useKeepAlive } from '@/store'

src/dayjs/index.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
 import dayjs from 'dayjs'
 import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/appConfig/localConfig'
 import 'dayjs/locale/zh-cn'

src/error/PageResult/index.tsx

@@ -0,0 +1,50 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 错误页面
+ *
+ * 基于 NResult 组件实现, 继承该组件所有 props 与 slots
+ * 可以当作一个组件使用, 也可以当作一个页面调用
+ */
+
+import './index.scss'
+
+import { NResult, NButton } from 'naive-ui'
+
+import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
+import { resultProps } from 'naive-ui'
+
+const PageResult = defineComponent({
+  name: 'PageResult',
+  props: {
+    ...resultProps,
+  },
+  render() {
+    return (
+      <div class="error-page">
+        <NResult {...this.$props} status="500" title="小调皮你走错地方了">
+          {{
+            ...this.$slots,
+            footer: () => (
+              <NButton onClick={redirectRouterToDashboard.bind(this, false)}>
+                返回首页
+              </NButton>
+            ),
+          }}
+        </NResult>
+      </div>
+    )
+  },
+})
+
+export default PageResult

src/error/README.md

@@ -0,0 +1,10 @@
+## 异常
+
+### 说明
+
+- 当前系统使用 Error404 作为系统的默认异常页重定向页面（可自行替换或者更改）
+- 提供公共的入口组件，虽然没啥大用，强迫症患者典型
+
+### 更改与替换
+
+> 如果需要自己更改，或者补充更多的异常页面，可以在当前文件的 views 下补充（建议这么做哈）。也可以直接摒弃现有的东西，全部重新折腾一次，因为这个东西，一般不会太复杂。

src/error/index.ts

@@ -0,0 +1,3 @@
+import PageResult from './PageResult/index'
+
+export default PageResult

src/error/views/Error404/index.tsx

@@ -0,0 +1,24 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import PageResult from '@/error/index'
+
+const ErrorPage404 = defineComponent({
+  name: 'ErrorPage404',
+  setup() {
+    return {}
+  },
+  render() {
+    return <PageResult status="404" />
+  },
+})
+
+export default ErrorPage404

src/error/views/Error500/index.tsx

@@ -0,0 +1,24 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import PageResult from '@/error/index'
+
+const ErrorPage500 = defineComponent({
+  name: 'ErrorPage500',
+  setup() {
+    return {}
+  },
+  render() {
+    return <PageResult status="500" />
+  },
+})
+
+export default ErrorPage500

src/layout/components/Menu/index.tsx

@@ -5,12 +5,13 @@ import RayIcon from '@/components/RayIcon/index'
 
 import { useMenu } from '@/store'
 import { MENU_COLLAPSED_CONFIG, MENU_ACCORDION } from '@/appConfig/appConfig'
+import { useVueRouter } from '@/router/helper/useVueRouter'
 
 const LayoutMenu = defineComponent({
   name: 'LayoutMenu',
   setup() {
     const menuStore = useMenu()
-    const router = useRouter()
+    const { router } = useVueRouter()
 
     const { menuModelValueChange, collapsedMenu } = menuStore
     const modelMenuKey = computed({

src/layout/components/MenuTag/index.tsx

@@ -26,6 +26,7 @@ import RayIcon from '@/components/RayIcon/index'
 import { useMenu, useSetting } from '@/store'
 import { uuid } from '@/utils/hook'
 import { hasClass } from '@/utils/element'
+import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
 import { ROOT_ROUTE } from '@/appConfig/appConfig'
 
 import type { MenuOption, ScrollbarInst } from 'naive-ui'
@@ -37,7 +38,6 @@ const MenuTag = defineComponent({
 
     const menuStore = useMenu()
     const settingStore = useSetting()
-    const router = useRouter()
 
     const { menuKey, menuTagOptions } = storeToRefs(menuStore)
     const {
@@ -139,9 +139,7 @@ const MenuTag = defineComponent({
          */
         if (moreOptions.value.length > 1) {
           emptyMenuTagOptions()
-          router.replace({
+          redirectRouterToDashboard(true)
-            path: path,
-          })
         }
       },
       closeRight: () => {

src/layout/components/SiderBar/Components/Breadcrumb/index.tsx

@@ -25,7 +25,7 @@ import { useMenu } from '@/store'
 import type { DropdownOption } from 'naive-ui'
 
 const Breadcrumb = defineComponent({
-  name: 'Breadcrumb',
+  name: 'RBreadcrumb',
   setup() {
     const menuStore = useMenu()
 

src/layout/components/SiderBar/Components/GlobalSeach/index.tsx

@@ -17,7 +17,7 @@ import RayIcon from '@/components/RayIcon/index'
 import { on, off } from '@/utils/element'
 import { debounce } from 'lodash-es'
 import { useMenu } from '@/store'
-import { validRole } from '@/router/basic'
+import { validRole } from '@/router/helper/routerCopilot'
 
 import type { MenuOption } from 'naive-ui'
 import type { AppRouteMeta } from '@/router/type'

src/layout/default/ContentWrapper/index.tsx

@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
+import RayTransitionComponent from '@/components/RayTransitionComponent/TransitionComponent.vue'
 
 import { useSetting } from '@/store'
 

src/layout/index.tsx

@@ -22,7 +22,7 @@ import {
 } from '@/appConfig/routerConfig'
 
 const Layout = defineComponent({
-  name: 'Layout',
+  name: 'RLayout',
   setup() {
     const settingStore = useSetting()
     const menuStore = useMenu()

src/main.ts

@@ -1,22 +1,16 @@
-import { createApp } from 'vue'
-
 import type { App as AppType } from 'vue'
 
 import '@/styles/base.scss'
 
 import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不使用此插件注释即可
 import 'dayjs/locale/zh-cn'
-import dayjs from 'dayjs'
 
 import App from './App'
 
-import {
+import { setupRouter } from './router/index'
-  setupRouter,
-  setupRouterLoadingBar,
-  permissionRouter,
-} from './router/index'
 import { setupStore } from './store/index'
 import { setupI18n } from './locales/index'
+import { setupDayjs } from './dayjs/index'
 
 /**
  *
@@ -31,11 +25,7 @@ const setupTemplate = async () => {
 
   setupRouter(app)
 
-  setupRouterLoadingBar()
+  setupDayjs()
-
-  permissionRouter()
-
-  dayjs.locale('zh-cn')
 
   app.mount('#app')
 }
@@ -57,11 +47,7 @@ const setupWujieTemplate = async () => {
 
     setupRouter(instance)
 
-    setupRouterLoadingBar()
+    setupDayjs()
-
-    permissionRouter()
-
-    dayjs.locale('zh-cn')
 
     instance.mount('#app')
   }

src/router/README.md

@@ -1,3 +1,13 @@
+## router 拓展
+
+### routerCopilot
+
+> 该文件提供了一些辅助方法，让你更方便的做一些事情。系统其他地方引用了该方法，所以删除需谨慎。
+
+### useVueRouter
+
+> 二次封装了一个 router hook 方法，让你能够在 setup 环境之外使用 router。建议都使用该方法（useVueRouter）而不是 useRouter。
+
 ## 路由添加规则
 
 - modules 中每一个 ts 文件视为一个路由模块

src/router/basic.ts

@@ -1,52 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-01-28
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/**
- *
- * 公共路由, 不需要鉴权
- *
- * 需要按照路由名称一一对应, 鉴权会采用 includes 进行判断
- *
- * 如果需要添加公共路由, 不希望添加复杂 meta 配置, 则可以在此添加路由名称即可
- *
- * 该配置会覆盖 meta 配置
- *
- * 默认预设 admin 作为超级管理员角色, 可根据自身需求修改
- */
-
-import { useSignin } from '@/store'
-import { whiteRoutes, superAdmin } from './configuration'
-
-export const validRole = (option: IMenuOptions) => {
-  const { signinCallback } = storeToRefs(useSignin())
-  const role = computed(() => signinCallback.value.role)
-
-  const { meta, name } = option
-  const hidden =
-    meta?.hidden === undefined || meta?.hidden === false ? false : meta?.hidden
-
-  // 如果是超级管理员(预设为 admin), 则根据其菜单栏(hidden)字段判断是否显示
-  if (superAdmin.length && superAdmin.includes(role.value)) {
-    return true && !hidden
-  } else {
-    // 如果为基础路由, 不进行鉴权则根据其菜单栏(hidden)字段判断是否显示
-    if (whiteRoutes.includes(name)) {
-      return true && !hidden
-    }
-
-    // 判断权限是否匹配和菜单栏(hidden)字段判断是否显示
-    if (meta?.role) {
-      return meta.role.includes(role.value) && !hidden
-    }
-
-    return true && !hidden
-  }
-}

src/router/configuration.ts

@@ -1,37 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-19
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/**
- *
- * 配置动态路由菜单
- *
- * 可以根据权限与白名单进行过滤, 但是 meta hidden 属性拥有最高的控制权限
- * 如果 mete hidden 设置为 false 则永远不会显示菜单选项
- */
-
-/**
- *
- * 路由表单白名单
- *
- * 如果需要启用该功能, 则需要配置路由 name 属性, 并且需要一一对应(对大小写敏感)
- * 如果未设置, 则不会生效
- *
- * 配置该路由白名单列表后, 则不会对配置中的路由列表进行鉴权处理(配合 basic.ts 中的方法进行使用)
- */
-export const whiteRoutes = ['login', 'error-page', 'doc']
-
-/**
- *
- * 超级管理员
- *
- * 配置默认超级管理员, 默认拥有全部最高权限
- */
-export const superAdmin = ['admin']

src/router/helper/permission.ts

@@ -11,14 +11,12 @@
 
 /**
  *
- * 路由守卫, 进行路由鉴权操作
+ * 路由守卫
+ * 进行路由鉴权操作
  *
  * 根据 meta role 与 BASIC_ROUTER 结合进行跳转路由鉴权操作
- *
  * 如果 meta role 为空则会默认认为全局可用
- *
  * 如果需要指定角色, 则添加该属性并且添加角色
- *
  * 当然, 你可以指定一个超级管理员角色, 默认获取全部路由
  */
 

src/router/helper/routerCopilot.ts

@@ -0,0 +1,104 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { permissionRouter } from './permission'
+
+import {
+  SETUP_ROUTER_LOADING_BAR,
+  SETUP_ROUTER_GUARD,
+  WHITE_ROUTES,
+  SUPER_ADMIN,
+} from '@/appConfig/routerConfig'
+import { useSignin } from '@/store'
+import { useVueRouter } from '@/router/helper/useVueRouter'
+import { ROOT_ROUTE } from '@/appConfig/appConfig'
+
+import type { Router } from 'vue-router'
+
+/**
+ *
+ * @remark 校验当前路由
+ */
+export const validRole = (option: IMenuOptions) => {
+  const { signinCallback } = storeToRefs(useSignin())
+  const role = computed(() => signinCallback.value.role)
+
+  const { meta, name } = option
+  const hidden =
+    meta?.hidden === undefined || meta?.hidden === false ? false : meta?.hidden
+
+  // 如果是超级管理员(预设为 admin), 则根据其菜单栏(hidden)字段判断是否显示
+  if (SUPER_ADMIN.length && SUPER_ADMIN.includes(role.value)) {
+    return true && !hidden
+  } else {
+    // 如果为基础路由, 不进行鉴权则根据其菜单栏(hidden)字段判断是否显示
+    if (WHITE_ROUTES.includes(name)) {
+      return true && !hidden
+    }
+
+    // 判断权限是否匹配和菜单栏(hidden)字段判断是否显示
+    if (meta?.role) {
+      return meta.role.includes(role.value) && !hidden
+    }
+
+    return true && !hidden
+  }
+}
+
+/**
+ *
+ * @remark 路由切换启用顶部加载条
+ * @remark 路由切换启用加载动画
+ */
+export const setupRouterLoadingBar = (router: Router) => {
+  router.beforeEach(() => {
+    window?.$loadingBar?.start()
+  })
+
+  router.afterEach(() => {
+    window?.$loadingBar?.finish()
+  })
+
+  router.onError(() => {
+    window?.$loadingBar?.error()
+  })
+}
+
+/**
+ *
+ * @param router vue router instance
+ *
+ * @remark 统一的路由相关功能配置, 虽然该方法有点蠢...
+ */
+export const vueRouterRegister = (router: Router) => {
+  if (SETUP_ROUTER_LOADING_BAR) {
+    setupRouterLoadingBar(router)
+  }
+
+  if (SETUP_ROUTER_GUARD) {
+    permissionRouter(router)
+  }
+}
+
+/**
+ *
+ * @param replace 是否使用
+ *
+ * @remark 重定向路由至首页
+ */
+export const redirectRouterToDashboard = (isReplace?: boolean) => {
+  const { router } = useVueRouter()
+
+  const { push, replace } = router
+  const { path } = ROOT_ROUTE
+
+  isReplace ? push(path) : replace(path)
+}

src/router/helper/useVueRouter.ts

@@ -0,0 +1,32 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { router } from '@/router/index'
+
+/**
+ *
+ * @returns vue router instance
+ *
+ * @remark 使用 vue router instance, 可以在 setup 环境外使用
+ */
+export const useVueRouter = () => {
+  try {
+    if (router) {
+      return {
+        router,
+      }
+    } else {
+      throw new Error()
+    }
+  } catch (e) {
+    throw new Error('router is not defined')
+  }
+}

src/router/index.ts

@@ -1,47 +1,36 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import scrollViewToTop from '@/router/utils/viewScrollTop'
+import { vueRouterRegister } from '@/router/helper/routerCopilot'
+import { useVueRouter } from '@/router/helper/useVueRouter'
+
 import constantRoutes from './routes'
 
-import { permissionRouter as _permissionRouter } from './permission'
-import scrollViewToTop from '@/router/utils/viewScrollTop'
-
 import type { App } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw, Router } from 'vue-router'
 
-export const router = createRouter({
+export let router: Router
-  history: createWebHashHistory(),
-  routes: constantRoutes as unknown as RouteRecordRaw[],
-  scrollBehavior: (to) => {
-    scrollViewToTop(to)
 
-    return {
+const createVueRouter = () => {
-      top: 0,
+  return createRouter({
-      left: 0,
+    history: createWebHashHistory(),
-    }
+    routes: constantRoutes as unknown as RouteRecordRaw[],
-  },
+    scrollBehavior: (to) => {
-})
+      scrollViewToTop(to)
 
-export const permissionRouter = () => _permissionRouter(router)
+      return {
+        top: 0,
+        left: 0,
+      }
+    },
+  })
+}
 
 // setup router
 export const setupRouter = (app: App<Element>) => {
+  router = createVueRouter()
+
+  vueRouterRegister(router)
+  useVueRouter()
+
   app.use(router)
 }
-
-/**
- *
- * @remark 路由切换启用顶部加载条
- * @remark 路由切换启用加载动画
- */
-export const setupRouterLoadingBar = () => {
-  router.beforeEach(() => {
-    window?.$loadingBar?.start()
-  })
-
-  router.afterEach(() => {
-    window?.$loadingBar?.finish()
-  })
-
-  router.onError(() => {
-    window?.$loadingBar?.error()
-  })
-}

src/router/modules/error.ts

@@ -3,7 +3,7 @@ import type { AppRouteRecordRaw } from '@/router/type'
 const error: AppRouteRecordRaw = {
   path: '/error',
   name: 'ErrorPage',
-  component: () => import('@/views/error/index'),
+  component: () => import('@/error/views/Error404/index'),
   meta: {
     i18nKey: 'Error',
     icon: 'error',

src/router/routes.ts

@@ -19,9 +19,8 @@ export default [
     children: expandRoutes(childrenRoutes),
   },
   {
-    /** 错误页面(404) */
     path: '/:catchAll(.*)',
-    name: 'error-page',
+    name: 'errorPage',
     component: Layout,
     redirect: '/error',
   },

src/spin/hook.ts

@@ -6,4 +6,4 @@ export const spinValue = ref(false)
  *
  * @remark 使用 spin 全屏加载效果工具函数
  */
-export const useSpin = (bool: boolean) => (spinValue.value = bool)
+export const setSpin = (bool: boolean) => (spinValue.value = bool)

src/spin/index.tsx

@@ -16,8 +16,8 @@
  * 基于 Naive UI Spin 组件
  *
  * 使用方法
- *   1. import { useSpin } from '@/spin'
+ *   1. import { setSpin } from '@/spin'
- *   2. useSpin(true) | useSpin(false)
+ *   2. setSpin(true) | setSpin(false)
  *
  * 仅需按照上述步骤实现全屏加载动画
  *
@@ -31,7 +31,7 @@ import { NSpin } from 'naive-ui'
 import { spinProps } from 'naive-ui'
 import { spinValue } from './hook'
 
-export { useSpin } from './hook'
+export { setSpin } from './hook'
 
 const GlobalSpin = defineComponent({
   name: 'GlobalSpin',

src/store/modules/menu/index.ts

@@ -26,12 +26,13 @@ import { NEllipsis } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 
 import { getCache, setCache } from '@/utils/cache'
-import { validRole } from '@/router/basic'
+import { validRole } from '@/router/helper/routerCopilot'
 import { parse, matchMenuOption, updateDocumentTitle } from './helper'
 import { useI18n } from '@/locales/useI18n'
 import { MENU_COLLAPSED_CONFIG, ROOT_ROUTE } from '@/appConfig/appConfig'
 import routeModules from '@/router/routeModules'
 import { useKeepAlive } from '@/store'
+import { useVueRouter } from '@/router/helper/useVueRouter'
 
 import type { MenuOption } from 'naive-ui'
 import type { AppRouteMeta } from '@/router/type'
@@ -39,7 +40,7 @@ import type { AppRouteMeta } from '@/router/type'
 export const useMenu = defineStore(
   'menu',
   () => {
-    const router = useRouter()
+    const { router } = useVueRouter()
     const route = useRoute()
     const { t } = useI18n()
     const { setKeepAliveInclude } = useKeepAlive()

src/types/appConfig.ts

@@ -1,3 +1,5 @@
+import type { CreateAxiosDefaults } from 'axios'
+
 export type CollapsedMode = 'transform' | 'width'
 
 export interface MenuCollapsedConfig {
@@ -12,3 +14,5 @@ export interface AppKeepAlive {
   keepAliveExclude?: string[]
   maxKeepAliveLength: number
 }
+
+export interface AxiosConfig extends Omit<CreateAxiosDefaults, 'cancelToken'> {}

src/utils/hook.ts

@@ -81,10 +81,3 @@ export const uuid = (length = 16, radix?: number) => {
 
   return arr.join('')
 }
-
-// // lodash 将字符串转为大驼峰
-// export const toCamelCase = (str: string) => {
-//   return str.replace(/-(\w)/g, (all, letter) => {
-//     return letter.toUpperCase()
-//   })
-// }

src/views/axios/index.tsx

@@ -12,7 +12,7 @@ import {
 import { onAxiosTest } from '@use-api/test'
 
 const Axios = defineComponent({
-  name: 'Axios',
+  name: 'RAxios',
   setup() {
     const state = reactive({
       weatherData: [] as IUnknownObjectKey[],

src/views/dashboard/index.tsx

@@ -13,7 +13,7 @@ import RayIcon from '@/components/RayIcon/index'
 import RayLink from '@/components/RayLink/index'
 
 const Dashboard = defineComponent({
-  name: 'Dashboard',
+  name: 'RDashboard',
   setup() {
     const coverLetterOptions = [
       {

src/views/echart/index.tsx

@@ -4,7 +4,7 @@ import { NCard, NSwitch, NSpace, NP, NH6, NH2, NH3 } from 'naive-ui'
 import RayChart from '@/components/RayChart/index'
 
 const Echart = defineComponent({
-  name: 'Echart',
+  name: 'REchart',
   setup() {
     const baseChartRef = ref()
     const chartLoading = ref(false)

src/views/error/index.tsx

@@ -1,37 +0,0 @@
-import './index.scss'
-
-import { NResult, NButton } from 'naive-ui'
-
-import { ROOT_ROUTE } from '@/appConfig/appConfig'
-
-const ErrorPage = defineComponent({
-  name: 'ErrorPage',
-  setup() {
-    const router = useRouter()
-
-    const { path } = ROOT_ROUTE
-
-    const handleBack = () => {
-      router.push(path)
-    }
-
-    return {
-      handleBack,
-    }
-  },
-  render() {
-    return (
-      <div class="error-page">
-        <NResult status="500" title="小调皮你走错地方了">
-          {{
-            footer: () => (
-              <NButton onClick={this.handleBack.bind(this)}>返回首页</NButton>
-            ),
-          }}
-        </NResult>
-      </div>
-    )
-  },
-})
-
-export default ErrorPage

src/views/login/components/Register/index.tsx

@@ -1,7 +1,7 @@
 import { NResult } from 'naive-ui'
 
 const Register = defineComponent({
-  name: 'Register',
+  name: 'RRegister',
   render() {
     return (
       <NResult status="info" title="提示" description="我实在是不想写了..." />

src/views/login/components/Signin/index.tsx

@@ -1,15 +1,16 @@
 import { NForm, NFormItem, NInput, NButton, NSpace, NDivider } from 'naive-ui'
 
 import { setCache } from '@/utils/cache'
-import { useSpin } from '@/spin'
+import { setSpin } from '@/spin'
 import { useSignin } from '@/store'
 import { useI18n } from '@/locales/useI18n'
 import { APP_CATCH_KEY, ROOT_ROUTE } from '@/appConfig/appConfig'
+import { useVueRouter } from '@/router/helper/useVueRouter'
 
 import type { FormInst } from 'naive-ui'
 
 const Signin = defineComponent({
-  name: 'Signin',
+  name: 'RSignin',
   setup() {
     const loginFormRef = ref<FormInst>()
 
@@ -24,7 +25,7 @@ const Signin = defineComponent({
       pwd: '123456',
     })
 
-    const router = useRouter()
+    const { router } = useVueRouter()
     const signinForm = ref(useSigninForm())
 
     const rules = {
@@ -44,13 +45,13 @@ const Signin = defineComponent({
     const handleLogin = () => {
       loginFormRef.value?.validate((valid) => {
         if (!valid) {
-          useSpin(true)
+          setSpin(true)
 
           signin(signinForm.value)
             .then((res) => {
               if (res.code === 0) {
                 setTimeout(() => {
-                  useSpin(false)
+                  setSpin(false)
 
                   window.$message.success(`欢迎${signinForm.value.name}登陆~`)
 

src/views/login/index.tsx

@@ -24,7 +24,7 @@ import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
 import { useI18n } from '@/locales/useI18n'
 
 const Login = defineComponent({
-  name: 'Login',
+  name: 'RLogin',
   setup() {
     const { t } = useI18n()
     const {

src/views/office/index.tsx

@@ -12,7 +12,7 @@
 import { RouterView } from 'vue-router'
 
 const Office = defineComponent({
-  name: 'Office',
+  name: 'ROffice',
   render() {
     return <RouterView />
   },

src/views/office/views/document/index.tsx

@@ -14,7 +14,7 @@ import { uuid } from '@/utils/hook'
 import type { PropType } from 'vue'
 
 const Document = defineComponent({
-  name: 'Document',
+  name: 'RDocument',
   setup() {
     const editorUUID = uuid()
     const state = reactive({})

src/views/office/views/presentation/index.tsx

@@ -12,7 +12,7 @@
 import type { PropType } from 'vue'
 
 const Presentation = defineComponent({
-  name: 'Presentation',
+  name: 'RPresentation',
   setup() {
     return {}
   },

src/views/office/views/spreadsheet/index.tsx

@@ -12,7 +12,7 @@
 import type { PropType } from 'vue'
 
 const Spreadsheet = defineComponent({
-  name: 'Spreadsheet',
+  name: 'RSpreadsheet',
   setup() {
     return {}
   },