From 9483bba032352f277319244c3d46be317dc79be8 Mon Sep 17 00:00:00 2001
From: SuperCuteXiaoSi <1531733886@qq.com>
Date: Sat, 5 Nov 2022 19:39:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(layouts):=20=E2=9C=A8=20add=20=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E8=AE=BE=E7=BD=AE=EF=BC=8C=E4=BF=AE=E6=94=B9appstore?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/serverConfig.json                      |   3 +-
 src/assets/icons/full_screen.svg              |   1 +
 src/assets/icons/full_screen_close.svg        |   1 +
 src/assets/icons/full_screen_page.svg         |   1 +
 src/components/Application/AppLocale.vue      |   7 +-
 src/components/Application/AppTheme.vue       |   8 +-
 src/hooks/setting/useRootSetting.ts           |  15 ++
 src/hooks/useTransformTheme.ts                |  10 +-
 .../pageLayouts/components/AppTabs/index.vue  |  24 ++--
 .../components/Breadcrumb/index.vue           |  15 +-
 .../pageLayouts/components/Navbart/index.vue  | 132 +++++++++++-------
 .../components/Seting/ThemeSettings/index.vue |  11 +-
 .../pageLayouts/components/Seting/index.vue   |  11 +-
 .../components/Seting/pageSettings/index.vue  |  29 ++--
 .../components/SideNavigationBar/index.vue    |  20 ++-
 .../pageLayouts/components/Sidebar/index.vue  |  15 +-
 .../components/VerticalSidebar/index.vue      |  16 +--
 src/locales/en/modules/layout.ts              |   5 +
 src/locales/zh-ch/modules/layout.ts           |   5 +
 src/store/modules/app.ts                      |   4 +-
 src/store/types.ts                            |  16 +++
 src/views/login/index.vue                     |   6 +-
 22 files changed, 215 insertions(+), 140 deletions(-)
 create mode 100644 src/assets/icons/full_screen.svg
 create mode 100644 src/assets/icons/full_screen_close.svg
 create mode 100644 src/assets/icons/full_screen_page.svg
 create mode 100644 src/hooks/setting/useRootSetting.ts

diff --git a/public/serverConfig.json b/public/serverConfig.json
index 187f5357..0a73b8d5 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "title":"xiaosiAdmin",
+  "title": "xiaosiAdmin",
   "collapseMenu": false,
   "sidebarMode": "vertical",
   "themeMode": "dark",
@@ -7,6 +7,7 @@
   "primaryColor": "#409eff",
   "greyMode": false,
   "colorWeaknessMode":false,
+  "hideNavbart": false,
   "hideTabs": false,
   "labelPersistent": true,
   "StorageConfig":{
diff --git a/src/assets/icons/full_screen.svg b/src/assets/icons/full_screen.svg
new file mode 100644
index 00000000..5f6c8a42
--- /dev/null
+++ b/src/assets/icons/full_screen.svg
@@ -0,0 +1 @@
+<svg t="1667646205560" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3338" width="200" height="200"><path d="M240.8 196l178.4 178.4-45.6 45.6-177.6-179.2-68 68V128h180.8l-68 68z m133.6 408.8L196 783.2 128 715.2V896h180.8l-68-68 178.4-178.4-44.8-44.8zM715.2 128l68 68-178.4 178.4 45.6 45.6 178.4-178.4 68 68V128H715.2z m-65.6 476.8l-45.6 45.6 178.4 178.4-68 68H896V715.2l-68 68-178.4-178.4z" p-id="3339"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/full_screen_close.svg b/src/assets/icons/full_screen_close.svg
new file mode 100644
index 00000000..ba7a85ad
--- /dev/null
+++ b/src/assets/icons/full_screen_close.svg
@@ -0,0 +1 @@
+<svg t="1667646305071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3481" width="200" height="200"><path d="M142.4 96.8l-44.8 44.8 173.6 174.4-68 68H384V203.2l-67.2 67.2zM752.8 316l173.6-174.4-44.8-44.8-174.4 173.6-67.2-67.2V384h180.8zM270.4 707.2l-169.6 170.4 44.8 49.6 170.4-174.4 68 68V640H203.2zM820.8 640H640v180.8l68-68 170.4 174.4 44.8-49.6-169.6-170.4z" p-id="3482"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/full_screen_page.svg b/src/assets/icons/full_screen_page.svg
new file mode 100644
index 00000000..5dd83b80
--- /dev/null
+++ b/src/assets/icons/full_screen_page.svg
@@ -0,0 +1 @@
+<svg t="1667646551663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3624" width="200" height="200"><path d="M981.333333 682.666667c-25.6 0-42.666667 17.066667-42.666666 42.666666v192c0 12.8-8.533333 21.333333-21.333334 21.333334H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h192c59.733333 0 106.666667-46.933333 106.666667-106.666667V725.333333c0-25.6-17.066667-42.666667-42.666667-42.666666zM298.666667 938.666667H106.666667c-12.8 0-21.333333-8.533333-21.333334-21.333334V725.333333c0-25.6-17.066667-42.666667-42.666666-42.666666s-42.666667 17.066667-42.666667 42.666666v192C0 977.066667 46.933333 1024 106.666667 1024H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666zM917.333333 0H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h192c12.8 0 21.333333 8.533333 21.333334 21.333334V298.666667c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666V106.666667C1024 46.933333 977.066667 0 917.333333 0zM42.666667 341.333333c25.6 0 42.666667-17.066667 42.666666-42.666666V106.666667c0-12.8 8.533333-21.333333 21.333334-21.333334H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666666s-17.066667-42.666667-42.666666-42.666667H106.666667C46.933333 0 0 46.933333 0 106.666667V298.666667c0 25.6 17.066667 42.666667 42.666667 42.666666z" p-id="3625"></path><path d="M183.466667 277.333333v469.333334c0 51.2 42.666667 98.133333 98.133333 98.133333h469.333333c51.2 0 98.133333-42.666667 98.133334-98.133333v-469.333334c0-51.2-42.666667-98.133333-98.133334-98.133333h-469.333333c-55.466667 4.266667-98.133333 46.933333-98.133333 98.133333z m597.333333 0v469.333334c0 17.066667-12.8 34.133333-34.133333 34.133333h-469.333334c-17.066667 0-34.133333-12.8-34.133333-34.133333v-469.333334c0-17.066667 12.8-34.133333 34.133333-34.133333h469.333334c17.066667 4.266667 34.133333 17.066667 34.133333 34.133333z" p-id="3626"></path></svg>
\ No newline at end of file
diff --git a/src/components/Application/AppLocale.vue b/src/components/Application/AppLocale.vue
index 1fd5b930..622c899f 100644
--- a/src/components/Application/AppLocale.vue
+++ b/src/components/Application/AppLocale.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
   import { useI18n, localesList } from '@/hooks/web/useI18n';
   import SvgIcon from '@/components/SvgIcon/index.vue';
-  import { useAppStoreHook } from '@/store/modules/app';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
   const i18n = useI18n();
-  const appStore = useAppStoreHook();
-  // const availableLocales = i18n.availableLocales;
+  const { setAppConfigMode } = useRootSetting();
   const tolochos = (key: string) => {
     i18n.locale.value = key;
-    appStore.setAppConfigMode({ ...appStore.appConfigMode, locale: key });
+    setAppConfigMode({ locale: key });
   };
 </script>
 
diff --git a/src/components/Application/AppTheme.vue b/src/components/Application/AppTheme.vue
index 6a6e5fb2..6118649c 100644
--- a/src/components/Application/AppTheme.vue
+++ b/src/components/Application/AppTheme.vue
@@ -2,17 +2,17 @@
   import { useColorMode } from '@vueuse/core';
   import { watch } from 'vue';
   import SvgIcon from '../SvgIcon/index.vue';
-  import { useAppStoreHook } from '@/store/modules/app';
   import { useTransformTheme } from '@/hooks/useTransformTheme';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
-  const appStore = useAppStoreHook();
   const color = useColorMode();
 
+  const { setAppConfigMode } = useRootSetting();
+
   const { updateColor } = useTransformTheme();
 
   const toggleDarkMode = () => {
-    appStore.appConfigMode.themeMode = color.value;
-    appStore.setAppConfigMode(appStore.appConfigMode);
+    setAppConfigMode({ themeMode: color.value });
   };
 
   watch(
diff --git a/src/hooks/setting/useRootSetting.ts b/src/hooks/setting/useRootSetting.ts
new file mode 100644
index 00000000..c69ed230
--- /dev/null
+++ b/src/hooks/setting/useRootSetting.ts
@@ -0,0 +1,15 @@
+import { storeToRefs } from 'pinia';
+import { merge } from 'lodash-es';
+import { useAppStoreHook } from '@/store/modules/app';
+import type { AppConfig } from '@/store/types';
+
+export function useRootSetting() {
+  const appStore = useAppStoreHook();
+  const { appConfigMode } = storeToRefs(appStore);
+
+  function setAppConfigMode(config: Partial<AppConfig>) {
+    appStore.setAppConfigMode(merge(appStore.appConfigMode, config));
+  }
+
+  return { appConfig: appConfigMode, setAppConfigMode };
+}
diff --git a/src/hooks/useTransformTheme.ts b/src/hooks/useTransformTheme.ts
index 5ee8bd7e..70077678 100644
--- a/src/hooks/useTransformTheme.ts
+++ b/src/hooks/useTransformTheme.ts
@@ -1,7 +1,7 @@
-import { useAppStoreHook } from '@/store/modules/app';
+import { useRootSetting } from './setting/useRootSetting';
 
-export const useTransformTheme = () => {
-  const appStore = useAppStoreHook();
+export function useTransformTheme() {
+  const { appConfig } = useRootSetting();
 
   const body = document.documentElement as HTMLElement;
 
@@ -34,7 +34,7 @@ export const useTransformTheme = () => {
   }
 
   function updateColor() {
-    const { primaryColor, themeMode } = appStore.appConfigMode;
+    const { primaryColor, themeMode } = appConfig.value;
     if (!primaryColor) return;
 
     const style = document.getElementById('admin-style-root-color');
@@ -63,4 +63,4 @@ export const useTransformTheme = () => {
   }
 
   return { updateColor, themeHtmlClassName };
-};
+}
diff --git a/src/layouts/pageLayouts/components/AppTabs/index.vue b/src/layouts/pageLayouts/components/AppTabs/index.vue
index 1f49dc4f..e4a91152 100644
--- a/src/layouts/pageLayouts/components/AppTabs/index.vue
+++ b/src/layouts/pageLayouts/components/AppTabs/index.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
   import { ref, computed, watch, onBeforeMount } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
-  import { storeToRefs } from 'pinia';
   import { useTabsView } from './hooks/useTabsView';
   import { useTabsChange } from './hooks/useTabsChange';
   import { translateI18n } from '@/hooks/web/useI18n';
   import { usePermissionStoreHook } from '@/store/modules/permission';
   import type { MultiTabsType } from '@/store/types';
   import SvgIcon from '@/components/SvgIcon/index.vue';
-  import { useAppStoreHook } from '@/store/modules/app';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
-  const { appConfigMode } = storeToRefs(useAppStoreHook());
+  const { appConfig, setAppConfigMode } = useRootSetting();
 
   const route = useRoute();
   const router = useRouter();
@@ -49,10 +48,19 @@
       query: e.query,
     });
   };
+
+  const fullScreenChange = () => {
+    const { hideNavbart, hideSidebar } = appConfig.value;
+    if (hideNavbart && hideSidebar) {
+      setAppConfigMode({ hideNavbart: false, hideSidebar: false });
+    } else {
+      setAppConfigMode({ hideNavbart: true, hideSidebar: true });
+    }
+  };
 </script>
 
 <template>
-  <div v-if="!appConfigMode.hideTabs" class="main-container-tabs">
+  <div v-if="!appConfig.hideTabs" class="main-container-tabs">
     <el-tabs
       v-model="editableTabsValue"
       type="card"
@@ -88,15 +96,12 @@
     </transition>
     <div class="right-button">
       <ul>
-        <!-- <li class="cursor" @click="fullScreenChange">
-          <SvgIcon name="iEL-full-screen"></SvgIcon>
-        </li> -->
         <li class="cursor" @click="onFresh()">
           <SvgIcon class="rotate" name="iEL-refresh"></SvgIcon>
         </li>
         <li>
           <el-dropdown trigger="click" placement="bottom-end">
-            <SvgIcon class="action-item" name="iEL-arrow-down"></SvgIcon>
+            <SvgIcon class="action-item cursor" name="iEL-arrow-down"></SvgIcon>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item
@@ -112,6 +117,9 @@
             </template>
           </el-dropdown>
         </li>
+        <li class="cursor" @click="fullScreenChange">
+          <SvgIcon name="full_screen_page"></SvgIcon>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/layouts/pageLayouts/components/Breadcrumb/index.vue b/src/layouts/pageLayouts/components/Breadcrumb/index.vue
index efd98768..57fa6b5a 100644
--- a/src/layouts/pageLayouts/components/Breadcrumb/index.vue
+++ b/src/layouts/pageLayouts/components/Breadcrumb/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-  import { ref, toRef, watch } from 'vue';
+  import { ref, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { isEqual } from 'lodash-es';
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import { translateI18n } from '@/hooks/web/useI18n';
-  import { useAppStoreHook } from '@/store/modules/app';
   import type { AppRouteRecordRaw } from '#/route';
   import { getParentPaths, findRouteByPath } from '@/router/utils';
   import { usePermissionStoreHook } from '@/store/modules/permission';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
   const { multiTabs } = usePermissionStoreHook();
 
@@ -65,13 +65,10 @@
   watch(route, getBreadcrumb);
 
   // 当前是否折叠导航栏
-  const appStore = useAppStoreHook();
-  const appConfigMode = toRef(appStore, 'appConfigMode');
+  const { appConfig, setAppConfigMode } = useRootSetting();
   // 折叠菜单事件
   const handerShowElmenu = () => {
-    appStore.setAppConfigMode({
-      collapseMenu: !appStore.appConfigMode.collapseMenu,
-    });
+    setAppConfigMode({ collapseMenu: !appConfig.value.collapseMenu });
   };
 </script>
 
@@ -79,13 +76,13 @@
   <div class="breadcrumb">
     <SvgIcon
       class="breadcrumb-fold cursor"
-      :class="{ 'breadcrumb-unfold': appConfigMode.collapseMenu }"
+      :class="{ 'breadcrumb-unfold': appConfig.collapseMenu }"
       name="fold"
       color="#e3e3e3"
       @click="handerShowElmenu"
     ></SvgIcon>
     <el-breadcrumb
-      v-show="appConfigMode.sidebarMode === 'vertical'"
+      v-show="appConfig.sidebarMode === 'vertical'"
       class="app-breadcrumb"
       separator="/"
     >
diff --git a/src/layouts/pageLayouts/components/Navbart/index.vue b/src/layouts/pageLayouts/components/Navbart/index.vue
index 91e6de31..9d79a853 100644
--- a/src/layouts/pageLayouts/components/Navbart/index.vue
+++ b/src/layouts/pageLayouts/components/Navbart/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // import { ref } from 'vue'
-  import { getCurrentInstance, ref, toRef } from 'vue';
+  import { getCurrentInstance, ref } from 'vue';
   import Sidebar from '../../components/Sidebar/index.vue';
   import MinSidebar from '../../components/Sidebar/MinSidebar.vue';
   import Setting from '../../components/Seting/index.vue';
@@ -9,20 +9,23 @@
   import { AppLocale, AppTheme, AppAccount } from '@/components/Application';
 
   import SvgIcon from '@/components/SvgIcon/index.vue';
-  import { useAppStoreHook } from '@/store/modules/app';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
   const drawer = ref(false);
 
   const config = getCurrentInstance()?.appContext.config.globalProperties.$config;
 
-  const appStore = useAppStoreHook();
-  const appConfigMode = toRef(appStore, 'appConfigMode');
+  const { appConfig } = useRootSetting();
+
+  const full_screen = ref<'full_screen' | 'full_screen_close'>('full_screen');
 
   const fullScreenChange = () => {
     // https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen
     if (document.fullscreenElement) {
       document.exitFullscreen();
+      full_screen.value = 'full_screen';
     } else {
+      full_screen.value = 'full_screen_close';
       document.documentElement.requestFullscreen();
     }
   };
@@ -30,75 +33,98 @@
 
 <template>
   <div class="navbar">
-    <div class="navbar-left">
-      <Breadcrumb
-        v-if="appConfigMode.sidebarMode !== 'horizontal' || appConfigMode.drawerSidebar"
-      />
-      <div v-else class="app-logo">
-        <!-- <SvgIcon name="Vue"></SvgIcon> -->
-        <img class="logo_img" src="@/assets/logo.png" mode="scaleToFill" />
-        <span class="name">{{ config.title }}</span>
+    <div v-show="!appConfig.hideNavbart" class="navbar-content">
+      <div class="navbar-left">
+        <Breadcrumb v-if="appConfig.sidebarMode !== 'horizontal' || appConfig.drawerSidebar" />
+        <div v-else class="app-logo">
+          <!-- <SvgIcon name="Vue"></SvgIcon> -->
+          <img class="logo_img" src="@/assets/logo.png" mode="scaleToFill" />
+          <span class="name">{{ config.title }}</span>
+        </div>
+      </div>
+      <div class="navbar-center">
+        <template v-if="!appConfig.drawerSidebar">
+          <Sidebar
+            v-if="appConfig.sidebarMode === 'horizontal'"
+            class="sidebar-horizontal"
+            mode="horizontal"
+          />
+          <MinSidebar
+            v-if="appConfig.sidebarMode === 'blend'"
+            class="sidebar-horizontal"
+            mode="horizontal"
+          />
+        </template>
+      </div>
+      <div class="navbar-right">
+        <el-tooltip :content="$t('layout.navbar.fullScreen')" placement="bottom">
+          <SvgIcon class="cursor" :name="full_screen" @click="fullScreenChange"></SvgIcon>
+        </el-tooltip>
+        <AppLocale class="icon"></AppLocale>
+        <AppTheme></AppTheme>
+        <AppAccount></AppAccount>
+        <SvgIcon class="cursor" name="iEL-setting" @click="drawer = true"></SvgIcon>
       </div>
     </div>
-    <div class="navbar-center">
-      <template v-if="!appConfigMode.drawerSidebar">
-        <Sidebar
-          v-if="appConfigMode.sidebarMode === 'horizontal'"
-          class="sidebar-horizontal"
-          mode="horizontal"
-        />
-        <MinSidebar
-          v-if="appConfigMode.sidebarMode === 'blend'"
-          class="sidebar-horizontal"
-          mode="horizontal"
-        />
-      </template>
-    </div>
-    <div class="navbar-right">
-      <SvgIcon class="cursor" name="iEL-full-screen" @click="fullScreenChange"></SvgIcon>
-      <AppLocale class="icon"></AppLocale>
-      <AppTheme></AppTheme>
-      <AppAccount></AppAccount>
-      <SvgIcon class="cursor" name="iEL-setting" @click="drawer = true"></SvgIcon>
+    <div v-show="appConfig.hideNavbart" class="setting-icon cursor">
+      <SvgIcon name="iEL-setting" @click="drawer = true"></SvgIcon>
     </div>
-
     <Setting v-model:modelValue="drawer"></Setting>
   </div>
 </template>
 
 <style lang="scss" scoped>
   .navbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     width: 100%;
     // margin-left: #{$sideBarWidth};
-    height: #{$navBarHeight};
-    padding: 0 20px;
+
     background-color: $navBarColor;
     border-bottom: 1px solid var(--border-color-light);
     box-shadow: 1px 0 20px rgb(0 0 0 / 8%);
+    .navbar-content {
+      width: 100%;
+      height: #{$navBarHeight};
+      display: flex;
+      padding: 0 20px;
+      align-items: center;
+      justify-content: space-between;
 
-    // .navbar-left {
-    // }
+      // .navbar-left {
+      // }
 
-    .logo_img {
-      width: 38px;
-      height: 38px;
-    }
+      .logo_img {
+        width: 38px;
+        height: 38px;
+      }
 
-    .navbar-center {
-      height: 100%;
-      min-width: 0;
-      flex: 1;
+      .navbar-center {
+        height: 100%;
+        min-width: 0;
+        flex: 1;
+      }
+
+      .navbar-right {
+        display: grid;
+        grid-auto-flow: column;
+        align-items: center;
+        grid-gap: 12px;
+        font-size: var(--font-size-extra-large);
+      }
     }
 
-    .navbar-right {
-      display: grid;
-      grid-auto-flow: column;
-      align-items: center;
-      grid-gap: 12px;
+    .setting-icon {
+      position: fixed;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      z-index: 99;
+      display: flex;
+      padding: 8px;
+      background-color: var(--main-color);
+      color: #fff;
       font-size: var(--font-size-extra-large);
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
     }
   }
 </style>
diff --git a/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
index e1277c18..ed5b6c6a 100644
--- a/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
@@ -2,16 +2,16 @@
   import { ref, watch } from 'vue';
   import { ColorPicker } from 'vue3-colorpicker';
   import 'vue3-colorpicker/style.css';
-  import { useAppStoreHook } from '@/store/modules/app';
   import { useTransformTheme } from '@/hooks/useTransformTheme';
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import type { AppConfig } from '@/store/types';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
   const { updateColor, themeHtmlClassName } = useTransformTheme();
 
-  const appStore = useAppStoreHook();
+  const { appConfig, setAppConfigMode } = useRootSetting();
 
-  const { primaryColor, greyMode, colorWeaknessMode } = appStore.appConfigMode;
+  const { primaryColor, greyMode, colorWeaknessMode } = appConfig.value;
 
   const pureColor = ref(primaryColor || '#409eff');
 
@@ -20,8 +20,7 @@
   const colorList = ['#722ed1', '#eb2f96', '#52c41a', '#13c2c2', '#fadb14', '#fa541c', '#f5222d'];
 
   watch([pureColor], () => {
-    appStore.appConfigMode.primaryColor = pureColor.value;
-    appStore.setAppConfigMode(appStore.appConfigMode);
+    setAppConfigMode({ primaryColor: pureColor.value });
     updateColor();
   });
 
@@ -33,7 +32,7 @@
     const appData = {} as AppConfig;
     if (key === 'html-grey') appData['greyMode'] = e;
     else appData['colorWeaknessMode'] = e;
-    appStore.setAppConfigMode(appData);
+    setAppConfigMode(appData);
   };
 </script>
 
diff --git a/src/layouts/pageLayouts/components/Seting/index.vue b/src/layouts/pageLayouts/components/Seting/index.vue
index 947ad1d6..5ad71924 100644
--- a/src/layouts/pageLayouts/components/Seting/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-  import { watch, ref, toRef } from 'vue';
+  import { watch, ref } from 'vue';
   import ThemeSettings from './ThemeSettings/index.vue';
   import pageSettings from './pageSettings/index.vue';
-  import { useAppStoreHook } from '@/store/modules/app';
   import type { SidebarMode } from '@/store/types';
   import { clearStorage } from '@/utils/storage';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
   const props = defineProps({
     modelValue: {
@@ -24,8 +24,7 @@
     },
   );
 
-  const appStore = useAppStoreHook();
-  const appConfigMode = toRef(appStore, 'appConfigMode');
+  const { appConfig, setAppConfigMode } = useRootSetting();
 
   const sidebarSeting: { label: string; value: SidebarMode }[] = [
     {
@@ -44,7 +43,7 @@
 
   // 折叠菜单事件
   const handerShowElmenu = (vale: SidebarMode) => {
-    appStore.setAppConfigMode({ sidebarMode: vale });
+    setAppConfigMode({ sidebarMode: vale });
   };
 
   const handerClearStorage = () => {
@@ -74,7 +73,7 @@
             >
               <div
                 class="sidebar_mode cursor"
-                :class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === item.value }"
+                :class="{ 'sidebar_mode-select': appConfig.sidebarMode === item.value }"
                 @click="handerShowElmenu(item.value)"
               >
                 <div></div>
diff --git a/src/layouts/pageLayouts/components/Seting/pageSettings/index.vue b/src/layouts/pageLayouts/components/Seting/pageSettings/index.vue
index ef9d2bf4..a5af0c33 100644
--- a/src/layouts/pageLayouts/components/Seting/pageSettings/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/pageSettings/index.vue
@@ -1,33 +1,38 @@
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useAppStoreHook } from '@/store/modules/app';
   import { usePermissionStoreHook } from '@/store/modules/permission';
   import { removeStorage } from '@/utils/storage';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
-  const appStore = useAppStoreHook();
+  const { appConfig, setAppConfigMode } = useRootSetting();
 
   const { persistent } = usePermissionStoreHook();
 
-  const { hideTabs, labelPersistent } = appStore.appConfigMode;
-
-  const hideTabsRef = ref<boolean>(hideTabs);
-  const hideTabsChange = (e: boolean) => {
-    appStore.setAppConfigMode({ hideTabs: e });
-  };
-
-  const labelPersistentRef = ref<boolean>(labelPersistent);
+  const labelPersistentRef = ref<boolean>(appConfig.value.labelPersistent);
   const labelPersistentChange = (e: boolean) => {
     if (!e) removeStorage('multiTabsList');
     else persistent();
-    appStore.setAppConfigMode({ labelPersistent: e });
+    setAppConfigMode({ labelPersistent: e });
+  };
+
+  const hidePublicChange = () => {
+    setAppConfigMode({});
   };
 </script>
 
 <template>
   <div>
+    <div class="options">
+      <span>{{ $t('layout.hideSidebar') }}</span>
+      <el-switch v-model="appConfig['hideSidebar']" @change="hidePublicChange" />
+    </div>
+    <div class="options">
+      <span>{{ $t('layout.hideNavBart') }}</span>
+      <el-switch v-model="appConfig.hideNavbart" @change="hidePublicChange" />
+    </div>
     <div class="options">
       <span>{{ $t('layout.hideTabs') }}</span>
-      <el-switch v-model="hideTabsRef" @change="hideTabsChange" />
+      <el-switch v-model="appConfig.hideTabs" @change="hidePublicChange" />
     </div>
     <div class="options">
       <span>{{ $t('layout.labelPersistent') }}</span>
diff --git a/src/layouts/pageLayouts/components/SideNavigationBar/index.vue b/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
index 1871e4b2..7b8929b1 100644
--- a/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
+++ b/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
-  import { storeToRefs } from 'pinia';
   import { useDebounceFn, useEventListener, useMediaQuery } from '@vueuse/core';
   import VerticalSidebar from '../VerticalSidebar/index.vue';
-  import { useAppStoreHook } from '@/store/modules/app';
   import type { AppConfig } from '@/store/types';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
-  const appStore = useAppStoreHook();
+  const { appConfig, setAppConfigMode } = useRootSetting();
 
-  const drawer = ref<boolean>(!appStore.appConfigMode.collapseMenu);
+  const drawer = ref<boolean>(!appConfig.value.collapseMenu);
 
   const setAppStore = (appData: Partial<AppConfig>) => {
-    appStore.setAppConfigMode(appData);
+    setAppConfigMode(appData);
   };
 
   const handleClose = () => {
@@ -37,10 +36,8 @@
     setAppStore({ collapseMenu: isSmallScreen.value });
   });
 
-  const { appConfigMode } = storeToRefs(appStore);
-
-  watch(appConfigMode, () => {
-    drawer.value = !appConfigMode.value.collapseMenu;
+  watch(appConfig, () => {
+    drawer.value = !appConfig.value.collapseMenu;
   });
 
   useEventListener(window, 'resize', () => mediaQuery());
@@ -59,8 +56,9 @@
   >
     <VerticalSidebar />
   </el-drawer>
-
-  <VerticalSidebar v-else></VerticalSidebar>
+  <template v-else>
+    <VerticalSidebar></VerticalSidebar>
+  </template>
 </template>
 
 <style lang="scss">
diff --git a/src/layouts/pageLayouts/components/Sidebar/index.vue b/src/layouts/pageLayouts/components/Sidebar/index.vue
index 2a13051a..b6075d8e 100644
--- a/src/layouts/pageLayouts/components/Sidebar/index.vue
+++ b/src/layouts/pageLayouts/components/Sidebar/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
   import type { PropType } from 'vue';
-  import { computed, ref, toRef, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import { useRoute } from 'vue-router';
   import SidebarItem from './SidebarItem.vue';
   import { usePermissionStoreHook } from '@/store/modules/permission';
   import type { AppRouteRecordRaw } from '#/route';
   import { getParentPaths, findRouteByPath } from '@/router/utils';
-  import { useAppStoreHook } from '@/store/modules/app';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
   defineProps({
     mode: {
@@ -16,12 +16,11 @@
   });
 
   const route = useRoute();
-  const appStore = useAppStoreHook();
-  const appConfigMode = toRef(appStore, 'appConfigMode');
+  const { appConfig } = useRootSetting();
   let subMenuData = ref<AppRouteRecordRaw[]>(usePermissionStoreHook().wholeMenus);
 
   const menuData = computed<AppRouteRecordRaw[]>(() => {
-    return appConfigMode.value.sidebarMode === 'blend' && !appConfigMode.value.drawerSidebar
+    return appConfig.value.sidebarMode === 'blend' && !appConfig.value.drawerSidebar
       ? subMenuData.value
       : usePermissionStoreHook().wholeMenus;
   });
@@ -40,9 +39,9 @@
 
   getSubMenuData(route.path);
   watch(
-    () => [route.path, appConfigMode.value.sidebarMode],
+    () => [route.path, appConfig.value.sidebarMode],
     () => {
-      if (appConfigMode.value.sidebarMode === 'blend') {
+      if (appConfig.value.sidebarMode === 'blend') {
         getSubMenuData(route.path);
       }
     },
@@ -62,7 +61,7 @@
     <el-menu
       :default-active="activeMenyu"
       :unique-opened="true"
-      :collapse="appConfigMode.sidebarMode === 'horizontal' ? false : appConfigMode.collapseMenu"
+      :collapse="appConfig.sidebarMode === 'horizontal' ? false : appConfig.collapseMenu"
       :mode="mode"
     >
       <SidebarItem
diff --git a/src/layouts/pageLayouts/components/VerticalSidebar/index.vue b/src/layouts/pageLayouts/components/VerticalSidebar/index.vue
index 405e5ae7..d56335a5 100644
--- a/src/layouts/pageLayouts/components/VerticalSidebar/index.vue
+++ b/src/layouts/pageLayouts/components/VerticalSidebar/index.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-  import { getCurrentInstance, toRef } from 'vue';
+  import { getCurrentInstance } from 'vue';
   import Sidebar from '../Sidebar/index.vue';
-  import { useAppStoreHook } from '@/store/modules/app';
-
-  const appStore = useAppStoreHook();
-  const appConfigMode = toRef(appStore, 'appConfigMode');
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  const { appConfig } = useRootSetting();
   const config = getCurrentInstance()?.appContext.config.globalProperties.$config;
 </script>
 
 <template>
   <div
-    v-if="appConfigMode.sidebarMode !== 'horizontal' || appConfigMode.drawerSidebar"
+    v-show="
+      !appConfig.hideSidebar && (appConfig.sidebarMode !== 'horizontal' || appConfig.drawerSidebar)
+    "
     class="sidebar-container"
-    :class="{ hideSidebar: appConfigMode.collapseMenu }"
+    :class="{ hideSidebar: appConfig.collapseMenu }"
   >
-    <div class="app-logo" :class="{ 'app-logo-hide': appConfigMode.collapseMenu }">
+    <div class="app-logo" :class="{ 'app-logo-hide': appConfig.collapseMenu }">
       <div class="logo">
         <img class="logo_img" src="@/assets/logo.png" mode="scaleToFill" />
       </div>
diff --git a/src/locales/en/modules/layout.ts b/src/locales/en/modules/layout.ts
index 27055356..e810658d 100644
--- a/src/locales/en/modules/layout.ts
+++ b/src/locales/en/modules/layout.ts
@@ -6,9 +6,14 @@ const layout = {
   greyMode: 'Grey Mode',
   colorWeaknessMode: 'Color Weakness Mode',
   pageSettings: 'Page Settings',
+  hideSidebar: 'Hide Sidebar',
+  hideNavBart: 'Hide NavBar',
   hideTabs: 'Hide Tabs',
   labelPersistent: 'Label Persistent',
   clearStorage: 'Clear cache and return to login page',
+  navbar: {
+    fullScreen: 'Full Screen',
+  },
 };
 
 export default layout;
diff --git a/src/locales/zh-ch/modules/layout.ts b/src/locales/zh-ch/modules/layout.ts
index 09098edd..c9d76e86 100644
--- a/src/locales/zh-ch/modules/layout.ts
+++ b/src/locales/zh-ch/modules/layout.ts
@@ -6,9 +6,14 @@ const layout = {
   greyMode: '灰色模式',
   colorWeaknessMode: '色弱模式',
   pageSettings: '页面设置',
+  hideSidebar: '隐藏侧边栏',
+  hideNavBart: '隐藏顶部导航栏',
   hideTabs: '隐藏标签页',
   labelPersistent: '标签持久化',
   clearStorage: '清空缓存回到登录页',
+  navbar: {
+    fullScreen: '全屏',
+  },
 };
 
 export default layout;
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 4bca2a94..e92a487a 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -14,8 +14,8 @@ const useAppStore = defineStore({
     },
   },
   actions: {
-    setAppConfigMode(data: Partial<AppConfig>): void {
-      const newData = { ...this.appConfigMode, ...data };
+    setAppConfigMode(data: AppConfig): void {
+      const newData = data;
       localStorage.setItem('appConfigMode', JSON.stringify(newData));
       this.appConfigMode = newData;
     },
diff --git a/src/store/types.ts b/src/store/types.ts
index 0007379e..c9d503ae 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -9,17 +9,33 @@ export interface AppState {
 export type SidebarMode = 'vertical' | 'horizontal' | 'blend';
 
 export interface AppConfig {
+  // 标题
   title: string;
+  // 折叠菜单
   collapseMenu: boolean;
+  // 菜单显示模式： 'vertical'：左侧模式 | 'horizontal'：顶部模式 | 'blend'：混合模式
   sidebarMode: SidebarMode;
+  // 主题模式：夜间主题、白天主题
   themeMode: string;
+  // 国际化
   locale: string;
+  // storage配置
   StorageConfig: StorageConfig;
+  // 移动端菜单
   drawerSidebar?: boolean;
+  // 主题颜色
   primaryColor: string;
+  // 灰色模式
   greyMode: boolean;
+  // 色弱模式
   colorWeaknessMode: boolean;
+  // 隐藏侧边菜单栏
+  hideSidebar: boolean;
+  // 隐藏顶部
+  hideNavbart: boolean;
+  // 隐藏标签页
   hideTabs: boolean;
+  // 标签持久化
   labelPersistent: boolean;
 }
 
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index d7af979c..1e3ad01a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -9,10 +9,10 @@
   import type { UseInfoType } from '@/server/useInfo';
   import { getUserInfo } from '@/server/useInfo';
   import { setStorage } from '@/utils/storage';
-  import { useAppStoreHook } from '@/store/modules/app';
   import { useI18n } from '@/hooks/web/useI18n';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
-  const { appConfigMode } = useAppStoreHook();
+  const { appConfig } = useRootSetting();
 
   const { t } = useI18n();
 
@@ -67,7 +67,7 @@
       </div>
       <div class="login-box">
         <div class="login-form">
-          <h2 class="enter-x p-4">{{ appConfigMode.title }}</h2>
+          <h2 class="enter-x p-4">{{ appConfig.title }}</h2>
           <div class="enter-x"
             >{{ $t('sys.login.userName') }}：admin {{ $t('sys.login.password') }}：admin123</div
           >