fix: postcss not found

examples/package.json

@@ -14,13 +14,12 @@
     "type": "git",
     "url": "https://github.com/vueComponent/pro-layout"
   },
-  "license":"MIT",
+  "license": "MIT",
   "dependencies": {
-    "ant-design-vue": "^1.4.4",
+    "@ant-design/icons": "^4.0.0-alpha.11",
+    "ant-design-vue": "^1.4.8",
     "core-js": "^3.1.2",
-    "umi-request": "^1.2.8",
     "vue": "^2.6.10",
-    "vue-container-query": "^0.1.0",
     "vue-i18n": "^8.15.0",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.0.6",

examples/src/components/CitySelect/CitySelect2.jsx

-import { Cascader } from 'ant-design-vue'
-import provinces from 'china-division/dist/provinces.json'
-import cities from 'china-division/dist/cities.json'
-import areas from 'china-division/dist/areas.json'
-
-areas.forEach(area => {
-  const matchCity = cities.filter(city => city.code === area.cityCode)[0]
-  if (matchCity) {
-    matchCity.children = matchCity.children || []
-    matchCity.children.push({
-      label: area.name,
-      value: area.code
-    })
-  }
-})
-
-cities.forEach(city => {
-  const matchProvince = provinces.filter(
-    province => province.code === city.provinceCode
-  )[0]
-  if (matchProvince) {
-    matchProvince.children = matchProvince.children || []
-    matchProvince.children.push({
-      label: city.name,
-      value: city.code,
-      children: city.children
-    })
-  }
-})
-
-const options = provinces.map(province => ({
-  label: province.name,
-  value: province.code,
-  children: province.children
-}))
-
-console.log(options)
-
-export default {
-  name: 'CitySelect2',
-  render () {
-    return (
-      <Cascader options={options} />
-    )
-  }
-}

examples/src/components/CitySelect/index.jsx

-import { Button, Radio, Select, Popover } from 'ant-design-vue'
-import './index.less'
-
-const filterProvinceList = [{ n: 'A', v: 'A' }, { n: 'F', v: 'F' }, { n: 'G', v: 'G' }, { n: 'H', v: 'H' }, { n: 'J', v: 'J' }, { n: 'L', v: 'L' }, { n: 'N', v: 'N' }, { n: 'Q', v: 'Q' }, { n: 'S', v: 'S' }, { n: 'T', v: 'T' }, { n: 'X', v: 'X' }, { n: 'Y', v: 'Y' }, { n: 'Z', v: 'Z' }, { n: '直辖市', v: '1' }, { n: '港澳', v: '2' }]
-const filterCityList = [{ n: 'A', v: 'A' }, { n: 'B', v: 'B' }, { n: 'C', v: 'C' }, { n: 'D', v: 'D' }, { n: 'E', v: 'E' }, { n: 'F', v: 'F' }, { n: 'G', v: 'G' }, { n: 'H', v: 'H' }, { n: 'I', v: 'I' }, { n: 'J', v: 'J' }, { n: 'K', v: 'K' }, { n: 'L', v: 'L' }, { n: 'N', v: 'N' }, { n: 'M', v: 'M' }, { n: 'O', v: 'O' }, { n: 'Q', v: 'Q' }, { n: 'P', v: 'P' }, { n: 'R', v: 'R' }, { n: 'S', v: 'S' }, { n: 'T', v: 'T' }, { n: 'U', v: 'U' }, { n: 'V', v: 'V' }, { n: 'W', v: 'W' }, { n: 'X', v: 'X' }, { n: 'Y', v: 'Y' }, { n: 'Z', v: 'Z' }]
-
-export default {
-  name: 'CitySelect',
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-pro-city-select'
-    },
-    defaultValue: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      byType: 'city'
-    }
-  },
-  methods: {
-    renderHeader () {
-      const handleChange = (e) => {
-        this.byType = e.target.value
-      }
-      const selectFilters = this.byType === 'city' ? filterCityList.map(item => <Button size={'small'}>{item.n}</Button>) : filterProvinceList.map(item => <Button size={'small'}>{item.n}</Button>)
-      return (
-        <div class={'city-select-header'}>
-          <Radio.Group size={'small'} value={this.byType} onChange={handleChange} style={{ marginRight: '16px' }}>
-            <Radio.Button value={'province'}>按省份</Radio.Button>
-            <Radio.Button value={'city'}>按城市</Radio.Button>
-          </Radio.Group>
-
-          <Select size={'small'} showSearch={true} placeholder={'输入城市名称搜索'} style={ { width: '200px' } }>
-            <Select.Option value={'xiamen'}>厦门</Select.Option>
-            <Select.Option value={'fuzhou'}>福州</Select.Option>
-          </Select>
-
-          <div class={'select-filters'}>
-            {selectFilters}
-          </div>
-        </div>
-      )
-    },
-    renderBody () {
-      return (
-        <div class={'city-select-body'}>
-
-        </div>
-      )
-    }
-  },
-  render () {
-    const classes = {
-      [`${this.prefixCls}`]: true
-    }
-    return (
-      <div class={classes}>
-        <Popover overlayStyle={{ width: '400px' }} placement={'topLeft'}>
-          <div slot="content">
-            {this.renderHeader()}
-            {this.renderBody()}
-          </div>
-          <Button type={'link'}>北京市</Button>
-        </Popover>
-      </div>
-    )
-  }
-}

examples/src/components/CitySelect/index.less

-@import "../index";
-
-@ant-pro-city-select-prefix             : @{ant-pro-prefix}-city-select;
-
-.city-select-header .select-filters {
-  margin-top: 8px;
-
-  button {
-    min-width: 26px;
-    min-height: 26px;
-    line-height: 26px;
-    margin-right: 4px;
-    margin-bottom: 4px;
-  }
-}
-
-.city-select-body {
-  margin-top: 16px;
-}
\ No newline at end of file

examples/src/components/SelectLang/index.less

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

examples/src/config/router.config.js

@@ -46,6 +46,68 @@ const asyncRouterMap = [
           icon: 'video-camera'
         },
         component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
+      },
+      {
+        path: '/page3',
+        name: 'page3',
+        meta: {
+          keepAlive: true,
+          title: 'menu.nav2',
+          icon: 'video-camera'
+        },
+        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
+      },
+      {
+        path: '/page4',
+        name: 'page4',
+        meta: {
+          keepAlive: true,
+          title: 'menu.nav2',
+          icon: 'video-camera'
+        },
+        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
+      },
+      {
+        path: '/page5',
+        name: 'page5',
+        meta: {
+          keepAlive: true,
+          title: 'menu.nav2',
+          icon: 'video-camera'
+        },
+        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
+      },
+      {
+        path: '/page6',
+        name: 'page6',
+        meta: {
+          keepAlive: true,
+          title: 'menu.nav2',
+          icon: 'video-camera'
+        },
+        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
+      },
+
+      {
+        path: '/page7',
+        name: 'page7',
+        meta: {
+          keepAlive: true,
+          title: 'menu.nav2',
+          icon: 'video-camera'
+        },
+        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
+      },
+
+      {
+        path: '/page8',
+        name: 'page8',
+        meta: {
+          keepAlive: true,
+          title: 'menu.nav2',
+          icon: 'video-camera'
+        },
+        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
       }
     ]
   }

examples/src/core/antd/icons.js

@@ -48,4 +48,10 @@ export {
 export {
   default as GlobalOutline
 } from '@ant-design/icons/lib/outline/GlobalOutline'
+export {
+  default as UserOutline
+} from '@ant-design/icons/lib/outline/UserOutline'
+export {
+  default as LogoutOutline
+} from '@ant-design/icons/lib/outline/LogoutOutline'
 /* Layout end */

examples/src/core/bootstrap.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import store from '../store'
 import defaultSettings from '@config/defaultSettings'
 import {
+  APP_LANGUAGE,
   TOGGLE_CONTENT_WIDTH,
   TOGGLE_FIXED_HEADER,
   TOGGLE_FIXED_SIDEBAR, TOGGLE_HIDE_HEADER,
@@ -19,4 +20,5 @@ export default function initializer () {
   store.commit(TOGGLE_HIDE_HEADER, Vue.ls.get(TOGGLE_HIDE_HEADER, defaultSettings.autoHideHeader))
   store.commit(TOGGLE_NAV_THEME, Vue.ls.get(TOGGLE_NAV_THEME, defaultSettings.navTheme))
   store.commit(TOGGLE_WEAK, Vue.ls.get(TOGGLE_WEAK, defaultSettings.colorWeak))
+  store.dispatch('setLang', Vue.ls.get(APP_LANGUAGE, 'en-US'))
 }

examples/src/layouts/BasicLayout.jsx

 import './BasicLayout.less'
 
-import { Avatar, Dropdown, Menu } from 'ant-design-vue'
+import { Avatar, Dropdown, Menu, Icon } from 'ant-design-vue'
 import { asyncRouterMap } from '../config/router.config.js'
 import { i18nRender } from '../locales'
 import ProLayout from '@ant-design-vue/pro-layout'
@@ -12,15 +12,16 @@ const Account = {
   name: 'Account',
   render () {
     const accountMenu = (
-      <Menu class="menu">
+      <Menu class="drop-down menu">
         <Menu.Item key="info">
-            个人信息
+          <Icon type={'user'} />个人信息
         </Menu.Item>
         <Menu.Item key="settings">
-            个人设置
+          <Icon type={'setting'} />个人设置
         </Menu.Item>
+        <Menu.Divider />
         <Menu.Item key="logout">
-            退出登录
+          <Icon type={'logout'} />退出登录
         </Menu.Item>
       </Menu>
     )
@@ -44,6 +45,14 @@ const rightContentRender = (h, props) => {
   )
 }
 
+const footerRender = (h, props) => {
+  return (
+    <div class={'footer custom-render'}>
+      <span>footer</span>
+    </div>
+  )
+}
+
 export default {
   name: 'BasicLayout',
   data () {
@@ -87,6 +96,7 @@ export default {
         layout,
         contentWidth,
         rightContentRender,
+        footerRender,
         i18nRender,
         logo: LogoSvg,
         title: defaultSettings.title

examples/src/layouts/BasicLayout.less

@@ -17,7 +17,7 @@
             margin-right: 8px;
         }
         .ant-dropdown-menu-item {
-            min-width: 160px;
+            min-width: 100px;
         }
     }
 }

examples/vue.config.js

@@ -45,9 +45,8 @@ const defaultConfig = {
   },
   chainWebpack: (config) => {
     config.resolve.alias
-      .set('@', resolve('./src'))
       .set('@config', resolve('./config'))
-      .set('@ant-design-vue/pro-layout', resolve('../es'))
+      .set('@ant-design-vue/pro-layout', resolve('../src'))
 
     // if `production` env require on cdn assets
     isProd && config.plugin('html').tap(args => {

postcss.config.js

+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

src/BasicLayout.jsx

@@ -29,6 +29,10 @@ export const BasicLayoutProps = {
   handleMediaQuery: {
     type: Function,
     default: () => undefined
+  },
+  footerRender: {
+    type: Function,
+    default: () => undefined
   }
 }
 
@@ -82,6 +86,7 @@ const BasicLayout = {
       collapsed,
       // eslint-disable-next-line
       collapsedButtonRender, autoHideHeader,
+      footerRender,
       mediaQuery,
       handleMediaQuery,
       handleCollapse
@@ -131,15 +136,19 @@ const BasicLayout = {
                 </GridContent>
               </Layout.Content>
               <Layout.Footer>
-                <GlobalFooter>
-                  <template slot="links">
-                    <a href="https://www.github.com/vueComponent/" target="_self">Github</a>
-                    <a href="https://www.github.com/sendya/" target="_self">@Sendya</a>
-                  </template>
-                  <template slot="copyright">
-                    <a href="https://github.com/vueComponent">vueComponent</a>
-                  </template>
-                </GlobalFooter>
+                { footerRender && (
+                  footerRender(h)
+                ) || (
+                  <GlobalFooter>
+                    <template slot="links">
+                      <a href="https://www.github.com/vueComponent/" target="_self">Github</a>
+                      <a href="https://www.github.com/sendya/" target="_self">@Sendya</a>
+                    </template>
+                    <template slot="copyright">
+                      <a href="https://github.com/vueComponent">vueComponent</a>
+                    </template>
+                  </GlobalFooter>
+                )}
               </Layout.Footer>
             </Layout>
           </Layout>

src/components/RouteMenu/Menu.jsx

 import { Menu, Icon } from 'ant-design-vue'
+const MenuItem = Menu.Item
+const SubMenu = Menu.SubMenu
+const ItemGroup = Menu.ItemGroup
 
 export const RouteMenuProps = {
   menus: {
@@ -38,13 +41,14 @@ const renderMenu = (h, item, i18nRender) => {
 
 const renderSubMenu = (h, item, i18nRender) => {
   return (
-    <Menu.SubMenu key={item.path}>
-      <span slot={'title'}>
+    <SubMenu key={item.path} title={(
+      <span>
         {renderIcon(h, item.meta.icon)}
         <span>{renderTitle(h, item.meta.title, i18nRender)}</span>
       </span>
+    )}>
       {!item.hideChildrenInMenu && item.children.map(cd => renderMenu(h, cd, i18nRender))}
-    </Menu.SubMenu>
+    </SubMenu>
   )
 }
 
@@ -63,12 +67,12 @@ const renderMenuItem = (h, item, i18nRender) => {
     })
   }
   return (
-    <Menu.Item key={item.path}>
+    <MenuItem key={item.path}>
       <CustomTag {...{ props, attrs }}>
         {renderIcon(h, meta.icon)}
-        <span>{renderTitle(h, meta.title, i18nRender)}</span>
+        {renderTitle(h, meta.title, i18nRender)}
       </CustomTag>
-    </Menu.Item>
+    </MenuItem>
   )
 }
 
@@ -132,7 +136,7 @@ const RouteMenu = {
       }
       return renderMenu(h, item, i18nRender)
     })
-    return <Menu vModel={this.selectedKeys} {...dynamicProps}>{menuItems}</Menu>
+    return <Menu {...dynamicProps}>{menuItems}</Menu>
   },
   methods: {
     updateMenu () {