feat(projects): new layout,tab and add update theme settings

src/store/modules/app/index.ts

@@ -1,7 +1,14 @@
 import { nextTick } from 'vue';
 import { defineStore } from 'pinia';
+import { SCROLL_EL_ID } from '@soybeanjs/vue-materials';
 
 interface AppState {
+  /** 滚动元素的id */
+  scrollElId: string;
+  /** 主体内容全屏 */
+  contentFull: boolean;
+  /** 禁用主体内容的水平方向的滚动 */
+  disableMainXScroll: boolean;
   /** 重载页面(控制页面的显示) */
   reloadFlag: boolean;
   /** 项目配置的抽屉可见状态 */
@@ -14,12 +21,29 @@ interface AppState {
 
 export const useAppStore = defineStore('app-store', {
   state: (): AppState => ({
+    scrollElId: SCROLL_EL_ID,
+    contentFull: false,
+    disableMainXScroll: false,
     reloadFlag: true,
     settingDrawerVisible: false,
     siderCollapse: false,
     mixSiderFixed: false
   }),
   actions: {
+    /**
+     * 获取滚动配置
+     */
+    getScrollConfig() {
+      const scrollEl = document.querySelector(`#${this.scrollElId}`);
+
+      const { scrollLeft = 0, scrollTop = 0 } = scrollEl || {};
+
+      return {
+        scrollEl,
+        scrollLeft,
+        scrollTop
+      };
+    },
     /**
      * 重载页面
      * @param duration - 重载的延迟时间(ms)
@@ -65,6 +89,14 @@ export const useAppStore = defineStore('app-store', {
     /** 设置 vertical-mix模式下 侧边栏的固定状态 */
     toggleMixSiderFixed() {
       this.mixSiderFixed = !this.mixSiderFixed;
+    },
+    /** 设置主体是否禁用滚动 */
+    setDisableMainXScroll(disable: boolean) {
+      this.disableMainXScroll = disable;
+    },
+    /** 设置主体内容全屏 */
+    setContentFull(full: boolean) {
+      this.contentFull = full;
     }
   }
 });

src/store/modules/theme/index.ts

@@ -61,6 +61,10 @@ export const useThemeStore = defineStore('theme-store', {
     setLayoutMode(mode: UnionKey.ThemeLayoutMode) {
       this.layout.mode = mode;
     },
+    /** 设置滚动模式 */
+    setScrollMode(mode: UnionKey.ThemeScrollMode) {
+      this.scrollMode = mode;
+    },
     /** 设置侧边栏反转色 */
     setSiderInverted(isInverted: boolean) {
       this.sider.inverted = isInverted;

src/store/subscribe/app.ts

@@ -1,4 +1,40 @@
+import { effectScope, onScopeDispose, watch } from 'vue';
+import { useFullscreen } from '@vueuse/core';
+import { useAppStore } from '../modules';
+
 /** 订阅app store */
 export default function subscribeAppStore() {
-  //
+  const { isFullscreen, toggle } = useFullscreen();
+
+  const app = useAppStore();
+
+  const scope = effectScope();
+
+  function update() {
+    if (app.contentFull && !isFullscreen.value) {
+      toggle();
+    }
+    if (!app.contentFull && isFullscreen.value) {
+      toggle();
+    }
+  }
+
+  scope.run(() => {
+    watch(
+      () => app.contentFull,
+      () => {
+        update();
+      }
+    );
+
+    watch(isFullscreen, newValue => {
+      if (!newValue) {
+        app.setContentFull(false);
+      }
+    });
+  });
+
+  onScopeDispose(() => {
+    scope.stop();
+  });
 }