Merge branch 'develop' of github.com:TaleLin/lin-cms-vue into develop

Author: GongJS

.env.development

@@ -1,3 +1,3 @@
 ENV = 'development'
 
-VUE_APP_BASE_URL = 'http://koa.lin.colorful3.com/'
+VUE_APP_BASE_URL = 'http://localhost:5000/'

.env.production

@@ -1,3 +1,3 @@
 
 
-VUE_APP_BASE_URL = 'http://dev.lin.colorful3.com/'
+VUE_APP_BASE_URL = 'http://localhost:5000/'

README.md

@@ -1,7 +1,7 @@
 
 <p align="center">
   <a href="http://doc.cms.7yue.pro/">
-    <img width="200" src="https://consumervssalonqa01.blob.core.chinacloudapi.cn/vssaloncontainer/lin/left-logo.png">
+    <img width="200" src="https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/left-logo.png">
   </a>
 </p>
 
@@ -89,7 +89,19 @@ QQ群搜索：林间有风 或 643205479
 
 ## 版本日志
 
-最新版本 `0.1.0-beta.2`
+最新版本 `0.2.0`
+
+### 0.2.0
+
+1. `A` 新增图像上传、图像预览、富文本等自定义组件
+2. `A` 新增 lin-cms-ui 多个基础组件
+
+### 0.1.0-beta.3
+
+1. `U` 首页更新为 card 设计
+2. `A` 新增头像上传
+3. `A` 新增单元测试
+2. `A` 新增switch、rate、tabs、link、tag组件
 
 ### 0.1.0-beta.2
 

package.json

@@ -21,7 +21,7 @@
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",
     "js-cookie": "^2.2.0",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.14",
     "moment": "^2.24.0",
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",

src/assets/styles/realize/element-variables.scss

@@ -249,7 +249,13 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
   border: 1px solid $theme;
   color: #fff;
 }
-
+.el-input .el-input--suffix {
+  background: $theme;
+  color: #fff;
+  input::placeholder{
+    color: #fff;
+  }
+}
 // table
 .el-table {
   border-top: 1px solid $table-border-color;

src/components/base/preview/preview.vue

@@ -54,6 +54,7 @@
 <script>
 // photoswipe接口文档 http://photoswipe.com/documentation/api.html
 
+import { Loading } from 'element-ui'
 import 'photoswipe/dist/photoswipe.css'
 import 'photoswipe/dist/default-skin/default-skin.css'
 import PhotoSwipe from 'photoswipe/dist/photoswipe'
@@ -124,6 +125,7 @@ export default {
       options = Object.assign(defaultOptions, options, {
         index: imageIndex,
       })
+      const loadingInstance = Loading.service()
       const galleryElement = this.$refs.myGallery
       this.radom = createId();
       let pswpElement = this.$refs.pswpWrap
@@ -144,6 +146,7 @@ export default {
       }
       this.gallery = new PhotoSwipe(pswpElement, PhotoSwipeUIDefault, items, photoSwipeOptions)
       this.gallery.init()
+      loadingInstance.close()
       // Gallery starts closing
       this.gallery.listen('close', () => {
         if (this.gallery) {
@@ -211,19 +214,23 @@ export default {
       }
       return items
     },
+    destroy() {
+      // 销毁
+      if (this.gallery) {
+        this.gallery.close();
+        this.gallery = null
+      }
+    },
   },
   beforeDestroy() {
-    // 销毁
-    if (this.gallery) {
-      this.gallery.close();
-      this.gallery = null
-    }
+    this.destroy()
   },
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .my-gallery {
   opacity: 0;
+  display: none;
 }
 </style>

src/components/base/upload-imgs/README.md

@@ -2,6 +2,13 @@
 
 多图片上传组件 `UploadImgs`, 附有预览, 排序, 验证等功能 [演示效果](http://face.cms.7yue.pro/#/imgs-upload/stage1)
 
+- 开箱即用
+- 支持固定上传数量图片上传和不定数量图片上传
+- 支持预览
+- 支持排序
+- 内置图像验证机制
+- 内置支持 Lin-CMS 上传接口
+
 ## 基础示例
 
 ```vue
@@ -33,16 +40,51 @@ export default {
 </script>
 ```
 
+### 初始化说明
+
+初始化时传入数组, 如果初始化为空则传入空数组 `[]`, 如果已经存在内容, 内容结构要求如下:
+
+|  属性   |     类型      | 是否必填 |             说明              |
+| :-----: | :-----------: | :------: | :---------------------------: |
+|   id    | String/Nuber  |    否    | 初始化数据的 id, 推荐有该数据 |
+|  imgId  | String/Number |    否    |          图像资源 id          |
+|   src   |    String     |    否    |         图像相对地址          |
+| display |    String     |    是    |    图像完整地址, 用于展示     |
+
+示例:
+
+```js
+const initData = [{
+  id: '12d3',
+  display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+  src: '/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+  imgId: '238287',
+}, {
+  id: '17qr',
+  display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
+  src: '/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
+  imgId: '1232323',
+}];
+```
+
 ### 返回值说明
 
 新上传的图像会有完整的图像信息
 
-|    属性    |  类型   | 默认 |    说明    |
-| :--------: | :-----: | :--: | :--------: |
-|   width    | Number  | null |  图像宽度  |
-|   height   | Number  | null |  图像高度  |
-|    size    | Number  | null |  文件大小  |
-| isAnimated | Boolean | null | 是否是动图 |
+|    属性    |     类型      | 默认 |                         说明                          |
+| :--------: | :-----------: | :--: | :---------------------------------------------------: |
+|     id     | String/Nuber  | null |                    初始化数据的 id                    |
+|   imgId    | String/Number | null |                      图像资源 id                      |
+|    src     |    String     | null |                     图像相对地址                      |
+|  display   |    String     | null |                     图像完整地址                      |
+|   width    |    Number     | null |                       图像宽度                        |
+|   height   |    Number     | null |                       图像高度                        |
+|  fileName  |    String     | null |                        文件名                         |
+|  fileSize  |     Numbr     | null |                       文件大小                        |
+|  fileType  |    String     | null |    文件的媒体类型 (MIME), 针对部分文件类型做了检测    |
+| isAnimated |    Boolean    | null | 是否是动图, 只有开启动图检测, 本值才有效, 否则为 null |
+
+**注意:** 以上字段只针对新上传的图片, 初始化的图片如果没有传入字段, 则值为空
 
 ## props
 
@@ -58,25 +100,25 @@ export default {
 | before-upload  |   Function    |   null   | 上传前自定义校验函数, 返回 true 表示校验成功, 否则校验失败不进行后续上传, 支持返回 Promise |
 |   remote-fuc   |   Function    |   null   |                               重写远程方法, 支持返回 Promise                               |
 |    sortable    |    Boolean    |  false   |                                         是否可排序                                         |
-|     accept     |    String     | image/\* |                                       运行上传的类型                                       |
-| animated-check |    Boolean    |  false   |                                   是否需要检测是否是动图                                   |
+|     accept     |    String     | image/\* |                        允许上传的类型, 同 input 的 accept 属性配置                         |
+| animated-check |    Boolean    |  false   |             是否需要检测是否是动图, 开启后返回数据中 isAnimated 表示是否是动图             |
 |     rules      |    Object     |    {}    |                                          图像规则                                          |
 |      fit       |    String     | contain  |                                        图像显示形式                                        |
-|     width      | Nulber/String |   200    |                                            宽度                                            |
-|     height     | Number/String |   200    |                                            高度                                            |
+|     width      | Nulber/String |   200    |                                       组件每项的宽度                                       |
+|     height     | Number/String |   200    |                                       组件每项的高度                                       |
 
 图像验证规则属性 rule 支持的验证规则有:
 
-|     属性      |  类型   | 默认 |      说明       |
-| :-----------: | :-----: | :--: | :-------------: |
-|     ratio     |  Array  | null |  比例 [宽，高]  |
-|     width     | Number  | null |  宽度必需等于   |
-|    height     | Number  | null |  高度必需等于   |
-|   minWidth    | Number  | null |     最小宽      |
-|   minHeight   | Number  | null |     最小高      |
-|    minSize    | Number  | null | 最小 size（Mb） |
-|    maxSize    | Number  | null | 最大 size（Mb） |
-| allowAnimated | Boolean | true | 最大 size（Mb） |
+|     属性      |     类型     | 默认 |                                                 说明                                                  |
+| :-----------: | :----------: | :--: | :---------------------------------------------------------------------------------------------------: |
+|     ratio     | Array/Number | null |                                   比例 [宽，高], 或者 宽/高 的数值                                    |
+|     width     |    Number    | null |                                             宽度必需等于                                              |
+|    height     |    Number    | null |                                             高度必需等于                                              |
+|   minWidth    |    Number    | null |                                                最小宽                                                 |
+|   minHeight   |    Number    | null |                                                最小高                                                 |
+|    minSize    |    Number    | null |                                            最小 size（Mb）                                            |
+|    maxSize    |    Number    | null |                                            最大 size（Mb）                                            |
+| allowAnimated |    Number    | null | 是否允许上传动图, 0 不检测, 1 不允许动图, 2 只允许动图. 要检查此项, 需设置属性 animated-check 为 true |
 
 默认值为 `{ maxSize: 2 }` 图片文件大小限制 2M 内. 这与 lin-cms 服务端文件上传接口默认限制一致
 
@@ -86,3 +128,4 @@ export default {
 | :------: | :--: | :------------------------------------------: |
 | getValue |  无  | 获取当前组件的值, 如果验证不通过则返回 false |
 |  clear   |  无  |               清空当前所选图片               |
+|  reset   |  无  |     重置图片, 回到初始化数据状态(value)      |