feat(layouts): ✨ [layouts] 标签页持久化

public/serverConfig.json

@@ -7,6 +7,8 @@
   "primaryColor": "#409eff",
   "greyMode": false,
   "colorWeaknessMode":false,
+  "hideTabs": false,
+  "labelPersistent": true,
   "StorageConfig":{
     "type": "localStorage",
     "prefix": "xiaosiAdmin", 

src/layouts/pageLayouts/components/AppMain/index.vue

@@ -24,8 +24,9 @@
   .app-main {
     position: relative;
     width: 100%;
-    height: calc(100vh - #{$navBarHeight+$tabsPageHeight});
+    // height: calc(100vh - #{$navBarHeight+$tabsPageHeight});
     // min-height: calc(100vh - #{$navBarHeight+$tabsPageHeight});
+    flex: 1;
     overflow: auto;
     padding: 20px;
     background-color: #{$app-main-bg-color};

src/layouts/pageLayouts/components/AppTabs/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { ref, computed, watch, onBeforeMount } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
+  import { storeToRefs } from 'pinia';
   import { useNavSideBar } from '../../hooks/useNavSideBar';
   import { useTabsView } from './hooks/useTabsView';
   import { useTabsChange } from './hooks/useTabsChange';
@@ -9,6 +10,9 @@
   import type { MultiTabsType } from '@/store/types';
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import { emitter } from '@/utils/mitt';
+  import { useAppStoreHook } from '@/store/modules/app';
+
+  const { appConfigMode } = storeToRefs(useAppStoreHook());
 
   const route = useRoute();
   const router = useRouter();
@@ -58,7 +62,7 @@
 </script>
 
 <template>
-  <div class="main-container-tabs">
+  <div v-if="!appConfigMode.hideTabs" class="main-container-tabs">
     <el-tabs
       v-model="editableTabsValue"
       type="card"

src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue

@@ -51,7 +51,7 @@
       </div>
     </div>
     <div class="options">
-      <span>{{ $t('layout.customTheme') }}：</span>
+      <span>{{ $t('layout.customTheme') }}</span>
       <div class="color-picker">
         <span
           class="cursor"
@@ -70,11 +70,11 @@
       </div>
     </div>
     <div class="options">
-      <span>灰色模式：</span>
+      <span>灰色模式</span>
       <el-switch v-model="htmlGrey" @change="(e:boolean) => themeChange(e,'html-grey')" />
     </div>
     <div class="options">
-      <span>色弱模式：</span>
+      <span>色弱模式</span>
       <el-switch v-model="htmlWeakness" @change="(e:boolean) => themeChange(e,'html-weakness')" />
     </div>
   </div>

src/layouts/pageLayouts/components/Seting/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { watch, ref, toRef } 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';
 
@@ -80,6 +81,10 @@
         <div>
           <ThemeSettings></ThemeSettings>
         </div>
+        <el-divider content-position="center">{{ $t('layout.pageSettings') }}</el-divider>
+        <div>
+          <pageSettings></pageSettings>
+        </div>
       </div>
     </el-drawer>
   </div>

src/layouts/pageLayouts/components/Seting/pageSettings/index.vue

@@ -0,0 +1,56 @@
+<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';
+
+  const appStore = useAppStoreHook();
+
+  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 labelPersistentChange = (e: boolean) => {
+    if (!e) removeStorage('multiTabsList');
+    else persistent();
+    appStore.setAppConfigMode({ labelPersistent: e });
+  };
+</script>
+
+<template>
+  <div>
+    <div class="options">
+      <span>{{ $t('layout.hideTabs') }}</span>
+      <el-switch v-model="hideTabsRef" @change="hideTabsChange" />
+    </div>
+    <div class="options">
+      <span>{{ $t('layout.labelPersistent') }}</span>
+      <el-switch v-model="labelPersistentRef" @change="labelPersistentChange" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .options {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    .color-picker {
+      position: relative;
+      width: 50px;
+      height: 24px;
+      span {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>

src/locales/en/modules/layout.ts

@@ -5,6 +5,9 @@ const layout = {
   customTheme: 'Custom Theme',
   greyMode: 'Grey Mode',
   colorWeaknessMode: 'Color Weakness Mode',
+  pageSettings: 'Page Settings',
+  hideTabs: 'Hide Tabs',
+  labelPersistent: 'Label Persistent',
 };
 
 export default layout;

src/locales/zh-ch/modules/layout.ts

@@ -5,6 +5,9 @@ const layout = {
   customTheme: '自定义主题',
   greyMode: '灰色模式',
   colorWeaknessMode: '色弱模式',
+  pageSettings: '页面设置',
+  hideTabs: '隐藏标签页',
+  labelPersistent: '标签持久化',
 };
 
 export default layout;

src/store/modules/permission.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import type { RouteRecordName } from 'vue-router';
 import { isEqual } from 'lodash-es';
 import type { MultiTabsType, PermissionState } from '../types';
+import { useAppStoreHook } from './app';
 import { store } from '@/store';
 import type { AppRouteRecordRaw } from '#/route';
 import { getStorage, removeStorage, setStorage } from '@/utils/storage';
@@ -38,6 +39,10 @@ const usePermissionStore = defineStore({
     clearAllCachePage() {
       this.cachePageList = [];
     },
+    // 持久化
+    persistent() {
+      setStorage('multiTabsList', this.multiTabs);
+    },
     handleMultiTabs<T>(type: 'add' | 'delete', value: T | MultiTabsType) {
       const route = value as MultiTabsType;
       const index = this.multiTabs.findIndex(
@@ -55,7 +60,8 @@ const usePermissionStore = defineStore({
         default:
           break;
       }
-      setStorage('multiTabsList', this.multiTabs);
+      const appConfig = useAppStoreHook();
+      if (appConfig.appConfigMode.labelPersistent) this.persistent();
     },
     handleRemoveMultiTabs() {
       removeStorage('multiTabsList');

src/store/types.ts

@@ -19,6 +19,8 @@ export interface AppConfig {
   primaryColor: string;
   greyMode: boolean;
   colorWeaknessMode: boolean;
+  hideTabs: boolean;
+  labelPersistent: boolean;
 }
 
 export type MultiTabsType = Omit<

src/styles/sidebar.scss

@@ -33,6 +33,8 @@
     width: calc(100vw - #{$sideBarWidth});
     min-height: 100%;
     transition: margin-left 0.28s;
+    display: flex;
+    flex-direction: column;
 
     .main-container-tabs {
       width: 100%;