Merge pull request #32 from sendya/dev

sendya · web-flow · commit 33d94c3c2619 · 2018-12-22T13:43:09.000+08:00
Update PRO 1.0.1
diff --git 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)
 - 其他待补充...
 
 
diff --git 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 的仓库
diff --git 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>
diff --git a/public/loading/loading.css b/public/loading/loading.css
diff --git 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>
diff --git a/public/loading/option2/html_code_segment.html b/public/loading/option2/html_code_segment.html
@@ -0,0 +1,5 @@
+<div class="preloading-animate">
+  <div class="preloading-wrapper">
+    <svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
+  </div>
+</div>
diff --git a/public/loading/option2/loading.css b/public/loading/option2/loading.css
diff --git a/public/loading/option2/loading.svg b/public/loading/option2/loading.svg
@@ -0,0 +1 @@
+<svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
diff --git 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'
 }
diff --git 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>
diff --git 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
diff --git 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;
+  }
+}
diff --git 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 | -
+
diff --git 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>
 
diff --git 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>
 
diff --git 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">
diff --git a/src/components/tools/FooterToolBar.vue b/src/components/tools/FooterToolBar.vue
diff --git 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')
diff --git 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()
+    }
   }
 }
 
diff --git 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)
 }
diff --git 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,
diff --git 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
       },

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`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>`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ const api = {`
`4`	`4`	`ForgePassword: '/auth/forge-password',`
`5`	`5`	`Register: '/auth/register',`
`6`	`6`	`SendSms: '/account/sms',`
	`7`	`+ SendSmsErr: '/account/sms_err',`
`7`	`8`	`// get my info`
`8`	`9`	`UserInfo: '/user/info'`
`9`	`10`	`}`