refactor: new page-loading, fix dropdown

Author: sendya

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

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

public/loading/loading.html

@@ -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>

public/loading/option2/html_code_segment.html

@@ -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>

public/loading/option2/loading.css

@@ -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;
-    }
-  }
 }