chore: release v4.8.0

package.json

@@ -1,8 +1,8 @@
 {
   "type": "module",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "engines": {
-    "node": "^18.0.0 || ^20.0.0"
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
   },
   "scripts": {
     "dev": "vite",
@@ -23,14 +23,14 @@
     "release": "bumpp"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.19",
-    "@imengyu/vue3-context-menu": "^1.3.9",
+    "@headlessui/vue": "^1.7.21",
+    "@imengyu/vue3-context-menu": "^1.4.1",
     "@vueuse/core": "^10.9.0",
     "@vueuse/integrations": "^10.9.0",
     "axios": "^1.6.8",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "defu": "^6.1.4",
-    "element-plus": "^2.6.3",
+    "element-plus": "^2.7.1",
     "eruda": "^3.0.1",
     "floating-vue": "5.2.2",
     "hotkeys-js": "^3.13.7",
@@ -38,69 +38,69 @@
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "overlayscrollbars": "^2.6.1",
-    "overlayscrollbars-vue": "^0.5.8",
+    "overlayscrollbars": "^2.7.3",
+    "overlayscrollbars-vue": "^0.5.9",
     "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "^6.2.2",
     "pinia": "^2.1.7",
-    "qs": "^6.12.0",
+    "qs": "^6.12.1",
     "scule": "^1.3.0",
     "vconsole": "^3.15.1",
-    "vue": "^3.4.21",
+    "vue": "^3.4.26",
     "vue-m-message": "^4.0.2",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.11.6",
-    "@iconify/json": "^2.2.196",
-    "@iconify/vue": "^4.1.1",
+    "@antfu/eslint-config": "2.16.1",
+    "@iconify/json": "^2.2.205",
+    "@iconify/vue": "^4.1.2",
     "@stylistic/stylelint-config": "^1.0.1",
     "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "^1.0.10",
     "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.2",
-    "@types/qs": "^6.9.14",
-    "@unocss/eslint-plugin": "^0.58.8",
+    "@types/qs": "^6.9.15",
+    "@unocss/eslint-plugin": "^0.59.4",
     "@vitejs/plugin-legacy": "^5.3.2",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "archiver": "^7.0.1",
     "autoprefixer": "^10.4.19",
     "boxen": "^7.1.1",
-    "bumpp": "^9.4.0",
+    "bumpp": "^9.4.1",
     "cz-git": "^1.9.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.1.1",
     "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
-    "inquirer": "^9.2.17",
+    "inquirer": "^9.2.20",
     "lint-staged": "^15.2.2",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.1.2",
     "picocolors": "^1.0.0",
     "plop": "^4.0.1",
-    "sass": "^1.72.0",
+    "postcss": "^8.4.38",
+    "sass": "^1.76.0",
     "simple-git-hooks": "^2.11.1",
-    "stylelint": "^16.3.1",
-    "stylelint-config-recess-order": "^5.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint": "^16.4.0",
+    "stylelint-config-recess-order": "^5.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-scss": "^6.2.1",
     "svgo": "^3.2.0",
-    "terser": "^5.30.0",
-    "typescript": "^5.4.3",
-    "unocss": "^0.58.8",
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.4",
     "unplugin-auto-import": "^0.17.5",
-    "unplugin-turbo-console": "^1.5.1",
+    "unplugin-turbo-console": "^1.8.6",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.7",
+    "vite": "^5.2.10",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-compression2": "^1.0.0",
+    "vite-plugin-compression2": "^1.1.0",
     "vite-plugin-fake-server": "^2.1.1",
     "vite-plugin-pages": "^0.32.1",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-devtools": "^7.0.25",
-    "vite-plugin-vue-meta-layouts": "^0.4.2",
-    "vue-tsc": "^2.0.7"
+    "vite-plugin-vue-devtools": "^7.1.3",
+    "vite-plugin-vue-meta-layouts": "^0.4.3",
+    "vue-tsc": "^2.0.16"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

src/App.vue

@@ -6,9 +6,17 @@ import eventBus from './utils/eventBus'
 import Provider from './ui-provider/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 
+const route = useRoute()
+
 const settingsStore = useSettingsStore()
 const { auth } = useAuth()
 
+const isAuth = computed(() => {
+  return route.matched.every((item) => {
+    return auth(item.meta.auth ?? '')
+  })
+})
+
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
   let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
@@ -61,13 +69,13 @@ import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
 <template>
   <Provider>
     <RouterView
-      v-slot="{ Component, route }"
+      v-slot="{ Component }"
       :style="{
         '--g-main-sidebar-actual-width': mainSidebarActualWidth,
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     >
-      <component :is="Component" v-if="auth(route.meta.auth ?? '')" />
+      <component :is="Component" v-if="isAuth" />
       <NotAllowed v-else />
     </RouterView>
     <SystemInfo />

src/layouts/components/AppSetting/index.vue

@@ -93,7 +93,7 @@ function handleCopy() {
         :options="[
           { icon: 'i-ri:sun-line', label: '明亮', value: 'light' },
           { icon: 'i-ri:moon-line', label: '暗黑', value: 'dark' },
-          { icon: 'i-ri:computer-line', label: '系统', value: '' },
+          { icon: 'i-codicon:color-mode', label: '系统', value: '' },
         ]"
         class="w-60"
       />

src/layouts/components/Menu/index.vue

@@ -170,8 +170,10 @@ provide(rootMenuInjectionKey, reactive({
     }"
   >
     <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
-      <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
-      <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+      <template v-if="item.meta?.menu !== false">
+        <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
+        <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+      </template>
     </template>
   </div>
 </template>

src/layouts/components/Topbar/Tabbar/index.vue

@@ -77,7 +77,7 @@ function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
     y: event.y,
     zIndex: 1050,
     iconFontClass: '',
-    customClass: 'contextmenu-custom',
+    customClass: 'tabbar-contextmenu',
     items: [
       {
         label: '重新加载',
@@ -166,7 +166,7 @@ onMounted(() => {
   })
 })
 onUnmounted(() => {
-  hotkeys.unbind('alt+q,alt+e,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0')
+  hotkeys.unbind('alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0')
 })
 </script>
 
@@ -187,8 +187,8 @@ onUnmounted(() => {
               <SvgIcon v-if="settingsStore.settings.tabbar.enableIcon && element.icon" :name="element.icon" class="icon" />
               {{ typeof element?.title === 'function' ? element.title() : element.title }}
             </div>
-            <div v-if="tabbarStore.list.length > 1" class="action-icon">
-              <SvgIcon name="i-ri:close-fill" @click.stop="tabbar.closeById(element.tabId)" />
+            <div v-if="tabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)">
+              <SvgIcon name="i-ri:close-fill" />
             </div>
             <div v-show="keys.alt && index < 9" class="hotkey-number">
               {{ index + 1 }}
@@ -201,7 +201,7 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss">
-.mx-menu-ghost-host {
+.tabbar-contextmenu {
   z-index: 1000;
 
   .mx-context-menu {

src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -40,7 +40,7 @@ function toggleColorScheme(event: MouseEvent) {
   <HDropdown class="flex-center cursor-pointer px-2 py-1">
     <SvgIcon
       :name="{
-        '': 'i-ri:computer-line',
+        '': 'i-codicon:color-mode',
         'light': 'i-ri:sun-line',
         'dark': 'i-ri:moon-line',
       }[settingsStore.settings.app.colorScheme]" @click="toggleColorScheme"
@@ -51,7 +51,7 @@ function toggleColorScheme(event: MouseEvent) {
         :options="[
           { icon: 'i-ri:sun-line', label: '', value: 'light' },
           { icon: 'i-ri:moon-line', label: '', value: 'dark' },
-          { icon: 'i-ri:computer-line', label: '', value: '' },
+          { icon: 'i-codicon:color-mode', label: '', value: '' },
         ]"
         class="m-3"
       />

src/store/modules/route.ts

@@ -1,5 +1,5 @@
 import { cloneDeep } from 'lodash-es'
-import type { RouteMeta, RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 import useSettingsStore from './settings'
 import { resolveRoutePath } from '@/utils'
 import { systemRoutes } from '@/router/routes'
@@ -25,16 +25,15 @@ const useRouteStore = defineStore(
           title: route.meta?.title,
           icon: route.meta?.icon,
           hide: !route.meta?.breadcrumb && route.meta?.breadcrumb === false,
-        }], route.path, route.meta?.auth)
+        }], route.path)
       }
       return route
     }
-    function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = '', baseAuth: RouteMeta['auth']): RouteRecordRaw[] {
+    function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): RouteRecordRaw[] {
       const res: RouteRecordRaw[] = []
       routes.forEach((route) => {
         if (route.children) {
           const childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
-          const childrenBaseAuth = !baseAuth || baseAuth === '' || baseAuth?.length === 0 ? route.meta?.auth : baseAuth
           const tmpBreadcrumb = cloneDeep(breadcrumb)
           tmpBreadcrumb.push({
             path: childrenBaseUrl,
@@ -47,11 +46,10 @@ const useRouteStore = defineStore(
           if (!tmpRoute.meta) {
             tmpRoute.meta = {}
           }
-          tmpRoute.meta.auth = childrenBaseAuth
           tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
           delete tmpRoute.children
           res.push(tmpRoute)
-          const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl, childrenBaseAuth)
+          const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
           childrenRoutes.forEach((item) => {
             // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
             if (res.some(v => v.path === item.path)) {
@@ -80,7 +78,6 @@ const useRouteStore = defineStore(
           if (!tmpRoute.meta) {
             tmpRoute.meta = {}
           }
-          tmpRoute.meta.auth = !baseAuth || baseAuth === '' || baseAuth?.length === 0 ? tmpRoute.meta?.auth : baseAuth
           tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
           res.push(tmpRoute)
         }

src/types/global.d.ts

@@ -1,4 +1,4 @@
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordName, RouteRecordRaw } from 'vue-router'
 
 type RecursiveRequired<T> = {
   [P in keyof T]-?: RecursiveRequired<T[P]>
@@ -284,7 +284,7 @@ declare namespace Tabbar {
   interface recordRaw {
     tabId: string
     fullPath: string
-    routeName?: RouteRecordRaw.name
+    routeName?: RouteRecordName | null
     title?: string | (() => string)
     icon?: string
     name: string[]

src/views/[...all].vue

@@ -44,7 +44,7 @@ function goBack() {
       <h1 class="m-0 text-6xl font-sans">
         404
       </h1>
-      <div class="desc mx-0 text-xl text-stone-5">
+      <div class="mx-0 text-xl text-stone-5">
         抱歉，你访问的页面不存在
       </div>
       <div>

src/views/index.vue

@@ -89,9 +89,6 @@ function open(url: string) {
         </HButton>
       </HDropdownMenu>
     </PageHeader>
-    <PageMain class="rounded-lg text-white" style="background: linear-gradient(50deg, rgb(14 76 253), rgb(106 142 255));">
-      全新版本 V4.0 正式发布，支持替换 UI 组件库，点击查看<span class="cursor-pointer px-1 text-yellow font-bold hover:op-70" @click="open('https://fantastic-admin.gitee.io/guide/v4.html')">V4.0 更新介绍</span>。
-    </PageMain>
     <div class="w-full flex flex-col gap-4 px-4 xl:flex-row">
       <PageMain class="ecology">
         <template #title>

src/views/login.vue

@@ -26,6 +26,9 @@ const banner = new URL('../assets/images/login-banner.png', import.meta.url).hre
 const logo = new URL('../assets/images/logo.png', import.meta.url).href
 const title = import.meta.env.VITE_APP_TITLE
 
+// 登录方式，default 账号密码登录，qrcode 扫码登录
+const loginType = ref('default')
+
 // 表单类型，login 登录，register 注册，reset 重置密码
 const formType = ref('login')
 const loading = ref(false)
@@ -159,44 +162,62 @@ function testAccount(account: string) {
         <img :src="banner" class="banner">
       </div>
       <ElForm v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
-        <div class="title-container">
-          <h3 class="title">
-            欢迎来到 {{ title }} ! 👋🏻
-          </h3>
-        </div>
-        <div>
-          <ElFormItem prop="account">
-            <ElInput v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1">
-              <template #prefix>
-                <SvgIcon name="i-ri:user-3-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-          <ElFormItem prop="password">
-            <ElInput v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="new-password" show-password @keyup.enter="handleLogin">
-              <template #prefix>
-                <SvgIcon name="i-ri:lock-2-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-        </div>
-        <div class="flex-bar">
-          <ElCheckbox v-model="loginForm.remember">
-            记住我
-          </ElCheckbox>
-          <ElLink type="primary" :underline="false" @click="formType = 'reset'">
-            忘记密码了?
-          </ElLink>
-        </div>
-        <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
-          登录
-        </ElButton>
-        <div class="sub-link">
-          <span class="text">还没有帐号?</span>
-          <ElLink type="primary" :underline="false" @click="formType = 'register'">
-            创建新帐号
-          </ElLink>
+        <div class="mb-6">
+          <HTabList
+            v-model="loginType" :options="[
+              { label: '账号密码登录', value: 'default' },
+              { label: '扫码登录', value: 'qrcode' },
+            ]"
+          />
         </div>
+        <template v-if="loginType === 'default'">
+          <div class="title-container">
+            <h3 class="title">
+              欢迎来到 {{ title }} ! 👋🏻
+            </h3>
+          </div>
+          <div>
+            <ElFormItem prop="account">
+              <ElInput v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1">
+                <template #prefix>
+                  <SvgIcon name="i-ri:user-3-fill" />
+                </template>
+              </ElInput>
+            </ElFormItem>
+            <ElFormItem prop="password">
+              <ElInput v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="new-password" show-password @keyup.enter="handleLogin">
+                <template #prefix>
+                  <SvgIcon name="i-ri:lock-2-fill" />
+                </template>
+              </ElInput>
+            </ElFormItem>
+          </div>
+          <div class="flex-bar">
+            <ElCheckbox v-model="loginForm.remember">
+              记住我
+            </ElCheckbox>
+            <ElLink type="primary" :underline="false" @click="formType = 'reset'">
+              忘记密码了?
+            </ElLink>
+          </div>
+          <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+            登录
+          </ElButton>
+          <div class="sub-link">
+            <span class="text">还没有帐号?</span>
+            <ElLink type="primary" :underline="false" @click="formType = 'register'">
+              创建新帐号
+            </ElLink>
+          </div>
+        </template>
+        <template v-else-if="loginType === 'qrcode'">
+          <div class="flex flex-col items-center">
+            <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
+            <div class="mt-2 op-50">
+              请使用微信扫码登录
+            </div>
+          </div>
+        </template>
         <div style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
           <ElDivider>演示账号一键登录</ElDivider>
           <ElButton type="primary" size="small" plain @click="testAccount('admin')">