fix(menu): fix scrillbar not work

CHANGELOG.zh_CN.md

+## Wip
+
+### 🐛 Bug Fixes
+
+- 修复混合模式下滚动条丢失问题
+
 ## 2.0.0-rc.14 (2020-12-15)
 
 ### ✨ Features

src/components/Menu/src/BasicMenu.vue

@@ -90,9 +90,10 @@
       });
 
       const getMenuClass = computed(() => {
+        const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
         return [
           prefixCls,
-          `justify-${unref(getTopMenuAlign)}`,
+          `justify-${align}`,
           {
             [`${prefixCls}--hide-title`]: !unref(showTitle),
             [`${prefixCls}--collapsed-show-title`]: props.collapsedShowTitle,

src/layouts/default/header/index.vue

@@ -7,6 +7,7 @@
         v-if="getShowHeaderLogo || getIsMobile"
         :class="`${prefixCls}-logo`"
         :theme="getHeaderTheme"
+        :style="getLogoWidth"
       />
       <LayoutTrigger
         v-if="(getShowContent && getShowHeaderTrigger && !getSplit) || getIsMobile"
@@ -103,7 +104,13 @@
     },
     setup(props) {
       const { prefixCls } = useDesign('layout-header');
-      const { getShowTopMenu, getShowHeaderTrigger, getSplit } = useMenuSetting();
+      const {
+        getShowTopMenu,
+        getShowHeaderTrigger,
+        getSplit,
+        getIsMixMode,
+        getMenuWidth,
+      } = useMenuSetting();
       const { getShowLocale } = useLocaleSetting();
       const { getUseErrorHandle } = useRootSetting();
 
@@ -131,6 +138,14 @@
         ];
       });
 
+      const getLogoWidth = computed(() => {
+        if (!unref(getIsMixMode)) {
+          return {};
+        }
+        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+        return { width: `${width}px` };
+      });
+
       const getSplitType = computed(() => {
         return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
       });
@@ -157,6 +172,7 @@
         getShowNotice,
         getUseLockPage,
         getUseErrorHandle,
+        getLogoWidth,
       };
     },
   });

src/layouts/default/menu/index.tsx

@@ -47,6 +47,7 @@ export default defineComponent({
       getMenuTheme,
       getCollapsed,
       getAccordion,
+      getIsHorizontal,
       getIsSidebarType,
     } = useMenuSetting();
     const { getShowLogo } = useRootSetting();
@@ -66,7 +67,12 @@ export default defineComponent({
     const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
 
     const getUseScroll = computed(() => {
-      return unref(getIsSidebarType) || props.splitType === MenuSplitTyeEnum.LEFT;
+      return (
+        !unref(getIsHorizontal) &&
+        (unref(getIsSidebarType) ||
+          props.splitType === MenuSplitTyeEnum.LEFT ||
+          props.splitType === MenuSplitTyeEnum.NONE)
+      );
     });
 
     const getWrapperStyle = computed(

src/layouts/default/setting/SettingDrawer.tsx

@@ -10,7 +10,7 @@ import {
   InputNumberItem,
 } from './components';
 
-import { MenuTypeEnum } from '/@/enums/menuEnum';
+import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
 
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
@@ -25,7 +25,7 @@ import {
   HandlerEnum,
   contentModeOptions,
   topMenuAlignOptions,
-  menuTriggerOptions,
+  getMenuTriggerOptions,
   routerTransitionOptions,
   menuTypeList,
 } from './enum';
@@ -134,6 +134,14 @@ export default defineComponent({
      * @description:
      */
     function renderFeatures() {
+      let triggerDef = unref(getTrigger);
+
+      const triggerOptions = getMenuTriggerOptions(unref(getSplit));
+      const some = triggerOptions.some((item) => item.value === triggerDef);
+      if (!some) {
+        triggerDef = TriggerEnum.FOOTER;
+      }
+
       return (
         <>
           <SwitchItem
@@ -183,13 +191,15 @@ export default defineComponent({
             event={HandlerEnum.MENU_TOP_ALIGN}
             def={unref(getTopMenuAlign)}
             options={topMenuAlignOptions}
-            disabled={!unref(getShowHeader) || (!unref(getIsTopMenu) && !unref(getSplit))}
+            disabled={
+              !unref(getShowHeader) || unref(getSplit) || (!unref(getIsTopMenu) && !unref(getSplit))
+            }
           />
           <SelectItem
             title={t('layout.setting.menuCollapseButton')}
             event={HandlerEnum.MENU_TRIGGER}
-            def={unref(getTrigger)}
-            options={menuTriggerOptions}
+            def={triggerDef}
+            options={triggerOptions}
             disabled={!unref(getShowMenuRef)}
           />
           <SelectItem

src/layouts/default/setting/enum.ts

@@ -76,7 +76,8 @@ export const topMenuAlignOptions = [
   },
 ];
 
-export const menuTriggerOptions = [
+export const getMenuTriggerOptions = (hideTop: boolean) => {
+  return [
     {
       value: TriggerEnum.NONE,
       label: t('layout.setting.menuTriggerNone'),
@@ -85,11 +86,16 @@ export const menuTriggerOptions = [
       value: TriggerEnum.FOOTER,
       label: t('layout.setting.menuTriggerBottom'),
     },
+    ...(hideTop
+      ? []
+      : [
           {
             value: TriggerEnum.HEADER,
             label: t('layout.setting.menuTriggerTop'),
           },
-];
+        ]),
+  ];
+};
 
 export const routerTransitionOptions = [
   RouterTransitionEnum.ZOOM_FADE,

src/layouts/default/setting/handler.ts

@@ -25,6 +25,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
           type,
           collapsed: false,
           show: true,
+          hidden: false,
           ...splitOpt,
         },
       };

src/layouts/default/sider/LayoutSider.tsx → src/layouts/default/sider/LayoutSider.vue

-import './index.less';
-
-import { computed, defineComponent, ref, unref, CSSProperties } from 'vue';
-
-import { Layout } from 'ant-design-vue';
-import LayoutMenu from '../menu';
-
-import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
-import { useAppInject } from '/@/hooks/web/useAppInject';
-import { useDesign } from '/@/hooks/web/useDesign';
-
-import DragBar from './DragBar.vue';
-export default defineComponent({
+<template>
+  <div
+    v-if="getMenuFixed && !getIsMobile"
+    :style="getHiddenDomStyle"
+    :class="{ hidden: !showClassSideBarRef }"
+  />
+  <Sider
+    ref="sideRef"
+    breakpoint="lg"
+    collapsible
+    :class="getSiderClass"
+    :width="getMenuWidth"
+    :collapsed="getIsMobile ? false : getCollapsed"
+    :collapsedWidth="getCollapsedWidth"
+    :theme="getMenuTheme"
+    @collapse="onCollapseChange"
+    @breakpoint="onBreakpointChange"
+    v-bind="getTriggerAttr"
+  >
+    <template #trigger v-if="getShowTrigger">
+      <LayoutTrigger />
+    </template>
+    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
+    <DragBar ref="dragBarRef" />
+  </Sider>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref, unref, CSSProperties } from 'vue';
+
+  import { Layout } from 'ant-design-vue';
+  import LayoutMenu from '../menu';
+  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import DragBar from './DragBar.vue';
+  export default defineComponent({
     name: 'LayoutSideBar',
+    components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
     setup() {
       const dragBarRef = ref<ElRef>(null);
       const sideRef = ref<ElRef>(null);
@@ -34,7 +61,7 @@ export default defineComponent({
 
       const { getIsMobile } = useAppInject();
 
-    const { getTriggerAttr, getTriggerSlot } = useTrigger(getIsMobile);
+      const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
 
       useDragLine(sideRef, dragBarRef);
 
@@ -77,45 +104,29 @@ export default defineComponent({
         }
       );
 
-    function renderDefault() {
-      return (
-        <>
-          <LayoutMenu
-            theme={unref(getMenuTheme)}
-            menuMode={unref(getMode)}
-            splitType={unref(getSplitType)}
-          />
-          <DragBar ref={dragBarRef} />
-        </>
-      );
-    }
-
-    return () => {
-      return (
-        <>
-          {unref(getMenuFixed) && !unref(getIsMobile) && (
-            <div style={unref(getHiddenDomStyle)} class={{ hidden: !unref(showClassSideBarRef) }} />
-          )}
-          <Layout.Sider
-            ref={sideRef}
-            breakpoint="lg"
-            collapsible
-            class={unref(getSiderClass)}
-            width={unref(getMenuWidth)}
-            collapsed={unref(getIsMobile) ? false : unref(getCollapsed)}
-            collapsedWidth={unref(getCollapsedWidth)}
-            theme={unref(getMenuTheme)}
-            onCollapse={onCollapseChange}
-            onBreakpoint={onBreakpointChange}
-            {...unref(getTriggerAttr)}
-          >
-            {{
-              ...unref(getTriggerSlot),
-              default: () => renderDefault(),
-            }}
-          </Layout.Sider>
-        </>
-      );
+      return {
+        prefixCls,
+        sideRef,
+        dragBarRef,
+        getIsMobile,
+        getHiddenDomStyle,
+        getSiderClass,
+        getTriggerAttr,
+        getCollapsedWidth,
+        getMenuFixed,
+        showClassSideBarRef,
+        getMenuWidth,
+        getCollapsed,
+        getMenuTheme,
+        onBreakpointChange,
+        getMode,
+        getSplitType,
+        onCollapseChange,
+        getShowTrigger,
       };
     },
-});
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+</style>

src/layouts/default/sider/index.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
 
-  import Sider from './LayoutSider';
+  import Sider from './LayoutSider.vue';
   import { Drawer } from 'ant-design-vue';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

src/layouts/default/sider/useLayoutSider.tsx → src/layouts/default/sider/useLayoutSider.ts

 import type { Ref } from 'vue';
 
 import { computed, unref, onMounted, nextTick, ref } from 'vue';
-import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
 
 import { TriggerEnum } from '/@/enums/menuEnum';
 
@@ -45,7 +44,7 @@ export function useSiderEvent() {
 export function useTrigger(getIsMobile: Ref<boolean>) {
   const { getTrigger, getSplit } = useMenuSetting();
 
-  const showTrigger = computed(() => {
+  const getShowTrigger = computed(() => {
     const trigger = unref(getTrigger);
 
     return (
@@ -56,7 +55,7 @@ export function useTrigger(getIsMobile: Ref<boolean>) {
   });
 
   const getTriggerAttr = computed(() => {
-    if (unref(showTrigger)) {
+    if (unref(getShowTrigger)) {
       return {};
     }
     return {
@@ -64,16 +63,7 @@ export function useTrigger(getIsMobile: Ref<boolean>) {
     };
   });
 
-  const getTriggerSlot = computed(() => {
-    if (unref(showTrigger)) {
-      return {
-        trigger: () => <LayoutTrigger />,
-      };
-    }
-    return {};
-  });
-
-  return { getTriggerAttr, getTriggerSlot };
+  return { getTriggerAttr, getShowTrigger };
 }
 
 /**