Skip to content

Commit 33d94c3

Browse files
sendyasendya
authored
Merge pull request #32 from sendya/dev
Update PRO 1.0.1
2 parents b44f9af + 1f350b4 commit 33d94c3

22 files changed

+201
-41
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,15 @@ yarn run lint
122122
- [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
123123
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
124124
- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
125-
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
125+
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
126+
- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/Add-Page-Loading-Animate.md)
126127
- ANTD PRO 额外组件
127128
- Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
128129
- AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)
129130
- CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md)
130131
- Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md)
131132
- NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md)
133+
- FooterToolbar 底部工具栏 [FooterToolbar.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/FooterToolbar/index.md)
132134
- 其他待补充...
133135

134136

‎docs/Add-Page-Loading-Animate.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
为首屏增加 加载动画
2+
====
3+
4+
5+
6+
## 需求
7+
8+
> 为了缓解用户第一次访问时，加载 JS 过大所导致用户等待白屏时间过长导致的用户体验不好，进行的一个优化动效。
9+
10+
11+
12+
## 实现方案
13+
14+
1. 将 动画加载 dom 元素放在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下的所有元素。
15+
2. 将 动画加载 dom 元素放在 body 下，Vue 生命周期开始时 App.vue (created, mounted) 调用 `@/utils/utll` 下的 removeLoadingAnimate(#id, timeout) 则会移除加载动画
16+
17+
最后一步：
18+
​ 将样式插入到 `public/index.html` 文件的 `<head></head>` 最好写成内联 `<style>动画样式</style>`
19+
20+
21+
22+
----
23+
24+
目前提供有两个样式，均在 `public/loading` 文件夹内。且 pro 已经默认使用了一套 loading 动画方案，可以直接参考 `public/index.html`
25+
26+
27+
## 写在最后
28+
29+
目前 pro 有页面 overflow 显示出浏览器滚动条时，页面会抖动一下的问题。
30+
31+
欢迎各位提供能解决的方案和实现 demo。如果在条件允许的情况下，建议请直接使用 pro 进行改造，也欢迎直接 PR 到 pro 的仓库

‎public/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,17 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>logo.png">
88
<title>Ant Design Pro</title>
9+
<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>
910
</head>
1011
<body>
1112
<noscript>
1213
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1314
</noscript>
15+
<div id="preloadingWrapper" class="preloading-animate">
16+
<div class="preloading-wrapper">
17+
<img src="/loading/option2/loading.svg" />
18+
</div>
19+
</div>
1420
<div id="app"></div>
1521
<!-- built files will be auto injected -->
1622
</body>

‎public/loading/loading.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/loading/loading.html

+1
Original file line numberDiff line numberDiff 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>

‎public/loading/option2/html_code_segment.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="preloading-animate">
2+
<div class="preloading-wrapper">
3+
<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>
4+
</div>
5+
</div>

‎public/loading/option2/loading.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/loading/option2/loading.svg

+1
Loading

‎src/api/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const api = {
44
ForgePassword: '/auth/forge-password',
55
Register: '/auth/register',
66
SendSms: '/account/sms',
7+
SendSmsErr: '/account/sms_err',
78
// get my info
89
UserInfo: '/user/info'
910
}

‎src/components/FooterToolbar/FooterToolBar.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div :class="prefixCls">
3+
<div style="float: left">
4+
<slot name="extra">{{ extra }}</slot>
5+
</div>
6+
<div style="float: right">
7+
<slot></slot>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'FooterToolBar',
15+
props: {
16+
prefixCls: {
17+
type: String,
18+
default: 'ant-pro-footer-toolbar'
19+
},
20+
extra: {
21+
type: [String, Object],
22+
default: ''
23+
}
24+
}
25+
}
26+
</script>
27+
28+
<style lang="less" scoped>
29+
30+
</style>

‎src/components/FooterToolbar/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import FooterToolBar from './FooterToolBar'
2+
import './index.less'
3+
4+
export default FooterToolBar

‎src/components/FooterToolbar/index.less

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@import "../index";
2+
3+
@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";
4+
5+
.@{footer-toolbar-prefix-cls} {
6+
position: fixed;
7+
width: 100%;
8+
bottom: 0;
9+
right: 0;
10+
height: 56px;
11+
line-height: 56px;
12+
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
13+
background: #fff;
14+
border-top: 1px solid #e8e8e8;
15+
padding: 0 24px;
16+
z-index: 9;
17+
18+
&:after {
19+
content: "";
20+
display: block;
21+
clear: both;
22+
}
23+
}

‎src/components/FooterToolbar/index.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# FooterToolbar 底部工具栏
2+
3+
固定在底部的工具栏。
4+
5+
6+
7+
## 何时使用
8+
9+
固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
10+
11+
12+
13+
引用方式：
14+
15+
```javascript
16+
import FooterToolBar from '@/components/FooterToolbar'
17+
18+
export default {
19+
components: {
20+
FooterToolBar
21+
}
22+
}
23+
```
24+
25+
26+
27+
## 代码演示
28+
29+
```html
30+
<footer-tool-bar>
31+
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
32+
</footer-tool-bar>
33+
```
34+
或
35+
```html
36+
<footer-tool-bar extra="扩展信息提示">
37+
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
38+
</footer-tool-bar>
39+
```
40+
41+
42+
## API
43+
44+
参数 | 说明 | 类型 | 默认值
45+
----|------|-----|------
46+
children (slot) | 工具栏内容，向右对齐 | - | -
47+
extra | 额外信息，向左对齐 | String, Object | -
48+

‎src/components/page/GlobalFooter.vue

+8-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
</a>
88
<a href="https://ant.design/">Ant Design</a>
99
<a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>
10+
<a>Antd-Vue Version@{{ version }}</a>
1011
</div>
1112
<div class="copyright">
1213
Copyright
@@ -17,8 +18,14 @@
1718
</template>
1819

1920
<script>
21+
import { version } from 'ant-design-vue'
2022
export default {
21-
name: 'LayoutFooter'
23+
name: 'LayoutFooter',
24+
data () {
25+
return {
26+
version
27+
}
28+
}
2229
}
2330
</script>
2431

‎src/components/page/GlobalLayout.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,8 @@
6767
<a-layout-footer style="padding: 0px">
6868
<global-footer />
6969
</a-layout-footer>
70+
<setting-drawer></setting-drawer>
7071
</a-layout>
71-
72-
<setting-drawer></setting-drawer>
7372
</a-layout>
7473
</template>
7574

‎src/components/setting/SettingDrawer.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
2-
<div class="setting-drawer">
2+
<div class="setting-drawer" ref="settingDrawer">
33
<a-drawer
44
width="300"
55
placement="right"
66
:closable="false"
77
@close="onClose"
88
:visible="visible"
9+
:getContainer="() => $refs.settingDrawer"
910
:style="{}"
1011
>
1112
<div class="setting-drawer-index-content">

‎src/components/tools/FooterToolBar.vue

-32
This file was deleted.

‎src/main.js

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less'
1313
import '@/permission' // permission control
1414
import '@/utils/filter' // base filter
1515
import PermissionHelper from '@/utils/helper/permission'
16+
import { removeLoadingAnimate } from '@/utils/util'
1617

1718
import {
1819
ACCESS_TOKEN,
@@ -50,6 +51,8 @@ new Vue({
5051
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
5152
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
5253
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
54+
55+
removeLoadingAnimate('preloadingWrapper')
5356
},
5457
render: h => h(App)
5558
}).$mount('#app')

‎src/utils/mixin.js

+8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ const mixin = {
1717
autoHideHeader: state => state.app.autoHideHeader,
1818
sidebarOpened: state => state.app.sidebar.opened
1919
})
20+
},
21+
methods: {
22+
isTopmenu () {
23+
return this.layoutMode === 'topmenu'
24+
},
25+
isSideMenu () {
26+
return !this.isTopmenu()
27+
}
2028
}
2129
}
2230

‎src/utils/util.js

+14
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,18 @@ export function triggerWindowResizeEvent() {
1818
event.initEvent('resize', true, true)
1919
event.eventType = 'message'
2020
window.dispatchEvent(event)
21+
}
22+
23+
/**
24+
* Remove loading animate
25+
* @param id parent element id or class
26+
* @param timeout
27+
*/
28+
export function removeLoadingAnimate(id = '', timeout = 1500) {
29+
if (id === '') {
30+
return
31+
}
32+
setTimeout(() => {
33+
document.getElementById(id).remove()
34+
}, timeout)
2135
}

‎src/views/form/advancedForm/AdvancedForm.vue

+4-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
</a-card>
5656

5757
<!-- fixed footer toolbar -->
58-
<footer-tool-bar>
58+
<footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
5959
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
6060
</footer-tool-bar>
6161
</div>
@@ -64,10 +64,12 @@
6464
<script>
6565
import RepositoryForm from './RepositoryForm'
6666
import TaskForm from './TaskForm'
67-
import FooterToolBar from '@/components/tools/FooterToolBar'
67+
import FooterToolBar from '@/components/FooterToolbar'
68+
import { mixin, mixinDevice } from '@/utils/mixin'
6869
6970
export default {
7071
name: 'AdvancedForm',
72+
mixins: [mixin, mixinDevice],
7173
components: {
7274
FooterToolBar,
7375
RepositoryForm,

‎vue.config.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const path = require('path')
2+
const webpack = require('webpack')
23

34
function resolve (dir) {
45
return path.join(__dirname, dir)
@@ -21,7 +22,10 @@ module.exports = {
2122
},
2223
*/
2324
configureWebpack: {
24-
25+
plugins: [
26+
// Ignore all locale files of moment.js
27+
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
28+
]
2529
},
2630

2731
chainWebpack: (config) => {
@@ -56,7 +60,7 @@ module.exports = {
5660
proxy: {
5761
'/api': {
5862
// target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
59-
target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
63+
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
6064
ws: false,
6165
changeOrigin: true
6266
},

0 commit comments

Comments
 (0)