mooho-base-admin-plus 0.1.0

package/src/layouts/basic-layout/i18n.js

@@ -0,0 +1,50 @@
+// 默认布局使用的多语言
+
+export default {
+  'zh-CN': {
+    basicLayout: {
+      search: {
+        placeholder: '搜索...',
+        cancel: '取消'
+      },
+      user: {
+        center: '个人中心',
+        setting: '设置',
+        logOut: '退出登录'
+      },
+      logout: {
+        confirmTitle: '退出登录确认',
+        confirmContent: '您确定退出登录当前账户吗？打开的标签页和个人设置将会保存。'
+      },
+      tabs: {
+        left: '关闭左侧',
+        right: '关闭右侧',
+        other: '关闭其它',
+        all: '全部关闭'
+      }
+    }
+  },
+  'en-US': {
+    basicLayout: {
+      search: {
+        placeholder: 'Search...',
+        cancel: 'Cancel'
+      },
+      user: {
+        center: 'My home',
+        setting: 'Setting',
+        logOut: 'Log out'
+      },
+      logout: {
+        confirmTitle: 'Logout confirmation',
+        confirmContent: 'Are you sure you are logged out of your current account? Open tabs and personal settings will be saved.'
+      },
+      tabs: {
+        left: 'Close left',
+        right: 'Close right',
+        other: 'Close other',
+        all: 'Close all'
+      }
+    }
+  }
+};

package/src/layouts/basic-layout/index.vue

@@ -0,0 +1,280 @@
+<template>
+  <Layout class="i-layout">
+    <Sider v-if="!isMobile && !hideSider" class="i-layout-sider" :class="siderClasses" :width="menuSideWidth">
+      <i-menu-side :hide-logo="isHeaderStick && headerFix && showHeader" />
+    </Sider>
+    <Layout class="i-layout-inside" :class="insideClasses">
+      <transition name="fade-quick">
+        <Header class="i-layout-header" :class="headerClasses" :style="headerStyle" v-show="showHeader" v-resize="handleHeaderWidthChange">
+          <i-header-logo v-if="isMobile && showMobileLogo" />
+          <i-header-logo v-if="!isMobile && isHeaderStick && headerFix" />
+          <i-header-collapse v-if="(isMobile || showSiderCollapse) && !hideSider" @on-toggle-drawer="handleToggleDrawer" />
+          <i-header-reload v-if="!isMobile && showReload" @on-reload="handleReload" />
+          <i-menu-head v-if="headerMenu && !isMobile" ref="menuHead" />
+          <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
+          <i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
+          <div class="i-layout-header-right">
+            <slot name="header" />
+            <i-header-search v-if="(showSearch && isMobile) || (showSearch && (headerMenu || showBreadcrumb))" />
+            <i-menu-head v-if="headerMenu && isMobile" />
+            <i-header-log v-if="isDesktop && showLog" />
+            <i-header-fullscreen v-if="isDesktop && showFullscreen" />
+            <i-header-notice v-if="showNotice" />
+            <i-header-user />
+            <i-header-i18n v-if="showI18n" />
+            <i-header-setting v-if="enableSetting && !isMobile" />
+          </div>
+        </Header>
+      </transition>
+      <Content class="i-layout-content" :class="contentClasses">
+        <transition name="fade-quick">
+          <i-tabs v-if="tabs" v-show="showHeader" @on-reload="handleReload" />
+        </transition>
+        <div class="i-layout-content-main">
+          <router-view #default="{ Component }">
+            <keep-alive :include="keepAlive">
+              <component :is="Component" v-if="loadRouter" />
+            </keep-alive>
+          </router-view>
+        </div>
+      </Content>
+      <i-copyright />
+    </Layout>
+    <div v-if="isMobile && !hideSider">
+      <Drawer v-model="showDrawer" placement="left" :closable="false" :class-name="drawerClasses">
+        <i-menu-side />
+      </Drawer>
+    </div>
+    <i-water-mark />
+  </Layout>
+</template>
+<script>
+  import { nextTick } from 'vue';
+  import { mapState, mapGetters, mapMutations } from 'vuex';
+
+  import iMenuHead from './menu-head';
+  import iMenuSide from './menu-side';
+  import iHeaderLogo from './header-logo';
+  import iHeaderCollapse from './header-collapse';
+  import iHeaderReload from './header-reload';
+  import iHeaderBreadcrumb from './header-breadcrumb';
+  import iHeaderSearch from './header-search';
+  import iHeaderLog from './header-log';
+  import iHeaderFullscreen from './header-fullscreen';
+  import iHeaderNotice from './header-notice';
+  import iHeaderUser from './header-user';
+  import iHeaderI18n from './header-i18n';
+  import iHeaderSetting from './header-setting';
+  import iTabs from './tabs';
+  import iWaterMark from './water-mark';
+  import iCopyright from '../../components/copyright';
+
+  import Setting from '../../setting';
+
+  import { requestAnimation } from '../../libs/util';
+
+  export default {
+    name: 'BasicLayout',
+    components: {
+      iMenuHead,
+      iMenuSide,
+      iCopyright,
+      iHeaderLogo,
+      iHeaderCollapse,
+      iHeaderReload,
+      iHeaderBreadcrumb,
+      iHeaderSearch,
+      iHeaderUser,
+      iHeaderI18n,
+      iHeaderLog,
+      iHeaderFullscreen,
+      iHeaderSetting,
+      iHeaderNotice,
+      iTabs,
+      iWaterMark
+    },
+    data() {
+      return {
+        showDrawer: false,
+        ticking: false,
+        headerVisible: true,
+        oldScrollTop: 0,
+        isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动
+        loadRouter: true
+      };
+    },
+    computed: {
+      ...mapState('admin/layout', [
+        'siderTheme',
+        'headerTheme',
+        'headerStick',
+        'tabs',
+        'tabsFix',
+        'siderFix',
+        'headerFix',
+        'headerHide',
+        'headerMenu',
+        'isMobile',
+        'isTablet',
+        'isDesktop',
+        'menuCollapse',
+        'showMobileLogo',
+        'showSearch',
+        'showNotice',
+        'showFullscreen',
+        'showSiderCollapse',
+        'showBreadcrumb',
+        'showLog',
+        'showI18n',
+        'showReload',
+        'enableSetting'
+      ]),
+      ...mapState('admin/page', ['keepAlive']),
+      ...mapGetters('admin/menu', ['hideSider']),
+      // 如果开启 headerMenu，且当前 header 的 hideSider 为 true，则将顶部按 headerStick 处理
+      // 这时，即使没有开启 headerStick，仍然按开启处理
+      isHeaderStick() {
+        let state = this.headerStick;
+        if (this.hideSider) state = true;
+        return state;
+      },
+      showHeader() {
+        let visible = true;
+        if (this.headerFix && this.headerHide && !this.headerVisible) visible = false;
+        return visible;
+      },
+      headerClasses() {
+        return [
+          `i-layout-header-color-${this.headerTheme}`,
+          {
+            'i-layout-header-fix': this.headerFix,
+            'i-layout-header-fix-collapse': this.headerFix && this.menuCollapse,
+            'i-layout-header-mobile': this.isMobile,
+            'i-layout-header-stick': this.isHeaderStick && !this.isMobile,
+            'i-layout-header-with-menu': this.headerMenu,
+            'i-layout-header-with-hide-sider': this.hideSider || this.isDelayHideSider
+          }
+        ];
+      },
+      headerStyle() {
+        const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? Setting.menuSideCollapseWidth : Setting.menuSideWidth;
+        return this.isMobile || !this.headerFix
+          ? {}
+          : {
+              width: `calc(100% - ${menuWidth}px)`
+            };
+      },
+      siderClasses() {
+        return {
+          'i-layout-sider-fix': this.siderFix,
+          'i-layout-sider-dark': this.siderTheme === 'dark'
+        };
+      },
+      contentClasses() {
+        return {
+          'i-layout-content-fix-with-header': this.headerFix,
+          'i-layout-content-with-tabs': this.tabs,
+          'i-layout-content-with-tabs-fix': this.tabs && this.tabsFix
+        };
+      },
+      insideClasses() {
+        return {
+          'i-layout-inside-fix-with-sider': this.siderFix,
+          'i-layout-inside-fix-with-sider-collapse': this.siderFix && this.menuCollapse,
+          'i-layout-inside-with-hide-sider': this.hideSider,
+          'i-layout-inside-mobile': this.isMobile
+        };
+      },
+      drawerClasses() {
+        let className = 'i-layout-drawer';
+        if (this.siderTheme === 'dark') className += ' i-layout-drawer-dark';
+        return className;
+      },
+      menuSideWidth() {
+        return this.menuCollapse ? Setting.menuSideCollapseWidth : Setting.menuSideWidth;
+      }
+    },
+    watch: {
+      hideSider() {
+        this.isDelayHideSider = true;
+        setTimeout(() => {
+          this.isDelayHideSider = false;
+        }, 0);
+      },
+      $route(to, from) {
+        if (to.name === from.name) {
+          // 相同路由，不同参数，跳转时，重载页面
+          if (Setting.sameRouteForceUpdate) {
+            this.handleReload();
+          }
+        }
+      }
+    },
+    methods: {
+      ...mapMutations('admin/layout', ['updateMenuCollapse']),
+      ...mapMutations('admin/page', ['keepAlivePush', 'keepAliveRemove']),
+      handleToggleDrawer(state) {
+        if (typeof state === 'boolean') {
+          this.showDrawer = state;
+        } else {
+          this.showDrawer = !this.showDrawer;
+        }
+      },
+      handleScroll() {
+        if (!this.headerHide) return;
+
+        const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
+
+        if (!this.ticking) {
+          this.ticking = true;
+          requestAnimation(() => {
+            if (this.oldScrollTop > scrollTop) {
+              this.headerVisible = true;
+            } else if (scrollTop > 300 && this.headerVisible) {
+              this.headerVisible = false;
+            } else if (scrollTop < 300 && !this.headerVisible) {
+              this.headerVisible = true;
+            }
+            this.oldScrollTop = scrollTop;
+            this.ticking = false;
+          });
+        }
+      },
+      handleHeaderWidthChange() {
+        const $breadcrumb = this.$refs.breadcrumb;
+        if ($breadcrumb) {
+          $breadcrumb.handleGetWidth();
+          $breadcrumb.handleCheckWidth();
+        }
+        const $menuHead = this.$refs.menuHead;
+        if ($menuHead) {
+          // todo $menuHead.handleGetMenuHeight();
+        }
+      },
+      handleReload() {
+        // 针对缓存的页面也生效
+        const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1;
+        const pageName = this.$route.name;
+        if (isCurrentPageCache) {
+          this.keepAliveRemove(pageName);
+        }
+        this.loadRouter = false;
+        nextTick(() => {
+          this.loadRouter = true;
+          if (isCurrentPageCache) {
+            this.keepAlivePush(pageName);
+          }
+        });
+      }
+    },
+    mounted() {
+      document.addEventListener('scroll', this.handleScroll, { passive: true });
+    },
+    beforeUnmount() {
+      document.removeEventListener('scroll', this.handleScroll);
+    },
+    created() {
+      if (this.isTablet && this.showSiderCollapse) this.updateMenuCollapse(true);
+    }
+  };
+</script>

package/src/layouts/basic-layout/menu-head/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="i-layout-menu-head" :class="{ 'i-layout-menu-head-mobile': isMobile }">
+    <Menu mode="horizontal" :active-name="headerName" v-if="!isMobile && !isMenuLimit" ref="menu">
+      <template v-for="(item, index) in filterHeader" :key="item.path">
+        <Submenu v-if="item.children && item.children.length" :name="item.name" :key="index">
+          <template #title>
+            <i-menu-head-title :item="item" badge />
+          </template>
+          <MenuItem
+            v-for="subitem in item.children"
+            :to="subitem.path"
+            :replace="subitem.replace"
+            :target="subitem.target"
+            :name="item.name"
+            :key="subitem.path"
+            @click="handleClick(subitem.path, 'header')"
+          >
+            <i-menu-head-title :item="subitem" badge />
+          </MenuItem>
+        </Submenu>
+        <MenuItem v-else :to="item.path" :replace="item.replace" :target="item.target" :name="item.name" :key="item.path" @click="handleClick(item.path, 'header')">
+          <i-menu-head-title :item="item" badge />
+        </MenuItem>
+      </template>
+    </Menu>
+    <div class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in i-layout-header-trigger-no-height" v-else>
+      <Dropdown trigger="click" :class="{ 'i-layout-menu-head-mobile-drop': isMobile }">
+        <Icon type="ios-apps" />
+        <template #list>
+          <DropdownMenu>
+            <template v-for="(item, index) in filterHeader">
+              <template v-if="item.children && item.children.length">
+                <DropdownItem class="i-layout-menu-head-mobile-subtitle" disabled :key="index">
+                  <i-menu-head-title :item="item" badge />
+                </DropdownItem>
+                <i-link
+                  v-for="subitem in item.children"
+                  :to="subitem.path"
+                  :replace="subitem.replace"
+                  :target="subitem.target"
+                  :key="subitem.path"
+                  @click="handleClick(subitem.path, 'header')"
+                >
+                  <DropdownItem>
+                    <i-menu-head-title :item="subitem" badge />
+                  </DropdownItem>
+                </i-link>
+              </template>
+              <i-link v-else :to="item.path" :replace="item.replace" :target="item.target" :key="item.path" @click="handleClick(item.path, 'header')">
+                <DropdownItem>
+                  <i-menu-head-title :item="item" badge />
+                </DropdownItem>
+              </i-link>
+            </template>
+          </DropdownMenu>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+<script>
+  import iMenuHeadTitle from './title';
+  import { mapState, mapGetters } from 'vuex';
+  import { getStyle } from 'view-ui-plus/src/utils/assist';
+  import clickItem from '../mixins/click-item';
+  import Setting from '../../../setting';
+  // import { on, off } from 'view-ui-plus/src/utils/dom';
+  // import { throttle } from 'lodash';
+
+  export default {
+    name: 'iMenuHead',
+    components: { iMenuHeadTitle },
+    mixins: [clickItem],
+    computed: {
+      ...mapState('admin/layout', ['isMobile']),
+      ...mapState('admin/menu', ['headerName']),
+      ...mapGetters('admin/menu', ['filterHeader'])
+    },
+    data() {
+      return {
+        handleResize: () => {},
+        isMenuLimit: false,
+        menuMaxWidth: 0 // 达到这个值后，menu 就显示不下了
+      };
+    },
+    methods: {
+      handleGetMenuHeight() {
+        const menuWidth = parseInt(getStyle(this.$el, 'width'));
+        const $menu = this.$refs.menu;
+        if ($menu) {
+          const menuHeight = parseInt(getStyle(this.$refs.menu.$el, 'height'));
+          if (menuHeight > Setting.headerHeight) {
+            if (!this.isMenuLimit) {
+              this.menuMaxWidth = menuWidth;
+            }
+            this.isMenuLimit = true;
+          }
+        } else if (menuWidth >= this.menuMaxWidth) {
+          this.isMenuLimit = false;
+        }
+      }
+    },
+    watch: {
+      filterHeader() {
+        this.handleGetMenuHeight();
+      },
+      isMobile() {
+        this.handleGetMenuHeight();
+      }
+    },
+    mounted() {
+      // this.handleResize = throttle(this.handleGetMenuHeight, 100, { leading: false });
+      // on(window, 'resize', this.handleResize);
+      this.handleGetMenuHeight();
+    },
+    beforeUnmount() {
+      // off(window, 'resize', this.handleResize);
+    }
+  };
+</script>

package/src/layouts/basic-layout/menu-head/title.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="i-layout-menu-head-title">
+    <span class="i-layout-menu-head-title-icon" v-if="(item.icon || item.custom || item.img) && !hideIcon">
+      <Icon :type="item.icon" v-if="item.icon" />
+      <Icon :custom="item.custom" v-else-if="item.custom" />
+      <img :src="item.img" v-else-if="item.img" />
+    </span>
+    <span class="i-layout-menu-head-title-text">{{ tTitle(item.title) }}</span>
+    <Badge class="i-layout-menu-head-badge" v-if="badge && badgeData" v-bind="badgeData" />
+  </div>
+</template>
+<script>
+  /**
+   * 该组件除了 Menu，也被 Breadcrumb 使用过
+   * */
+  import { mapState } from 'vuex';
+  import tTitle from '../mixins/translate-title';
+
+  export default {
+    name: 'iMenuHeadTitle',
+    mixins: [tTitle],
+    props: {
+      item: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      hideIcon: {
+        type: Boolean,
+        default: false
+      },
+      badge: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      ...mapState('admin/menu', ['headerMenuBadge']),
+      badgeData() {
+        let data = null;
+        const headerMenuBadge = this.headerMenuBadge.find(item => item.path === this.item.path);
+        if (headerMenuBadge) data = headerMenuBadge;
+        return data;
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/menu-side/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div class="i-layout-sider-logo" :class="{ 'i-layout-sider-logo-dark': siderTheme === 'dark' }">
+      <transition name="fade-quick">
+        <i-link to="/" v-show="!hideLogo">
+          <img :src="rootPath + 'images/logo-small.png'" v-if="menuCollapse" />
+          <img :src="rootPath + 'images/logo.png'" v-else-if="siderTheme === 'light'" />
+          <img :src="rootPath + 'images/logo-dark.png'" v-else />
+        </i-link>
+      </transition>
+    </div>
+    <Menu
+      ref="menu"
+      class="i-layout-menu-side i-scrollbar-hide"
+      :class="{ 'i-layout-menu-side-collapse': menuCollapse }"
+      :theme="siderTheme"
+      :accordion="menuAccordion"
+      :active-name="activePath"
+      :open-names="openNames"
+      width="auto"
+    >
+      <template v-for="(item, index) in filterSider">
+        <template v-if="!menuCollapse">
+          <i-menu-side-item v-if="item.children === undefined || !item.children.length" :menu="item" :key="index" />
+          <i-menu-side-submenu v-else :menu="item" :key="'submenu' + index" />
+        </template>
+        <template v-else>
+          <Tooltip :content="tTitle(item.title)" placement="right" v-if="item.children === undefined || !item.children.length" :key="index" :theme="siderTheme">
+            <i-menu-side-item class="i-layout-menu-side-collapse-top-item" :menu="item" hide-title />
+          </Tooltip>
+          <i-menu-side-collapse v-else :menu="item" top-level :key="'collapse' + index" />
+        </template>
+      </template>
+    </Menu>
+  </div>
+</template>
+<script>
+  import { nextTick } from 'vue';
+  import { mapState, mapGetters } from 'vuex';
+  import Setting from '../../../setting';
+
+  import iMenuSideItem from './menu-item';
+  import iMenuSideSubmenu from './submenu';
+  import iMenuSideCollapse from './menu-collapse';
+  import tTitle from '../mixins/translate-title';
+
+  // 元素是否在可视区域
+  function isElementInViewport(el) {
+    let rect = el.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  export default {
+    name: 'iMenuSide',
+    mixins: [tTitle],
+    components: { iMenuSideItem, iMenuSideSubmenu, iMenuSideCollapse },
+    props: {
+      hideLogo: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      ...mapState('admin/layout', ['siderTheme', 'menuAccordion', 'menuCollapse']),
+      ...mapState('admin/menu', ['activePath', 'openNames']),
+      ...mapGetters('admin/menu', ['filterSider']),
+      rootPath() {
+        return Setting.rootPath;
+      }
+    },
+    watch: {
+      $route: {
+        handler() {
+          this.handleUpdateMenuState();
+        },
+        immediate: true
+      },
+      // 在展开/收起侧边菜单栏时，更新一次 menu 的状态
+      menuCollapse() {
+        this.handleUpdateMenuState();
+      }
+    },
+    methods: {
+      handleUpdateMenuState() {
+        nextTick(() => {
+          if (this.$refs.menu) {
+            this.$refs.menu.updateActiveName();
+            if (this.menuAccordion) this.$refs.menu.updateOpened();
+            // 聚焦当前项
+            nextTick(() => {
+              const $activeMenu = document.getElementsByClassName('ivu-menu-item ivu-menu-item-active ivu-menu-item-selected');
+              if ($activeMenu && $activeMenu.length && !isElementInViewport($activeMenu[0])) {
+                const activeMenuTop = $activeMenu[0].getBoundingClientRect().top - Setting.headerHeight;
+                const $menu = this.$refs.menu.$el;
+                setTimeout(() => {
+                  this.$ScrollTop($menu, {
+                    to: activeMenuTop,
+                    time: 0
+                  });
+                }, 300);
+              }
+            });
+          }
+        });
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/menu-side/menu-collapse.vue

@@ -0,0 +1,76 @@
+<template>
+  <Dropdown :transfer="false" boundaries-element="viewport" placement="right-start" :class="dropdownClasses">
+    <li :class="menuItemClasses" v-if="topLevel">
+      <i-menu-side-title :menu="menu" hide-title collapse />
+    </li>
+    <DropdownItem v-else>
+      <i-menu-side-title :menu="menu" :selected="openNames.indexOf(menu.path) >= 0" collapse />
+      <Icon type="ios-arrow-forward" class="i-layout-menu-side-arrow" />
+    </DropdownItem>
+    <template #list>
+      <DropdownMenu class="i-layout-menu-side-collapse-dropdown-menu" :style="dropdownMenuMaxHeight">
+        <div class="i-layout-menu-side-collapse-title" v-if="showCollapseMenuTitle">
+          <i-menu-side-title :menu="menu" collapse />
+        </div>
+        <template v-for="(item, index) in menu.children">
+          <i-link :to="item.path" :target="item.target" v-if="item.children === undefined || !item.children.length" :key="index" @click="handleClick(item.path)">
+            <DropdownItem :divided="item.divided" :class="{ 'i-layout-menu-side-collapse-item-selected': item.path === activePath }">
+              <i-menu-side-title :menu="item" collapse />
+            </DropdownItem>
+          </i-link>
+          <i-menu-side-collapse v-else :menu="item" :key="'collapse-' + index" />
+        </template>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+<script>
+  import iMenuSideTitle from './menu-title';
+  import clickItem from '../mixins/click-item';
+  import Setting from '../../../setting';
+
+  import { mapState } from 'vuex';
+
+  export default {
+    name: 'iMenuSideCollapse',
+    components: { iMenuSideTitle },
+    mixins: [clickItem],
+    props: {
+      menu: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      // 是否是第一级，区分在于左侧和展开侧
+      topLevel: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      ...mapState('admin/layout', ['siderTheme', 'showCollapseMenuTitle', 'bodyHeight']),
+      ...mapState('admin/menu', ['activePath', 'openNames']),
+      dropdownClasses() {
+        return {
+          'i-layout-menu-side-collapse-top': this.topLevel,
+          'i-layout-menu-side-collapse-dark': this.siderTheme === 'dark'
+        };
+      },
+      menuItemClasses() {
+        return [
+          'ivu-menu-item i-layout-menu-side-collapse-top-item',
+          {
+            'ivu-menu-item-selected ivu-menu-item-active': this.openNames.indexOf(this.menu.path) >= 0 // -active 在高亮时，有背景
+          }
+        ];
+      },
+      // 菜单过多时，限高滚动
+      dropdownMenuMaxHeight() {
+        return {
+          'max-height': `calc(${this.bodyHeight}px - ${Setting.headerHeight}px - 32px)`
+        };
+      }
+    }
+  };
+</script>