fix: avatar modal, docs

README.md

@@ -1,4 +1,10 @@
-# 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
       }
     }
   }
-```
+```
+
+
+
+附属文档
+----
+
+- [路由/菜单说明](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

@@ -1,7 +1,9 @@
-#### 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
+更新时间
+----
+
+该文档最后更新于： 2018-10-20 PM 3:36

src/defaultConfig.js

@@ -1,3 +1,13 @@
+/**
+ * 项目默认配置项
+ * 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,0 +1,92 @@
+路由/菜单说明
+====
+
+
+
+格式和说明
+----
+
+```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

@@ -1,7 +1,8 @@
 <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: {
@@ -49,9 +49,6 @@
         },
         previews: {},
       };
-    },
-    watch: {
-
     },
     methods: {
       edit(id) {