refactor: new page-loading, fix dropdown

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>logo.png">
     <title>Ant Design Pro</title>
-    <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
+    <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
     <!-- require cdn assets css -->
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
@@ -17,11 +17,13 @@
       <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app">
-      <div id="loading-mask">
-          <div class="loading-wrapper">
-            <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
-          </div>
+      <div class="first-loading-wrp">
+        <h1>Pro</h1>
+        <div class="loading-wrp">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
         </div>
+        <div style="display: flex; justify-content: center; align-items: center;">Ant Design</div>
+      </div>
     </div>
     <!-- require cdn assets js -->
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>

public/loading/loading.css

@@ -1 +0,0 @@
-#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}

public/loading/loading.html

@@ -1 +0,0 @@
-<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>

public/loading/option2/loading.css

@@ -1 +0,0 @@
-.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;}

src/components/GlobalHeader/AvatarDropdown.vue

@@ -66,7 +66,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.menu {
+.ant-pro-drop-down {
   /deep/ .action {
     margin-right: 8px;
   }

src/components/GlobalHeader/RightContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="wrpCls">
-    <avatar-dropdown :menu="showMenu" :current-user="currentUser" class="ant-pro-global-header-index-action" />
-    <select-lang class="ant-pro-global-header-index-action" />
+    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="actionClassName" />
+    <select-lang :class="actionClassName" />
   </div>
 </template>
 
@@ -22,6 +22,7 @@ export default {
     }
   },
   data () {
+    this.actionClassName = 'ant-pro-global-header-index-action'
     return {
       showMenu: true,
       currentUser: {}
@@ -41,7 +42,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/SelectLang/index.jsx

@@ -1,6 +1,7 @@
+import './index.less'
+
 import { Icon, Menu, Dropdown } from 'ant-design-vue'
 import { i18nRender } from '@/locales'
-import './index.less'
 import i18nMixin from '@/store/i18n-mixin'
 
 const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR']
@@ -19,14 +20,21 @@ const languageIcons = {
 }
 
 const SelectLang = {
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-drop-down'
+    }
+  },
   name: 'SelectLang',
   mixins: [i18nMixin],
   render () {
+    const { prefixCls } = this
     const changeLang = ({ key }) => {
       this.setLang(key)
     }
     const langMenu = (
-      <Menu class={['menu', 'drop-down']} selectedKeys={[this.currentLang]} onClick={changeLang}>
+      <Menu class={['menu', 'ant-pro-header-menu']} selectedKeys={[this.currentLang]} onClick={changeLang}>
         {locales.map(locale => (
           <Menu.Item key={locale}>
             <span role="img" aria-label={languageLabels[locale]}>
@@ -39,7 +47,7 @@ const SelectLang = {
     )
     return (
       <Dropdown overlay={langMenu} placement="bottomRight">
-        <span class={'.ant-pro-drop-down-lang'}>
+        <span class={prefixCls}>
           <Icon type="global" title={i18nRender('navBar.lang')} />
         </span>
       </Dropdown>

src/components/SelectLang/index.less

@@ -1,23 +1,31 @@
 @import "~ant-design-vue/es/style/themes/default";
 
 @header-menu-prefix-cls: ~'@{ant-prefix}-pro-header-menu';
+@header-drop-down-prefix-cls: ~'@{ant-prefix}-pro-drop-down';
+
+.@{header-menu-prefix-cls} {
+
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.@{header-drop-down-prefix-cls} {
 
-.ant-pro-drop-down-lang {
   line-height: @layout-header-height;
   vertical-align: top;
   cursor: pointer;
+
   > i {
     font-size: 16px !important;
     transform: none !important;
+
     svg {
       position: relative;
       top: -1px;
     }
   }
-
-  &.select-lang {
-    .ant-dropdown-menu-item {
-      min-width: 120px;
-    }
-  }
 }

src/layouts/BasicLayout.less

@@ -1,31 +1,36 @@
-@import "~ant-design-vue/es/style/themes/default";
+@import "~ant-design-vue/es/style/themes/default.less";
 
 .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;
-            }
-        }
+  margin-right: 8px;
+
+  &.ant-pro-global-header-index-dark {
+    .ant-pro-global-header-index-action {
+      color: hsla(0, 0%, 100%, .85);
+
+      &:hover {
+        background: #1890ff;
+      }
     }
-    .ant-pro-account-avatar {
-        .antd-pro-global-header-index-avatar {
-            margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
-            margin-right: 8px;
-            color: @primary-color;
-            vertical-align: top;
-            background: rgba(255, 255, 255, 0.85);
-        }
+  }
+
+  .ant-pro-account-avatar {
+    .antd-pro-global-header-index-avatar {
+      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
+      margin-right: 8px;
+      color: @primary-color;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .menu {
+    .anticon {
+      margin-right: 8px;
     }
 
-    .menu {
-        .anticon {
-            margin-right: 8px;
-        }
-        .ant-dropdown-menu-item {
-            min-width: 100px;
-        }
+    .ant-dropdown-menu-item {
+      min-width: 100px;
     }
+  }
 }
 

src/permission.js

@@ -10,22 +10,25 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
+const loginRoutePath = '/user/login'
 const defaultRoutePath = '/dashboard/workplace'
 
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
   to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
+  /* has token */
   if (storage.get(ACCESS_TOKEN)) {
-    /* has token */
-    if (to.path === '/user/login') {
+    if (to.path === loginRoutePath) {
       next({ path: defaultRoutePath })
       NProgress.done()
     } else {
+      // check login user.roles is null
       if (store.getters.roles.length === 0) {
         store
           .dispatch('GetInfo')
           .then(res => {
             const roles = res.result && res.result.role
+            // generate dynamic router
             store.dispatch('GenerateRoutes', { roles }).then(() => {
               // 根据roles权限生成可访问的路由表
               // 动态添加可访问路由表
@@ -33,7 +36,7 @@ router.beforeEach((to, from, next) => {
               // 请求带有 redirect 重定向时，登录自动重定向到该地址
               const redirect = decodeURIComponent(from.query.redirect || to.path)
               if (to.path === redirect) {
-                // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+                // set the replace: true so the navigation will not leave a history record
                 next({ ...to, replace: true })
               } else {
                 // 跳转到目的路由
@@ -46,8 +49,9 @@ router.beforeEach((to, from, next) => {
               message: '错误',
               description: '请求用户信息失败，请重试'
             })
+            // 失败时，获取用户信息失败时，调用登出，来清空历史保留信息
             store.dispatch('Logout').then(() => {
-              next({ path: '/user/login', query: { redirect: to.fullPath } })
+              next({ path: loginRoutePath, query: { redirect: to.fullPath } })
             })
           })
       } else {
@@ -59,7 +63,7 @@ router.beforeEach((to, from, next) => {
       // 在免登录白名单，直接进入
       next()
     } else {
-      next({ path: '/user/login', query: { redirect: to.fullPath } })
+      next({ path: loginRoutePath, query: { redirect: to.fullPath } })
       NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }
   }