Merge branch 'main' of http://git.cc-lotus.info/util/web-template-vue3-js

package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^1.6.7",
         "element-plus": "^2.5.6",
         "lodash-es": "^4.17.21",
+        "nprogress": "^0.2.0",
         "path-browserify": "^1.0.1",
         "path-to-regexp": "^6.2.1",
         "pinia": "^2.1.7",
@@ -3660,6 +3661,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -8476,6 +8482,11 @@
         }
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "axios": "^1.6.7",
     "element-plus": "^2.5.6",
     "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",

src/components/Breadcrumb/index.vue

@@ -3,10 +3,10 @@
     <transition-group name="breadcrumb-transition">
       <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1" class="text-[var(--el-disabled-text-color)]">
-          {{ $t(item.meta.title) }}
+          {{ translateRouteTitle(item.meta.title) }}
         </span>
         <a v-else @click.prevent="handleLink(item)">
-          {{ $t(item.meta.title) }}
+          {{ translateRouteTitle(item.meta.title) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>
@@ -17,10 +17,10 @@
 import { onBeforeMount, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { compile } from 'path-to-regexp'
+import { translateRouteTitle } from '@/utils/i18n'
 import router from '@/router'
 
 const currentRoute = useRoute()
-const { t } = useI18n()
 const pathCompile = (path) => {
   const { params } = currentRoute
   const toPath = compile(path)
@@ -33,7 +33,7 @@ function getBreadcrumb() {
   let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
   const first = matched[0]
   if (!isDashboard(first)) {
-    matched = [{ path: '/', meta: { title: 'menus.home' } }].concat(matched)
+    matched = [{ path: '/', meta: { title: 'home' } }].concat(matched)
   }
   breadcrumbs.value = matched.filter((item) => {
     return item.meta && item.meta.title && item.meta.breadcrumb !== false

src/lang/package/en/menus.js

@@ -0,0 +1,9 @@
+export default {
+  home: 'home',
+  system: 'system',
+  system_menus: 'system_menus',
+  system_role: 'system_role',
+  system_parameter: 'system_parameter',
+  system_dict: 'system_dict',
+  system_dict_data: 'system_dict_dat'
+}

src/lang/package/en/route.js

@@ -1,12 +0,0 @@
-export default {
-  dashboard: 'home',
-  document: 'Document',
-  login: '账号登录',
-  system: '系统设置',
-  menus: '菜单设置',
-  role: '角色管理',
-  dict: '字典管理',
-  dictData: '字典数据管理',
-  config: '平台设置',
-  module: '模块设置'
-}

src/lang/package/zh-cn/route.js

@@ -1,12 +0,0 @@
-export default {
-  dashboard: '首页',
-  login: '账号登录',
-  document: '项目文档',
-  system: '系统设置',
-  menus: '菜单设置',
-  role: '角色管理',
-  dict: '字典管理',
-  dictData: '字典数据管理',
-  config: '平台设置',
-  module: '模块设置'
-}

src/router/guard.js

@@ -2,7 +2,10 @@ import { AxiosWrapper } from '@/utils/axios-wrapper'
 import { checkResult } from '@/utils/checkResult'
 import { UserStore } from '@/store/user'
 import { cloneDeep, omit } from 'lodash-es'
-import { useAppStore } from '@/store'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({ showSpinner: false }) // 进度条
 // 检查路由是否存在
 const hasNecessaryRoute = (to, router) => {
   // 将默认注册的路由平铺成一维数组
@@ -66,7 +69,7 @@ const routesRegister = (menus, defaultRoutes, router) => {
   const __def = 'Layout'
   const loadComponent = import.meta.glob('../views/**/*.vue')
   for (const route of menus) {
-    const { type, route_name, path, component, parent_id, i18n_code } = route
+    const { type, route_name, path, component, parent_id } = route
     // 检查路由是否已存在,存在跳过
     const hasRoute = defaultRoutes.find((f) => f.path === path)
     if (hasRoute) continue
@@ -75,7 +78,7 @@ const routesRegister = (menus, defaultRoutes, router) => {
       const route = {
         path: `/${route_name}`,
         name: route_name,
-        meta: { title: i18n_code, type }
+        meta: { title: route_name, type }
       }
       router.addRoute(__def, route)
     } else if (type === '1' || type === '2') {
@@ -84,7 +87,7 @@ const routesRegister = (menus, defaultRoutes, router) => {
         path: path,
         name: route_name,
         meta: {
-          title: i18n_code,
+          title: route_name,
           type
         },
         component: loadComponent[`../views${component}.vue`]
@@ -116,6 +119,7 @@ const resetMenus = (menus) => {
 // 注册前置守卫
 export const registerBeforeRouter = async (router) => {
   router.beforeEach(async (to, from, next) => {
+    NProgress.start() //开启进度条
     const token = localStorage.getItem('token')
     if (to.path === '/login') {
       next()
@@ -148,5 +152,6 @@ export const registerAfterRouter = async (router) => {
       return
     }
     // 请求该页面的权限
+    NProgress.done() //完成进度条
   })
 }

src/store/modules/tagsView.js

@@ -1,5 +1,5 @@
 export const useTagsViewStore = defineStore('tagsView', () => {
-  const visitedViews = ref([{ affix: true, fullPath: '/', keepAlive: true, name: 'dashboard', path: '/', title: 'dashboard' }])
+  const visitedViews = ref([{ affix: true, fullPath: '/', keepAlive: true, name: 'home', path: '/', title: 'home' }])
   const cachedViews = ref([])
 
   /**

src/utils/i18n.js

@@ -3,9 +3,9 @@ import i18n from '@/lang/index'
 
 export function translateRouteTitle(title) {
   // 判断是否存在国际化配置，如果没有原生返回
-  const hasKey = i18n.global.te('route.' + title)
+  const hasKey = i18n.global.te('menus.' + title)
   if (hasKey) {
-    const translatedTitle = i18n.global.t('route.' + title)
+    const translatedTitle = i18n.global.t('menus.' + title)
     return translatedTitle
   }
   return title