Skip to content

A
ant-design-pro-vue
Commit f4705bdc by Sendya
Options

fix: avatar modal, docs

parent 8b8f426b
Showing with 184 additions and 53 deletions
README.md
# vue-antd-pro
Ant Design Pro Vue
====
Overview
----
基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/) Vue 版
......@@ -8,6 +14,8 @@
![个人设置](https://static-2.loacg.com/open/static/github/20180916-134251.png)
![个人中心](https://static-2.loacg.com/open/static/github/20181020152930.png)
![内联编辑列表](https://static-2.loacg.com/open/static/github/20180916-155011.png)
![角色列表](https://static-2.loacg.com/open/static/github/20180916-154921.png)
......@@ -18,18 +26,24 @@
![权限编辑](https://static-2.loacg.com/open/static/github/20180916-154950.png)
## 环境和依赖
环境和依赖
----
- node
- yarn
- webpack
- eslint
- @vue/cli 3.0.1
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - antv/g2 封装实现
## 项目下载和运行
项目下载和运行
----
- 拉取项目代码
```bash
......@@ -59,12 +73,15 @@ yarn run lint
## 其他说明
其他说明
----
- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli
- 修改 Ant Design 配色
在文件 vue.config.js 中，其他 less 变量覆盖参考 ant design 官方说明
- 修改 Ant Design 配色
- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/) 项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)
- 在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
```ecmascript 6
css: {
loaderOptions: {
......@@ -80,4 +97,18 @@ yarn run lint
}
}
}
```
\ No newline at end of file
```
附属文档
----
- [路由/菜单说明](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/defaultConfig.js)
- 其他待补充...
src/components/table/README.md
#### Table 重封装组件说明
Table 重封装组件说明
====
说明：
封装说明
----
> 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。
>
......@@ -9,7 +11,9 @@
例子1（基础使用）：
例子1
----
（基础使用）
```vue
<template>
......@@ -74,7 +78,10 @@
例子2（简单的表格，最后一列是各种操作。）：
例子2
----
（简单的表格，最后一列是各种操作）
```vue
<template>
......@@ -160,25 +167,30 @@
### 注意事项：
注意事项
----
你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
`@/components/table/index.js` 第 89 行起
修改 `@/components/table/index.js` 第 106 行起
```javascript
result.then(r => {
this.localPagination = Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
});
this.localDataSource = r.data; // 返回结果中的数组数据
})
this.localPagination = Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
});
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
this.localDataSource = r.data; // 返回结果中的数组数据
this.localLoading = false
});
```
返回 JSON 例子：
```json
......@@ -246,4 +258,7 @@ result.then(r => {
最后更新于： 2018-08-30 AM
\ No newline at end of file
更新时间
----
该文档最后更新于： 2018-10-20 PM 3:36
\ No newline at end of file
src/defaultConfig.js
/**
* 项目默认配置项
* primaryColor - 默认主题色
* navTheme - sidebar theme ['dark', 'light'] 两种主题
* colorWeak - 色盲模式
*
* storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
*
*/
export default {
primaryColor: '#1890FF', // primary color of ant design
navTheme: 'dark', // theme for nav menu
......
src/main.js
......@@ -10,8 +10,6 @@ import Antd from 'ant-design-vue'
import Viser from 'viser-vue'
import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less'
import * as dayjs from 'dayjs' // 日期时间支持库
import '@/permission' // permission control
import '@/utils/filter' // base filter
......
src/router/README.md 0 → 100644
路由/菜单说明
====
格式和说明
----
```javascript
/**
* 路由配置说明：
* 建议：sider menu 请不要超过三级菜单，若超过三级菜单，则应该设计为顶部主菜单 配合左侧次级菜单
*
**/
{
hidden: true,
redirect: noredirect,
name: 'router-name',
meta: {
title: 'title',
icon: 'svg-name',
keepAlive: true,
hiddenPageHeader: true,
}
}
```
`{ Route }` 对象
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ----------------------------------------- | ------- | ------ |
| hidden | 控制路由是否显示在 sidebar | boolean | falase |
| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - |
| name | 路由名称, 建议设置,且不能重名 | string | - |
| meta | 路由元信息（路由附带扩展信息） | object | {} |
`{ Meta }` 对象
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ------------------------------------------------------------ | ------- | ------ |
| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
| icon | 路由在 menu 上显示的图标 | string | - |
| keepAlive | 缓存该路由 | boolean | false |
| hiddenPageHeader | 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件, *特殊 用于隐藏页面带的 面包屑和页面标题栏 | boolean | false |
| permission | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array | [] |
路由例子
----
```ecmascript 6
const asyncRouterMap = [
{
path: '/dashboard',
component: Layout,
name: 'dashboard',
redirect: '/dashboard/workplace',
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', hideHeader: true, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/monitor',
name: 'Monitor',
hidden: true,
component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', hideHeader: true, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', permission: [ 'dashboard' ] }
}
]
}
]
```
> 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式
>
> 具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
src/router/index.js
......@@ -8,19 +8,10 @@ Vue.use(Router)
* 路由配置说明：
* 建议：sider menu 请不要超过三级菜单，若超过三级菜单，则应该设计为顶部主菜单 配合左侧次级菜单
*
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar,
keepAlive: true keep alive component
hiddenPageHeader: true if `hiddenPageHeader: true` will not show page-header(details)
}
**/
export const constantRouterMap = [
{
path: '/login',
......
src/views/account/center/Index.vue
......@@ -3,7 +3,6 @@
<a-row :gutter="24">
<a-col :md="24" :lg="7">
<!-- :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }" -->
<a-card :bordered="false">
<div class="account-center-avatarHolder">
<div class="avatar">
......@@ -31,12 +30,10 @@
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{`${tag.slice(0, 20)}...`}}
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{tag}}
</a-tag>
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">{{ tag }}</a-tag>
</template>
<a-input
v-if="tagInputVisible"
......@@ -83,7 +80,7 @@
>
<article-page v-if="noTitleKey === 'article'"></article-page>
<app-page v-else-if="noTitleKey === 'app'"></app-page>
<project-page v-else="noTitleKey === 'project'"></project-page>
<project-page v-else-if="noTitleKey === 'project'"></project-page>
</a-card>
</a-col>
</a-row>
......
src/views/account/center/page/App.vue
<template>
<div class="app-list">
<a-list :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
:dataSource="dataSource">
<a-list
:grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
:dataSource="dataSource">
<a-list-item slot="renderItem" slot-scope="item, index">
<a-card :hoverable="true">
<a-card-meta>
......
src/views/account/settings/AvatarModal.vue
......@@ -28,7 +28,7 @@
</a-modal>
</template>
<script>
import VueCropper from 'vue-cropper'
import { VueCropper } from 'vue-cropper'
export default {
components: {
......@@ -50,9 +50,6 @@
previews: {},
};
},
watch: {
},
methods: {
edit(id) {
this.visible = true;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment