pinia store 改为 setup 写法

src/App.vue

@@ -14,7 +14,7 @@ const buttonConfig = ref({
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
   let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (['head', 'single'].includes(settingsStore.menu.menuMode)) {
+  if (['head', 'single'].includes(settingsStore.settings.menu.menuMode)) {
     actualWidth = 0
   }
   return `${actualWidth}px`
@@ -23,50 +23,17 @@ const mainSidebarActualWidth = computed(() => {
 // 侧边栏次导航当前实际宽度
 const subSidebarActualWidth = computed(() => {
   let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
-  if (settingsStore.menu.subMenuCollapse) {
+  if (settingsStore.settings.menu.subMenuCollapse) {
     actualWidth = 64
   }
   return `${actualWidth}px`
 })
 
-watch(() => settingsStore.app.colorScheme, () => {
-  if (settingsStore.app.colorScheme === 'dark') {
-    document.documentElement.classList.add('dark')
-  }
-  else {
-    document.documentElement.classList.remove('dark')
-  }
-}, {
-  immediate: true,
-})
-
-watch(() => settingsStore.mode, () => {
-  if (settingsStore.mode === 'pc') {
-    settingsStore.$patch((state) => {
-      state.menu.subMenuCollapse = settingsStore.subMenuCollapseLastStatus
-    })
-  }
-  else if (settingsStore.mode === 'mobile') {
-    settingsStore.$patch((state) => {
-      state.menu.subMenuCollapse = true
-    })
-  }
-  document.body.setAttribute('data-mode', settingsStore.mode)
-}, {
-  immediate: true,
-})
-
-watch(() => settingsStore.menu.menuMode, () => {
-  document.body.setAttribute('data-menu-mode', settingsStore.menu.menuMode)
-}, {
-  immediate: true,
-})
-
 watch([
-  () => settingsStore.app.enableDynamicTitle,
+  () => settingsStore.settings.app.enableDynamicTitle,
   () => settingsStore.title,
 ], () => {
-  if (settingsStore.app.enableDynamicTitle && settingsStore.title) {
+  if (settingsStore.settings.app.enableDynamicTitle && settingsStore.title) {
     const title = typeof settingsStore.title === 'function' ? settingsStore.title() : settingsStore.title
     document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
   }
@@ -87,7 +54,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize" :button="buttonConfig">
+  <el-config-provider :locale="zhCn" :size="settingsStore.settings.app.elementSize" :button="buttonConfig">
     <RouterView
       :style="{
         '--g-main-sidebar-actual-width': mainSidebarActualWidth,

src/components/Copyright/index.vue

@@ -6,15 +6,15 @@ const settingsStore = useSettingsStore()
 </script>
 
 <template>
-  <footer v-if="route.meta.copyright ?? settingsStore.copyright.enable" class="copyright">
+  <footer v-if="route.meta.copyright ?? settingsStore.settings.copyright.enable" class="copyright">
     <span>Copyright</span>
     <span class="icon">©</span>
-    <span v-if="settingsStore.copyright.dates">{{ settingsStore.copyright.dates }}</span>
-    <template v-if="settingsStore.copyright.company">
-      <a v-if="settingsStore.copyright.website" :href="settingsStore.copyright.website" target="_blank" rel="noopener">{{ settingsStore.copyright.company }}</a>
-      <span v-else>{{ settingsStore.copyright.company }}</span>
+    <span v-if="settingsStore.settings.copyright.dates">{{ settingsStore.settings.copyright.dates }}</span>
+    <template v-if="settingsStore.settings.copyright.company">
+      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.company }}</a>
+      <span v-else>{{ settingsStore.settings.copyright.company }}</span>
     </template>
-    <a v-if="settingsStore.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.copyright.beian }}</a>
+    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.beian }}</a>
   </footer>
 </template>
 

src/components/Editor/index.vue

@@ -42,8 +42,8 @@ const settingsStore = useSettingsStore()
 const defaultSetting = ref({
   language_url: 'tinymce/langs/zh-Hans.js',
   language: 'zh-Hans',
-  skin_url: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' : 'tinymce/skins/ui/oxide-dark',
-  content_css: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
+  skin_url: settingsStore.settings.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' : 'tinymce/skins/ui/oxide-dark',
+  content_css: settingsStore.settings.app.colorScheme === 'light' ? 'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
   min_height: 250,
   max_height: 600,
   selector: 'textarea',

src/layouts/components/AppSetting/index.vue

@@ -13,7 +13,7 @@ const menuStore = useMenuStore()
 
 const isShow = ref(false)
 
-watch(() => settingsStore.menu.menuMode, (value) => {
+watch(() => settingsStore.settings.menu.menuMode, (value) => {
   if (value === 'single') {
     menuStore.setActived(0)
   }
@@ -51,9 +51,9 @@ function handleCopy() {
       <el-alert title="应用配置可实时预览效果，但只是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，并将配置粘贴到 src/settings.ts 文件中。同时建议在生产环境隐藏应用配置功能。" type="error" :closable="false" />
       <el-divider>颜色主题</el-divider>
       <div class="color-scheme">
-        <div class="switch" :class="settingsStore.app.colorScheme" @click="settingsStore.app.colorScheme = settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark'">
+        <div class="switch" :class="settingsStore.settings.app.colorScheme" @click="settingsStore.settings.app.colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
           <el-icon class="icon">
-            <svg-icon :name="settingsStore.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
+            <svg-icon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
           </el-icon>
         </div>
       </div>
@@ -62,7 +62,7 @@ function handleCopy() {
       </el-divider>
       <div v-if="settingsStore.mode === 'pc'" class="menu-mode">
         <el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
-          <div class="mode mode-side" :class="{ active: settingsStore.menu.menuMode === 'side' }" @click="settingsStore.menu.menuMode = 'side'">
+          <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
             <div class="mode-container" />
             <el-icon>
               <svg-icon name="ep:check" />
@@ -70,7 +70,7 @@ function handleCopy() {
           </div>
         </el-tooltip>
         <el-tooltip content="顶部模式" placement="top" :show-after="500">
-          <div class="mode mode-head" :class="{ active: settingsStore.menu.menuMode === 'head' }" @click="settingsStore.menu.menuMode = 'head'">
+          <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
             <div class="mode-container" />
             <el-icon>
               <svg-icon name="ep:check" />
@@ -78,7 +78,7 @@ function handleCopy() {
           </div>
         </el-tooltip>
         <el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
-          <div class="mode mode-single" :class="{ active: settingsStore.menu.menuMode === 'single' }" @click="settingsStore.menu.menuMode = 'single'">
+          <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
             <div class="mode-container" />
             <el-icon>
               <svg-icon name="ep:check" />
@@ -96,7 +96,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.menu.menuMode)" />
+        <el-switch v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -107,32 +107,32 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.menu.subMenuUniqueOpened" />
+        <el-switch v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
       </div>
       <div class="setting-item">
         <div class="label">
           次导航是否折叠
         </div>
-        <el-switch v-model="settingsStore.menu.subMenuCollapse" />
+        <el-switch v-model="settingsStore.settings.menu.subMenuCollapse" />
       </div>
       <div v-if="settingsStore.mode === 'pc'" class="setting-item">
         <div class="label">
           显示次导航折叠按钮
         </div>
-        <el-switch v-model="settingsStore.menu.enableSubMenuCollapseButton" />
+        <el-switch v-model="settingsStore.settings.menu.enableSubMenuCollapseButton" />
       </div>
       <div class="setting-item">
         <div class="label">
           是否启用快捷键
         </div>
-        <el-switch v-model="settingsStore.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.menu.menuMode)" />
+        <el-switch v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
       </div>
       <el-divider>顶栏</el-divider>
       <div class="setting-item">
         <div class="label">
           模式
         </div>
-        <el-radio-group v-model="settingsStore.topbar.mode" size="small">
+        <el-radio-group v-model="settingsStore.settings.topbar.mode" size="small">
           <el-radio-button label="static">
             静止
           </el-radio-button>
@@ -154,7 +154,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.toolbar.enableFullscreen" />
+        <el-switch v-model="settingsStore.settings.toolbar.enableFullscreen" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -165,7 +165,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.toolbar.enablePageReload" />
+        <el-switch v-model="settingsStore.settings.toolbar.enablePageReload" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -176,7 +176,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.toolbar.enableColorScheme" />
+        <el-switch v-model="settingsStore.settings.toolbar.enableColorScheme" />
       </div>
       <el-divider v-if="settingsStore.mode === 'pc'">
         面包屑导航
@@ -185,7 +185,7 @@ function handleCopy() {
         <div class="label">
           是否启用
         </div>
-        <el-switch v-model="settingsStore.breadcrumb.enable" />
+        <el-switch v-model="settingsStore.settings.breadcrumb.enable" />
       </div>
       <el-divider>导航搜索</el-divider>
       <div class="setting-item">
@@ -197,44 +197,44 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.navSearch.enable" />
+        <el-switch v-model="settingsStore.settings.navSearch.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           是否启用快捷键
         </div>
-        <el-switch v-model="settingsStore.navSearch.enableHotkeys" :disabled="!settingsStore.navSearch.enable" />
+        <el-switch v-model="settingsStore.settings.navSearch.enableHotkeys" :disabled="!settingsStore.settings.navSearch.enable" />
       </div>
       <el-divider>底部版权</el-divider>
       <div class="setting-item">
         <div class="label">
           是否启用
         </div>
-        <el-switch v-model="settingsStore.copyright.enable" />
+        <el-switch v-model="settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           日期
         </div>
-        <el-input v-model="settingsStore.copyright.dates" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.dates" size="small" :disabled="!settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           公司
         </div>
-        <el-input v-model="settingsStore.copyright.company" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.company" size="small" :disabled="!settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           网址
         </div>
-        <el-input v-model="settingsStore.copyright.website" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.website" size="small" :disabled="!settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           备案
         </div>
-        <el-input v-model="settingsStore.copyright.beian" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.beian" size="small" :disabled="!settingsStore.settings.copyright.enable" />
       </div>
       <el-divider>主页</el-divider>
       <div class="setting-item">
@@ -246,13 +246,13 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.home.enable" />
+        <el-switch v-model="settingsStore.settings.home.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           主页名称
         </div>
-        <el-input v-model="settingsStore.home.title" size="small" />
+        <el-input v-model="settingsStore.settings.home.title" size="small" />
       </div>
       <el-divider>其它</el-divider>
       <div class="setting-item">
@@ -264,7 +264,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-radio-group v-model="settingsStore.app.elementSize" size="small">
+        <el-radio-group v-model="settingsStore.settings.app.elementSize" size="small">
           <el-radio-button label="large">
             较大
           </el-radio-button>
@@ -280,7 +280,7 @@ function handleCopy() {
         <div class="label">
           是否启用权限
         </div>
-        <el-switch v-model="settingsStore.app.enablePermission" />
+        <el-switch v-model="settingsStore.settings.app.enablePermission" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -291,7 +291,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.app.enableProgress" />
+        <el-switch v-model="settingsStore.settings.app.enableProgress" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -302,7 +302,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.app.enableDynamicTitle" />
+        <el-switch v-model="settingsStore.settings.app.enableDynamicTitle" />
       </div>
       <template v-if="isSupported" #footer>
         <el-button type="primary" @click="handleCopy">

src/layouts/components/Header/index.vue

@@ -21,7 +21,7 @@ function handlerMouserScroll(event: WheelEvent) {
 
 <template>
   <transition name="header">
-    <header v-if="settingsStore.mode === 'pc' && settingsStore.menu.menuMode === 'head'">
+    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
       <div class="header-container">
         <div class="main">
           <Logo />

src/layouts/components/HotkeysIntro/index.vue

@@ -20,11 +20,11 @@ onMounted(() => {
         <el-descriptions-item label="查看系统信息">
           Alt + I
         </el-descriptions-item>
-        <el-descriptions-item v-if="settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys" label="唤起导航搜索">
+        <el-descriptions-item v-if="settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys" label="唤起导航搜索">
           Alt + S
         </el-descriptions-item>
       </el-descriptions>
-      <el-descriptions v-if="settingsStore.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.menu.menuMode)" title="主导航" :column="1" border>
+      <el-descriptions v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)" title="主导航" :column="1" border>
         <el-descriptions-item label="激活下一个主导航">
           Alt + `
         </el-descriptions-item>

src/layouts/components/Logo/index.vue

@@ -22,7 +22,7 @@ const to = computed(() => {
   const rtn: {
     name?: string
   } = {}
-  if (settingsStore.home.enable) {
+  if (settingsStore.settings.home.enable) {
     rtn.name = 'home'
   }
   return rtn
@@ -30,7 +30,7 @@ const to = computed(() => {
 </script>
 
 <template>
-  <router-link :to="to" class="title" :class="{ 'is-link': settingsStore.home.enable }" :title="title">
+  <router-link :to="to" class="title" :class="{ 'is-link': settingsStore.settings.home.enable }" :title="title">
     <img v-if="showLogo" :src="logo" class="logo">
     <span v-if="showTitle">{{ title }}</span>
   </router-link>

src/layouts/components/MainSidebar/index.vue

@@ -11,7 +11,7 @@ const { switchTo } = useMenu()
 
 <template>
   <transition name="main-sidebar">
-    <div v-if="settingsStore.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.menu.menuMode !== 'single')" class="main-sidebar-container">
+    <div v-if="settingsStore.settings.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
       <Logo :show-title="false" class="sidebar-logo" />
       <!-- 侧边栏模式（含主导航） -->
       <div class="nav">

src/layouts/components/Search/index.vue

@@ -111,18 +111,18 @@ onMounted(() => {
     isShow.value = !isShow.value
   })
   hotkeys('alt+s', (e) => {
-    if (settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys) {
+    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
       e.preventDefault()
       isShow.value = true
     }
   })
   hotkeys('esc', (e) => {
-    if (settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys) {
+    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
       e.preventDefault()
       isShow.value = false
     }
   })
-  if (settingsStore.app.routeBaseOn !== 'filesystem') {
+  if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
     routeStore.routes.forEach((item) => {
       item.children && getSourceList(item.children)
     })

src/layouts/components/SidebarItem/index.vue

@@ -43,7 +43,7 @@ const hasChildren = computed(() => {
         </el-menu-item>
       </a>
     </router-link>
-    <el-sub-menu v-else :title="item.meta?.title ?? '[ 无标题 ]'" :index="settingsStore.app.routeBaseOn !== 'filesystem' ? resolveRoutePath(basePath, item.path) : JSON.stringify(item)">
+    <el-sub-menu v-else :title="item.meta?.title ?? '[ 无标题 ]'" :index="settingsStore.settings.app.routeBaseOn !== 'filesystem' ? resolveRoutePath(basePath, item.path) : JSON.stringify(item)">
       <template #title>
         <el-icon v-if="item.meta?.icon" class="title-icon">
           <svg-icon :name="item.meta.icon" />

src/layouts/components/SubSidebar/index.vue

@@ -15,17 +15,17 @@ function onSidebarScroll(e: Event) {
 </script>
 
 <template>
-  <div v-if="['side', 'head', 'single'].includes(settingsStore.menu.menuMode) || settingsStore.mode === 'mobile'" class="sub-sidebar-container" :class="{ 'is-collapse': settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse }" @scroll="onSidebarScroll">
+  <div v-if="['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode) || settingsStore.mode === 'mobile'" class="sub-sidebar-container" :class="{ 'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse }" @scroll="onSidebarScroll">
     <Logo
-      :show-logo="settingsStore.menu.menuMode === 'single'" class="sidebar-logo" :class="{
-        'sidebar-logo-bg': settingsStore.menu.menuMode === 'single',
+      :show-logo="settingsStore.settings.menu.menuMode === 'single'" class="sidebar-logo" :class="{
+        'sidebar-logo-bg': settingsStore.settings.menu.menuMode === 'single',
         'shadow': sidebarScrollTop,
       }"
     />
     <!-- 侧边栏模式（无主导航） -->
     <el-menu
-      :unique-opened="settingsStore.menu.subMenuUniqueOpened" :default-openeds="menuStore.defaultOpenedPaths" :default-active="$route.meta.activeMenu || $route.path" :collapse="settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse" :collapse-transition="false" :class="{
-        'is-collapse-without-logo': settingsStore.menu.menuMode !== 'single' && settingsStore.menu.subMenuCollapse,
+      :unique-opened="settingsStore.settings.menu.subMenuUniqueOpened" :default-openeds="menuStore.defaultOpenedPaths" :default-active="$route.meta.activeMenu || $route.path" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" :collapse-transition="false" :class="{
+        'is-collapse-without-logo': settingsStore.settings.menu.menuMode !== 'single' && settingsStore.settings.menu.subMenuCollapse,
       }"
     >
       <transition-group name="sub-sidebar">

src/layouts/components/Tools/index.vue

@@ -50,28 +50,28 @@ function pro() {
         </el-icon>
         <span class="title">查看专业版</span>
       </span>
-      <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
+      <span v-if="settingsStore.settings.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
           <svg-icon name="ep:search" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
+      <span v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen" class="item" @click="toggle">
         <el-icon>
           <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
+      <span v-if="settingsStore.settings.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
         <el-icon>
           <svg-icon name="ep:refresh-right" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
+      <span v-if="settingsStore.settings.toolbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
-          <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
-          <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
+          <svg-icon v-show="settingsStore.settings.app.colorScheme === 'light'" name="ep:sunny" />
+          <svg-icon v-show="settingsStore.settings.app.colorScheme === 'dark'" name="ep:moon" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
+      <span v-if="settingsStore.settings.toolbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
         <el-icon>
           <svg-icon name="ep:setting" />
         </el-icon>
@@ -91,8 +91,8 @@ function pro() {
       </div>
       <template #dropdown>
         <el-dropdown-menu class="user-dropdown">
-          <el-dropdown-item v-if="settingsStore.home.enable" command="home">
-            {{ settingsStore.home.title }}
+          <el-dropdown-item v-if="settingsStore.settings.home.enable" command="home">
+            {{ settingsStore.settings.home.title }}
           </el-dropdown-item>
           <el-dropdown-item command="setting">
             个人设置
@@ -135,7 +135,8 @@ function pro() {
     }
 
     .item-pro {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       width: auto;
       padding: 0 10px;
       transform-origin: right center;
@@ -157,17 +158,12 @@ function pro() {
         }
       }
 
-      .el-icon {
-        vertical-align: middle;
-      }
-
       .title {
         padding-left: 5px;
         font-weight: bold;
         font-size: 14px;
         background-image: linear-gradient(to right, #ffa237, #fc455d);
-        /* stylelint-disable-next-line property-no-vendor-prefix */
-        -webkit-background-clip: text;
+        background-clip: text;
         -webkit-text-fill-color: transparent;
       }
     }

src/layouts/components/Topbar/index.vue

@@ -9,17 +9,17 @@ const settingsStore = useSettingsStore()
 
 const enableSubMenuCollapseButton = computed(() => {
   return settingsStore.mode === 'mobile' || (
-    ['side', 'head', 'single'].includes(settingsStore.menu.menuMode)
-      && settingsStore.menu.enableSubMenuCollapseButton
+    ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
+      && settingsStore.settings.menu.enableSubMenuCollapseButton
   )
 })
 
 const breadcrumbList = computed(() => {
   const breadcrumbList = []
-  if (settingsStore.home.enable) {
+  if (settingsStore.settings.home.enable) {
     breadcrumbList.push({
       path: '/',
-      title: settingsStore.home.title,
+      title: settingsStore.settings.home.title,
     })
   }
   if (route.meta.breadcrumbNeste) {
@@ -41,7 +41,7 @@ function onScroll() {
 }
 watch(scrollTop, (val, oldVal) => {
   const topbarHeight = parseInt(getComputedStyle(document.documentElement || document.body).getPropertyValue('--g-topbar-height'))
-  scrollOnHide.value = settingsStore.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight
+  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight
 })
 
 function pathCompile(path: string) {
@@ -53,18 +53,18 @@ function pathCompile(path: string) {
 <template>
   <div
     class="topbar-container" :class="{
-      [`topbar-${settingsStore.topbar.mode}`]: true,
+      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
       shadow: scrollTop,
       hide: scrollOnHide,
     }" data-fixed-calc-width
   >
     <div class="left-box">
-      <div v-if="enableSubMenuCollapseButton" class="sidebar-collapse" :class="{ 'is-collapse': settingsStore.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+      <div v-if="enableSubMenuCollapseButton" class="sidebar-collapse" :class="{ 'is-collapse': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
         <el-icon>
           <svg-icon name="toolbar-collapse" />
         </el-icon>
       </div>
-      <el-breadcrumb v-if="settingsStore.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'">
+      <el-breadcrumb v-if="settingsStore.settings.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.settings.app.routeBaseOn !== 'filesystem'">
         <transition-group name="breadcrumb">
           <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="index < breadcrumbList.length - 1 ? pathCompile(item.path) : ''">
             {{ item.title ?? '[ 无标题 ]' }}

src/layouts/index.vue

@@ -21,7 +21,7 @@ const menuStore = useMenuStore()
 
 const isLink = computed(() => !!routeInfo.meta.link)
 
-watch(() => settingsStore.menu.subMenuCollapse, (val) => {
+watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
   if (settingsStore.mode === 'mobile') {
     if (!val) {
       document.body.classList.add('hidden')
@@ -35,20 +35,20 @@ watch(() => settingsStore.menu.subMenuCollapse, (val) => {
 watch(() => routeInfo.path, () => {
   if (settingsStore.mode === 'mobile') {
     settingsStore.$patch((state) => {
-      state.menu.subMenuCollapse = true
+      state.settings.menu.subMenuCollapse = true
     })
   }
 })
 
 onMounted(() => {
   hotkeys('f5', (e) => {
-    if (settingsStore.toolbar.enablePageReload) {
+    if (settingsStore.settings.toolbar.enablePageReload) {
       e.preventDefault()
       useMainPage().reload()
     }
   })
   hotkeys('alt+`', (e) => {
-    if (settingsStore.menu.enableHotkeys) {
+    if (settingsStore.settings.menu.enableHotkeys) {
       e.preventDefault()
       useMenu().switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
     }
@@ -65,13 +65,13 @@ onUnmounted(() => {
     <div id="app-main">
       <Header />
       <div class="wrapper">
-        <div class="sidebar-container" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse }">
+        <div class="sidebar-container" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }">
           <MainSidebar />
           <SubSidebar />
         </div>
-        <div class="sidebar-mask" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()" />
+        <div class="sidebar-mask" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()" />
         <div class="main-container" :style="{ 'padding-bottom': $route.meta.paddingBottom } as any">
-          <Topbar v-if="!(settingsStore.menu.menuMode === 'head' && !settingsStore.menu.enableSubMenuCollapseButton && !settingsStore.breadcrumb.enable)" />
+          <Topbar v-if="!(settingsStore.settings.menu.menuMode === 'head' && !settingsStore.settings.menu.enableSubMenuCollapseButton && !settingsStore.settings.breadcrumb.enable)" />
           <div class="main">
             <router-view v-slot="{ Component, route }">
               <transition name="main" mode="out-in" appear>

src/main.ts

@@ -19,7 +19,7 @@ app.use(ElementPlus)
 app.use(pinia)
 app.use(router)
 directive(app)
-if (useSettingsStore().app.iconifyOfflineUse) {
+if (useSettingsStore().settings.app.iconifyOfflineUse) {
   downloadAndInstall()
 }
 

src/router/index.ts

@@ -15,7 +15,7 @@ const { isLoading } = useNProgress()
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem : constantRoutes as RouteRecordRaw[],
+  routes: useSettingsStore(pinia).settings.app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem : constantRoutes as RouteRecordRaw[],
 })
 
 router.beforeEach(async (to, from, next) => {
@@ -23,13 +23,13 @@ router.beforeEach(async (to, from, next) => {
   const userStore = useUserStore()
   const menuStore = useMenuStore()
   const routeStore = useRouteStore()
-  settingsStore.app.enableProgress && (isLoading.value = true)
+  settingsStore.settings.app.enableProgress && (isLoading.value = true)
   // 是否已登录
   if (userStore.isLogin) {
     // 是否已根据权限动态生成并注册路由
     if (routeStore.isGenerate) {
       // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
-      settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path)
+      settingsStore.settings.menu.menuMode !== 'single' && menuStore.setActived(to.path)
       // 如果已登录状态下，进入登录页会强制跳转到主页
       if (to.name === 'login') {
         next({
@@ -38,7 +38,7 @@ router.beforeEach(async (to, from, next) => {
         })
       }
       // 如果未开启主页，但进入的是主页，则会进入侧边栏导航第一个模块
-      else if (!settingsStore.home.enable && to.name === 'home') {
+      else if (!settingsStore.settings.home.enable && to.name === 'home') {
         if (menuStore.sidebarMenus.length > 0) {
           next({
             path: menuStore.sidebarMenusFirstDeepestPath,
@@ -57,7 +57,7 @@ router.beforeEach(async (to, from, next) => {
     }
     else {
       // 生成动态路由
-      switch (settingsStore.app.routeBaseOn) {
+      switch (settingsStore.settings.app.routeBaseOn) {
         case 'frontend':
           await routeStore.generateRoutesAtFront(asyncRoutes)
           break
@@ -67,7 +67,7 @@ router.beforeEach(async (to, from, next) => {
         case 'filesystem':
           await routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
           // 文件系统生成的路由，需要手动生成导航数据
-          switch (settingsStore.menu.baseOn) {
+          switch (settingsStore.settings.menu.baseOn) {
             case 'frontend':
               await menuStore.generateMenusAtFront()
               break
@@ -85,7 +85,7 @@ router.beforeEach(async (to, from, next) => {
           removeRoutes.push(router.addRoute(route as RouteRecordRaw))
         }
       })
-      if (settingsStore.app.routeBaseOn !== 'filesystem') {
+      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
         routeStore.flatSystemRoutes.forEach((route) => {
           removeRoutes.push(router.addRoute(route as RouteRecordRaw))
         })
@@ -117,9 +117,9 @@ router.beforeEach(async (to, from, next) => {
 router.afterEach((to, from) => {
   const settingsStore = useSettingsStore()
   const keepAliveStore = useKeepAliveStore()
-  settingsStore.app.enableProgress && (isLoading.value = false)
+  settingsStore.settings.app.enableProgress && (isLoading.value = false)
   // 设置页面 title
-  if (settingsStore.app.routeBaseOn !== 'filesystem') {
+  if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
     settingsStore.setTitle(to.meta.breadcrumbNeste?.at(-1)?.title)
   }
   else {

src/router/routes.ts

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

src/store/modules/keepAlive.ts

@@ -1,37 +1,41 @@
 const useKeepAliveStore = defineStore(
   // 唯一ID
   'keepAlive',
-  {
-    state: () => ({
-      list: [] as string[],
-    }),
-    actions: {
-      add(name: string | string[]) {
-        if (typeof name === 'string') {
-          !this.list.includes(name) && this.list.push(name)
-        }
-        else {
-          name.forEach((v) => {
-            v && !this.list.includes(v) && this.list.push(v)
-          })
-        }
-      },
-      remove(name: string | string[]) {
-        if (typeof name === 'string') {
-          this.list = this.list.filter((v) => {
-            return v !== name
-          })
-        }
-        else {
-          this.list = this.list.filter((v) => {
-            return !name.includes(v)
-          })
-        }
-      },
-      clean() {
-        this.list = []
-      },
-    },
+  () => {
+    const list = ref<string[]>([])
+
+    function add(name: string | string[]) {
+      if (typeof name === 'string') {
+        !list.value.includes(name) && list.value.push(name)
+      }
+      else {
+        name.forEach((v) => {
+          v && !list.value.includes(v) && list.value.push(v)
+        })
+      }
+    }
+    function remove(name: string | string[]) {
+      if (typeof name === 'string') {
+        list.value = list.value.filter((v) => {
+          return v !== name
+        })
+      }
+      else {
+        list.value = list.value.filter((v) => {
+          return !name.includes(v)
+        })
+      }
+    }
+    function clean() {
+      list.value = []
+    }
+
+    return {
+      list,
+      add,
+      remove,
+      clean,
+    }
   },
 )
 

src/store/modules/menu.ts

@@ -8,178 +8,182 @@ import { resolveRoutePath } from '@/utils'
 import api from '@/api'
 import menu from '@/menu'
 
-function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
-  let retnPath = ''
-  if (menu.children) {
-    const item = menu.children.find(item => item.meta?.sidebar !== false)
-    if (item) {
-      retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path))
-    }
-    else {
-      retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path))
-    }
-  }
-  else {
-    retnPath = resolveRoutePath(rootPath, menu.path)
-  }
-  return retnPath
-}
-
-function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.recordRaw) {
-  let isAuth = false
-  if (menu.meta && menu.meta.auth) {
-    isAuth = permissions.some((auth) => {
-      return typeof menu.meta?.auth === 'string'
-        ? menu.meta.auth === auth
-        : typeof menu.meta?.auth === 'object'
-          ? menu.meta.auth.includes(auth)
-          : false
-    })
-  }
-  else {
-    isAuth = true
-  }
-  return isAuth
-}
-
-function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T, permissions: string[]): T {
-  const res: any = []
-  menus.forEach((menu) => {
-    const tmpMenu = cloneDeep(menu)
-    if (hasPermission(permissions, tmpMenu)) {
-      if (tmpMenu.children) {
-        tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
-        tmpMenu.children.length && res.push(tmpMenu)
-      }
-      else {
-        res.push(tmpMenu)
-      }
-    }
-  })
-  return res
-}
-
-function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
-  const defaultOpenedPaths: string[] = []
-  menus.forEach((item) => {
-    if (item.meta?.defaultOpened && item.children) {
-      defaultOpenedPaths.push(resolveRoutePath(rootPath, item.path))
-      const childrenDefaultOpenedPaths = getDefaultOpenedPaths(item.children, resolveRoutePath(rootPath, item.path))
-      if (childrenDefaultOpenedPaths.length > 0) {
-        defaultOpenedPaths.push(...childrenDefaultOpenedPaths)
-      }
-    }
-  })
-  return defaultOpenedPaths
-}
-
 const useMenuStore = defineStore(
   // 唯一ID
   'menu',
-  {
-    state: () => ({
-      menus: [{
+  () => {
+    const settingsStore = useSettingsStore()
+    const userStore = useUserStore()
+    const routeStore = useRouteStore()
+
+    const menus = ref<Menu.recordMainRaw[]>([{
+      meta: {},
+      children: [],
+    }])
+    const actived = ref(0)
+
+    // 完整导航数据
+    const allMenus = computed(() => {
+      let returnMenus: Menu.recordMainRaw[] = [{
         meta: {},
         children: [],
-      }] as Menu.recordMainRaw[],
-      actived: 0,
-    }),
-    getters: {
-      // 完整导航数据
-      allMenus() {
-        const settingsStore = useSettingsStore()
-        let menus: Menu.recordMainRaw[] = [{
-          meta: {},
-          children: [],
-        }]
-        if (settingsStore.app.routeBaseOn !== 'filesystem') {
-          const routeStore = useRouteStore()
-          if (settingsStore.menu.menuMode === 'single') {
-            menus[0].children = []
-            routeStore.routes.forEach((item) => {
-              menus[0].children?.push(...item.children as Menu.recordRaw[])
-            })
-          }
-          else {
-            menus = routeStore.routes as Menu.recordMainRaw[]
-          }
+      }]
+      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+        if (settingsStore.settings.menu.menuMode === 'single') {
+          returnMenus[0].children = []
+          routeStore.routes.forEach((item) => {
+            returnMenus[0].children?.push(...item.children as Menu.recordRaw[])
+          })
         }
         else {
-          menus = this.menus
+          returnMenus = routeStore.routes as Menu.recordMainRaw[]
         }
-        return menus
-      },
-      // 次导航数据
-      sidebarMenus(): Menu.recordMainRaw['children'] {
-        return this.allMenus.length > 0
-          ? this.allMenus[this.actived].children
-          : []
-      },
-      // 次导航里第一个导航的路径
-      sidebarMenusFirstDeepestPath(): string {
-        return this.allMenus.length > 0
-          ? getDeepestPath(this.sidebarMenus[0])
-          : '/'
-      },
-      defaultOpenedPaths() {
-        const settingsStore = useSettingsStore()
-        let defaultOpenedPaths: string[] = []
-        if (settingsStore.app.routeBaseOn !== 'filesystem') {
-          defaultOpenedPaths = getDefaultOpenedPaths(this.sidebarMenus)
+      }
+      else {
+        returnMenus = menus.value
+      }
+      return returnMenus
+    })
+    // 次导航数据
+    const sidebarMenus = computed<Menu.recordMainRaw['children']>(() => {
+      return allMenus.value.length > 0
+        ? allMenus.value[actived.value].children
+        : []
+    })
+    // 次导航第一层最深路径
+    const sidebarMenusFirstDeepestPath = computed(() => {
+      return allMenus.value.length > 0
+        ? getDeepestPath(sidebarMenus.value[0])
+        : '/'
+    })
+    function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
+      let retnPath = ''
+      if (menu.children) {
+        const item = menu.children.find(item => item.meta?.sidebar !== false)
+        if (item) {
+          retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path))
         }
-        return defaultOpenedPaths
-      },
-    },
-    actions: {
-      // 生成导航（前端生成）
-      async generateMenusAtFront() {
-        const settingsStore = useSettingsStore()
-        const userStore = useUserStore()
-        let accessedMenus
+        else {
+          retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path))
+        }
+      }
+      else {
+        retnPath = resolveRoutePath(rootPath, menu.path)
+      }
+      return retnPath
+    }
+    // 默认展开的导航路径
+    const defaultOpenedPaths = computed(() => {
+      let defaultOpenedPaths: string[] = []
+      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+        defaultOpenedPaths = getDefaultOpenedPaths(sidebarMenus.value)
+      }
+      return defaultOpenedPaths
+    })
+    function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
+      const defaultOpenedPaths: string[] = []
+      menus.forEach((item) => {
+        if (item.meta?.defaultOpened && item.children) {
+          defaultOpenedPaths.push(resolveRoutePath(rootPath, item.path))
+          const childrenDefaultOpenedPaths = getDefaultOpenedPaths(item.children, resolveRoutePath(rootPath, item.path))
+          if (childrenDefaultOpenedPaths.length > 0) {
+            defaultOpenedPaths.push(...childrenDefaultOpenedPaths)
+          }
+        }
+      })
+      return defaultOpenedPaths
+    }
+
+    // 判断是否有权限
+    function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.recordRaw) {
+      let isAuth = false
+      if (menu.meta && menu.meta.auth) {
+        isAuth = permissions.some((auth) => {
+          return typeof menu.meta?.auth === 'string'
+            ? menu.meta.auth === auth
+            : typeof menu.meta?.auth === 'object'
+              ? menu.meta.auth.includes(auth)
+              : false
+        })
+      }
+      else {
+        isAuth = true
+      }
+      return isAuth
+    }
+    // 根据权限过滤导航
+    function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T, permissions: string[]): T {
+      const res: any = []
+      menus.forEach((menu) => {
+        const tmpMenu = cloneDeep(menu)
+        if (hasPermission(permissions, tmpMenu)) {
+          if (tmpMenu.children) {
+            tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
+            tmpMenu.children.length && res.push(tmpMenu)
+          }
+          else {
+            res.push(tmpMenu)
+          }
+        }
+      })
+      return res
+    }
+    // 生成导航（前端生成）
+    async function generateMenusAtFront() {
+      let accessedMenus
+      // 如果权限功能开启，则需要对导航数据进行筛选过滤
+      if (settingsStore.settings.app.enablePermission) {
+        const permissions = await userStore.getPermissions()
+        accessedMenus = filterAsyncMenus(menu, permissions)
+      }
+      else {
+        accessedMenus = cloneDeep(menu)
+      }
+      menus.value = accessedMenus.filter(item => item.children.length !== 0)
+    }
+    // 生成导航（后端生成）
+    async function generateMenusAtBack() {
+      await api.get('menu/list', {
+        baseURL: '/mock/',
+      }).then(async (res) => {
+        let accessedMenus: Menu.recordMainRaw[]
         // 如果权限功能开启，则需要对导航数据进行筛选过滤
-        if (settingsStore.app.enablePermission) {
+        if (settingsStore.settings.app.enablePermission) {
           const permissions = await userStore.getPermissions()
-          accessedMenus = filterAsyncMenus(menu, permissions)
+          accessedMenus = filterAsyncMenus(res.data, permissions)
         }
         else {
-          accessedMenus = cloneDeep(menu)
+          accessedMenus = cloneDeep(res.data)
         }
-        this.menus = accessedMenus.filter(item => item.children.length !== 0)
-      },
-      // 生成导航（后端生成）
-      async generateMenusAtBack() {
-        await api.get('menu/list', {
-          baseURL: '/mock/',
-        }).then(async (res) => {
-          const settingsStore = useSettingsStore()
-          const userStore = useUserStore()
-          let accessedMenus: Menu.recordMainRaw[]
-          // 如果权限功能开启，则需要对导航数据进行筛选过滤
-          if (settingsStore.app.enablePermission) {
-            const permissions = await userStore.getPermissions()
-            accessedMenus = filterAsyncMenus(res.data, permissions)
-          }
-          else {
-            accessedMenus = cloneDeep(res.data)
-          }
-          this.menus = accessedMenus.filter(item => item.children.length !== 0)
-        }).catch(() => {})
-      },
-      // 切换主导航
-      setActived(data: number | string) {
-        if (typeof data === 'number') {
-          // 如果是 number 类型，则认为是主导航的索引
-          this.actived = data
+        menus.value = accessedMenus.filter(item => item.children.length !== 0)
+      }).catch(() => {})
+    }
+    // 切换主导航
+    function setActived(data: number | string) {
+      if (typeof data === 'number') {
+        // 如果是 number 类型，则认为是主导航的索引
+        actived.value = data
+      }
+      else {
+        // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
+        const findIndex = allMenus.value.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path))
+        if (findIndex >= 0) {
+          actived.value = findIndex
         }
-        else {
-          // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
-          const findIndex = this.allMenus.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path))
-          if (findIndex >= 0) {
-            this.actived = findIndex
-          }
-        }
-      },
-    },
+      }
+    }
+
+    return {
+      menus,
+      actived,
+      allMenus,
+      sidebarMenus,
+      sidebarMenusFirstDeepestPath,
+      defaultOpenedPaths,
+      generateMenusAtFront,
+      generateMenusAtBack,
+      setActived,
+    }
   },
 )
 

src/store/modules/route.ts

@@ -7,230 +7,235 @@ import { resolveRoutePath } from '@/utils'
 import { systemRoutes } from '@/router/routes'
 import type { Route } from '#/global'
 
-function hasPermission(permissions: string[], route: Route.recordMainRaw | RouteRecordRaw) {
-  let isAuth = false
-  if (route.meta?.auth) {
-    isAuth = permissions.some((auth) => {
-      return typeof route.meta?.auth === 'string'
-        ? route.meta.auth === auth
-        : typeof route.meta?.auth === 'object'
-          ? route.meta.auth.includes(auth)
-          : false
-    })
-  }
-  else {
-    isAuth = true
-  }
-  return isAuth
-}
+const useRouteStore = defineStore(
+  // 唯一ID
+  'route',
+  () => {
+    const settingsStore = useSettingsStore()
+    const userStore = useUserStore()
 
-function filterAsyncRoutes<T extends Route.recordMainRaw[] | RouteRecordRaw[]>(routes: T, permissions: string[]): T {
-  const res: any = []
-  routes.forEach((route) => {
-    if (hasPermission(permissions, route)) {
-      const tmpRoute = cloneDeep(route)
-      if (tmpRoute.children) {
-        tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions)
-        tmpRoute.children.length && res.push(tmpRoute)
-      }
-      else {
-        res.push(tmpRoute)
-      }
-    }
-  })
-  return res
-}
+    const isGenerate = ref(false)
+    const routes = ref<Route.recordMainRaw[]>([])
+    const fileSystemRoutes = ref<RouteRecordRaw[]>([])
+    const currentRemoveRoutes = ref<Function[]>([])
 
-function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
-  return routes.map((route: any) => {
-    switch (route.component) {
-      case 'Layout':
-        route.component = () => import('@/layouts/index.vue')
-        break
-      default:
-        if (route.component) {
-          route.component = views[`../../views/${route.component}`]
-        }
-    }
-    if (route.children) {
-      route.children = formatBackRoutes(route.children, views)
-    }
-    return route
-  })
-}
-
-// 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
-function flatAsyncRoutes<T extends RouteRecordRaw>(routes: T): T {
-  if (routes.children) {
-    routes.children = flatAsyncRoutesRecursive(routes.children, [{
-      path: routes.path,
-      title: routes.meta?.title,
-      hide: !routes.meta?.breadcrumb && routes.meta?.breadcrumb === false,
-    }], routes.path)
-  }
-  return routes
-}
-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 tmpBreadcrumb = cloneDeep(breadcrumb)
-      if (route.meta?.breadcrumb !== false) {
-        tmpBreadcrumb.push({
-          path: childrenBaseUrl,
-          title: route.meta?.title,
-          hide: !route.meta?.breadcrumb,
-        })
+    // 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
+    function flatAsyncRoutes<T extends RouteRecordRaw>(routes: T): T {
+      if (routes.children) {
+        routes.children = flatAsyncRoutesRecursive(routes.children, [{
+          path: routes.path,
+          title: routes.meta?.title,
+          hide: !routes.meta?.breadcrumb && routes.meta?.breadcrumb === false,
+        }], routes.path)
       }
-      const tmpRoute = cloneDeep(route)
-      tmpRoute.path = childrenBaseUrl
-      if (!tmpRoute.meta) {
-        tmpRoute.meta = {}
-      }
-      tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
-      delete tmpRoute.children
-      res.push(tmpRoute)
-      const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
-      childrenRoutes.forEach((item) => {
-        // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
-        if (res.some(v => v.path === item.path)) {
-          res.forEach((v, i) => {
-            if (v.path === item.path) {
-              res[i] = item
+      return routes
+    }
+    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 tmpBreadcrumb = cloneDeep(breadcrumb)
+          if (route.meta?.breadcrumb !== false) {
+            tmpBreadcrumb.push({
+              path: childrenBaseUrl,
+              title: route.meta?.title,
+              hide: !route.meta?.breadcrumb,
+            })
+          }
+          const tmpRoute = cloneDeep(route)
+          tmpRoute.path = childrenBaseUrl
+          if (!tmpRoute.meta) {
+            tmpRoute.meta = {}
+          }
+          tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
+          delete tmpRoute.children
+          res.push(tmpRoute)
+          const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
+          childrenRoutes.forEach((item) => {
+            // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
+            if (res.some(v => v.path === item.path)) {
+              res.forEach((v, i) => {
+                if (v.path === item.path) {
+                  res[i] = item
+                }
+              })
+            }
+            else {
+              res.push(item)
             }
           })
         }
         else {
-          res.push(item)
+          const tmpRoute = cloneDeep(route)
+          tmpRoute.path = resolveRoutePath(baseUrl, tmpRoute.path)
+          // 处理面包屑导航
+          const tmpBreadcrumb = cloneDeep(breadcrumb)
+          tmpBreadcrumb.push({
+            path: tmpRoute.path,
+            title: tmpRoute.meta?.title,
+            hide: !tmpRoute.meta?.breadcrumb && tmpRoute.meta?.breadcrumb === false,
+          })
+          if (!tmpRoute.meta) {
+            tmpRoute.meta = {}
+          }
+          tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
+          res.push(tmpRoute)
         }
       })
+      return res
     }
-    else {
-      const tmpRoute = cloneDeep(route)
-      tmpRoute.path = resolveRoutePath(baseUrl, tmpRoute.path)
-      // 处理面包屑导航
-      const tmpBreadcrumb = cloneDeep(breadcrumb)
-      tmpBreadcrumb.push({
-        path: tmpRoute.path,
-        title: tmpRoute.meta?.title,
-        hide: !tmpRoute.meta?.breadcrumb && tmpRoute.meta?.breadcrumb === false,
-      })
-      if (!tmpRoute.meta) {
-        tmpRoute.meta = {}
+    // 扁平化路由（将三级及以上路由数据拍平成二级）
+    const flatRoutes = computed(() => {
+      const settingsStore = useSettingsStore()
+      const returnRoutes: RouteRecordRaw[] = []
+      if (routes.value) {
+        if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+          routes.value.forEach((item) => {
+            returnRoutes.push(...cloneDeep(item.children))
+          })
+          returnRoutes.forEach(item => flatAsyncRoutes(item))
+        }
+        else {
+          returnRoutes.push(...cloneDeep(fileSystemRoutes.value))
+        }
       }
-      tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
-      res.push(tmpRoute)
-    }
-  })
-  return res
-}
+      return returnRoutes
+    })
+    const flatSystemRoutes = computed(() => {
+      const routes = [...systemRoutes]
+      routes.forEach(item => flatAsyncRoutes(item))
+      return routes
+    })
 
-const useRouteStore = defineStore(
-  // 唯一ID
-  'route',
-  {
-    state: () => ({
-      isGenerate: false,
-      routes: [] as Route.recordMainRaw[],
-      fileSystemRoutes: [] as RouteRecordRaw[],
-      currentRemoveRoutes: [] as Function[],
-    }),
-    getters: {
-      // 扁平化路由（将三级及以上路由数据拍平成二级）
-      flatRoutes: (state) => {
-        const settingsStore = useSettingsStore()
-        const routes: RouteRecordRaw[] = []
-        if (state.routes) {
-          if (settingsStore.app.routeBaseOn !== 'filesystem') {
-            state.routes.forEach((item) => {
-              routes.push(...cloneDeep(item.children))
-            })
-            routes.forEach(item => flatAsyncRoutes(item))
-          }
-          else {
-            routes.push(...cloneDeep(state.fileSystemRoutes))
-          }
-        }
-        return routes
-      },
-      flatSystemRoutes: () => {
-        const routes = [...systemRoutes]
-        routes.forEach(item => flatAsyncRoutes(item))
-        return routes
-      },
-    },
-    actions: {
-      // 根据权限动态生成路由（前端生成）
-      async generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
-        const settingsStore = useSettingsStore()
-        const userStore = useUserStore()
-        let accessedRoutes
-        // 如果权限功能开启，则需要对路由数据进行筛选过滤
-        if (settingsStore.app.enablePermission) {
-          const permissions = await userStore.getPermissions()
-          accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
-        }
-        else {
-          accessedRoutes = cloneDeep(asyncRoutes)
-        }
-        // 设置 routes 数据
-        this.isGenerate = true
-        this.routes = accessedRoutes.filter(item => item.children?.length !== 0) as any
-      },
-      // 根据权限动态生成路由（后端获取）
-      async generateRoutesAtBack() {
-        await api.get('route/list', {
-          baseURL: '/mock/',
-        }).then(async (res) => {
-          const settingsStore = useSettingsStore()
-          const userStore = useUserStore()
-          const asyncRoutes = formatBackRoutes(res.data)
-          let accessedRoutes
-          // 如果权限功能开启，则需要对路由数据进行筛选过滤
-          if (settingsStore.app.enablePermission) {
-            const permissions = await userStore.getPermissions()
-            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
-          }
-          else {
-            accessedRoutes = cloneDeep(asyncRoutes)
-          }
-          // 设置 routes 数据
-          this.isGenerate = true
-          this.routes = accessedRoutes.filter(item => item.children.length !== 0) as any
-        }).catch(() => {})
-      },
-      // 根据权限动态生成路由（文件系统生成）
-      async generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
-        const settingsStore = useSettingsStore()
-        const userStore = useUserStore()
-        let accessedRoutes
-        // 如果权限功能开启，则需要对路由数据进行筛选过滤
-        if (settingsStore.app.enablePermission) {
-          const permissions = await userStore.getPermissions()
-          accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
-        }
-        else {
-          accessedRoutes = cloneDeep(asyncRoutes)
-        }
-        // 设置 routes 数据
-        this.isGenerate = true
-        this.fileSystemRoutes = accessedRoutes.filter(item => item.children?.length !== 0) as any
-      },
-      // 记录 accessRoutes 路由，用于登出时删除路由
-      setCurrentRemoveRoutes(routes: Function[]) {
-        this.currentRemoveRoutes = routes
-      },
-      // 清空动态路由
-      removeRoutes() {
-        this.isGenerate = false
-        this.routes = []
-        this.currentRemoveRoutes.forEach((removeRoute) => {
-          removeRoute()
+    // 判断是否有权限
+    function hasPermission(permissions: string[], route: Route.recordMainRaw | RouteRecordRaw) {
+      let isAuth = false
+      if (route.meta?.auth) {
+        isAuth = permissions.some((auth) => {
+          return typeof route.meta?.auth === 'string'
+            ? route.meta.auth === auth
+            : typeof route.meta?.auth === 'object'
+              ? route.meta.auth.includes(auth)
+              : false
         })
-        this.currentRemoveRoutes = []
-      },
-    },
+      }
+      else {
+        isAuth = true
+      }
+      return isAuth
+    }
+    // 根据权限过滤路由
+    function filterAsyncRoutes<T extends Route.recordMainRaw[] | RouteRecordRaw[]>(routes: T, permissions: string[]): T {
+      const res: any = []
+      routes.forEach((route) => {
+        if (hasPermission(permissions, route)) {
+          const tmpRoute = cloneDeep(route)
+          if (tmpRoute.children) {
+            tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions)
+            tmpRoute.children.length && res.push(tmpRoute)
+          }
+          else {
+            res.push(tmpRoute)
+          }
+        }
+      })
+      return res
+    }
+    // 根据权限动态生成路由（前端生成）
+    async function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
+      let accessedRoutes
+      // 如果权限功能开启，则需要对路由数据进行筛选过滤
+      if (settingsStore.settings.app.enablePermission) {
+        const permissions = await userStore.getPermissions()
+        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+      }
+      else {
+        accessedRoutes = cloneDeep(asyncRoutes)
+      }
+      // 设置 routes 数据
+      isGenerate.value = true
+      routes.value = accessedRoutes.filter(item => item.children?.length !== 0) as any
+    }
+    // 格式化后端路由数据
+    function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
+      return routes.map((route: any) => {
+        switch (route.component) {
+          case 'Layout':
+            route.component = () => import('@/layouts/index.vue')
+            break
+          default:
+            if (route.component) {
+              route.component = views[`../../views/${route.component}`]
+            }
+        }
+        if (route.children) {
+          route.children = formatBackRoutes(route.children, views)
+        }
+        return route
+      })
+    }
+    // 根据权限动态生成路由（后端获取）
+    async function generateRoutesAtBack() {
+      await api.get('route/list', {
+        baseURL: '/mock/',
+      }).then(async (res) => {
+        const asyncRoutes = formatBackRoutes(res.data)
+        let accessedRoutes
+        // 如果权限功能开启，则需要对路由数据进行筛选过滤
+        if (settingsStore.settings.app.enablePermission) {
+          const permissions = await userStore.getPermissions()
+          accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+        }
+        else {
+          accessedRoutes = cloneDeep(asyncRoutes)
+        }
+        // 设置 routes 数据
+        isGenerate.value = true
+        routes.value = accessedRoutes.filter(item => item.children.length !== 0) as any
+      }).catch(() => {})
+    }
+    // 根据权限动态生成路由（文件系统生成）
+    async function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
+      let accessedRoutes
+      // 如果权限功能开启，则需要对路由数据进行筛选过滤
+      if (settingsStore.settings.app.enablePermission) {
+        const permissions = await userStore.getPermissions()
+        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+      }
+      else {
+        accessedRoutes = cloneDeep(asyncRoutes)
+      }
+      // 设置 routes 数据
+      isGenerate.value = true
+      fileSystemRoutes.value = accessedRoutes.filter(item => item.children?.length !== 0) as any
+    }
+    // 记录 accessRoutes 路由，用于登出时删除路由
+    function setCurrentRemoveRoutes(routes: Function[]) {
+      currentRemoveRoutes.value = routes
+    }
+    // 清空动态路由
+    function removeRoutes() {
+      isGenerate.value = false
+      routes.value = []
+      currentRemoveRoutes.value.forEach((removeRoute) => {
+        removeRoute()
+      })
+      currentRemoveRoutes.value = []
+    }
+
+    return {
+      isGenerate,
+      routes,
+      fileSystemRoutes,
+      flatRoutes,
+      flatSystemRoutes,
+      generateRoutesAtFront,
+      generateRoutesAtBack,
+      generateRoutesAtFilesystem,
+      setCurrentRemoveRoutes,
+      removeRoutes,
+    }
   },
 )
 

src/store/modules/settings.ts

@@ -1,68 +1,106 @@
 import { defaultsDeep } from 'lodash-es'
 import type { RouteMeta } from 'vue-router'
 import type { RecursiveRequired, Settings } from '#/global'
-import settings from '@/settings'
+import settingsCustom from '@/settings'
 import settingsDefault from '@/settings.default'
 
-interface SettingsStore extends RecursiveRequired<Settings.all> {
-  subMenuCollapseLastStatus: boolean
-  mode: 'pc' | 'mobile'
-  title?: RouteMeta['title']
-}
-
 const useSettingsStore = defineStore(
   // 唯一ID
   'settings',
-  {
-    state: (): SettingsStore => ({
-      // 合并配置
-      ...defaultsDeep(settings, settingsDefault),
-      // 侧边栏是否收起（用于记录 pc 模式下最后的状态）
-      subMenuCollapseLastStatus: settingsDefault.menu.subMenuCollapse,
-      // 显示模式，支持：mobile、pc
-      mode: 'pc',
-      // 页面标题
-      title: '',
-    }),
-    actions: {
-      // 设置网页标题
-      setTitle(title: SettingsStore['title']) {
-        this.title = title
-      },
-      // 设置访问模式
-      setMode(width: number) {
-        if (this.layout.enableMobileAdaptation) {
-          // 先判断 UA 是否为移动端设备（手机&平板）
-          if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-            this.mode = 'mobile'
-          }
-          else {
-            // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
-            this.mode = width < 992 ? 'mobile' : 'pc'
-          }
+  () => {
+    const mergeSettings: RecursiveRequired<Settings.all> = defaultsDeep(settingsCustom, settingsDefault)
+    const settings = ref(mergeSettings)
+    watch(() => settings.value.app.colorScheme, (val) => {
+      if (val === '') {
+        val = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      }
+      switch (val) {
+        case 'dark':
+          document.documentElement.classList.add('dark')
+          break
+        case 'light':
+          document.documentElement.classList.remove('dark')
+          break
+      }
+    }, {
+      immediate: true,
+    })
+    watch(() => settings.value.menu.menuMode, (val) => {
+      document.body.setAttribute('data-menu-mode', val)
+    }, {
+      immediate: true,
+    })
+
+    // 页面标题
+    const title = ref<RouteMeta['title']>()
+    // 设置网页标题
+    function setTitle(_title: RouteMeta['title']) {
+      title.value = _title
+    }
+
+    // 显示模式
+    const mode = ref<'pc' | 'mobile'>('pc')
+    // 设置访问模式
+    function setMode(width: number) {
+      if (settings.value.layout.enableMobileAdaptation) {
+        // 先判断 UA 是否为移动端设备（手机&平板）
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+          mode.value = 'mobile'
         }
         else {
-          this.mode = 'pc'
+          // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
+          mode.value = width < 992 ? 'mobile' : 'pc'
         }
-      },
-      // 切换侧边栏导航展开/收起
-      toggleSidebarCollapse() {
-        this.menu.subMenuCollapse = !this.menu.subMenuCollapse
-        if (this.mode === 'pc') {
-          this.subMenuCollapseLastStatus = !this.subMenuCollapseLastStatus
-        }
-      },
-      // 设置主题颜色模式
-      setColorScheme(color: Required<Settings.app>['colorScheme']) {
-        this.app.colorScheme = color
-      },
-      // 更新应用配置
-      updateSettings(data: Settings.all) {
-        Object.keys(data).forEach((key) => {
-          this[key as keyof Settings.all] = defaultsDeep(data[key as keyof Settings.all], this[key as keyof Settings.all])
-        })
-      },
-    },
+      }
+      else {
+        mode.value = 'pc'
+      }
+    }
+
+    // 侧边栏是否收起（用于记录 pc 模式下最后的状态）
+    const subMenuCollapseLastStatus = ref(mergeSettings.menu.subMenuCollapse)
+    // 切换侧边栏导航展开/收起
+    function toggleSidebarCollapse() {
+      settings.value.menu.subMenuCollapse = !settings.value.menu.subMenuCollapse
+      if (mode.value === 'pc') {
+        subMenuCollapseLastStatus.value = !subMenuCollapseLastStatus.value
+      }
+    }
+
+    watch(mode, (val) => {
+      switch (val) {
+        case 'pc':
+          settings.value.menu.subMenuCollapse = subMenuCollapseLastStatus.value
+          break
+        case 'mobile':
+          settings.value.menu.subMenuCollapse = true
+          break
+      }
+      document.body.setAttribute('data-mode', val)
+    }, {
+      immediate: true,
+    })
+
+    // 设置主题颜色模式
+    function setColorScheme(color: Required<Settings.app>['colorScheme']) {
+      settings.value.app.colorScheme = color
+    }
+    // 更新应用配置
+    function updateSettings(data: Settings.all) {
+      settings.value = defaultsDeep(data, settings.value)
+    }
+
+    return {
+      settings,
+      title,
+      setTitle,
+      mode,
+      setMode,
+      subMenuCollapseLastStatus,
+      toggleSidebarCollapse,
+      setColorScheme,
+      updateSettings,
+    }
   },
 )
 

src/store/modules/user.ts

@@ -5,86 +5,87 @@ import api from '@/api'
 const useUserStore = defineStore(
   // 唯一ID
   'user',
-  {
-    state: () => ({
-      account: localStorage.account || '',
-      token: localStorage.token || '',
-      failure_time: localStorage.failure_time || '',
-      permissions: [] as string[],
-    }),
-    getters: {
-      isLogin: (state) => {
-        let retn = false
-        if (state.token) {
-          if (new Date().getTime() < parseInt(state.failure_time) * 1000) {
-            retn = true
-          }
+  () => {
+    const routeStore = useRouteStore()
+    const menuStore = useMenuStore()
+
+    const account = ref(localStorage.account ?? '')
+    const token = ref(localStorage.token ?? '')
+    const failure_time = ref(localStorage.failure_time ?? '')
+    const permissions = ref<string[]>([])
+    const isLogin = computed(() => {
+      let retn = false
+      if (token.value) {
+        if (new Date().getTime() < parseInt(failure_time.value) * 1000) {
+          retn = true
         }
-        return retn
-      },
-    },
-    actions: {
-      login(data: {
-        account: string
-        password: string
-      }) {
-        return new Promise<void>((resolve, reject) => {
-          // 通过 mock 进行登录
-          api.post('member/login', data, {
-            baseURL: '/mock/',
-          }).then((res) => {
-            localStorage.setItem('account', res.data.account)
-            localStorage.setItem('token', res.data.token)
-            localStorage.setItem('failure_time', res.data.failure_time)
-            this.account = res.data.account
-            this.token = res.data.token
-            this.failure_time = res.data.failure_time
-            resolve()
-          }).catch((error) => {
-            reject(error)
-          })
-        })
-      },
-      logout() {
-        return new Promise<void>((resolve) => {
-          const routeStore = useRouteStore()
-          const menuStore = useMenuStore()
-          localStorage.removeItem('account')
-          localStorage.removeItem('token')
-          localStorage.removeItem('failure_time')
-          this.account = ''
-          this.token = ''
-          this.failure_time = ''
-          routeStore.removeRoutes()
-          menuStore.setActived(0)
-          resolve()
-        })
-      },
-      // 获取我的权限
-      async getPermissions() {
-        // 通过 mock 获取权限
-        const res = await api.get('member/permission', {
-          baseURL: '/mock/',
-          params: {
-            account: this.account,
-          },
-        })
-        this.permissions = res.data.permissions
-        return this.permissions
-      },
-      async editPassword(data: {
-        password: string
-        newpassword: string
-      }) {
-        await api.post('member/edit/password', {
-          account: this.account,
-          password: data.password,
-          newpassword: data.newpassword,
-        }, {
-          baseURL: '/mock/',
-        })
-      },
-    },
+      }
+      return retn
+    })
+
+    // 登录
+    async function login(data: {
+      account: string
+      password: string
+    }) {
+      // 通过 mock 进行登录
+      const res = await api.post('member/login', data, {
+        baseURL: '/mock/',
+      })
+      localStorage.setItem('account', res.data.account)
+      localStorage.setItem('token', res.data.token)
+      localStorage.setItem('failure_time', res.data.failure_time)
+      account.value = res.data.account
+      token.value = res.data.token
+      failure_time.value = res.data.failure_time
+    }
+    // 登出
+    async function logout() {
+      localStorage.removeItem('account')
+      localStorage.removeItem('token')
+      localStorage.removeItem('failure_time')
+      account.value = ''
+      token.value = ''
+      failure_time.value = ''
+      routeStore.removeRoutes()
+      menuStore.setActived(0)
+    }
+    // 获取我的权限
+    async function getPermissions() {
+      // 通过 mock 获取权限
+      const res = await api.get('member/permission', {
+        baseURL: '/mock/',
+        params: {
+          account: account.value,
+        },
+      })
+      permissions.value = res.data.permissions
+      return permissions.value
+    }
+    // 修改密码
+    async function editPassword(data: {
+      password: string
+      newpassword: string
+    }) {
+      await api.post('member/edit/password', {
+        account: account.value,
+        password: data.password,
+        newpassword: data.newpassword,
+      }, {
+        baseURL: '/mock/',
+      })
+    }
+
+    return {
+      account,
+      token,
+      permissions,
+      isLogin,
+      login,
+      logout,
+      getPermissions,
+      editPassword,
+    }
   },
 )
 

src/utils/composables/useAuth.ts

@@ -5,7 +5,7 @@ export default function useAuth() {
   function hasPermission(permission: string) {
     const settingsStore = useSettingsStore()
     const userStore = useUserStore()
-    if (settingsStore.app.enablePermission) {
+    if (settingsStore.settings.app.enablePermission) {
       return userStore.permissions.includes(permission)
     }
     else {

src/utils/composables/useMenu.ts

@@ -8,7 +8,7 @@ export default function useMenu() {
 
   function switchTo(index: number | string) {
     menuStore.setActived(index)
-    if (settingsStore.menu.switchMainMenuAndPageJump) {
+    if (settingsStore.settings.menu.switchMainMenuAndPageJump) {
       router.push(menuStore.sidebarMenusFirstDeepestPath)
     }
   }

src/views/permission_example/index.vue

@@ -49,7 +49,7 @@ function permissionCheck2(permissions: string[]) {
   <div>
     <page-header title="权限验证" />
     <page-main>
-      <div v-if="!settingsStore.app.enablePermission">
+      <div v-if="!settingsStore.settings.app.enablePermission">
         请到 seeting.js 里打开权限功能，再进入该页面查看演示
       </div>
       <div v-else>