refactor: refactor route

vben

2020-12-03 c303ec1a23c4b1fbad4fbda9007af2147dc327e2

 src/components/Menu/src/BasicMenu.tsx

@@ -1,19 +1,31 @@
import './index.less';

import type { MenuState } from './types';
import type { Menu as MenuType } from '/@/router/types';

import { computed, defineComponent, unref, reactive, watch, onMounted, ref, toRefs } from 'vue';
import {
  computed,
  defineComponent,
  unref,
  reactive,
  watch,
  onMounted,
  ref,
  toRefs,
  ComputedRef,
} from 'vue';
import { Menu } from 'ant-design-vue';
import SearchInput from './SearchInput.vue';
import MenuContent from './MenuContent';
// import { ScrollContainer } from '/@/components/Container';

import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
import { ThemeEnum } from '/@/enums/appEnum';

import { menuStore } from '/@/store/modules/menu';
import { appStore } from '/@/store/modules/app';

import { useSearchInput } from './useSearchInput';
import { useOpenKeys } from './useOpenKeys';
import { useSearchInput } from './hooks/useSearchInput';
import { useOpenKeys } from './hooks/useOpenKeys';
import { useRouter } from 'vue-router';

import { isFunction } from '/@/utils/is';
@@ -23,7 +35,8 @@
import { getCurrentParentPath } from '/@/router/menus';

import { basicProps } from './props';
import './index.less';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { REDIRECT_NAME } from '/@/router/constant';
export default defineComponent({
  name: 'BasicMenu',
  props: basicProps,
@@ -33,12 +46,14 @@
    const menuState = reactive<MenuState>({
      defaultSelectedKeys: [],
      mode: props.mode,
      theme: computed(() => props.theme),
      theme: computed(() => props.theme) as ComputedRef<ThemeEnum>,
      openKeys: [],
      searchValue: '',
      selectedKeys: [],
      collapsedOpenKeys: [],
    });

    const { getCollapsed } = useMenuSetting();
    const { currentRoute } = useRouter();

    const { items, flatItems, isAppMenu, mode, accordion } = toRefs(props);
@@ -61,7 +76,7 @@

    const getOpenKeys = computed(() => {
      if (props.isAppMenu) {
        return menuStore.getCollapsedState ? menuState.collapsedOpenKeys : menuState.openKeys;
        return unref(getCollapsed) ? menuState.collapsedOpenKeys : menuState.openKeys;
      }
      return menuState.openKeys;
    });
@@ -77,7 +92,7 @@
        offset += 46;
      }
      return {
        height: `calc(100% - ${offset - 12}px)`,
        height: `calc(100% - ${offset}px)`,
        position: 'relative',
        overflowY: 'auto',
      };
@@ -95,20 +110,20 @@
        cls.push('basic-menu__sidebar-hor');
      }

      if (!props.isTop && props.isAppMenu && appStore.getProjectConfig.menuSetting.split) {
      if (!props.isHorizontal && props.isAppMenu && appStore.getProjectConfig.menuSetting.split) {
        cls.push('basic-menu__second');
      }
      return cls;
    });

    const showTitle = computed(() => props.collapsedShowTitle && menuStore.getCollapsedState);
    const showTitle = computed(() => props.collapsedShowTitle && unref(getCollapsed));

    watch(
      () => currentRoute.value.name,
      (name: string) => {
        if (name === 'Redirect') return;
        if (name === REDIRECT_NAME) return;
        handleMenuChange();
        props.isTop && appStore.getProjectConfig.menuSetting.split && getParentPath();
        props.isHorizontal && appStore.getProjectConfig.menuSetting.split && getParentPath();
      }
    );

@@ -180,7 +195,7 @@
                <MenuContent
                  item={menu}
                  level={index}
                  isTop={props.isTop}
                  isHorizontal={props.isHorizontal}
                  showTitle={unref(showTitle)}
                  searchValue={menuState.searchValue}
                />,
@@ -196,7 +211,7 @@
                  showTitle={unref(showTitle)}
                  item={menu}
                  level={index}
                  isTop={props.isTop}
                  isHorizontal={props.isHorizontal}
                  searchValue={menuState.searchValue}
                />,
              ],
@@ -214,7 +229,7 @@
      const inlineCollapsedObj = isInline
        ? props.isAppMenu
          ? {
              inlineCollapsed: menuStore.getCollapsedState,
              inlineCollapsed: unref(getCollapsed),
            }
          : { inlineCollapsed: props.inlineCollapsed }
        : {};
@@ -246,7 +261,6 @@
    });

    return () => {
      const { getCollapsedState } = menuStore;
      const { mode } = props;
      return mode === MenuModeEnum.HORIZONTAL ? (
        renderMenu()
@@ -258,9 +272,12 @@
            theme={props.theme as ThemeEnum}
            onChange={handleInputChange}
            onClick={handleInputClick}
            collapsed={getCollapsedState}
            collapsed={unref(getCollapsed)}
          />

          {/* <section style={unref(getMenuWrapStyle)}> */}
          <section style={unref(getMenuWrapStyle)} class="basic-menu__content">
            {/* <ScrollContainer>{() => renderMenu()}</ScrollContainer> */}
            {renderMenu()}
          </section>
        </section>