feat(layout): added setting. Used to fix the left mixed mode menu

CHANGELOG.zh_CN.md

@@ -3,6 +3,8 @@
 ### ✨ Features
 
 - 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`
+- 新增`mixSideFixed`配置。用于固定左侧混合模式菜单
+- modal 组件新增`height`和`min-height`属性
 
 ### 🐛 Bug Fixes
 

package.json

@@ -7,7 +7,7 @@
     "build": "cross-env  vite build --mode=production && esno ./build/script/postBuild.ts",
     "build:site": "cross-env SITE=true npm run build ",
     "build:no-cache": "yarn  clean:cache && npm run build",
-    "typecheck": "typecheck .",
+    "typecheck": "vuedx-typecheck .",
     "report": "cross-env REPORT=true npm run build ",
     "preview": "npm run build && esno ./build/script/preview.ts",
     "preview:dist": "esno ./build/script/preview.ts",

src/components/Menu/src/BasicMenu.vue

@@ -125,15 +125,13 @@
         }
       });
 
-      watch(
-        () => props.items,
-        () => {
-          handleMenuChange();
-        }
-        // {
-        //   immediate: true,
-        // }
-      );
+      !props.mixSider &&
+        watch(
+          () => props.items,
+          () => {
+            handleMenuChange();
+          }
+        );
 
       async function handleMenuClick({ key, keyPath }: { key: string; keyPath: string[] }) {
         const { beforeClickFn } = props;

src/components/Menu/src/useOpenKeys.ts

@@ -8,25 +8,37 @@ import { unref } from 'vue';
 import { es6Unique } from '/@/utils';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { getAllParentPath } from '/@/router/helper/menuHelper';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
 export function useOpenKeys(
   menuState: MenuState,
   menus: Ref<MenuType[]>,
   mode: Ref<MenuModeEnum>,
   accordion: Ref<boolean>
 ) {
-  const { getCollapsed, getIsMixSidebar } = useMenuSetting();
+  const { getCollapsed, getIsMixSidebar, getMixSideFixed } = useMenuSetting();
 
-  function setOpenKeys(path: string) {
+  async function setOpenKeys(path: string) {
     if (mode.value === MenuModeEnum.HORIZONTAL) {
       return;
     }
-    const menuList = toRaw(menus.value);
-    if (!unref(accordion)) {
-      menuState.openKeys = es6Unique([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
-    } else {
-      menuState.openKeys = getAllParentPath(menuList, path);
-    }
+    const native = unref(getIsMixSidebar) && unref(getMixSideFixed);
+
+    useTimeoutFn(
+      () => {
+        const menuList = toRaw(menus.value);
+        if (!unref(accordion)) {
+          menuState.openKeys = es6Unique([
+            ...menuState.openKeys,
+            ...getAllParentPath(menuList, path),
+          ]);
+        } else {
+          menuState.openKeys = getAllParentPath(menuList, path);
+        }
+      },
+      16,
+      native
+    );
   }
 
   const getOpenKeys = computed(() => {

src/components/Table/src/hooks/useDataSource.ts

@@ -218,7 +218,7 @@ export function useDataSource(
   onMounted(() => {
     useTimeoutFn(() => {
       unref(propsRef).immediate && fetch();
-    }, 0);
+    }, 16);
   });
 
   return {

src/hooks/core/useTimeout.ts

@@ -3,20 +3,23 @@ import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 
 import { isFunction } from '/@/utils/is';
 
-export function useTimeoutFn(handle: Fn<any>, wait: number) {
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
   if (!isFunction(handle)) {
     throw new Error('handle is not Function!');
   }
 
   const { readyRef, stop, start } = useTimeoutRef(wait);
-
-  watch(
-    readyRef,
-    (maturity) => {
-      maturity && handle();
-    },
-    { immediate: false }
-  );
+  if (native) {
+    handle();
+  } else {
+    watch(
+      readyRef,
+      (maturity) => {
+        maturity && handle();
+      },
+      { immediate: false }
+    );
+  }
   return { readyRef, stop, start };
 }
 

src/hooks/setting/useMenuSetting.ts

@@ -1,13 +1,15 @@
 import type { MenuSetting } from '/@/types/config';
 
-import { computed, unref } from 'vue';
+import { computed, unref, ref } from 'vue';
 
 import { appStore } from '/@/store/modules/app';
 
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
 import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { useFullContent } from '/@/hooks/web/useFullContent';
 
+const mixSideHasChildren = ref(false);
+
 // Get menu configuration
 const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting);
 
@@ -39,6 +41,8 @@ const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
 
 const getAccordion = computed(() => unref(getMenuSetting).accordion);
 
+const getMixSideFixed = computed(() => unref(getMenuSetting).mixSideFixed);
+
 const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
 
 const getCloseMixSidebarOnChange = computed(() => unref(getMenuSetting).closeMixSidebarOnChange);
@@ -87,7 +91,8 @@ const getCalcContentWidth = computed(() => {
     unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
       ? 0
       : unref(getIsMixSidebar)
-      ? SIDE_BAR_SHOW_TIT_MINI_WIDTH
+      ? SIDE_BAR_SHOW_TIT_MINI_WIDTH +
+        (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
       : unref(getRealWidth);
 
   return `calc(100% - ${unref(width)}px)`;
@@ -148,5 +153,7 @@ export function useMenuSetting() {
     getIsMixSidebar,
     getCloseMixSidebarOnChange,
     getMixSideTrigger,
+    getMixSideFixed,
+    mixSideHasChildren,
   };
 }

src/layouts/default/setting/SettingDrawer.tsx

@@ -75,6 +75,7 @@ export default defineComponent({
       getIsMixSidebar,
       getCloseMixSidebarOnChange,
       getMixSideTrigger,
+      getMixSideFixed,
     } = useMenuSetting();
 
     const {
@@ -110,6 +111,12 @@ export default defineComponent({
             def={unref(getSplit)}
             disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
           />
+          <SwitchItem
+            title={t('layout.setting.mixSidebarFixed')}
+            event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
+            def={unref(getMixSideFixed)}
+            disabled={!unref(getIsMixSidebar)}
+          />
 
           <SwitchItem
             title={t('layout.setting.closeMixSidebarOnChange')}

src/layouts/default/setting/enum.ts

@@ -27,6 +27,7 @@ export enum HandlerEnum {
   MENU_FIXED,
   MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE,
   MENU_TRIGGER_MIX_SIDEBAR,
+  MENU_FIXED_MIX_SIDEBAR,
 
   // header
   HEADER_SHOW,

src/layouts/default/setting/handler.ts

@@ -70,6 +70,9 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
     case HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR:
       return { menuSetting: { mixSideTrigger: value } };
 
+    case HandlerEnum.MENU_FIXED_MIX_SIDEBAR:
+      return { menuSetting: { mixSideTrigger: value } };
+
     // ============transition==================
     case HandlerEnum.OPEN_PAGE_LOADING:
       appStore.commitPageLoadingState(false);