6 years ago · 00725034b9
--- a/README.md
+++ b/README.md
@@ -122,13 +122,15 @@ yarn run lint
 
				 - [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
			
 
				 - [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
			
 
				 - [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
			
 
				-- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
			
 
				+- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)  
			
 
				+- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/Add-Page-Loading-Animate.md)  
			
 
				 - ANTD PRO 额外组件
			
 
				   - Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
			
 
				   - AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)
			
 
				   - CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md)
			
 
				   - Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md)
			
 
				   - NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md)
			
 
				+  - FooterToolbar 底部工具栏 [FooterToolbar.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/FooterToolbar/index.md)
			
 
				 - 其他待补充...
			
 
				 
			
 
				 
			
--- a/docs/Add-Page-Loading-Animate.md
+++ b/docs/Add-Page-Loading-Animate.md
@@ -0,0 +1,31 @@
 
				+为首屏增加 加载动画
			
 
				+====
			
 
				+
			
 
				+
			
 
				+
			
 
				+## 需求
			
 
				+
			
 
				+> 为了缓解用户第一次访问时，加载 JS 过大所导致用户等待白屏时间过长导致的用户体验不好，进行的一个优化动效。
			
 
				+
			
 
				+
			
 
				+
			
 
				+## 实现方案
			
 
				+
			
 
				+1. 将 动画加载 dom 元素放在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下的所有元素。
			
 
				+2. 将 动画加载 dom 元素放在 body 下，Vue 生命周期开始时 App.vue (created, mounted) 调用 `@/utils/utll` 下的 removeLoadingAnimate(#id, timeout) 则会移除加载动画
			
 
				+
			
 
				+最后一步：
			
 
				+	将样式插入到 `public/index.html` 文件的 `<head></head>` 最好写成内联 `<style>动画样式</style>` 
			
 
				+
			
 
				+
			
 
				+
			
 
				+----
			
 
				+
			
 
				+目前提供有两个样式，均在 `public/loading` 文件夹内。且 pro 已经默认使用了一套 loading 动画方案，可以直接参考 `public/index.html`
			
 
				+
			
 
				+
			
 
				+## 写在最后
			
 
				+
			
 
				+目前 pro 有页面 overflow 显示出浏览器滚动条时，页面会抖动一下的问题。
			
 
				+
			
 
				+欢迎各位提供能解决的方案和实现 demo。如果在条件允许的情况下，建议请直接使用 pro 进行改造，也欢迎直接 PR 到 pro 的仓库
			
--- a/public/index.html
+++ b/public/index.html
@@ -6,11 +6,17 @@
 
				     <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>.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;}</style>
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>
			
 
				       <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				     </noscript>
			
 
				+    <div id="preloadingWrapper" class="preloading-animate">
			
 
				+      <div class="preloading-wrapper">
			
 
				+        <img src="/loading/option2/loading.svg" />
			
 
				+      </div>
			
 
				+    </div>
			
 
				     <div id="app"></div>
			
 
				     <!-- built files will be auto injected -->
			
 
				   </body>
			
--- a/public/loading/loading.css
+++ b/public/loading/loading.css
@@ -0,0 +1 @@
 
				+#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);}}
			
--- a/public/loading/loading.html
+++ b/public/loading/loading.html
@@ -0,0 +1 @@
 
				+<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>
			
--- a/public/loading/option2/html_code_segment.html
+++ b/public/loading/option2/html_code_segment.html
--- a/public/loading/option2/loading.css
+++ b/public/loading/option2/loading.css
@@ -0,0 +1 @@
 
				+.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;}
			
--- a/public/loading/option2/loading.svg
+++ b/public/loading/option2/loading.svg
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -4,6 +4,7 @@ const api = {
 
				     ForgePassword: '/auth/forge-password',
			
 
				     Register: '/auth/register',
			
 
				     SendSms: '/account/sms',
			
 
				+    SendSmsErr: '/account/sms_err',
			
 
				     // get my info
			
 
				     UserInfo: '/user/info'
			
 
				 }
			
--- a/src/components/FooterToolbar/FooterToolBar.vue
+++ b/src/components/FooterToolbar/FooterToolBar.vue
@@ -0,0 +1,30 @@
 
				+<template>
			
 
				+  <div :class="prefixCls">
			
 
				+    <div style="float: left">
			
 
				+      <slot name="extra">{{ extra }}</slot>
			
 
				+    </div>
			
 
				+    <div style="float: right">
			
 
				+      <slot></slot>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  export default {
			
 
				+    name: 'FooterToolBar',
			
 
				+    props: {
			
 
				+      prefixCls: {
			
 
				+        type: String,
			
 
				+        default: 'ant-pro-footer-toolbar'
			
 
				+      },
			
 
				+      extra: {
			
 
				+        type: [String, Object],
			
 
				+        default: ''
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/components/FooterToolbar/index.js
+++ b/src/components/FooterToolbar/index.js
@@ -0,0 +1,4 @@
 
				+import FooterToolBar from './FooterToolBar'
			
 
				+import './index.less'
			
 
				+
			
 
				+export default FooterToolBar
			
--- a/src/components/FooterToolbar/index.less
+++ b/src/components/FooterToolbar/index.less
@@ -0,0 +1,23 @@
 
				+@import "../index";
			
 
				+
			
 
				+@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";
			
 
				+
			
 
				+.@{footer-toolbar-prefix-cls} {
			
 
				+  position: fixed;
			
 
				+  width: 100%;
			
 
				+  bottom: 0;
			
 
				+  right: 0;
			
 
				+  height: 56px;
			
 
				+  line-height: 56px;
			
 
				+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
			
 
				+  background: #fff;
			
 
				+  border-top: 1px solid #e8e8e8;
			
 
				+  padding: 0 24px;
			
 
				+  z-index: 9;
			
 
				+
			
 
				+  &:after {
			
 
				+    content: "";
			
 
				+    display: block;
			
 
				+    clear: both;
			
 
				+  }
			
 
				+}
			
--- a/src/components/FooterToolbar/index.md
+++ b/src/components/FooterToolbar/index.md
@@ -0,0 +1,48 @@
 
				+# FooterToolbar 底部工具栏
			
 
				+
			
 
				+固定在底部的工具栏。
			
 
				+
			
 
				+
			
 
				+
			
 
				+## 何时使用
			
 
				+
			
 
				+固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
			
 
				+
			
 
				+
			
 
				+
			
 
				+引用方式：
			
 
				+
			
 
				+```javascript
			
 
				+import FooterToolBar from '@/components/FooterToolbar'
			
 
				+
			
 
				+export default {
			
 
				+    components: {
			
 
				+        FooterToolBar
			
 
				+    }
			
 
				+}
			
 
				+```
			
 
				+
			
 
				+
			
 
				+
			
 
				+## 代码演示
			
 
				+
			
 
				+```html
			
 
				+<footer-tool-bar>
			
 
				+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
			
 
				+</footer-tool-bar>
			
 
				+```
			
 
				+或
			
 
				+```html
			
 
				+<footer-tool-bar extra="扩展信息提示">
			
 
				+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
			
 
				+</footer-tool-bar>
			
 
				+```
			
 
				+
			
 
				+
			
 
				+## API
			
 
				+
			
 
				+参数 | 说明 | 类型 | 默认值
			
 
				+----|------|-----|------
			
 
				+children (slot) | 工具栏内容，向右对齐 | - | -
			
 
				+extra | 额外信息，向左对齐 | String, Object | -
			
 
				+
			
--- a/src/components/page/GlobalFooter.vue
+++ b/src/components/page/GlobalFooter.vue
@@ -7,6 +7,7 @@
 
				       </a>
			
 
				       <a href="https://ant.design/">Ant Design</a>
			
 
				       <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>
			
 
				+      <a>Antd-Vue Version@{{ version }}</a>
			
 
				     </div>
			
 
				     <div class="copyright">
			
 
				       Copyright
			
@@ -17,8 +18,14 @@
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				+  import { version } from 'ant-design-vue'
			
 
				   export default {
			
 
				-    name: 'LayoutFooter'
			
 
				+    name: 'LayoutFooter',
			
 
				+    data () {
			
 
				+      return {
			
 
				+        version
			
 
				+      }
			
 
				+    }
			
 
				   }
			
 
				 </script>
			
 
				 
			
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -67,9 +67,8 @@
 
				       <a-layout-footer style="padding: 0px">
			
 
				         <global-footer />
			
 
				       </a-layout-footer>
			
 
				+      <setting-drawer></setting-drawer>
			
 
				     </a-layout>
			
 
				-
			
 
				-    <setting-drawer></setting-drawer>
			
 
				   </a-layout>
			
 
				 </template>
			
 
				 
			
--- a/src/components/setting/SettingDrawer.vue
+++ b/src/components/setting/SettingDrawer.vue
@@ -1,11 +1,12 @@
 
				 <template>
			
 
				-  <div class="setting-drawer">
			
 
				+  <div class="setting-drawer" ref="settingDrawer">
			
 
				     <a-drawer
			
 
				       width="300"
			
 
				       placement="right"
			
 
				       :closable="false"
			
 
				       @close="onClose"
			
 
				       :visible="visible"
			
 
				+      :getContainer="() => $refs.settingDrawer"
			
 
				       :style="{}"
			
 
				     >
			
 
				       <div class="setting-drawer-index-content">
			
--- a/src/components/tools/FooterToolBar.vue
+++ b/src/components/tools/FooterToolBar.vue
@@ -1,32 +0,0 @@
 
				-<template>
			
 
				-  <div class="toolbar">
			
 
				-    <div style="float: left">
			
 
				-      <slot name="extra"></slot>
			
 
				-    </div>
			
 
				-    <div style="float: right">
			
 
				-      <slot></slot>
			
 
				-    </div>
			
 
				-  </div>
			
 
				-</template>
			
 
				-
			
 
				-<script>
			
 
				-  export default {
			
 
				-    name: 'FooterToolBar'
			
 
				-  }
			
 
				-</script>
			
 
				-
			
 
				-<style lang="scss" scoped>
			
 
				-  .toolbar {
			
 
				-    position: fixed;
			
 
				-    width: 100%;
			
 
				-    bottom: 0;
			
 
				-    right: 0;
			
 
				-    height: 56px;
			
 
				-    line-height: 56px;
			
 
				-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
			
 
				-    background: #fff;
			
 
				-    border-top: 1px solid #e8e8e8;
			
 
				-    padding: 0 24px;
			
 
				-    z-index: 9;
			
 
				-  }
			
 
				-</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,7 @@ import 'ant-design-vue/dist/antd.less'  // or 'ant-design-vue/dist/antd.less'
 
				 import '@/permission' // permission control
			
 
				 import '@/utils/filter' // base filter
			
 
				 import PermissionHelper from '@/utils/helper/permission'
			
 
				+import { removeLoadingAnimate } from '@/utils/util'
			
 
				 
			
 
				 import {
			
 
				   ACCESS_TOKEN,
			
@@ -50,6 +51,8 @@ new Vue({
 
				     store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
			
 
				     store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
			
 
				     store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
			
 
				+
			
 
				+    removeLoadingAnimate('preloadingWrapper')
			
 
				   },
			
 
				   render: h => h(App)
			
 
				 }).$mount('#app')
			
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -17,6 +17,14 @@ const mixin = {
 
				       autoHideHeader: state => state.app.autoHideHeader,
			
 
				       sidebarOpened: state => state.app.sidebar.opened
			
 
				     })
			
 
				+  },
			
 
				+  methods: {
			
 
				+    isTopmenu () {
			
 
				+      return this.layoutMode === 'topmenu'
			
 
				+    },
			
 
				+    isSideMenu () {
			
 
				+      return !this.isTopmenu()
			
 
				+    }
			
 
				   }
			
 
				 }
			
 
				 
			
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -18,4 +18,18 @@ export function triggerWindowResizeEvent() {
 
				   event.initEvent('resize', true, true)
			
 
				   event.eventType = 'message'
			
 
				   window.dispatchEvent(event)
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Remove loading animate
			
 
				+ * @param id parent element id or class
			
 
				+ * @param timeout
			
 
				+ */
			
 
				+export function removeLoadingAnimate(id = '', timeout = 1500) {
			
 
				+  if (id === '') {
			
 
				+    return
			
 
				+  }
			
 
				+  setTimeout(() => {
			
 
				+    document.getElementById(id).remove()
			
 
				+  }, timeout)
			
 
				 }
			
--- a/src/views/form/advancedForm/AdvancedForm.vue
+++ b/src/views/form/advancedForm/AdvancedForm.vue
@@ -55,7 +55,7 @@
 
				     </a-card>
			
 
				 
			
 
				     <!-- fixed footer toolbar -->
			
 
				-    <footer-tool-bar>
			
 
				+    <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
			
 
				       <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
			
 
				     </footer-tool-bar>
			
 
				   </div>
			
@@ -64,10 +64,12 @@
 
				 <script>
			
 
				   import RepositoryForm from './RepositoryForm'
			
 
				   import TaskForm from './TaskForm'
			
 
				-  import FooterToolBar from '@/components/tools/FooterToolBar'
			
 
				+  import FooterToolBar from '@/components/FooterToolbar'
			
 
				+  import { mixin, mixinDevice } from '@/utils/mixin'
			
 
				 
			
 
				   export default {
			
 
				     name: 'AdvancedForm',
			
 
				+    mixins: [mixin, mixinDevice],
			
 
				     components: {
			
 
				       FooterToolBar,
			
 
				       RepositoryForm,
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,5 @@
 
				 const path = require('path')
			
 
				+const webpack = require('webpack')
			
 
				 
			
 
				 function resolve (dir) {
			
 
				   return path.join(__dirname, dir)
			
@@ -21,7 +22,10 @@ module.exports = {
 
				   },
			
 
				   */
			
 
				   configureWebpack: {
			
 
				-
			
 
				+    plugins: [
			
 
				+      // Ignore all locale files of moment.js
			
 
				+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
			
 
				+    ]
			
 
				   },
			
 
				 
			
 
				   chainWebpack: (config) => {
			
@@ -56,7 +60,7 @@ module.exports = {
 
				     proxy: {
			
 
				       '/api': {
			
 
				         // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
			
 
				-        target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
			
 
				+        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
			
 
				         ws: false,
			
 
				         changeOrigin: true
			
 
				       },