chore: release v4.8.2

.node-version

@@ -0,0 +1 @@
+20

README.md

@@ -7,16 +7,9 @@
 <p align="center">一款<b>开箱即用</b>的 Vue3 中后台管理系统框架</p>
 
 <p align="center">
-  <a href="https://fantastic-admin.github.io" target="_blank">官网</a>
-  <sup><a href="https://fantastic-admin.gitee.io" target="_blank">备用地址</a></sup>
+  <a href="https://fantastic-admin.github.io" target="_blank">官网(Github)</a>
   <span>&nbsp;|&nbsp;</span>
-  <a href="https://fantastic-admin.github.io/support.html" target="_blank">技术支持</a>
-  <span>&nbsp;|&nbsp;</span>
-  演示
-  <sup><a href="https://fantastic-admin.github.io/basic-example" target="_blank">基础版</a> <a href="https://fantastic-admin.github.io/pro-example" target="_blank">专业版</a></sup>
-  <span>&nbsp;|&nbsp;</span>
-  购买
-  <sup><a href="https://fantastic-admin.github.io/buy.html" target="_blank">专业版</a></sup>
+  <a href="https://fantastic-admin.pages.dev" target="_blank">官网(Cloudflare)</a>
 <p>
 
 <p align="center">

package.json

@@ -1,8 +1,8 @@
 {
   "type": "module",
-  "version": "4.7.0",
+  "version": "4.8.2",
   "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",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/integrations": "^10.9.0",
-    "axios": "^1.6.8",
-    "dayjs": "^1.11.10",
+    "@headlessui/vue": "^1.7.22",
+    "@imengyu/vue3-context-menu": "^1.4.1",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/integrations": "^10.10.0",
+    "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
     "defu": "^6.1.4",
-    "element-plus": "^2.6.3",
+    "element-plus": "^2.7.4",
     "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.8.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.27",
     "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.20.0",
+    "@iconify/json": "^2.2.217",
+    "@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",
-    "@vitejs/plugin-legacy": "^5.3.2",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@types/qs": "^6.9.15",
+    "@unocss/eslint-plugin": "^0.60.4",
+    "@vitejs/plugin-legacy": "^5.4.1",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "archiver": "^7.0.1",
     "autoprefixer": "^10.4.19",
     "boxen": "^7.1.1",
-    "bumpp": "^9.4.0",
-    "cz-git": "^1.9.1",
-    "eslint": "^8.57.0",
+    "bumpp": "^9.4.1",
+    "cz-git": "^1.9.2",
+    "eslint": "^9.4.0",
     "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
-    "inquirer": "^9.2.17",
-    "lint-staged": "^15.2.2",
-    "npm-run-all": "^4.1.5",
-    "picocolors": "^1.0.0",
+    "inquirer": "^9.2.23",
+    "lint-staged": "^15.2.5",
+    "npm-run-all2": "^6.2.0",
+    "picocolors": "^1.0.1",
     "plop": "^4.0.1",
-    "sass": "^1.72.0",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.4",
     "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.6.1",
+    "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",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-turbo-console": "^1.5.1",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.7",
+    "stylelint-scss": "^6.3.1",
+    "svgo": "^3.3.2",
+    "typescript": "^5.4.5",
+    "unocss": "^0.60.4",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-turbo-console": "^1.8.6",
+    "unplugin-vue-components": "^0.27.0",
+    "vite": "^5.2.12",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-compression2": "^1.0.0",
+    "vite-plugin-compression2": "^1.1.1",
     "vite-plugin-fake-server": "^2.1.1",
-    "vite-plugin-pages": "^0.32.1",
+    "vite-plugin-pages": "^0.32.2",
     "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.2.1",
+    "vite-plugin-vue-meta-layouts": "^0.4.3",
+    "vue-tsc": "^2.0.19"
   },
   "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/assets/styles/globals.scss

@@ -115,7 +115,7 @@ textarea {
 
 .v-popper--theme-dropdown .v-popper__inner,
 .v-popper--theme-tooltip .v-popper__inner {
-  --at-apply: bg-white dark:bg-stone-8 text-dark dark:text-white rounded shadow ring-1 ring-gray-200 dark:ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
+  --at-apply: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
 
   box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
 }
@@ -124,7 +124,7 @@ textarea {
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
 
-  --at-apply: border-white dark:border-stone-8;
+  --at-apply: border-white dark-border-stone-8;
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,

src/components/NotAllowed/index.vue

@@ -34,8 +34,8 @@ function goBack() {
 </script>
 
 <template>
-  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
-    <SvgIcon name="403" class="text-[300px] lg:text-[400px]" />
+  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg-flex-row -translate-x-50% -translate-y-50% lg-gap-12">
+    <SvgIcon name="403" class="text-[300px] lg-text-[400px]" />
     <div class="flex flex-col gap-4">
       <h1 class="m-0 text-6xl font-sans">
         403

src/components/PageHeader/index.vue

@@ -19,7 +19,7 @@ const slots = useSlots()
           {{ title }}
         </slot>
       </div>
-      <div class="mt-2 text-sm text-stone-5 empty:hidden">
+      <div class="mt-2 text-sm text-stone-5 empty-hidden">
         <slot name="content">
           {{ content }}
         </slot>

src/components/PageMain/index.vue

@@ -41,7 +41,7 @@ function unCollaspe() {
       <slot />
     </div>
     <div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full cursor-pointer from-transparent to-[var(--g-container-bg)] bg-gradient-to-b pb-2 pt-10 text-center" @click="unCollaspe">
-      <SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
+      <SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover-op-100" />
     </div>
   </div>
 </template>

src/components/SystemInfo/index.vue

@@ -14,14 +14,6 @@ onMounted(() => {
 
 <template>
   <HSlideover v-model="isShow" title="系统信息">
-    <div class="px-4">
-      <h2 class="m-0 text-lg font-bold">
-        版本号
-      </h2>
-      <div class="my-4 text-center text-lg font-sans">
-        {{ pkg.version }}
-      </div>
-    </div>
     <div class="px-4">
       <h2 class="m-0 text-lg font-bold">
         最后编译时间
@@ -35,7 +27,7 @@ onMounted(() => {
         生产环境依赖
       </h2>
       <ul class="list-none pl-0 text-sm">
-        <li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
+        <li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover-bg-stone-1 dark-hover-bg-stone-9">
           <div class="font-bold">
             {{ key }}
           </div>
@@ -50,7 +42,7 @@ onMounted(() => {
         开发环境依赖
       </h2>
       <ul class="list-none pl-0 text-sm">
-        <li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
+        <li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover-bg-stone-1 dark-hover-bg-stone-9">
           <div class="font-bold">
             {{ key }}
           </div>

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"
       />
@@ -351,7 +351,7 @@ function handleCopy() {
 
   &::before,
   &::after {
-    --at-apply: content-empty w-full h-1px bg-stone-2 dark:bg-stone-6;
+    --at-apply: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
   }
 }
 
@@ -359,7 +359,7 @@ function handleCopy() {
   --at-apply: flex items-center justify-center gap-4 pb-4;
 
   .mode {
-    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;
 
     &.active {
       --at-apply: ring-ui-primary ring-2;
@@ -428,7 +428,7 @@ function handleCopy() {
 }
 
 .setting-item {
-  --at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover:bg-stone-1 dark:hover:bg-stone-9;
+  --at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover-bg-stone-1 dark-hover-bg-stone-9;
 
   .label {
     --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;

src/layouts/components/BackTop/index.vue

@@ -5,11 +5,11 @@ defineOptions({
 
 const transitionClass = {
   enterActiveClass: 'ease-out duration-300',
-  enterFromClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
-  enterToClass: 'opacity-100 translate-y-0 lg:scale-100',
+  enterFromClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
+  enterToClass: 'opacity-100 translate-y-0 lg-scale-100',
   leaveActiveClass: 'ease-in duration-200',
-  leaveFromClass: 'opacity-100 translate-y-0 lg:scale-100',
-  leaveToClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+  leaveFromClass: 'opacity-100 translate-y-0 lg-scale-100',
+  leaveToClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
 }
 
 onMounted(() => {
@@ -37,7 +37,7 @@ function handleClick() {
 <template>
   <Teleport to="body">
     <Transition v-bind="transitionClass">
-      <div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark:bg-dark hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50" @click="handleClick">
+      <div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark-bg-dark hover-bg-stone-1 dark-ring-stone-7 dark-hover-bg-dark/50" @click="handleClick">
         <SvgIcon name="i-icon-park-outline:to-top-one" :size="24" />
       </div>
     </Transition>

src/layouts/components/Breadcrumb/item.vue

@@ -22,14 +22,14 @@ function onClick() {
 </script>
 
 <template>
-  <div class="breadcrumb-item flex items-center text-dark dark:text-white">
+  <div class="breadcrumb-item flex items-center text-dark dark-text-white">
     <span class="separator mx-2">
       {{ separator }}
     </span>
     <span
       class="text flex items-center opacity-60"
       :class="{
-        'is-link cursor-pointer transition-opacity hover:opacity-100': !!props.to,
+        'is-link cursor-pointer transition-opacity hover-opacity-100': !!props.to,
       }" @click="onClick"
     >
       <slot />

src/layouts/components/Copyright/index.vue

@@ -31,7 +31,7 @@ const settingsStore = useSettingsStore()
   }
 
   a {
-    --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
+    --at-apply: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
   }
 }
 </style>

src/layouts/components/Header/index.vue

@@ -40,12 +40,12 @@ function handlerMouserScroll(event: WheelEvent) {
                 }"
               >
                 <div
-                  v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
+                  v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover-(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
                     'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
                   }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
                 >
                   <div class="inline-flex flex-1 items-center justify-center gap-1">
-                    <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
+                    <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
                     <span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
                       {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
                     </span>

src/layouts/components/HotkeysIntro/index.vue

@@ -20,7 +20,7 @@ onMounted(() => {
 <template>
   <HDialog v-model="isShow" title="快捷键介绍">
     <div class="px-4">
-      <div class="grid gap-2 sm:grid-cols-2">
+      <div class="grid gap-2 sm-grid-cols-2">
         <div>
           <h2 class="m-0 text-lg font-bold">
             全局

src/layouts/components/MainSidebar/index.vue

@@ -26,12 +26,12 @@ const { switchTo } = useMenu()
             }"
           >
             <div
-              v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover:(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
+              v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
                 'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
               }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
             >
               <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
-                <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
+                <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
                 <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
                   {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
                 </span>

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/Menu/item.vue

@@ -52,7 +52,7 @@ defineExpose({
               target: item.meta?.link ? '_blank' : '_self',
               class: 'no-underline',
             }),
-          }" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
+          }" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
             'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
             'px-3!': rootMenu.isMenuPopup && level === 0,
           }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
@@ -68,7 +68,7 @@ defineExpose({
               'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
             }" :style="indentStyle"
           >
-            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
+            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
             <span
               v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
               :class="{

src/layouts/components/Menu/sub.vue

@@ -184,7 +184,7 @@ function handleMouseleave() {
       <OverlayScrollbarsComponent
         v-if="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu" :class="{
           'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
-          'ring-1 ring-stone-2 dark:ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
+          'ring-1 ring-stone-2 dark-ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
           'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
         }"
       >

src/layouts/components/Search/index.vue

@@ -28,11 +28,11 @@ const overlayTransitionClass = ref({
 const transitionClass = computed(() => {
   return {
     enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
-    enterTo: 'opacity-100 translate-y-0 lg:scale-100',
+    enterFrom: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
+    enterTo: 'opacity-100 translate-y-0 lg-scale-100',
     leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+    leaveFrom: 'opacity-100 translate-y-0 lg-scale-100',
+    leaveTo: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
   }
 })
 
@@ -245,23 +245,23 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
   <TransitionRoot as="template" :show="isShow">
     <Dialog :initial-focus="searchInputRef" class="fixed inset-0 z-2000 flex" @close="isShow && eventBus.emit('global-search-toggle')">
       <TransitionChild as="template" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark:bg-stone-8/75" />
+        <div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark-bg-stone-8/75" />
       </TransitionChild>
       <div class="fixed inset-0">
-        <div class="h-full flex items-end justify-center p-4 text-center lg:items-center">
+        <div class="h-full flex items-end justify-center p-4 text-center lg-items-center">
           <TransitionChild as="template" v-bind="transitionClass">
-            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg:max-w-2xl">
-              <div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
-                <div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
+            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg-max-w-2xl">
+              <div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark-bg-stone-8">
+                <div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark-stone-7">
                   <SvgIcon name="i-ep:search" :size="18" class="text-stone-5" />
-                  <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark:text-white focus:outline-none placeholder-stone-4 dark:placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
+                  <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark-text-white focus-outline-none placeholder-stone-4 dark-placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
                 </div>
                 <DialogDescription class="relative m-0 of-y-hidden">
                   <OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full">
                     <template v-if="resultList.length > 0">
-                      <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex cursor-pointer items-center" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
+                      <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex cursor-pointer items-center" :class="{ 'bg-stone-2/40 dark-bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
                         <SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
-                        <div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark:stone-7">
+                        <div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark-stone-7">
                           <div class="truncate text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
                           <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
                             <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
@@ -281,7 +281,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
                     </template>
                   </OverlayScrollbarsComponent>
                 </DialogDescription>
-                <div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark:stone-7">
+                <div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark-stone-7">
                   <div class="flex gap-8">
                     <div class="inline-flex items-center gap-1 text-xs">
                       <HKbd>

src/layouts/components/SubSidebar/index.vue

@@ -68,7 +68,7 @@ onMounted(() => {
       </div>
     </div>
     <div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
-      <span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark:bg-stone-9 hover:bg-stone-2 dark:hover:bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+      <span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark-bg-stone-9 hover-bg-stone-2 dark-hover-bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
         <SvgIcon name="toolbar-collapse" />
       </span>
     </div>

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

@@ -58,11 +58,9 @@ function tabbarScrollTip() {
   }
 }
 function handlerMouserScroll(event: WheelEvent) {
-  if (event.deltaY || event.detail !== 0) {
-    tabsRef.value.scrollBy({
-      left: (event.deltaY || event.detail) > 0 ? 50 : -50,
-    })
-  }
+  tabsRef.value.scrollBy({
+    left: event.deltaY || event.detail,
+  })
 }
 function scrollTo(offsetLeft: number) {
   tabsRef.value.scrollTo({
@@ -77,7 +75,7 @@ function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
     y: event.y,
     zIndex: 1050,
     iconFontClass: '',
-    customClass: 'contextmenu-custom',
+    customClass: 'tabbar-contextmenu',
     items: [
       {
         label: '重新加载',
@@ -166,7 +164,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 +185,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,11 +199,11 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss">
-.mx-menu-ghost-host {
+.tabbar-contextmenu {
   z-index: 1000;
 
   .mx-context-menu {
-    --at-apply: fixed ring-1 ring-stone-2 dark:ring-stone-7 shadow-2xl;
+    --at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;
 
     background-color: var(--g-container-bg);
 
@@ -213,7 +211,7 @@ onUnmounted(() => {
       --at-apply: transition-background-color;
 
       &:not(.disabled):hover {
-        --at-apply: cursor-pointer bg-stone-1 dark:bg-stone-9;
+        --at-apply: cursor-pointer bg-stone-1 dark-bg-stone-9;
       }
 
       span {
@@ -234,7 +232,7 @@ onUnmounted(() => {
       background-color: var(--g-container-bg);
 
       &::after {
-        --at-apply: bg-stone-2 dark:bg-stone-7;
+        --at-apply: bg-stone-2 dark-bg-stone-7;
       }
     }
   }
@@ -412,14 +410,14 @@ onUnmounted(() => {
             transform: translateY(-50%);
 
             &:hover {
-              --at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
+              --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
 
               background-color: var(--g-bg);
             }
           }
 
           .hotkey-number {
-            --at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
+            --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
 
             position: absolute;
             top: 50%;

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/layouts/components/Topbar/Toolbar/NavSearch/index.vue

@@ -12,9 +12,9 @@ const settingsStore = useSettingsStore()
 <template>
   <span class="flex-center cursor-pointer px-2 py-1" @click="eventBus.emit('global-search-toggle')">
     <SvgIcon v-if="settingsStore.mode === 'mobile'" name="i-ri:search-line" />
-    <span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark:bg-stone-9 dark:text-white hover:ring-1 dark:ring-stone-7">
+    <span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark-bg-stone-9 dark-text-white hover-ring-1 dark-ring-stone-7">
       <SvgIcon name="i-ri:search-line" />
-      <span class="text-sm text-stone-5 transition group-hover:text-dark dark:group-hover:text-white">搜索</span>
+      <span class="text-sm text-stone-5 transition group-hover-text-dark dark-group-hover-text-white">搜索</span>
       <HKbd v-if="settingsStore.settings.navSearch.enableHotkeys" class="ml-2">{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S</HKbd>
     </span>
   </span>

src/layouts/components/Topbar/Toolbar/rightSide.vue

@@ -34,6 +34,7 @@ watch(() => userStore.avatar, () => {
       :items="[
         [
           { label: settingsStore.settings.home.title, handle: () => router.push({ path: settingsStore.settings.home.fullPath }), hide: !settingsStore.settings.home.enable },
+          { label: '个人设置', handle: () => router.push({ name: 'personalSetting' }) },
         ],
         [
           { label: '快捷键介绍', handle: () => eventBus.emit('global-hotkeys-intro-toggle'), hide: settingsStore.mode !== 'pc' },

src/layouts/components/views/link.vue

@@ -26,7 +26,7 @@ function open() {
       <PageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
         <div class="flex flex-col items-center">
           <SvgIcon name="i-icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
-          <div class="my-2 text-xl text-dark dark:text-white">
+          <div class="my-2 text-xl text-dark dark-text-white">
             是否访问此链接
           </div>
           <div class="my-2 max-w-[300px] cursor-pointer text-center text-[14px] text-stone-5" @click="route.meta.link && copy(route.meta.link)">

src/layouts/index.vue

@@ -240,7 +240,7 @@ header:not(.header-leave-active) + .wrapper {
 }
 
 .app-setting {
-  --at-apply: text-white dark:text-dark bg-ui-primary;
+  --at-apply: text-white dark-text-dark bg-ui-primary;
 
   position: fixed;
   top: calc(50% + 250px);

src/layouts/ui-kit/HButton.vue

@@ -13,11 +13,11 @@ const props = withDefaults(
 )
 
 const buttonClass = computed(() => [
-  'focus:outline-none focus-visible:outline-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
+  'focus-outline-none focus-visible-outline-0 cursor-pointer disabled-cursor-not-allowed disabled-opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
   props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
   props.outline
-    ? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark:bg-dark hover:not-disabled:bg-ui-primary/10 dark:hover:not-disabled:bg-ui-primary/10 focus-visible:ring-2'
-    : 'shadow-sm text-ui-text bg-ui-primary hover:bg-ui-primary/75 disabled:bg-ui-primary/90 focus-visible:ring-inset focus-visible:ring-2',
+    ? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark-bg-dark hover-not-disabled-bg-ui-primary/10 dark-hover-not-disabled-bg-ui-primary/10 focus-visible-ring-2'
+    : 'shadow-sm text-ui-text bg-ui-primary hover-bg-ui-primary/75 disabled-bg-ui-primary/90 focus-visible-ring-inset focus-visible-ring-2',
 ])
 </script>
 

src/layouts/ui-kit/HCheckList.vue

@@ -26,8 +26,8 @@ watch(value, (val) => {
 </script>
 
 <template>
-  <div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
-    <button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
+  <div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark-bg-stone-7">
+    <button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled-cursor-not-allowed disabled-opacity-50 hover-not-disabled-(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
       <SvgIcon v-if="option.icon" :name="option.icon" />
       <template v-else>
         {{ option.label }}

src/layouts/ui-kit/HDialog.vue

@@ -37,11 +37,11 @@ const overlayTransitionClass = ref({
 const transitionClass = computed(() => {
   return {
     enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
-    enterTo: 'opacity-100 translate-y-0 lg:scale-100',
+    enterFrom: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
+    enterTo: 'opacity-100 translate-y-0 lg-scale-100',
     leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+    leaveFrom: 'opacity-100 translate-y-0 lg-scale-100',
+    leaveTo: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
   }
 })
 
@@ -55,14 +55,14 @@ function close() {
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
     <Dialog class="fixed inset-0 z-2000 flex" @close="!preventClose && close()">
       <TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
+        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark-bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
       </TransitionChild>
       <div class="fixed inset-0 overflow-y-auto">
-        <div class="min-h-full flex items-end justify-center p-4 text-center lg:items-center">
+        <div class="min-h-full flex items-end justify-center p-4 text-center lg-items-center">
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg:my-8 lg:max-w-lg dark:bg-stone-8">
+            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg-my-8 lg-max-w-lg dark-bg-stone-8">
               <div flex="~ items-center justify-between" px-4 py-3 border-b="~ solid stone/15" text-6>
-                <DialogTitle m-0 text-lg text-dark dark:text-white>
+                <DialogTitle m-0 text-lg text-dark dark-text-white>
                   {{ title }}
                 </DialogTitle>
                 <SvgIcon name="i-carbon:close" cursor-pointer @click="close" />

src/layouts/ui-kit/HDropdownMenu.vue

@@ -19,8 +19,8 @@ const myItems = computed(() => {
   <VMenu :show-triggers="['hover']" :auto-hide="false" :popper-triggers="['hover', 'click']" :delay="200" v-bind="$attrs">
     <slot />
     <template #popper>
-      <div v-for="(item, index) in myItems" :key="index" class="p-1" border-b="~ solid stone-2 dark:stone-7 last:size-0">
-        <button v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" @click="v.handle">
+      <div v-for="(item, index) in myItems" :key="index" class="b-b-(stone-2 solid) p-1 last-b-b-size-0 dark-b-b-(stone-7)">
+        <button v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled-cursor-not-allowed dark-text-white disabled-opacity-50 hover-not-disabled-bg-stone-1 dark-hover-not-disabled-bg-stone-9" @click="v.handle">
           {{ v.label }}
         </button>
       </div>

src/layouts/ui-kit/HInput.vue

@@ -19,7 +19,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="relative w-full lg:w-48">
-    <input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled:cursor-not-allowed dark:bg-dark disabled:opacity-50 focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary placeholder-stone-4 dark:placeholder-stone-5">
+  <div class="relative w-full lg-w-48">
+    <input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled-cursor-not-allowed dark-bg-dark disabled-opacity-50 focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary placeholder-stone-4 dark-placeholder-stone-5">
   </div>
 </template>

src/layouts/ui-kit/HKbd.vue

@@ -1,5 +1,5 @@
 <template>
-  <kbd class="mr-[4px] h-6 min-w-[24px] inline-flex items-center justify-center rounded bg-stone-1 px-1 text-[12px] text-dark font-medium font-sans ring-1 ring-stone-3 ring-inset last:mr-0 dark:bg-dark-9 dark:text-white dark:ring-stone-7">
+  <kbd class="mr-[4px] h-6 min-w-[24px] inline-flex items-center justify-center rounded bg-stone-1 px-1 text-[12px] text-dark font-medium font-sans ring-1 ring-stone-3 ring-inset last:mr-0 dark-bg-dark-9 dark-text-white dark-ring-stone-7">
     <slot />
   </kbd>
 </template>

src/layouts/ui-kit/HSelect.vue

@@ -28,7 +28,7 @@ const selected = computed({
 <template>
   <VMenu :triggers="['click']" :popper-triggers="['click']" :delay="0" :disabled="disabled" v-bind="$attrs">
     <div class="w-full inline-flex">
-      <button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg:w-48 disabled:cursor-not-allowed dark:bg-dark focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary" :disabled="disabled">
+      <button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg-w-48 disabled-cursor-not-allowed dark-bg-dark focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary" :disabled="disabled">
         <span class="block truncate">
           {{ selected.label }}
         </span>
@@ -38,8 +38,8 @@ const selected = computed({
       </button>
     </div>
     <template #popper>
-      <div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg:w-48 focus:outline-none">
-        <button v-for="option in options" :key="option.value" :disabled="option.disabled" class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled:cursor-not-allowed hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" :class="{ 'font-bold': modelValue === option.value }" @click="selected = option">
+      <div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg-w-48 focus-outline-none">
+        <button v-for="option in options" :key="option.value" :disabled="option.disabled" class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled-cursor-not-allowed hover-not-disabled-bg-stone-1 dark-hover-not-disabled-bg-stone-9" :class="{ 'font-bold': modelValue === option.value }" @click="selected = option">
           {{ option.label }}
         </button>
       </div>

src/layouts/ui-kit/HSlideover.vue

@@ -58,12 +58,12 @@ function close() {
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
     <Dialog class="fixed inset-0 z-2000 flex" :class="{ 'justify-end': side === 'right' }" @close="!preventClose && close()">
       <TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
+        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark-bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
       </TransitionChild>
       <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-        <DialogPanel relative max-w-md w-full w-screen flex flex-1 flex-col bg-white dark:bg-stone-8 focus:outline-none>
+        <DialogPanel relative max-w-md w-full w-screen flex flex-1 flex-col bg-white dark-bg-stone-8 focus-outline-none>
           <div flex="~ items-center justify-between" p-4 border-b="~ solid stone/15" text-6>
-            <DialogTitle m-0 text-lg text-dark dark:text-white>
+            <DialogTitle m-0 text-lg text-dark dark-text-white>
               {{ title }}
             </DialogTitle>
             <SvgIcon name="i-carbon:close" cursor-pointer @click="close" />

src/layouts/ui-kit/HTabList.vue

@@ -35,12 +35,12 @@ function handleChange(index: number) {
 
 <template>
   <TabGroup :selected-index="selectedIndex" @change="handleChange">
-    <TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark:bg-stone-9 dark:ring-stone-8">
+    <TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark-bg-stone-9 dark-ring-stone-8">
       <Tab v-for="(option, index) in options" :key="index" v-slot="{ selected }" as="template">
         <button
-          class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark:text-white focus:outline-none focus:ring-2 dark:ring-stone-8" :class="{
-            'cursor-default bg-white dark:bg-dark-9': selected,
-            'cursor-pointer opacity-50 hover:(opacity-100)': !selected,
+          class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark-text-white focus-outline-none focus-ring-2 dark-ring-stone-8" :class="{
+            'cursor-default bg-white dark-bg-dark-9': selected,
+            'cursor-pointer opacity-50 hover-(opacity-100)': !selected,
           }"
         >
           <SvgIcon v-if="option.icon" :name="option.icon" class="flex-shrink-0" />

src/layouts/ui-kit/HToggle.vue

@@ -16,10 +16,10 @@ const enabled = defineModel<boolean>()
 </script>
 
 <template>
-  <Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark:bg-stone-7']">
-    <span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark:bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
+  <Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled-cursor-not-allowed disabled-opacity-50 focus-outline-none focus-visible-ring-2 focus-visible-ring-offset-2 focus-visible-ring-offset-white dark-focus-visible-ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark-bg-stone-7']">
+    <span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark-bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
       <span class="absolute inset-0 h-full w-full flex items-center justify-center">
-        <SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark:text-stone-3" />
+        <SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark-text-stone-3" />
       </span>
     </span>
   </Switch>

src/router/index.ts

@@ -84,7 +84,7 @@ router.beforeEach(async (to, from, next) => {
       // 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
       const removeRoutes: (() => void)[] = []
       routeStore.flatRoutes.forEach((route) => {
-        if (!/^(https?:|mailto:|tel:)/.test(route.path)) {
+        if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
           removeRoutes.push(router.addRoute(route as RouteRecordRaw))
         }
       })

src/store/modules/menu.ts

@@ -163,11 +163,12 @@ const useMenuStore = defineStore(
       menus.forEach((menu) => {
         if (hasPermission(permissions, menu)) {
           const tmpMenu = cloneDeep(menu)
-          if (tmpMenu.children) {
+          if (tmpMenu.children && tmpMenu.children.length > 0) {
             tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
-            tmpMenu.children.length && res.push(tmpMenu)
+            tmpMenu.children.length > 0 && res.push(tmpMenu)
           }
           else {
+            delete tmpMenu.children
             res.push(tmpMenu)
           }
         }

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/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     Auth: typeof import('./../components/Auth/index.vue')['default']

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/utils/system.copyright.ts

@@ -5,7 +5,7 @@ if (import.meta.env.PROD) {
   const copyright_main_style = `${copyright_common_style} background: #e24329;`
   const copyright_sub_style = `${copyright_common_style} background: #707070;`
   if ((navigator.language).toLowerCase() === 'zh-cn') {
-    console.info('%c由%cFantastic-admin%c驱动', copyright_sub_style, copyright_main_style, copyright_sub_style, '\nhttps://fantastic-admin.gitee.io')
+    console.info('%c由%cFantastic-admin%c驱动', copyright_sub_style, copyright_main_style, copyright_sub_style, '\nhttps://fantastic-admin.github.io')
   }
   else {
     console.info('%cPowered by%cFantastic-admin', copyright_sub_style, copyright_main_style, '\nhttps://fantastic-admin.github.io')

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

@@ -38,13 +38,13 @@ function goBack() {
 </script>
 
 <template>
-  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
-    <SvgIcon name="404" class="text-[300px] lg:text-[400px]" />
+  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg-flex-row -translate-x-50% -translate-y-50% lg-gap-12">
+    <SvgIcon name="404" class="text-[300px] lg-text-[400px]" />
     <div class="flex flex-col gap-4">
       <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

@@ -25,12 +25,12 @@ const fantasticAdminInfo = ref({
   imageVisible: false,
   index: 0,
   data: [
-    'https://fantastic-admin.gitee.io/preview1.png',
-    'https://fantastic-admin.gitee.io/preview2.png',
-    'https://fantastic-admin.gitee.io/preview3.png',
-    'https://fantastic-admin.gitee.io/preview4.png',
-    'https://fantastic-admin.gitee.io/preview5.png',
-    'https://fantastic-admin.gitee.io/preview6.png',
+    'https://fantastic-admin.github.io/preview1.png',
+    'https://fantastic-admin.github.io/preview2.png',
+    'https://fantastic-admin.github.io/preview3.png',
+    'https://fantastic-admin.github.io/preview4.png',
+    'https://fantastic-admin.github.io/preview5.png',
+    'https://fantastic-admin.github.io/preview6.png',
   ],
 })
 
@@ -38,12 +38,12 @@ const oneStepAdminInfo = ref({
   imageVisible: false,
   index: 0,
   data: [
-    'https://one-step-admin.gitee.io/preview1.png',
-    'https://one-step-admin.gitee.io/preview2.png',
-    'https://one-step-admin.gitee.io/preview3.png',
-    'https://one-step-admin.gitee.io/preview4.png',
-    'https://one-step-admin.gitee.io/preview5.png',
-    'https://one-step-admin.gitee.io/preview6.png',
+    'https://one-step-admin.github.io/preview1.png',
+    'https://one-step-admin.github.io/preview2.png',
+    'https://one-step-admin.github.io/preview3.png',
+    'https://one-step-admin.github.io/preview4.png',
+    'https://one-step-admin.github.io/preview5.png',
+    'https://one-step-admin.github.io/preview6.png',
   ],
 })
 
@@ -70,7 +70,7 @@ function open(url: string) {
           </div>
         </div>
       </template>
-      <HButton outline @click="open('https://fantastic-admin.gitee.io')">
+      <HButton outline @click="open('https://fantastic-admin.github.io')">
         <SvgIcon name="i-ri:file-text-line" />
         开发文档
       </HButton>
@@ -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>
@@ -105,12 +102,9 @@ function open(url: string) {
             </div>
           </div>
           <div class="ml-auto">
-            <HButton @click="open('https://hooray.gitee.io/fantastic-startkit')">
+            <HButton @click="open('https://hooray.github.io/fantastic-startkit')">
               访问官网
             </HButton>
-            <HButton outline class="ml-2" @click="open('https://hooray.github.io/fantastic-startkit')">
-              备用地址
-            </HButton>
           </div>
         </template>
         <ul class="m-0 pr-8 text-size-sm leading-6">
@@ -122,7 +116,7 @@ function open(url: string) {
       <PageMain class="ecology">
         <template #title>
           <div class="title-info">
-            <img src="https://fantastic-admin.gitee.io/logo.png">
+            <img src="https://fantastic-admin.github.io/logo.png">
             <div>
               <h1 class="c-[#e60000]">
                 Fantastic-admin
@@ -131,12 +125,9 @@ function open(url: string) {
             </div>
           </div>
           <div class="ml-auto">
-            <HButton @click="open('https://fantastic-admin.gitee.io')">
+            <HButton @click="open('https://fantastic-admin.github.io')">
               访问官网
             </HButton>
-            <HButton outline class="ml-2" @click="open('https://fantastic-admin.github.io')">
-              备用地址
-            </HButton>
           </div>
         </template>
         <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">
@@ -149,7 +140,7 @@ function open(url: string) {
       <PageMain class="ecology">
         <template #title>
           <div class="title-info">
-            <img src="https://one-step-admin.gitee.io/logo.png">
+            <img src="https://one-step-admin.github.io/logo.png">
             <div>
               <h1 class="c-[#67c23a]">
                 One-step-admin
@@ -158,12 +149,9 @@ function open(url: string) {
             </div>
           </div>
           <div class="ml-auto">
-            <HButton @click="open('https://one-step-admin.gitee.io')">
+            <HButton @click="open('https://one-step-admin.github.io')">
               访问官网
             </HButton>
-            <HButton outline class="ml-2" @click="open('https://one-step-admin.github.io')">
-              备用地址
-            </HButton>
           </div>
         </template>
         <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">

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')">

vite.config.ts

@@ -17,7 +17,6 @@ export default async ({ mode, command }) => {
     }
   })
   return defineConfig({
-    base: './',
     // 开发服务器选项 https://cn.vitejs.dev/config/#server-options
     server: {
       open: true,

vite/plugins/app-info.ts

@@ -11,7 +11,7 @@ export default function appInfo(): Plugin {
       // eslint-disable-next-line no-console
       console.log(
         boxen(
-          `${bold(green(`由 ${bgGreen('Fantastic-admin')} 驱动`))}\n\n${underline('https://fantastic-admin.gitee.io')}\n\n当前使用：${cyan('基础版')}`,
+          `${bold(green(`由 ${bgGreen('Fantastic-admin')} 驱动`))}\n\n${underline('https://fantastic-admin.github.io')}\n\n当前使用：${cyan('基础版')}`,
           {
             padding: 1,
             margin: 1,

vite/plugins/banner.ts

@@ -5,8 +5,7 @@ export default function createBanner() {
 /**
  * 由 Fantastic-admin 提供技术支持
  * Powered by Fantastic-admin
- * Gitee  https://fantastic-admin.gitee.io
- * Github https://fantastic-admin.github.io
+ * https://fantastic-admin.github.io
  */
 `)
 }