version: v4.3.3

CHANGELOG.md

@@ -1,5 +1,26 @@
 # CHANGE LOG
 
+## 4.3.3
+
+紧跟尤大大脚步，更新 `vite` 版本至 `5.0.0` 版本！与此同时，更新了配套所有插件！
+
+更新 ROOT_ROUTE 的一些使用方法，该配置方法与原有的方式不变，但是有一个新的功能点则是，该配置项会传递给 global-variable 的 globalRootRoute 属性。并且更改模板原有获取 path 的方法，改为响应式获取。当你要进行动态的维护 Root Route 的时候，该方法可能可以帮助到你 `useRootRoute`。
+
+如果你在更新版本后出现一些奇奇怪怪的问题，不要犹豫，直接删除 `node_modules` 后再重新安装依赖，这是缓存导致的问题。
+
+### Feats
+
+- 更新 `vite` 版本至 `5.0.0`
+- 升级所有配套插件
+- 升级 ROOT_ROUTE 配置与使用
+
+### Fixes
+
+- 修复不能正确关闭标签页问题
+- 修复不能正确识别是否能关闭标签页问题
+- 修复 `closeAll` 方法导致标签页闪烁问题
+- 修改 useVueRouter 注册时机，避免该方法使用的 HMR 报错问题
+
 ## 4.3.2
 
 升级 `vue` 版本至最新 `v3.3.8`。

README-ZH.md

@@ -26,6 +26,7 @@
 - **缓存**：任意深度页面缓存
 - **SVG**：内置 svg icon 解决方案
 - **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
+- **模板专属 hooks**：基于模板特性封装的 hooks 让你更加方便的使用模板一些功能
 
 ## 🪄 预览地址
 

README.md

@@ -15,17 +15,18 @@ A middle and backend template based on vite4.x & ts(x) & pinia & vue3.x
 
 ## ✨ Feature
 
-- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia
-- **TypeScript**：The language for application-level JavaScript
-- **App Theme**：Configurable themes
-- **Globalization**：Built-in complete internationalization solution
-- **Mock Data**：Built-in Mock data scheme
-- **Permissions**：Built-in complete dynamic routing permission generation solution
-- **Components**：Secondary encapsulation of multiple commonly used components
+- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia.
+- **TypeScript**：The language for application-level JavaScript.
+- **App Theme**：Configurable themes.
+- **Globalization**：Built-in complete internationalization solution.
+- **Mock Data**：Built-in Mock data scheme.
+- **Permissions**：Built-in complete dynamic routing permission generation solution.
+- **Components**：Secondary encapsulation of multiple commonly used components.
 - **Axios Request**：Secondary encapsulation of the axios library, supporting functions such as cancellation, anti-shake, automatic repeat cancellation, etc.
-- **Page Cache**：Arbitrarily deep page cache
-- **SVG**：Built-in svg icon solution
-- **Standalone Data Methods Views**：Decoupled management of data, methods, and views allows for secondary development with confidence
+- **Page Cache**：Arbitrarily deep page cache.
+- **SVG**：Built-in svg icon solution.
+- **Standalone Data Methods Views**：Decoupled management of data, methods, and views allows for secondary development with confidence.
+- **Template Specific Hooks** : Hooks based on the template feature package make it easier to use some of the features of the template.
 
 ## 🪄 Preview
 

cfg.ts

@@ -88,7 +88,6 @@ const config: AppConfigExport = {
     host: '0.0.0.0',
     port: 9527,
     open: false,
-    https: false,
     strictPort: false,
     fs: {
       strict: false,

package.json

@@ -1,10 +1,10 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.3.2",
+  "version": "4.3.3",
   "type": "module",
   "engines": {
-    "node": ">=16.0.0",
+    "node": "^18.0.0 || >=20.0.0",
     "pnpm": ">=8.0.0"
   },
   "scripts": {
@@ -24,74 +24,74 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.6.1",
     "awesome-qr": "2.1.5-rc.0",
-    "axios": "^1.2.0",
+    "axios": "^1.5.0",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.1.1",
     "currency.js": "^2.0.4",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
     "naive-ui": "^2.35.0",
-    "pinia": "^2.1.4",
-    "pinia-plugin-persistedstate": "^3.1.0",
+    "pinia": "^2.1.6",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
     "vue": "^3.3.8",
     "vue-hooks-plus": "1.8.5",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "^9.7.0",
     "vue-router": "^4.2.4",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/eslint-parser": "^7.19.1",
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
-    "@intlify/unplugin-vue-i18n": "^0.12.1",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.11",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@intlify/unplugin-vue-i18n": "^1.5.0",
     "@types/crypto-js": "^4.1.1",
-    "@types/lodash-es": "^4.17.7",
+    "@types/lodash-es": "^4.17.11",
     "@types/mockjs": "1.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue-hooks-plus/resolvers": "1.2.4",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.8",
-    "depcheck": "^1.4.3",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^23.0.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-vue": "^9.15.1",
+    "autoprefixer": "^10.4.15",
+    "depcheck": "^1.4.5",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.2.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.18.1",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
-    "postcss": "^8.1.0",
+    "lint-staged": "^15.1.0",
+    "postcss": "^8.4.31",
     "postcss-px-to-viewport-8-plugin": "1.2.2",
-    "prettier": "^2.7.1",
-    "rollup-plugin-visualizer": "^5.8.3",
-    "sass": "1.54.3",
+    "prettier": "^3.0.3",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "sass": "1.69.5",
     "svg-sprite-loader": "^6.0.11",
-    "typescript": "^5.0.2",
-    "unplugin-auto-import": "^0.15.0",
-    "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.4.9",
-    "vite-plugin-cdn2": "0.12.4",
+    "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^5.0.0",
+    "vite-plugin-cdn2": "0.15.2",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-ejs": "^1.6.4",
+    "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-imp": "^2.3.1",
-    "vite-plugin-inspect": "^0.7.26",
-    "vite-plugin-mock-dev-server": "1.3.0",
+    "vite-plugin-imp": "^2.4.0",
+    "vite-plugin-inspect": "^0.7.38",
+    "vite-plugin-mock-dev-server": "1.3.4",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.8.4"
+    "vue-tsc": "^1.8.8"
   },
   "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
   "main": "index.ts",

src/app-config/appConfig.ts

@@ -46,12 +46,15 @@ export const PRE_LOADING_CONFIG: PreloadingConfig = {
 
 /**
  *
- * 配置根页面
- * 该项目所有重定向至首页, 都依赖该配置项
+ * 配置根路由信息
+ * 模板维护一个根路由 ROOT_ROUTE，所有的重定向操作、回到 Layout Root Path 操作都依赖该 path
  *
- * 如果修改了该项目的首页路由配置, 需要更改该配置项, 以免重定向首页操作出现错误
+ * 该变量的值，会传递给 globalRootRoute
+ * 这么做也是为了能够在兼容老版本的模板，并且也是为了能够动态的维护根路由信息
+ *
+ * 有些时候，如果你希望动态的维护 Root Route 信息，可以使用 useRootRoute 方法
  */
-export const ROOT_ROUTE: Readonly<RootRoute> = {
+export const ROOT_ROUTE: RootRoute = {
   name: 'Dashboard',
   path: '/dashboard',
 }

src/app-config/requestConfig.ts

@@ -13,7 +13,7 @@ import type { AxiosConfig } from '@/types/modules/appConfig'
 
 /** axios 相关配置 */
 export const AXIOS_CONFIG: AxiosConfig = {
-  baseURL: '', // `import.meta.env`,
+  baseURL: '', // `const { MODE } = getAppEnvironment()`,
   withCredentials: false, // 是否允许跨域携带 `cookie`
   timeout: 5 * 1000,
   headers: {

src/directives/helper/combine.ts

@@ -17,17 +17,20 @@ export const combineDirective = <
 >(
   directiveModules: T,
 ) => {
-  const directives = Object.keys(directiveModules).reduce((pre, curr) => {
-    const fc = directiveModules[curr]?.default
+  const directives = Object.keys(directiveModules).reduce(
+    (pre, curr) => {
+      const fc = directiveModules[curr]?.default
 
-    if (typeof fc === 'function') {
-      pre[curr] = fc
+      if (typeof fc === 'function') {
+        pre[curr] = fc
 
-      return pre
-    } else {
-      throw new TypeError(`directiveModules: ${curr} is not function`)
-    }
-  }, {} as Record<K, CustomDirectiveFC<unknown, unknown>>)
+        return pre
+      } else {
+        throw new TypeError(`directiveModules: ${curr} is not function`)
+      }
+    },
+    {} as Record<K, CustomDirectiveFC<unknown, unknown>>,
+  )
 
   return directives
 }

src/global-variable/variable.ts

@@ -27,6 +27,9 @@
  * setVariable('key', 'value')
  */
 
+import { ROOT_ROUTE } from '@/app-config/appConfig'
+import { cloneDeep } from 'lodash-es'
+
 import type { AnyFC } from '@/types/modules/utils'
 
 const variableState = reactive({
@@ -34,6 +37,7 @@ const variableState = reactive({
   globalDrawerValue: false, // 全局抽屉控制器（小尺寸设备可用）
   globalMainLayoutLoad: true, // LayoutContent 区域加载控制器
   layoutContentMaximize: false, // LayoutContent 区域全屏控制器
+  globalRootRoute: cloneDeep(ROOT_ROUTE), // 全局根路由配置，同步至 ROOT_ROUTE
 })
 
 export type VariableState = typeof variableState

src/hooks/template/index.ts

@@ -1,9 +1,10 @@
 import { useAppMenu } from './useAppMenu'
 import { useMainPage } from './useMainPage'
 import { useMenuTag } from './useMenuTag'
+import { useRootRoute } from './useRootRoute'
 
 export type { MaximizeOptions } from './useMainPage'
 export type { Target } from './useAppMenu'
 export type { CloseMenuTag } from './useMenuTag'
 
-export { useAppMenu, useMainPage, useMenuTag }
+export { useAppMenu, useMainPage, useMenuTag, useRootRoute }

src/hooks/template/useMenuTag.ts

@@ -10,7 +10,8 @@
  */
 
 import { useMenuGetters, useMenuActions } from '@/store'
-import { ROOT_ROUTE } from '@/app-config/appConfig'
+import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
+import { useRootRoute } from '@/hooks/template/index'
 
 import type { MenuTagOptions, Key } from '@/types/modules/app'
 
@@ -24,7 +25,7 @@ export function useMenuTag() {
     emptyMenuTagOptions,
     setMenuTagOptions,
   } = useMenuActions()
-  const { path } = ROOT_ROUTE
+  const { getRootPath } = useRootRoute()
 
   /**
    *
@@ -169,9 +170,16 @@ export function useMenuTag() {
     const normal = normalMenuTagOption(target, 'close')
 
     if (normal) {
-      const { option } = normal
+      const { index } = normal
 
-      changeMenuModelValue(option.key, option)
+      spliceMenTagOptions(index)
+
+      if (getMenuKey.value !== getRootPath.value) {
+        const length = getMenuTagOptions.value.length
+        const tag = getMenuTagOptions.value[length - 1]
+
+        changeMenuModelValue(tag.key as string, tag)
+      }
     }
   }
 
@@ -180,13 +188,8 @@ export function useMenuTag() {
    * 关闭所有标签并且导航至 root path
    */
   const closeAll = () => {
-    const option = getMenuTagOptions.value.find((curr) => curr.key === path)
-
-    if (option) {
-      changeMenuModelValue(path, option)
-    }
-
     emptyMenuTagOptions()
+    redirectRouterToDashboard()
   }
 
   /**

src/hooks/template/useRootRoute.ts

@@ -0,0 +1,48 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-17
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { setVariable, getVariableToRefs } from '@/global-variable/index'
+
+import type { DeepMutable } from '@/types/modules/helper'
+
+export function useRootRoute() {
+  const globalRootRoute = getVariableToRefs('globalRootRoute')
+
+  /**
+   *
+   * @remark 获取根路由
+   */
+  const getRootRoute = computed(() => globalRootRoute.value)
+  /**
+   *
+   * @remark 获取根路由 path
+   */
+  const getRootPath = computed(() => globalRootRoute.value.path)
+  /**
+   *
+   * @remark 获取根路由 name
+   */
+  const getRootName = computed(() => globalRootRoute.value.name)
+
+  const setRootRoute = (route: DeepMutable<typeof globalRootRoute.value>) => {
+    setVariable(
+      'globalRootRoute',
+      Object.assign({}, globalRootRoute.value, route),
+    )
+  }
+
+  return {
+    getRootRoute,
+    getRootPath,
+    getRootName,
+    setRootRoute,
+  }
+}

src/hooks/web/useWebFullscreen.ts

@@ -1,14 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-16
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-export function useWebFullscreen() {
-  //
-}

src/layout/components/MenuTag/index.tsx

@@ -42,12 +42,12 @@ import CloseLeft from '@/icons/close_left.svg?component'
 import { useMenuGetters, useMenuActions } from '@/store'
 import { uuid } from '@/utils/basic'
 import { hasClass } from '@/utils/element'
-import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { queryElements } from '@use-utils/element'
 import { renderNode } from '@/utils/vue/index'
 import { useMainPage } from '@/hooks/template/index'
 import { useMenuTag } from '@/hooks/template/index'
 import { throttle } from 'lodash-es'
+import { useRootRoute } from '@/hooks/template/index'
 
 import type { ScrollbarInst } from 'naive-ui'
 import type { MenuTagOptions, AppMenuOption } from '@/types/modules/app'
@@ -59,7 +59,7 @@ export default defineComponent({
 
     const { getMenuKey, getMenuTagOptions } = useMenuGetters()
     const { changeMenuModelValue } = useMenuActions()
-    const { path } = ROOT_ROUTE
+    const { getRootPath } = useRootRoute()
     const { reload, maximize } = useMainPage()
     const {
       close,
@@ -124,7 +124,7 @@ export default defineComponent({
     const uuidScrollBar = uuid(16) // scroll bar uuid
     const actionMap = {
       closeCurrentPage: () => {
-        getMenuKey.value !== path && close(currentContextmenuIndex)
+        getMenuKey.value !== getRootPath.value && close(currentContextmenuIndex)
       },
       reloadCurrentPage: () => {
         reload()
@@ -262,20 +262,12 @@ export default defineComponent({
      */
     const setDisabledAccordionToIndex = () => {
       const length = getMenuTagOptions.value.length - 1
+      const { closeable } =
+        getMenuTagOptions.value[currentContextmenuIndex] ??
+        ({} as MenuTagOptions)
 
       // 是否需要禁用关闭当前标签页
-      if (getMenuKey.value === path) {
-        setMoreOptionsDisabled('closeCurrentPage', true)
-      } else {
-        const isRoot = moreOptions.value[currentContextmenuIndex]
-
-        // 避免 isRoot 为 undefined
-        if (isRoot?.key === 'closeCurrentPage') {
-          setMoreOptionsDisabled('closeCurrentPage', true)
-        } else {
-          setMoreOptionsDisabled('closeCurrentPage', false)
-        }
-      }
+      setMoreOptionsDisabled('closeCurrentPage', !closeable ?? false)
 
       // 是否需要禁用关闭右侧标签页
       if (currentContextmenuIndex === length) {
@@ -310,7 +302,10 @@ export default defineComponent({
 
     /** 仅有 getMenuTagOptions 长度大于 1 并且非 root path 时, 才激活关闭按钮 */
     const menuTagMouseenter = (option: MenuTagOptions) => {
-      if (getMenuTagOptions.value.length > 1 && option.key !== path) {
+      if (
+        getMenuTagOptions.value.length > 1 &&
+        option.key !== getRootPath.value
+      ) {
         option.closeable = true
       }
     }
@@ -360,21 +355,19 @@ export default defineComponent({
     /** 如果有且只有一个标签页时, 禁止全部关闭操作 */
     watch(
       () => getMenuTagOptions.value,
-      (newData, oldData) => {
+      (ndata, odata) => {
         // 当 menuTagOptions 长度为 1时，禁用所有 canDisabledOptions 匹配的项
         moreOptions.value.forEach((curr) => {
           if (canDisabledOptions.includes(curr.key)) {
-            newData.length > 1
-              ? (curr.disabled = false)
-              : (curr.disabled = true)
+            ndata.length > 1 ? (curr.disabled = false) : (curr.disabled = true)
           }
         })
 
         // 更新当前激活标签定位
-        if (oldData?.length) {
-          if (newData.length > oldData?.length) {
+        if (odata?.length) {
+          if (ndata.length > odata?.length) {
             updateScrollBarPosition()
-          } else if (newData.length === oldData?.length) {
+          } else if (ndata.length === odata?.length) {
             positionMenuTag()
           }
         }
@@ -422,7 +415,7 @@ export default defineComponent({
   },
   render() {
     const { iconConfig } = this
-    const { maximize } = this
+    const { maximize, closeCurrentMenuTag } = this
 
     return (
       <NLayoutHeader>
@@ -475,7 +468,7 @@ export default defineComponent({
                     key={curr.key}
                     strong
                     closable={curr.closeable}
-                    onClose={this.closeCurrentMenuTag.bind(this, idx)}
+                    onClose={closeCurrentMenuTag.bind(this, idx)}
                     type={curr.key === this.getMenuKey ? 'primary' : 'default'}
                     bordered={false}
                     {...{

src/router/helper/permission.ts

@@ -21,11 +21,12 @@
  */
 
 import { getStorage } from '@/utils/cache'
-import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
+import { APP_CATCH_KEY } from '@/app-config/appConfig'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
 import { WHITE_ROUTES } from '@/app-config/routerConfig'
 import { validRole } from '@/router/helper/routerCopilot'
 import { isValueType } from '@/utils/basic'
+import { useRootRoute } from '@/hooks/template/index'
 
 import type { Router, RouteLocationNormalized } from 'vue-router'
 import type { AppRouteMeta } from '@/router/type'
@@ -33,6 +34,7 @@ import type { AppRouteMeta } from '@/router/type'
 /** 路由守卫 */
 export const permissionRouter = (router: Router) => {
   const { beforeEach } = router
+  const { getRootPath } = useRootRoute()
 
   const isToLogin = (
     to: RouteLocationNormalized,
@@ -44,7 +46,7 @@ export const permissionRouter = (router: Router) => {
     const catchRoutePath = getStorage(
       'menuKey',
       'sessionStorage',
-      ROOT_ROUTE.path,
+      getRootPath.value,
     )
     const { meta, name } = to
 

src/router/helper/routerCopilot.ts

@@ -12,10 +12,10 @@
 import { permissionRouter } from './permission'
 import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
 import { useVueRouter } from '@/hooks/web/index'
-import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { setStorage } from '@/utils/cache'
 import { getAppEnvironment } from '@/utils/basic'
 import { useSigningGetters } from '@/store'
+import { useRootRoute } from '@/hooks/template/index'
 
 import type { Router } from 'vue-router'
 import type { AppRouteMeta } from '@/router/type'
@@ -132,9 +132,9 @@ export const redirectRouterToDashboard = (isReplace = true) => {
   const { router } = useVueRouter()
 
   const { push, replace } = router
-  const { path } = ROOT_ROUTE
+  const { getRootPath } = useRootRoute()
 
-  setStorage('menuKey', path)
+  setStorage('menuKey', getRootPath.value)
 
-  isReplace ? replace(path) : push(path)
+  isReplace ? replace(getRootPath.value) : push(getRootPath.value)
 }

src/router/index.ts

@@ -35,7 +35,7 @@ export const setupRouter = async (app: App<Element>) => {
   router = await createVueRouter()
 
   vueRouterRegister(router)
-  useVueRouter()
-
   app.use(router)
+  // 等待 router 挂载后，初始化 useRouter 方法
+  useVueRouter()
 }

src/router/routes.ts

@@ -1,27 +1,31 @@
 import Layout from '@/layout/index'
 import { appExpandRoutes } from './appRouteModules'
-import { ROOT_ROUTE } from '@/app-config/appConfig'
+import { useRootRoute } from '@/hooks/template/index'
 
-export default async () => [
-  /**
-   *
-   * 首页（一般为 Login 页面）
-   * 整个模板默认导航地址
-   */
-  {
-    path: '/',
-    name: 'login',
-    component: () => import('@/views/login/index'),
-  },
-  /**
-   *
-   * App Layout 核心页面（一般为登陆后展示的页面）
-   */
-  {
-    path: '/',
-    name: 'layout',
-    redirect: ROOT_ROUTE.path,
-    component: Layout,
-    children: appExpandRoutes,
-  },
-]
+export default async () => {
+  const { getRootPath } = useRootRoute()
+
+  return [
+    /**
+     *
+     * 首页（一般为 Login 页面）
+     * 整个模板默认导航地址
+     */
+    {
+      path: '/',
+      name: 'login',
+      component: () => import('@/views/login/index'),
+    },
+    /**
+     *
+     * App Layout 核心页面（一般为登陆后展示的页面）
+     */
+    {
+      path: '/',
+      name: 'layout',
+      redirect: getRootPath.value,
+      component: Layout,
+      children: appExpandRoutes,
+    },
+  ]
+}

src/store/hooks/useMenuStore.ts

@@ -10,7 +10,7 @@
  */
 
 import { piniaMenuStore } from '../modules/menu'
-import { ROOT_ROUTE } from '@/app-config/appConfig'
+import { useRootRoute } from '@/hooks/template/index'
 
 export const useMenuGetters = () => {
   const variable = piniaMenuStore()
@@ -35,16 +35,16 @@ export const useMenuGetters = () => {
    * @remark 获取菜单标签列表
    */
   const getMenuTagOptions = computed(() => {
-    const { path } = ROOT_ROUTE
+    const { getRootPath } = useRootRoute()
 
     return variable.menuTagOptions.map((curr, _idx, currentArray) => {
-      if (curr.key === getMenuKey.value && curr.key !== path) {
+      if (curr.key === getMenuKey.value && curr.key !== getRootPath.value) {
         curr.closeable = true
       } else {
         curr.closeable = false
       }
 
-      if (curr.key === path) {
+      if (curr.key === getRootPath.value) {
         curr.closeable = false
       }
 

src/store/modules/menu/helper.ts

@@ -11,10 +11,11 @@
 
 /** 本方法感谢 <https://yunkuangao.me/> 的支持 */
 
-import { APP_MENU_CONFIG, ROOT_ROUTE } from '@/app-config/appConfig'
+import { APP_MENU_CONFIG } from '@/app-config/appConfig'
 import RIcon from '@/components/RIcon/index'
 import { isValueType } from '@/utils/basic'
 import { getStorage } from '@/utils/cache'
+import { useRootRoute } from '@/hooks/template/index'
 
 import type {
   AppMenuOption,
@@ -171,13 +172,13 @@ export const hasMenuIcon = (option: AppMenuOption) => {
   return () => icon
 }
 
-/** 获取缓存的 menu key, 如果未获取到则使用 ROOT_ROUTE path 当作默认激活路由菜单 */
+/** 获取缓存的 menu key, 如果未获取到则使用 getRootPath 当作默认激活路由菜单 */
 export const getCatchMenuKey = () => {
-  const { path: rootPath } = ROOT_ROUTE
+  const { getRootPath } = useRootRoute()
   const cacheMenuKey = getStorage<AppMenuKey>(
     'menuKey',
     'sessionStorage',
-    rootPath,
+    getRootPath.value,
   )
 
   return cacheMenuKey

src/types/modules/helper.ts

@@ -13,3 +13,15 @@ export type ConditionalPick<Base, Condition> = Pick<
 export type Recordable<T = any> = Record<string, T>
 
 export type ValueOf<T extends object> = T[keyof T]
+
+export type Mutable<T> = {
+  -readonly [P in keyof T]: T[P]
+}
+
+export type DeepMutable<T> = {
+  -readonly [P in keyof T]: T[P] extends ReadonlyArray<infer U>
+    ? Array<DeepMutable<U>>
+    : T[P] extends object
+    ? DeepMutable<T[P]>
+    : T[P]
+}

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

@@ -2,10 +2,10 @@ import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
 
 import { setStorage } from '@/utils/cache'
 import { useI18n } from '@/hooks/web/index'
-import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
-import { useVueRouter } from '@/hooks/web/index'
+import { APP_CATCH_KEY } from '@/app-config/appConfig'
 import { setVariable, getVariableToRefs } from '@/global-variable/index'
-import { useSigningActions, useSigningGetters } from '@/store'
+import { useSigningActions } from '@/store'
+import { useRootRoute } from '@/hooks/template/index'
 
 import type { FormInst } from 'naive-ui'
 
@@ -16,7 +16,7 @@ export default defineComponent({
 
     const { t } = useI18n()
     const { signing } = useSigningActions()
-    const { path } = ROOT_ROUTE
+    const { getRootPath } = useRootRoute()
     const globalSpinning = getVariableToRefs('globalSpinning')
 
     const useSigningForm = () => ({
@@ -24,7 +24,7 @@ export default defineComponent({
       pwd: '123456',
     })
 
-    const { router } = useVueRouter()
+    const router = useRouter()
     const signingForm = ref(useSigningForm())
 
     const rules = {
@@ -57,7 +57,7 @@ export default defineComponent({
                   setStorage(APP_CATCH_KEY.token, 'tokenValue')
                   setStorage(APP_CATCH_KEY.signing, res.data)
 
-                  router.push(path)
+                  router.push(getRootPath.value)
                 }, 2 * 1000)
               }
             })

src/views/login/index.tsx

@@ -80,6 +80,7 @@ const Login = defineComponent({
               <NDropdown
                 options={LOCAL_OPTIONS}
                 onSelect={(key) => this.updateLocale(key)}
+                trigger="click"
               >
                 <RIcon
                   customClassName="login-icon"

unplugin/.eslintrc-auto-import.json

@@ -82,4 +82,4 @@
     "watchPostEffect": true,
     "watchSyncEffect": true
   }
-}
+}

unplugin/auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {