fix: menu trigger

examples/package.json

@@ -19,7 +19,6 @@
     "@ant-design/icons": "^4.0.0-alpha.11",
     "ant-design-vue": "^1.4.8",
     "core-js": "^3.1.2",
-    "vue": "^2.6.10",
     "vue-i18n": "^8.15.0",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.0.6",

examples/src/components/SelectLang/index.jsx

@@ -25,7 +25,7 @@ const SelectLang = {
       this.setLang(key)
     }
     const langMenu = (
-      <Menu class={'menu'} selectedKeys={[this.currentLang]} onClick={changeLang}>
+      <Menu class={['menu', 'drop-down']} selectedKeys={[this.currentLang]} onClick={changeLang}>
         {locales.map(locale => (
           <Menu.Item key={locale}>
             <span role="img" aria-label={languageLabels[locale]}>

examples/src/components/SelectLang/index.less

@@ -15,10 +15,6 @@
     }
   }
 
-  .anticon {
-    margin-right: 8px;
-  }
-
   &.select-lang {
     .ant-dropdown-menu-item {
       min-width: 120px;

examples/src/layouts/BasicLayout.jsx

@@ -37,8 +37,12 @@ const Account = {
 }
 
 const rightContentRender = (h, props) => {
+  const cls = {
+    'ant-pro-global-header-index-right': true,
+    [`ant-pro-global-header-index-${props.theme}`]: true
+  }
   return (
-    <div class="ant-pro-global-header-index-right">
+    <div class={cls}>
       <Account class={'ant-pro-global-header-index-action'} />
       <SelectLang class={'ant-pro-global-header-index-action'} />
     </div>
@@ -66,7 +70,9 @@ export default {
       // 布局类型
       layout: 'sidemenu', // 'sidemenu', 'topmenu'
       // 定宽: true / 流式: false
-      contentWidth: true
+      contentWidth: true,
+      // 主题
+      theme: 'dark'
     }
   },
   render (h) {
@@ -74,7 +80,8 @@ export default {
       collapsed,
       contentWidth,
       autoHideHeader,
-      layout
+      layout,
+      theme
     } = this
 
     const handleMediaQuery = (val) => {
@@ -95,6 +102,7 @@ export default {
         handleCollapse,
         layout,
         contentWidth,
+        theme,
         rightContentRender,
         footerRender,
         i18nRender,

examples/src/layouts/BasicLayout.less

 @import "~ant-design-vue/es/style/themes/default";
 
 .ant-pro-global-header-index-right {
+    &.ant-pro-global-header-index-dark {
+        .ant-pro-global-header-index-action {
+            color: hsla(0,0%,100%,.85);
+            &:hover {
+                background: #1890ff;
+            }
+        }
+    }
     .account {
-
         .antd-pro-global-header-index-avatar {
             margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
             margin-right: 8px;
@@ -21,3 +28,4 @@
         }
     }
 }
+

src/BasicLayout.jsx

@@ -83,6 +83,7 @@ const BasicLayout = {
       layout,
       logo,
       contentWidth,
+      theme,
       collapsed,
       // eslint-disable-next-line
       collapsedButtonRender, autoHideHeader,
@@ -100,35 +101,17 @@ const BasicLayout = {
               <SiderMenuWrapper
                 { ...{ props: props } }
                 menus={menus}
-                theme={'dark'}
                 mode={'inline'}
                 logo={logo}
-                isMobile={false}
                 collapsed={collapsed}
                 onCollapse={handleCollapse}
                 handleCollapse={handleCollapse}
-                title='Ant Design Pro'
               />
             )}
             <Layout class={[layout]} style={{ paddingLeft: '0', minHeight: '100vh' }}>
-              {/* <HeaderView
-                menus={menus}
-                contentWidth={contentWidth}
-                layout={layout}
-                theme={'dark'}
-                mode={'horizontal'}
-                logo={LogoSvg}
-                collapsed={collapsed}
-                handleCollapse={handleCollapse}
-                collapsedButtonRender={collapsedButtonRender}
-                autoHideHeader={autoHideHeader}
-                headerRender={headerRender}
-                title='Ant Design Pro' /> */}
               {headerRender(h, {
                 ...props,
-                theme: 'dark',
                 mode: 'horizontal',
-                title: 'Ant Design Pro'
               })}
               <Layout.Content style={{ margin: '24px 16px', padding: '24px', minHeight: '280px' }}>
                 <GridContent contentWidth={contentWidth}>

src/Header.jsx

@@ -51,7 +51,8 @@ const renderContent = (h, props) => {
   const maxWidth = 1200 - 280 - 120
   const contentWidth = props.contentWidth
   const baseCls = 'ant-pro-top-nav-header'
-  const { logo, title, theme, headerRender } = props
+  const { logo, title, theme, headerRender, rightContentRender } = props
+  const rightContentProps = { theme }
   let defaultDom = <GlobalHeader {...{ props: props }} />
   if (isTop && !isMobile) {
     defaultDom = (
@@ -65,6 +66,7 @@ const renderContent = (h, props) => {
           <div class={`${baseCls}-menu`} style={{ maxWidth: `${maxWidth}px`, flex: 1 }}>
             <RouteMenu {...{ props: props }} />
           </div>
+          {rightContentRender(h, rightContentProps)}
         </div>
       </div>
     )

src/Header.less

@@ -157,3 +157,14 @@
     }
   }
 }
+
+.drop-down {
+  &.menu {
+    .anticon {
+      margin-right: 8px;
+    }
+    .ant-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+}