feat(layouts): ✨ add 全屏设置，修改appstore调用方式

public/serverConfig.json

@@ -1,12 +1,13 @@
 {
-  "title":"xiaosiAdmin",
+  "title": "xiaosiAdmin",
   "collapseMenu": false,
   "sidebarMode": "vertical",
   "themeMode": "dark",
   "locale": "zh-ch",
   "primaryColor": "#409eff",
   "greyMode": false,
   "colorWeaknessMode":false,
+  "hideNavbart": false,
   "hideTabs": false,
   "labelPersistent": true,
   "StorageConfig":{

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>
 

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(

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 };
+}

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 };
-};
+}

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>

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,27 +65,24 @@
   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>
 
 <template>
   <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="/"
     >