chore: release v4.2.0

框架中所有跳转到主页的操作均改成取该配置设置的路由地址

.github/workflows/release.yml

@@ -75,7 +75,7 @@ jobs:
         with:
           type: zip
           filename: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip
-          exclusions: '/.git/* /.github/*'
+          exclusions: '/.git/* /.github/* /public/.github/* /public/.nojekyll'
 
       - name: Upload Archive To Release
         uses: xresloader/upload-to-github-release@v1

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
     "antfu.unocss"
   ]
 }

.vscode/settings.json

@@ -3,9 +3,9 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
   },
   "stylelint.validate": [
     "css",

README.md

@@ -47,7 +47,6 @@
 - `vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发（停止维护）
 - `vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习（停止维护）
 
-
 ## 预览
 
 > 预览截图为 Vue3 专业版
@@ -73,6 +72,12 @@
 
 [![star](https://gitee.com/fantastic-admin/basic/badge/star.svg?theme=dark)](https://gitee.com/fantastic-admin/basic)
 
+<details>
+<summary>Github Stars 曲线</summary>
+
+[![Stargazers over time](https://starchart.cc/fantastic-admin/basic.svg)](https://starchart.cc/fantastic-admin/basic)
+</details>
+
 ## 生态
 
 <table>

eslint.config.js

@@ -2,6 +2,7 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu(
   {
+    unocss: true,
     ignores: [
       'public',
       'dist*',
@@ -19,7 +20,7 @@ export default antfu(
       'src/**/*.vue',
     ],
     rules: {
-      'vue/component-tags-order': ['error', {
+      'vue/block-order': ['error', {
         order: ['route', 'script', 'template', 'style'],
       }],
     },

package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
@@ -21,75 +21,76 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
-    "@vueuse/core": "^10.5.0",
-    "@vueuse/integrations": "^10.5.0",
-    "axios": "^1.6.0",
+    "@vueuse/core": "^10.7.0",
+    "@vueuse/integrations": "^10.7.0",
+    "axios": "^1.6.2",
     "dayjs": "^1.11.10",
     "defu": "^6.1.3",
-    "element-plus": "^2.4.1",
+    "element-plus": "^2.4.4",
     "eruda": "^3.0.1",
     "floating-vue": "2.0.0-beta.24",
-    "hotkeys-js": "^3.12.0",
+    "hotkeys-js": "^3.13.2",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
+    "overlayscrollbars": "^2.4.5",
     "overlayscrollbars-vue": "^0.5.6",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
     "qs": "^6.11.2",
-    "scule": "^1.0.0",
+    "scule": "^1.1.1",
     "vconsole": "^3.15.1",
-    "vue": "^3.3.7",
+    "vue": "^3.3.11",
     "vue-m-message": "^4.0.2",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "1.0.0-beta.29",
-    "@iconify/json": "^2.2.134",
+    "@antfu/eslint-config": "2.4.6",
+    "@iconify/json": "^2.2.158",
     "@iconify/vue": "^4.1.1",
-    "@types/lodash-es": "^4.17.10",
-    "@types/nprogress": "^0.2.2",
-    "@types/path-browserify": "^1.0.1",
-    "@types/qs": "^6.9.9",
-    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/nprogress": "^0.2.3",
+    "@types/path-browserify": "^1.0.2",
+    "@types/qs": "^6.9.10",
+    "@unocss/eslint-plugin": "^0.58.0",
+    "@vitejs/plugin-legacy": "^5.2.0",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
-    "bumpp": "^9.2.0",
-    "cz-git": "^1.7.1",
-    "eslint": "^8.52.0",
-    "esno": "^0.17.0",
-    "fs-extra": "^11.1.1",
+    "bumpp": "^9.2.1",
+    "cz-git": "^1.8.0",
+    "eslint": "^8.55.0",
+    "esno": "^4.0.0",
+    "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
-    "inquirer": "^9.2.11",
-    "lint-staged": "^15.0.2",
+    "inquirer": "^9.2.12",
+    "lint-staged": "^15.2.0",
     "npm-run-all": "^4.1.5",
     "plop": "^4.0.0",
-    "postcss-html": "^1.5.0",
     "sass": "^1.69.5",
     "simple-git-hooks": "^2.9.0",
     "stylelint": "^15.11.0",
-    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-config-standard-scss": "^11.1.0",
     "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-scss": "^5.3.0",
+    "stylelint-scss": "^5.3.1",
     "stylelint-stylistic": "^0.4.3",
-    "svgo": "^3.0.2",
-    "terser": "^5.22.0",
-    "typescript": "^5.2.2",
-    "unocss": "^0.57.1",
-    "unplugin-auto-import": "^0.16.7",
-    "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.5.0",
+    "svgo": "^3.1.0",
+    "terser": "^5.26.0",
+    "typescript": "^5.3.3",
+    "unocss": "^0.58.0",
+    "unplugin-auto-import": "^0.17.2",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.0.10",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.8",
-    "vite-plugin-pages": "^0.31.0",
+    "vite-plugin-pages": "^0.32.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-inspector": "^4.0.0",
-    "vite-plugin-vue-meta-layouts": "^0.3.1",
-    "vue-tsc": "^1.8.22"
+    "vite-plugin-vue-inspector": "^4.0.2",
+    "vite-plugin-vue-meta-layouts": "^0.3.4",
+    "vue-tsc": "^1.8.25"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

src/App.vue

@@ -5,10 +5,8 @@ import hotkeys from 'hotkeys-js'
 import elementPlusLocaleZhCN from 'element-plus/es/locale/lang/zh-cn.mjs'
 import eventBus from './utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-const menuStore = useMenuStore()
 const { auth } = useAuth()
 
 // 侧边栏主导航当前实际宽度
@@ -26,15 +24,6 @@ const subSidebarActualWidth = computed(() => {
   if (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile') {
     actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-collapse-width'))
   }
-  if (
-    menuStore.sidebarMenus.length === 1
-      && (
-        !menuStore.sidebarMenus[0].children
-          || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
-      )
-  ) {
-    actualWidth = 0
-  }
   return `${actualWidth}px`
 })
 

src/assets/styles/globals.scss

@@ -1,7 +1,7 @@
 // 页面布局 CSS 变量
 :root {
   // 头部高度
-  --g-header-height: 80px;
+  --g-header-height: 60px;
   // 侧边栏宽度
   --g-main-sidebar-width: 80px;
   --g-sub-sidebar-width: 220px;

src/components/FixedActionBar/index.vue

@@ -28,7 +28,7 @@ function onScroll() {
 
 <template>
   <div
-    class="z-4 bottom-0 p-5 text-center bg-[var(--g-container-bg)] transition" :class="[
+    class="bottom-0 z-4 bg-[var(--g-container-bg)] p-5 text-center transition" :class="[
       isBottom ? 'shadow-[0_0_1px_0_var(--g-box-shadow-color)]' : 'shadow-[0_-10px_10px_-10px_var(--g-box-shadow-color)]',
     ]" data-fixed-calc-width
   >

src/components/NotAllowed/index.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
+
 defineOptions({
   name: 'NotAllowed',
 })
 
 const router = useRouter()
 
+const settingsStore = useSettingsStore()
+
 const data = ref({
   inter: Number.NaN,
   countdown: 5,
@@ -25,18 +29,18 @@ onMounted(() => {
 })
 
 function goBack() {
-  router.push('/')
+  router.push(settingsStore.settings.home.fullPath)
 }
 </script>
 
 <template>
-  <div class="flex items-center justify-between flex-col lg:flex-row lg:gap-12 absolute left-[50%] top-[50%] -translate-x-50% -translate-y-50%">
+  <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
       </h1>
-      <div class="desc mx-0 text-stone-5 text-xl">
+      <div class="desc mx-0 text-xl text-stone-5">
         抱歉，你无权访问该页面
       </div>
       <div>

src/components/PageHeader/index.vue

@@ -12,7 +12,7 @@ const slots = useSlots()
 </script>
 
 <template>
-  <div class="page-header flex items-center justify-between flex-wrap gap-5 mb-5 px-5 py-4 bg-[var(--g-container-bg)] transition-background-color-300">
+  <div class="page-header mb-5 flex flex-wrap items-center justify-between gap-5 bg-[var(--g-container-bg)] px-5 py-4 transition-background-color-300">
     <div class="main flex-[1_1_70%]">
       <div class="text-2xl">
         <slot name="title">
@@ -25,7 +25,7 @@ const slots = useSlots()
         </slot>
       </div>
     </div>
-    <div v-if="slots.default" class="flex-none ml-a">
+    <div v-if="slots.default" class="ml-a flex-none">
       <slot />
     </div>
   </div>

src/components/PageMain/index.vue

@@ -26,13 +26,13 @@ function unCollaspe() {
 
 <template>
   <div
-    class="page-main flex flex-col relative m-4 bg-[var(--g-container-bg)] transition-background-color-300" :class="{
+    class="page-main relative m-4 flex flex-col bg-[var(--g-container-bg)] transition-background-color-300" :class="{
       'of-hidden': isCollaspe,
     }" :style="{
       height: isCollaspe ? height : '',
     }"
   >
-    <div v-if="titleSlot || title" class="title-container px-5 py-4 border-b-1 border-b-solid border-b-[var(--g-bg)] transition-border-color-300">
+    <div v-if="titleSlot || title" class="title-container border-b-1 border-b-[var(--g-bg)] border-b-solid px-5 py-4 transition-border-color-300">
       <slot name="title">
         {{ title }}
       </slot>
@@ -40,8 +40,8 @@ function unCollaspe() {
     <div class="main-container p-5">
       <slot />
     </div>
-    <div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full pt-10 pb-2 text-center cursor-pointer bg-gradient-to-b from-transparent to-[var(--g-container-bg)]" @click="unCollaspe">
-      <SvgIcon name="ep:arrow-down" class="text-xl op-30 hover:op-100 transition-opacity" />
+    <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="ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
     </div>
   </div>
 </template>

src/components/SearchBar/index.vue

@@ -46,8 +46,8 @@ function toggle() {
     }"
   >
     <slot :fold="isFold" />
-    <div v-if="showToggle" class="absolute left-0 bottom-0 w-full text-center translate-y-1/2">
-      <button class="outline-none cursor-pointer inline-flex items-center px-2 h-5 border-size-0 font-medium text-xs rounded select-none bg-[var(--g-bg)]" @click="toggle">
+    <div v-if="showToggle" class="absolute bottom-0 left-0 w-full translate-y-1/2 text-center">
+      <button class="h-5 inline-flex cursor-pointer select-none items-center border-size-0 rounded bg-[var(--g-bg)] px-2 text-xs font-medium outline-none" @click="toggle">
         <SvgIcon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
       </button>
     </div>

src/components/SvgIcon/index.vue

@@ -68,7 +68,7 @@ const style = computed(() => {
 </script>
 
 <template>
-  <i class="h-[1em] w-[1em] leading-[1em] flex-inline justify-center items-center relative fill-current" :style="style">
+  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
     <i v-if="outputType === 'css'" :class="outputName" />
     <Icon v-else-if="outputType === 'svg'" :icon="outputName" />
     <svg v-else h-1em w-1em aria-hidden="true">

src/components/SystemInfo/index.vue

@@ -15,19 +15,27 @@ onMounted(() => {
 <template>
   <HSlideover v-model="isShow" title="系统信息">
     <div class="px-4">
-      <h2 class="text-lg font-bold m-0">
+      <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">
         最后编译时间
       </h2>
-      <div class="my-4 text-lg text-center font-sans">
+      <div class="my-4 text-center text-lg font-sans">
         {{ lastBuildTime }}
       </div>
     </div>
     <div class="px-4">
-      <h2 class="text-lg font-bold m-0">
+      <h2 class="m-0 text-lg font-bold">
         生产环境依赖
       </h2>
       <ul class="list-none pl-0 text-sm">
-        <li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="py-1.5 px-2 rounded flex items-center justify-between 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>
@@ -38,11 +46,11 @@ onMounted(() => {
       </ul>
     </div>
     <div class="px-4">
-      <h2 class="text-lg font-bold m-0">
+      <h2 class="m-0 text-lg font-bold">
         开发环境依赖
       </h2>
       <ul class="list-none pl-0 text-sm">
-        <li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="py-1.5 px-2 rounded flex items-center justify-between 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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
 import Message from 'vue-m-message'
+import settingsDefault from '@/settings.default'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
@@ -50,14 +51,41 @@ watch(copied, (val) => {
   }
 })
 
+interface AnyObject {
+  [key: string]: any
+}
+// 比较两个对象，并提取出不同的部分
+function getObjectDiff(originalObj: AnyObject, diffObj: AnyObject): AnyObject {
+  if (typeof originalObj !== 'object' || typeof diffObj !== 'object') {
+    return diffObj
+  }
+  const diff: AnyObject = {}
+  for (const key in diffObj) {
+    const originalValue = originalObj[key]
+    const diffValue = diffObj[key]
+    if (originalValue !== diffValue) {
+      if (typeof originalValue === 'object' && typeof diffValue === 'object') {
+        const nestedDiff = getObjectDiff(originalValue, diffValue)
+        if (Object.keys(nestedDiff).length > 0) {
+          diff[key] = nestedDiff
+        }
+      }
+      else {
+        diff[key] = diffValue
+      }
+    }
+  }
+  return diff
+}
+
 function handleCopy() {
-  copy(JSON.stringify(settingsStore.settings, null, 2))
+  copy(JSON.stringify(getObjectDiff(settingsDefault, settingsStore.settings), null, 2))
 }
 </script>
 
 <template>
   <HSlideover v-model="isShow" title="应用配置">
-    <div class="px-4 py-2 rounded-2 text-sm/6 c-rose bg-rose/20 ">
+    <div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
       <p class="my-1">
         应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
       </p>
@@ -68,7 +96,7 @@ function handleCopy() {
     <div class="divider">
       颜色主题风格
     </div>
-    <div class="flex justify-center items-center pb-4">
+    <div class="flex items-center justify-center pb-4">
       <HToggle v-model="isDark" on-icon="ri:sun-line" off-icon="ri:moon-line" />
     </div>
     <div v-if="settingsStore.mode === 'pc'" class="divider">

src/layouts/components/BackTop/index.vue

@@ -37,7 +37,7 @@ function handleClick() {
 <template>
   <Teleport to="body">
     <Transition v-bind="transitionClass">
-      <div v-if="scrollTop && scrollTop >= 200" class="fixed z-1000 right-4 bottom-4 w-12 h-12 flex justify-center items-center rounded-full cursor-pointer shadow-lg ring-1 ring-inset ring-stone-3 dark:ring-stone-7 bg-white dark:bg-dark hover:bg-stone-1 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="icon-park-outline:to-top-one" :size="24" />
       </div>
     </Transition>

src/layouts/components/Copyright/index.vue

@@ -30,10 +30,6 @@ const settingsStore = useSettingsStore()
     --at-apply: px-1;
   }
 
-  .icon {
-    --at-apply: mx-1;
-  }
-
   a {
     --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
   }

src/layouts/components/Header/index.vue

@@ -39,14 +39,14 @@ function handlerMouserScroll(event: WheelEvent) {
                   }"
                 >
                   <div
-                    v-if="item.children && item.children.length !== 0" class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-5 py-4 transition-all cursor-pointer group text-[var(--g-header-menu-color)] hover:(text-[var(--g-header-menu-hover-color)] bg-[var(--g-header-menu-hover-bg)])" :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="item.meta?.title" @click="switchTo(index)"
+                    }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
                   >
-                    <div class="inline-flex flex-col justify-center items-center flex-1">
+                    <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 />
-                      <span class="flex-1 text-sm w-full text-center truncate transition-width transition-height transition-opacity">
-                        {{ item.meta?.title }}
+                      <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>
                     </div>
                   </div>
@@ -104,12 +104,12 @@ header {
     background-color: inherit;
 
     .logo {
-      width: 50px;
-      height: 50px;
+      width: initial;
+      height: 40px;
     }
 
     span {
-      font-size: 24px;
+      font-size: 20px;
       letter-spacing: 1px;
       color: var(--g-header-color);
     }
@@ -135,24 +135,15 @@ header {
   .menu {
     display: inline-flex;
     height: 100%;
-    background-color: var(--g-header-bg);
 
     :deep(.menu-item) {
       .menu-item-container {
-        width: 80px;
-        padding: 0 5px;
         color: var(--g-header-menu-color);
-        background-color: var(--g-header-menu-bg);
 
         &:hover {
           color: var(--g-header-menu-hover-color);
           background-color: var(--g-header-menu-hover-bg);
         }
-
-        .menu-item-container-icon {
-          transform: scale(1);
-          font-size: 24px !important;
-        }
       }
 
       &.active .menu-item-container {
@@ -164,15 +155,6 @@ header {
 
   :deep(.tools) {
     padding: 0;
-
-    .buttons .item .icon {
-      color: var(--g-header-color);
-    }
-
-    .user-container {
-      font-size: 16px;
-      color: var(--g-header-color);
-    }
   }
 }
 

src/layouts/components/HotkeysIntro/index.vue

@@ -20,9 +20,9 @@ onMounted(() => {
 <template>
   <HDialog v-model="isShow" title="快捷键介绍">
     <div class="px-4">
-      <div class="grid md:grid-cols-2 gap-2">
+      <div class="grid gap-2 md:grid-cols-2">
         <div>
-          <h2 class="text-lg font-bold m-0">
+          <h2 class="m-0 text-lg font-bold">
             全局
           </h2>
           <ul class="list-none pl-4 text-sm">
@@ -39,7 +39,7 @@ onMounted(() => {
           </ul>
         </div>
         <div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)">
-          <h2 class="text-lg font-bold m-0">
+          <h2 class="m-0 text-lg font-bold">
             主导航
           </h2>
           <ul class="list-none pl-4 text-sm">

src/layouts/components/Logo/index.vue

@@ -22,16 +22,12 @@ const settingsStore = useSettingsStore()
 const title = ref(import.meta.env.VITE_APP_TITLE)
 const logo = ref(imgLogo)
 
-const to = computed(() => {
-  return {
-    ...(settingsStore.settings.home.enable && { name: 'home' }),
-  }
-})
+const to = computed(() => settingsStore.settings.home.enable ? settingsStore.settings.home.fullPath : '')
 </script>
 
 <template>
-  <RouterLink :to="to" class="flex-center gap-2 w-inherit h-[var(--g-sidebar-logo-height)] px-3 text-inherit no-underline" :class="{ 'cursor-pointer': settingsStore.settings.home.enable }" :title="title">
-    <img v-if="showLogo" :src="logo" class="logo w-[30px] h-[30px] object-contain">
-    <span v-if="showTitle" class="block font-bold truncate">{{ title }}</span>
+  <RouterLink :to="to" class="h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline" :class="{ 'cursor-pointer': settingsStore.settings.home.enable }" :title="title">
+    <img v-if="showLogo" :src="logo" class="logo h-[30px] w-[30px] object-contain">
+    <span v-if="showTitle" class="block truncate font-bold">{{ title }}</span>
   </RouterLink>
 </template>

src/layouts/components/MainSidebar/index.vue

@@ -26,14 +26,14 @@ const { switchTo } = useMenu()
             }"
           >
             <div
-              v-if="item.children && item.children.length !== 0" class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-2! py-4 transition-all cursor-pointer group text-[var(--g-main-sidebar-menu-color)] hover:(text-[var(--g-main-sidebar-menu-hover-color)] bg-[var(--g-main-sidebar-menu-hover-bg)])" :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="item.meta?.title" @click="switchTo(index)"
+              }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
             >
-              <div class="inline-flex flex-col justify-center items-center flex-1 gap-[2px] w-full">
+              <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 />
-                <span class="flex-1 text-sm w-full text-center truncate transition-width transition-height transition-opacity">
-                  {{ item.meta?.title }}
+                <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>
               </div>
             </div>
@@ -77,22 +77,19 @@ const { switchTo } = useMenu()
 
     :deep(.menu-item) {
       .menu-item-container {
-        height: 60px;
-        padding: 0 5px;
+        padding-block: 8px;
         color: var(--g-main-sidebar-menu-color);
-        background-color: var(--g-main-sidebar-menu-bg);
+
+        &:hover {
+          color: var(--g-main-sidebar-menu-hover-color);
+          background-color: var(--g-main-sidebar-menu-hover-bg);
+        }
 
         .menu-item-container-icon {
-          transform: scale(1);
           font-size: 24px !important;
         }
       }
 
-      &:hover .menu-item-container {
-        color: var(--g-main-sidebar-menu-hover-color);
-        background-color: var(--g-main-sidebar-menu-hover-bg);
-      }
-
       &.active .menu-item-container {
         color: var(--g-main-sidebar-menu-active-color) !important;
         background-color: var(--g-main-sidebar-menu-active-bg) !important;

src/layouts/components/Menu/index.vue

@@ -19,8 +19,6 @@ const props = withDefaults(
   },
 )
 
-const router = useRouter()
-
 const activeIndex = ref<MenuInjection['activeIndex']>(props.value)
 const items = ref<MenuInjection['items']>({})
 const subMenus = ref<MenuInjection['subMenus']>({})
@@ -79,24 +77,22 @@ const closeMenu: MenuInjection['closeMenu'] = (index) => {
 }
 
 function setSubMenusActive(index: string) {
-  Object.keys(subMenus.value).forEach((index) => {
-    subMenus.value[index].active = false
+  for (const key in subMenus.value) {
+    subMenus.value[key].active = false
+  }
+  subMenus.value[index]?.indexPath.forEach((idx) => {
+    subMenus.value[idx].active = true
   })
-  items.value[index]?.indexPath.forEach((index) => {
-    subMenus.value[index].active = true
+  items.value[index]?.indexPath.forEach((idx) => {
+    subMenus.value[idx].active = true
   })
 }
 
-const handleMenuItemClick: MenuInjection['handleMenuItemClick'] = (index, meta) => {
+const handleMenuItemClick: MenuInjection['handleMenuItemClick'] = (index) => {
   if (props.mode === 'horizontal' || props.collapse) {
     openedMenus.value = []
   }
   setSubMenusActive(index)
-  if (meta?.link) {
-    window.open(meta.link)
-    return
-  }
-  router.push(index)
 }
 const handleSubMenuClick: MenuInjection['handleSubMenuClick'] = (index, indexPath) => {
   if (openedMenus.value.includes(index)) {
@@ -175,7 +171,7 @@ provide(rootMenuInjectionKey, reactive({
   >
     <template v-for="(item, index) in menu" :key="index">
       <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)]" />
+      <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
     </template>
   </div>
 </template>

src/layouts/components/Menu/item.vue

@@ -17,8 +17,8 @@ const itemRef = ref<HTMLElement>()
 
 const isActived = computed(() => {
   return props.subMenu
-    ? rootMenu.subMenus[props.uniqueKey[props.uniqueKey.length - 1]]?.active
-    : rootMenu.activeIndex === props.uniqueKey[props.uniqueKey.length - 1]
+    ? rootMenu.subMenus[props.uniqueKey.at(-1)!].active
+    : rootMenu.activeIndex === props.uniqueKey.at(-1)!
 })
 
 const isItemActive = computed(() => {
@@ -43,38 +43,45 @@ defineExpose({
       active: isItemActive,
     }"
   >
-    <div
-      class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-5 py-4 transition-all cursor-pointer group text-[var(--g-sub-sidebar-menu-color)] hover:(text-[var(--g-sub-sidebar-menu-hover-color)] bg-[var(--g-sub-sidebar-menu-hover-bg)])" :class="{
-        'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
-        'px-2!': rootMenu.isMenuPopup && level === 0,
-      }" :title="item.meta?.title"
-    >
-      <div
-        class="inline-flex justify-center items-center gap-[12px] flex-1" :class="{
-          'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
-          'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-          'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
-          'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
-        }" :style="indentStyle"
+    <router-link v-slot="{ href }" custom :to="uniqueKey.at(-1) ?? ''">
+      <component
+        :is="subMenu ? 'div' : 'a'" v-bind="{
+          ...(!subMenu && {
+            href: item.meta?.link ? item.meta.link : href,
+            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="{
+          '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"
       >
-        <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="flex-1 text-sm w-0 truncate transition-width transition-height transition-opacity"
-          :class="{
-            'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
-            'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-          }"
+        <div
+          class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
+            'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
+            'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
+          }" :style="indentStyle"
         >
-          {{ item.meta?.title }}
-        </span>
-      </div>
-      <i
-        v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative w-[10px] ml-1 before:(content-empty absolute w-[6px] h-[1.5px] bg-current -translate-y-[1px] transition-transform-200) after:(content-empty absolute w-[6px] h-[1.5px] bg-current -translate-y-[1px] transition-transform-200)" :class="[
-          expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
-          rootMenu.isMenuPopup && level === 0 && 'opacity-0',
-          rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
-        ]"
-      />
-    </div>
+          <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="{
+              'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
+              'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            }"
+          >
+            {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
+          </span>
+        </div>
+        <i
+          v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ml-1 w-[10px] after:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px]) before:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px])" :class="[
+            expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
+            rootMenu.isMenuPopup && level === 0 && 'opacity-0',
+            rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
+          ]"
+        />
+      </component>
+    </router-link>
   </div>
 </template>

src/layouts/components/Menu/sub.vue

@@ -23,7 +23,7 @@ const subMenuRef = shallowRef<OverlayScrollbarsComponentRef>()
 const rootMenu = inject(rootMenuInjectionKey)!
 
 const opened = computed(() => {
-  return rootMenu.openedMenus.includes(props.uniqueKey[props.uniqueKey.length - 1])
+  return rootMenu.openedMenus.includes(props.uniqueKey.at(-1)!)
 })
 
 const transitionEvent = computed(() => {
@@ -114,7 +114,7 @@ function handleClick() {
     rootMenu.handleSubMenuClick(index, props.uniqueKey)
   }
   else {
-    rootMenu.handleMenuItemClick(index, props.menu.meta)
+    rootMenu.handleMenuItemClick(index)
   }
 }
 
@@ -188,8 +188,8 @@ function handleMouseleave() {
           'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
         }"
       >
-        <template v-for="item in menu.children" :key="item.path">
-          <SubMenu v-if="item.meta?.sidebar !== false" :unique-key="[...uniqueKey, item.path]" :menu="item" :level="level + 1" />
+        <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
+          <SubMenu v-if="item.meta?.sidebar !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
         </template>
       </OverlayScrollbarsComponent>
     </Transition>

src/layouts/components/Menu/types.ts

@@ -27,7 +27,7 @@ export interface MenuInjection {
   isMenuPopup: boolean
   openMenu: (index: string, indexPath: string[]) => void
   closeMenu: (index: string | string[]) => void
-  handleMenuItemClick: (index: string, meta?: Menu.recordRaw['meta']) => void
+  handleMenuItemClick: (index: string) => void
   handleSubMenuClick: (index: string, indexPath: string[]) => void
 }
 

src/layouts/components/Search/index.vue

@@ -48,14 +48,15 @@ interface listTypes {
   icon?: string
   title?: string | (() => string)
   link?: string
-  breadcrumb: any[]
+  breadcrumb: {
+    title?: string | (() => string)
+  }[]
 }
 
 const isShow = ref(false)
 const searchInput = ref('')
 const sourceList = ref<listTypes[]>([])
 const actived = ref(-1)
-const isScrollbarsInit = ref(false)
 
 const searchInputRef = ref()
 const searchResultRef = ref<OverlayScrollbarsComponentRef>()
@@ -83,7 +84,19 @@ const resultList = computed(() => {
     if (item.path.includes(searchInput.value)) {
       flag = true
     }
-    if (item.breadcrumb.some((b: { title: any }) => b.title.includes(searchInput.value))) {
+    if (item.breadcrumb.some((b) => {
+      if (typeof b.title === 'function') {
+        if (b.title().includes(searchInput.value)) {
+          return true
+        }
+      }
+      else {
+        if (b.title?.includes(searchInput.value)) {
+          return true
+        }
+      }
+      return false
+    })) {
       flag = true
     }
     return flag
@@ -226,7 +239,6 @@ function keyEnter() {
     searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click()
   }
 }
-// FIXME 列表数据变更后，快捷键滚动失效
 function handleScroll() {
   if (searchResultRef.value) {
     const contentDom = searchResultRef.value.osInstance()!.elements().content
@@ -262,48 +274,46 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
 </script>
 
 <template>
-  <TransitionRoot as="template" :show="isShow" @after-leave="isScrollbarsInit = false">
-    <Dialog :initial-focus="searchInputRef" class="fixed inset-0 flex z-2000" @close="isShow && eventBus.emit('global-search-toggle')">
+  <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 transition-opacity bg-stone-200/75 dark:bg-stone-8/75 backdrop-blur-sm" />
+        <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="flex h-full items-end sm:items-center justify-center text-center p-4 sm:p-0">
+        <div class="h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
           <TransitionChild as="template" v-bind="transitionClass">
-            <DialogPanel class="relative text-left w-full sm:max-w-2xl h-full max-h-4/5 flex flex-col">
-              <div class="flex flex-col bg-white dark:bg-stone-8 rounded-xl shadow-xl overflow-y-auto">
+            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left sm: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="ep:search" :size="18" class="text-stone-5" />
-                  <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full focus:outline-none border-0 rounded-md placeholder-stone-4 dark:placeholder-stone-5 text-base px-3 bg-transparent text-dark dark:text-white" @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 } }" class="h-full" @os-initialized="isScrollbarsInit = true">
-                    <template v-if="isScrollbarsInit">
-                      <template v-if="resultList.length > 0">
-                        <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex items-center cursor-pointer" :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-1 flex flex-col gap-1 px-4 py-3 truncate" border-l="~ solid stone-2 dark:stone-7">
-                            <div class="text-base font-bold truncate">{{ item.title ?? '[ 无标题 ]' }}</div>
-                            <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
-                              <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
-                                {{ bc.title ?? '[ 无标题 ]' }}
-                              </BreadcrumbItem>
-                            </Breadcrumb>
-                          </div>
-                        </a>
-                      </template>
-                      <template v-else>
-                        <div flex="center col" py-6 text-stone-5>
-                          <SvgIcon name="tabler:mood-empty" :size="40" />
-                          <p text-base m-2>
-                            没有找到你想要的
-                          </p>
+                  <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">
+                        <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="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">
+                              {{ (typeof bc.title === 'function' ? bc.title() : bc.title) ?? '[ 无标题 ]' }}
+                            </BreadcrumbItem>
+                          </Breadcrumb>
                         </div>
-                      </template>
+                      </a>
+                    </template>
+                    <template v-else>
+                      <div flex="center col" py-6 text-stone-5>
+                        <SvgIcon name="tabler:mood-empty" :size="40" />
+                        <p m-2 text-base>
+                          没有找到你想要的
+                        </p>
+                      </div>
                     </template>
                   </OverlayScrollbarsComponent>
                 </DialogDescription>
-                <div v-if="settingsStore.mode === 'pc'" class="px-4 py-3 flex justify-between" 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

@@ -18,22 +18,11 @@ const sidebarScrollTop = ref(0)
 function onSidebarScroll(e: Event) {
   sidebarScrollTop.value = (e.target as HTMLElement).scrollTop
 }
-
-const enableSidebar = computed(() => {
-  return settingsStore.mode === 'mobile' || (
-    ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
-      && menuStore.sidebarMenus.length !== 0
-      && !(
-        !menuStore.sidebarMenus[0].children
-          || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
-      )
-  )
-})
 </script>
 
 <template>
   <div
-    v-if="enableSidebar" class="sub-sidebar-container" :class="{
+    class="sub-sidebar-container" :class="{
       'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
     }"
   >

src/layouts/components/Tools/index.vue

@@ -53,10 +53,10 @@ watch(() => userStore.avatar, () => {
 </script>
 
 <template>
-  <div class="tools flex items-center gap-4 px-4 whitespace-nowrap">
-    <span v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'pc'" class="group inline-flex items-center gap-1 px-2 py-1.5 rounded-2 text-dark dark:text-white bg-stone-1 dark:bg-stone-9 ring-inset ring-stone-3 dark:ring-stone-7 hover:ring-1 cursor-pointer transition" @click="eventBus.emit('global-search-toggle')">
+  <div class="tools flex items-center gap-4 whitespace-nowrap px-4">
+    <span v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'pc'" class="group inline-flex cursor-pointer items-center gap-1 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" @click="eventBus.emit('global-search-toggle')">
       <SvgIcon name="ri:search-line" />
-      <span class="text-sm text-stone-5 group-hover:text-dark dark:group-hover:text-white transition">搜索</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>
     <div class="flex items-center empty:hidden">
@@ -76,7 +76,8 @@ watch(() => userStore.avatar, () => {
     <HDropdownMenu
       :items="[
         [
-          { label: settingsStore.settings.home.title, handle: () => router.push({ name: 'home' }), hide: !settingsStore.settings.home.enable },
+          { 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' },
@@ -86,8 +87,8 @@ watch(() => userStore.avatar, () => {
         ],
       ]"
     >
-      <div flex-center gap-1 cursor-pointer>
-        <img v-if="userStore.avatar && !avatarError" :src="userStore.avatar" :onerror="() => (avatarError = true)" class="w-[24px] h-[24px] rounded-full">
+      <div flex-center cursor-pointer gap-1>
+        <img v-if="userStore.avatar && !avatarError" :src="userStore.avatar" :onerror="() => (avatarError = true)" class="h-[24px] w-[24px] rounded-full">
         <SvgIcon v-else name="carbon:user-avatar-filled-alt" :size="24" class="text-gray-400" />
         {{ userStore.account }}
         <SvgIcon name="ep:caret-bottom" />

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

@@ -4,7 +4,6 @@ import Breadcrumb from '../../Breadcrumb/index.vue'
 import BreadcrumbItem from '../../Breadcrumb/item.vue'
 import Tools from '../../Tools/index.vue'
 import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
 
 defineOptions({
   name: 'Toolbar',
@@ -13,24 +12,16 @@ defineOptions({
 const route = useRoute()
 
 const settingsStore = useSettingsStore()
-const menuStore = useMenuStore()
 
 const enableSubMenuCollapseButton = computed(() => {
-  return settingsStore.mode === 'mobile' || (
-    ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
-      && settingsStore.settings.menu.enableSubMenuCollapseButton
-      && !(
-        !menuStore.sidebarMenus[0].children
-          || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
-      )
-  )
+  return settingsStore.mode === 'mobile' || settingsStore.settings.menu.enableSubMenuCollapseButton
 })
 
 const breadcrumbList = computed(() => {
   const breadcrumbList = []
   if (settingsStore.settings.home.enable) {
     breadcrumbList.push({
-      path: '/',
+      path: settingsStore.settings.home.fullPath,
       title: settingsStore.settings.home.title,
     })
   }
@@ -56,8 +47,8 @@ function pathCompile(path: string) {
 <template>
   <div class="toolbar-container">
     <div class="left-box">
-      <div v-if="enableSubMenuCollapseButton" class="flex-center px-2 py-1 cursor-pointer transition-transform" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
-        <SvgIcon name="toolbar-collapse" class="icon" />
+      <div v-if="enableSubMenuCollapseButton" class="flex-center cursor-pointer px-2 py-1 transition-transform" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+        <SvgIcon name="toolbar-collapse" />
       </div>
       <Breadcrumb v-if="settingsStore.mode === 'pc' && settingsStore.settings.breadcrumb.enable && settingsStore.settings.app.routeBaseOn !== 'filesystem'" class="breadcrumb">
         <TransitionGroup name="breadcrumb">

src/layouts/components/views/link.vue

@@ -19,15 +19,15 @@ function open() {
 </script>
 
 <template>
-  <div class="flex flex-col absolute w-full h-full">
+  <div class="absolute h-full w-full flex flex-col">
     <Transition name="slide-right" mode="out-in" appear>
-      <PageMain :key="route.meta.link" class="flex flex-col flex-1 justify-center">
+      <PageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
         <div class="flex flex-col items-center">
           <SvgIcon name="icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
           <div class="my-2 text-xl text-dark dark:text-white">
             是否访问此链接
           </div>
-          <div class="my-2 max-w-[300px] text-[14px] text-center text-stone-5 cursor-pointer" @click="route.meta.link && copy(route.meta.link)">
+          <div class="my-2 max-w-[300px] cursor-pointer text-center text-[14px] text-stone-5" @click="route.meta.link && copy(route.meta.link)">
             <HTooltip text="复制链接">
               <div class="line-clamp-3">
                 {{ route.meta.link }}

src/layouts/ui-kit/HCheckList.vue

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

src/layouts/ui-kit/HDialog.vue

@@ -13,7 +13,7 @@ const props = withDefaults(
     modelValue: false,
     appear: false,
     preventClose: false,
-    overlay: true,
+    overlay: false,
   },
 )
 
@@ -61,21 +61,21 @@ function close() {
 
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog class="fixed inset-0 flex z-2000" @close="!preventClose && close()">
+    <Dialog class="fixed inset-0 z-2000 flex" @close="!preventClose && close()">
       <TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 transition-opacity bg-stone-2/75 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="flex min-h-full items-end sm:items-center justify-center text-center p-4 sm:p-0">
+        <div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-            <DialogPanel class="relative text-left overflow-hidden sm:my-8 w-full flex flex-col sm:max-w-lg bg-white dark:bg-stone-8 rounded-xl shadow-xl">
+            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl sm:my-8 sm: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>
                   {{ title }}
                 </DialogTitle>
                 <SvgIcon name="carbon:close" cursor-pointer @click="close" />
               </div>
-              <DialogDescription m-0 p-4 overflow-y-auto>
+              <DialogDescription m-0 overflow-y-auto p-4>
                 <slot />
               </DialogDescription>
               <div v-if="!!slots.footer" flex="~ items-center justify-end" px-4 py-3 border-t="~ solid stone/15">

src/layouts/ui-kit/HDropdownMenu.vue

@@ -20,7 +20,7 @@ const myItems = computed(() => {
     <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="flex items-center gap-2 w-full px-2 py-1.5 border-size-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-sm rounded-md text-dark dark:text-white bg-inherit hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" @click="v.handle">
+        <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

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

src/layouts/ui-kit/HKbd.vue

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

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

@@ -16,7 +16,7 @@ const props = withDefaults(
     appear: false,
     side: 'right',
     preventClose: false,
-    overlay: true,
+    overlay: false,
   },
 )
 
@@ -64,19 +64,19 @@ function close() {
 
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog class="fixed inset-0 flex z-2000" :class="{ 'justify-end': side === 'right' }" @close="!preventClose && close()">
+    <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 transition-opacity bg-stone-2/75 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 flex-1 flex flex-col w-full focus:outline-none w-screen max-w-md bg-white dark:bg-stone-8>
+        <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>
               {{ title }}
             </DialogTitle>
             <SvgIcon name="carbon:close" cursor-pointer @click="close" />
           </div>
-          <DialogDescription flex-1 m-0 of-y-hidden>
+          <DialogDescription m-0 flex-1 of-y-hidden>
             <OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full p-4">
               <slot />
             </OverlayScrollbarsComponent>

src/layouts/ui-kit/HTabList.vue

@@ -34,10 +34,10 @@ function handleChange(index: number) {
 
 <template>
   <TabGroup :selected-index="selectedIndex" @change="handleChange">
-    <TabList class="inline-flex items-center justify-center p-1 rounded-md bg-stone-1 dark:bg-stone-9 ring-1 ring-stone-2 dark:ring-stone-8 select-none">
+    <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="inline-flex items-center justify-center w-full px-2 py-1.5 border-size-0 text-sm rounded-md truncate text-dark dark:text-white bg-inherit focus:outline-none ring-inset ring-stone-2 dark:ring-stone-8 focus:ring-2" :class="{
+          class="w-full inline-flex items-center justify-center truncate 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 transition hover:(opacity-100)': !selected,
           }"

src/layouts/ui-kit/HToggle.vue

@@ -28,8 +28,8 @@ const enabled = computed({
 </script>
 
 <template>
-  <Switch v-model="enabled" :disabled="disabled" class="relative inline-flex vertical-middle h-5 w-10 p-0 flex-shrink-0 border-2 border-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none rounded-full 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 rounded-full bg-white dark:bg-dark shadow transform ring-0 transition ease-in-out duration-200" :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" />
       </span>

src/router/index.ts

@@ -34,12 +34,12 @@ router.beforeEach(async (to, from, next) => {
       // 如果已登录状态下，进入登录页会强制跳转到主页
       if (to.name === 'login') {
         next({
-          name: 'home',
+          path: settingsStore.settings.home.fullPath,
           replace: true,
         })
       }
       // 如果未开启主页，但进入的是主页，则会进入侧边栏导航第一个模块
-      else if (!settingsStore.settings.home.enable && to.name === 'home') {
+      else if (!settingsStore.settings.home.enable && to.fullPath === settingsStore.settings.home.fullPath) {
         if (menuStore.sidebarMenus.length > 0) {
           next({
             path: menuStore.sidebarMenusFirstDeepestPath,
@@ -105,7 +105,7 @@ router.beforeEach(async (to, from, next) => {
       next({
         name: 'login',
         query: {
-          redirect: to.fullPath !== '/' ? to.fullPath : undefined,
+          redirect: to.fullPath !== settingsStore.settings.home.fullPath ? to.fullPath : undefined,
         },
       })
     }

src/router/routes.ts

@@ -37,7 +37,6 @@ const systemRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: '',
-        name: 'home',
         component: () => import('@/views/index.vue'),
         meta: {
           title: () => useSettingsStore().settings.home.title,

src/settings.default.ts

@@ -14,6 +14,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   home: {
     enable: true,
     title: '主页',
+    fullPath: '/',
   },
   layout: {
     enableMobileAdaptation: false,

src/store/modules/menu.ts

@@ -64,7 +64,7 @@ const useMenuStore = defineStore(
     const sidebarMenusFirstDeepestPath = computed(() => {
       return sidebarMenus.value.length > 0
         ? getDeepestPath(sidebarMenus.value[0])
-        : '/'
+        : settingsStore.settings.home.fullPath
     })
     function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
       let retnPath = ''

src/store/modules/user.ts

@@ -1,3 +1,4 @@
+import useSettingsStore from './settings'
 import useRouteStore from './route'
 import useMenuStore from './menu'
 import router from '@/router'
@@ -7,6 +8,7 @@ const useUserStore = defineStore(
   // 唯一ID
   'user',
   () => {
+    const settingsStore = useSettingsStore()
     const routeStore = useRouteStore()
     const menuStore = useMenuStore()
 
@@ -56,7 +58,7 @@ const useUserStore = defineStore(
       router.push({
         name: 'login',
         query: {
-          ...(router.currentRoute.value.path !== '/' && router.currentRoute.value.name !== 'login' && { redirect }),
+          ...(router.currentRoute.value.path !== settingsStore.settings.home.fullPath && router.currentRoute.value.name !== 'login' && { redirect }),
         },
       })
     }

src/types/auto-imports.d.ts

@@ -83,5 +83,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

src/types/global.d.ts

@@ -55,6 +55,11 @@ declare namespace Settings {
      * @默认值 `'主页'`
      */
     title?: string
+    /**
+     * 主页完整路径
+     * @默认值 `'/'`
+     */
+    fullPath?: string
   }
   interface layout {
     /**
@@ -243,7 +248,7 @@ declare namespace Menu {
   interface recordRaw {
     path?: string
     meta?: {
-      title?: string
+      title?: string | (() => string)
       icon?: string
       defaultOpened?: boolean
       auth?: string | string[]
@@ -255,7 +260,7 @@ declare namespace Menu {
   /** 主导航 */
   interface recordMainRaw {
     meta?: {
-      title?: string
+      title?: string | (() => string)
       icon?: string
       auth?: string | string[]
     }

src/types/shims.d.ts

@@ -5,6 +5,7 @@ declare interface Window {
 
 declare const __SYSTEM_INFO__: {
   pkg: {
+    version: Recordable<string>
     dependencies: Recordable<string>
     devDependencies: Recordable<string>
   }

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

@@ -7,8 +7,12 @@ meta:
 </route>
 
 <script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
+
 const router = useRouter()
 
+const settingsStore = useSettingsStore()
+
 const data = ref({
   inter: Number.NaN,
   countdown: 5,
@@ -29,18 +33,18 @@ onMounted(() => {
 })
 
 function goBack() {
-  router.push('/')
+  router.push(settingsStore.settings.home.fullPath)
 }
 </script>
 
 <template>
-  <div class="flex items-center justify-between flex-col lg:flex-row lg:gap-12 absolute left-[50%] top-[50%] -translate-x-50% -translate-y-50%">
+  <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-stone-5 text-xl">
+      <div class="desc mx-0 text-xl text-stone-5">
         抱歉，你访问的页面不存在
       </div>
       <div>

src/views/index.vue

@@ -89,7 +89,10 @@ function open(url: string) {
         </HButton>
       </HDropdownMenu>
     </PageHeader>
-    <div class="w-full flex flex-col xl:flex-row gap-[20px] px-[20px]">
+    <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>
           <div class="title-info">
@@ -171,28 +174,6 @@ function open(url: string) {
         <ElImageViewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
       </PageMain>
     </div>
-    <PageMain title="应用场景">
-      <div class="question">
-        <ol class="answer">
-          <li><span>没有前端开发人员的小型公司。</span>有很多小型公司没有前端开发人员，而这些公司在开发中后台系统的时候，会要求后端开发人员来进行开发工作。所以借助 Vue 的易学习易上手特性，再加上本框架的加持，可以让后端开发人员能在短时间内转型成为全栈开发。</li>
-          <li><span>前端开发人员不足的中小型公司。</span>根据招聘网站统计，几乎所有公司都缺前端，其中有很大一部分中小型公司标配只有1-2名前端开发人员，而这些公司在开发中后台系统的时候，如果能有一套现成的中后台框架系统，不仅能提高项目开发效率，同时还大大减轻前端开发人员工作压力。</li>
-          <li><span>项目型公司。</span>特点为项目多，周期短，甲方对页面布局和主题风格有绝对话语权，而通过专业版提供的布局和主题风格，可应对绝大部分甲方需求，并且可自定义扩展主题风格的样式，实现高度定制化。</li>
-          <li><span>产品型公司。</span>产品型公司最担心的就是产品开发中代码不可控的因素，本框架除了提供完善的开发文档和代码注释外，专业版用户还可加入技术群，确保开发人员尽可能理解整套框架源码的方方面面，为产品保驾护航。</li>
-          <li><span>个人开发者。</span>手里有一套可高度定制化的中后台框架，什么项目都不用担心啦~</li>
-        </ol>
-      </div>
-    </PageMain>
-    <PageMain title="优势">
-      <div class="question">
-        <ol class="answer">
-          <li><span>作者拥有10年+的前后端开发经验。</span>部分框架的作者由于缺少后端开发经验，可能会在设计框架的时候，很少或者没有考虑后端的实现逻辑，导致框架在实际使用中，业务场景无法落地，开发人员得通过修改源码自行实现业务。</li>
-          <li><span>经历过数十个真实项目的打磨。</span>没用在真实业务场景中使用过的框架都是纸飞机，哪怕它提供的演示功能特别华丽。而本框架在作者就职的公司，已经稳定应用在电商、直播、OA、CRM、ERP等多个不同领域的中后台系统中。</li>
-          <li><span>丰富的组件库。</span>除了可以接入市面上任意 UI 组件库外，框架还扩充了一些业务组件，以及第三方插件。借助以往的项目经验，提供最佳实践方案，方便开发人员直接使用。</li>
-          <li><span>持续更新的业务应用静态页面。</span>通过项目积累，沉淀出数十个业务应用的静态页面，做到开发人员拿来即可使用，极大提升开发效率的同时，还省去了产品和设计人员的工作。</li>
-          <li><span>长期维护。</span>无论是免费的基础版，还是付费的专业版，均提供长期维护。区别在于基础版侧重于稳定性维护，主要在修复 bug ，不定期增加新特性；专业版侧重于新特性开发，在确保稳定的基础上，会长期深挖中后台系统框架，持续产出可落地的特性或开发规范。</li>
-        </ol>
-      </div>
-    </PageMain>
   </div>
 </template>
 
@@ -224,18 +205,4 @@ function open(url: string) {
     }
   }
 }
-
-.question {
-  .answer {
-    --at-apply: m-0 pl-6 text-stone-5;
-
-    li {
-      --at-apply: mb-2 lh-6 last:mb-0;
-    }
-
-    span {
-      --at-apply: text-stone-7 dark:text-stone-3 font-bold;
-    }
-  }
-}
 </style>

src/views/login.vue

@@ -9,6 +9,7 @@ meta:
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import Copyright from '@/layouts/components/Copyright/index.vue'
+import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 
 defineOptions({
@@ -18,15 +19,17 @@ defineOptions({
 const route = useRoute()
 const router = useRouter()
 
+const settingsStore = useSettingsStore()
 const userStore = useUserStore()
 
 const banner = new URL('../assets/images/login-banner.png', import.meta.url).href
+const logo = new URL('../assets/images/logo.png', import.meta.url).href
 const title = import.meta.env.VITE_APP_TITLE
 
 // 表单类型，login 登录，register 注册，reset 重置密码
 const formType = ref('login')
 const loading = ref(false)
-const redirect = ref(route.query.redirect?.toString() ?? '/')
+const redirect = ref(route.query.redirect?.toString() ?? settingsStore.settings.home.fullPath)
 
 // 登录
 const loginFormRef = ref<FormInstance>()
@@ -152,7 +155,7 @@ function testAccount(account: string) {
     <div class="bg-banner" />
     <div id="login-box">
       <div class="login-banner">
-        <div class="logo" />
+        <img :src="logo" class="logo">
         <img :src="banner" class="banner">
       </div>
       <ElForm v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
@@ -381,11 +384,8 @@ function testAccount(account: string) {
       position: absolute;
       top: 20px;
       left: 20px;
-      width: 30px;
       height: 30px;
       border-radius: 4px;
-      background: url("../assets/images/logo.png") no-repeat;
-      background-size: contain;
       box-shadow: var(--el-box-shadow-light);
     }
   }

vite.config.ts

@@ -38,6 +38,7 @@ export default async ({ mode, command }) => {
     define: {
       __SYSTEM_INFO__: JSON.stringify({
         pkg: {
+          version: pkg.version,
           dependencies: pkg.dependencies,
           devDependencies: pkg.devDependencies,
         },