Skip to content

Commit f4705bd

Browse files
sendyasendya
committed
fix: avatar modal, docs
1 parent 8b8f426 commit f4705bd

File tree

9 files changed

+183
-51
lines changed

9 files changed

+183
-51
lines changed

‎README.md‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
# vue-antd-pro
1+
Ant Design Pro Vue
2+
====
3+
4+
5+
6+
Overview
7+
----
28

39
基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/) Vue 版
410

@@ -8,6 +14,8 @@
814

915
![个人设置](https://static-2.loacg.com/open/static/github/20180916-134251.png)
1016

17+
![个人中心](https://static-2.loacg.com/open/static/github/20181020152930.png)
18+
1119
![内联编辑列表](https://static-2.loacg.com/open/static/github/20180916-155011.png)
1220

1321
![角色列表](https://static-2.loacg.com/open/static/github/20180916-154921.png)
@@ -18,18 +26,24 @@
1826

1927
![权限编辑](https://static-2.loacg.com/open/static/github/20180916-154950.png)
2028

21-
## 环境和依赖
29+
30+
31+
环境和依赖
32+
----
2233
- node
2334
- yarn
2435
- webpack
2536
- eslint
2637
- @vue/cli 3.0.1
27-
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
38+
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
39+
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
2840
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
2941
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - antv/g2 封装实现
3042

3143

32-
## 项目下载和运行
44+
45+
项目下载和运行
46+
----
3347

3448
- 拉取项目代码
3549
```bash
@@ -59,12 +73,15 @@ yarn run lint
5973

6074

6175

62-
## 其他说明
76+
其他说明
77+
----
6378

6479
- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli
6580

66-
- 修改 Ant Design 配色
67-
在文件 vue.config.js 中，其他 less 变量覆盖参考 ant design 官方说明
81+
- 修改 Ant Design 配色
82+
- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/) 项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)
83+
84+
- 在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
6885
```ecmascript 6
6986
css: {
7087
loaderOptions: {
@@ -80,4 +97,18 @@ yarn run lint
8097
}
8198
}
8299
}
83-
```
100+
```
101+
102+
103+
104+
附属文档
105+
----
106+
107+
- [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
108+
109+
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
110+
111+
- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultConfig.js)
112+
113+
- 其他待补充...
114+

‎src/components/table/README.md‎

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
#### Table 重封装组件说明
1+
Table 重封装组件说明
2+
====
23

34

4-
说明：
5+
封装说明
6+
----
57

68
> 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。
79
>
810
> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
911
1012

1113

12-
例子1（基础使用）：
14+
例子1
15+
----
16+
（基础使用）
1317

1418
```vue
1519
<template>
@@ -74,7 +78,10 @@
7478

7579

7680

77-
例子2（简单的表格，最后一列是各种操作。）：
81+
例子2
82+
----
83+
84+
（简单的表格，最后一列是各种操作）
7885

7986
```vue
8087
<template>
@@ -160,25 +167,30 @@
160167

161168

162169

163-
### 注意事项：
170+
注意事项
171+
----
164172

165-
你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
173+
> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
166174
(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
167-
`@/components/table/index.js` 第 89 行起
175+
176+
修改 `@/components/table/index.js` 第 106 行起
168177

169178

170179

171180
```javascript
172181
result.then(r => {
173-
this.localPagination = Object.assign({}, this.localPagination, {
174-
current: r.pageNo, // 返回结果中的当前分页数
175-
total: r.totalCount, // 返回结果中的总记录数
176-
showSizeChanger: this.showSizeChanger,
177-
pageSize: (pagination && pagination.pageSize) ||
178-
this.localPagination.pageSize
179-
});
180-
this.localDataSource = r.data; // 返回结果中的数组数据
181-
})
182+
this.localPagination = Object.assign({}, this.localPagination, {
183+
current: r.pageNo, // 返回结果中的当前分页数
184+
total: r.totalCount, // 返回结果中的总记录数
185+
showSizeChanger: this.showSizeChanger,
186+
pageSize: (pagination && pagination.pageSize) ||
187+
this.localPagination.pageSize
188+
});
189+
190+
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
191+
this.localDataSource = r.data; // 返回结果中的数组数据
192+
this.localLoading = false
193+
});
182194
```
183195
返回 JSON 例子：
184196
```json
@@ -246,4 +258,7 @@ result.then(r => {
246258

247259

248260

249-
最后更新于： 2018-08-30 AM
261+
更新时间
262+
----
263+
264+
该文档最后更新于： 2018-10-20 PM 3:36

‎src/defaultConfig.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
/**
2+
* 项目默认配置项
3+
* primaryColor - 默认主题色
4+
* navTheme - sidebar theme ['dark', 'light'] 两种主题
5+
* colorWeak - 色盲模式
6+
*
7+
* storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
8+
*
9+
*/
10+
111
export default {
212
primaryColor: '#1890FF', // primary color of ant design
313
navTheme: 'dark', // theme for nav menu

‎src/main.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import Antd from 'ant-design-vue'
1010
import Viser from 'viser-vue'
1111
import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less'
1212

13-
import * as dayjs from 'dayjs' // 日期时间支持库
14-
1513
import '@/permission' // permission control
1614
import '@/utils/filter' // base filter
1715

‎src/router/README.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
路由/菜单说明
2+
====
3+
4+
5+
6+
格式和说明
7+
----
8+
9+
```javascript
10+
/**
11+
* 路由配置说明：
12+
* 建议：sider menu 请不要超过三级菜单，若超过三级菜单，则应该设计为顶部主菜单 配合左侧次级菜单
13+
*
14+
**/
15+
{
16+
hidden: true,
17+
redirect: noredirect,
18+
name: 'router-name',
19+
meta: {
20+
title: 'title',
21+
icon: 'svg-name',
22+
keepAlive: true,
23+
hiddenPageHeader: true,
24+
}
25+
}
26+
```
27+
28+
29+
30+
`{ Route }` 对象
31+
32+
| 参数 | 说明 | 类型 | 默认值 |
33+
| -------- | ----------------------------------------- | ------- | ------ |
34+
| hidden | 控制路由是否显示在 sidebar | boolean | falase |
35+
| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - |
36+
| name | 路由名称, 建议设置,且不能重名 | string | - |
37+
| meta | 路由元信息（路由附带扩展信息） | object | {} |
38+
39+
40+
41+
`{ Meta }` 对象
42+
43+
| 参数 | 说明 | 类型 | 默认值 |
44+
| ---------------- | ------------------------------------------------------------ | ------- | ------ |
45+
| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
46+
| icon | 路由在 menu 上显示的图标 | string | - |
47+
| keepAlive | 缓存该路由 | boolean | false |
48+
| hiddenPageHeader | 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件, *特殊 用于隐藏页面带的 面包屑和页面标题栏 | boolean | false |
49+
| permission | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array | [] |
50+
51+
52+
53+
路由例子
54+
----
55+
56+
```ecmascript 6
57+
const asyncRouterMap = [
58+
{
59+
path: '/dashboard',
60+
component: Layout,
61+
name: 'dashboard',
62+
redirect: '/dashboard/workplace',
63+
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
64+
children: [
65+
{
66+
path: '/dashboard/analysis',
67+
name: 'Analysis',
68+
component: () => import('@/views/dashboard/Analysis'),
69+
meta: { title: '分析页', hideHeader: true, permission: [ 'dashboard' ] }
70+
},
71+
{
72+
path: '/dashboard/monitor',
73+
name: 'Monitor',
74+
hidden: true,
75+
component: () => import('@/views/dashboard/Monitor'),
76+
meta: { title: '监控页', hideHeader: true, permission: [ 'dashboard' ] }
77+
},
78+
{
79+
path: '/dashboard/workplace',
80+
name: 'Workplace',
81+
component: () => import('@/views/dashboard/Workplace'),
82+
meta: { title: '工作台', permission: [ 'dashboard' ] }
83+
}
84+
]
85+
}
86+
]
87+
```
88+
89+
> 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式
90+
>
91+
> 具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
92+

‎src/router/index.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,10 @@ Vue.use(Router)
88
* 路由配置说明：
99
* 建议：sider menu 请不要超过三级菜单，若超过三级菜单，则应该设计为顶部主菜单 配合左侧次级菜单
1010
*
11-
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
12-
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
13-
* if not set alwaysShow, only more than one route under the children
14-
* it will becomes nested mode, otherwise not show the root menu
15-
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
16-
* name:'router-name' the name is used by <keep-alive> (must set!!!)
17-
* meta : {
18-
title: 'title' the name show in submenu and breadcrumb (recommend set)
19-
icon: 'svg-name' the icon show in the sidebar,
20-
keepAlive: true keep alive component
21-
hiddenPageHeader: true if `hiddenPageHeader: true` will not show page-header(details)
22-
}
2311
**/
12+
13+
14+
2415
export const constantRouterMap = [
2516
{
2617
path: '/login',

‎src/views/account/center/Index.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
<a-row :gutter="24">
55
<a-col :md="24" :lg="7">
6-
<!-- :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }" -->
76
<a-card :bordered="false">
87
<div class="account-center-avatarHolder">
98
<div class="avatar">
@@ -31,12 +30,10 @@
3130
<template v-for="(tag, index) in tags">
3231
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
3332
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
34-
{{`${tag.slice(0, 20)}...`}}
33+
{{ `${tag.slice(0, 20)}...` }}
3534
</a-tag>
3635
</a-tooltip>
37-
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
38-
{{tag}}
39-
</a-tag>
36+
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">{{ tag }}</a-tag>
4037
</template>
4138
<a-input
4239
v-if="tagInputVisible"
@@ -83,7 +80,7 @@
8380
>
8481
<article-page v-if="noTitleKey === 'article'"></article-page>
8582
<app-page v-else-if="noTitleKey === 'app'"></app-page>
86-
<project-page v-else="noTitleKey === 'project'"></project-page>
83+
<project-page v-else-if="noTitleKey === 'project'"></project-page>
8784
</a-card>
8885
</a-col>
8986
</a-row>

‎src/views/account/center/page/App.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div class="app-list">
3-
<a-list :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
4-
:dataSource="dataSource">
3+
<a-list
4+
:grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
5+
:dataSource="dataSource">
56
<a-list-item slot="renderItem" slot-scope="item, index">
67
<a-card :hoverable="true">
78
<a-card-meta>

‎src/views/account/settings/AvatarModal.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</a-modal>
2929
</template>
3030
<script>
31-
import VueCropper from 'vue-cropper'
31+
import { VueCropper } from 'vue-cropper'
3232
3333
export default {
3434
components: {
@@ -49,9 +49,6 @@
4949
},
5050
previews: {},
5151
};
52-
},
53-
watch: {
54-
5552
},
5653
methods: {
5754
edit(id) {

0 commit comments

Comments
 (0)