Merge pull request #16 from vipshop/develop

v0.20.2

docs/package.json

@@ -6,7 +6,7 @@
   },
   "private": true,
   "dependencies": {
-    "@ams-team/ams": "^0.15.11",
+    "@ams-team/ams": "latest",
     "@ams-team/block-ams-config": "latest",
     "@ams-team/block-chart": "latest",
     "@ams-team/json-stringify": "latest",

docs/zh-CN/.vuepress/components/api/icon/list.vue

@@ -1,26 +1,23 @@
 <template>
     <ul class="icon-list">
-        <li><span><i class="ams-icon-watcher"></i><span class="icon-name">ams-icon-watcher</span></span></li>
-        <li><span><i class="ams-icon-advocate"></i><span class="icon-name">ams-icon-advocate</span></span></li>
-        <li><span><i class="ams-icon-fold"></i><span class="icon-name">ams-icon-fold</span></span></li>
-        <li><span><i class="ams-icon-crown"></i><span class="icon-name">ams-icon-crown</span></span></li>
-        <li><span><i class="ams-icon-heart"></i><span class="icon-name">ams-icon-heart</span></span></li>
-        <li><span><i class="ams-icon-brick"></i><span class="icon-name">ams-icon-brick</span></span></li>
-        <li><span><i class="ams-icon-dashboard"></i><span class="icon-name">ams-icon-dashboard</span></span></li>
-        <li><span><i class="ams-icon-portrait"></i><span class="icon-name">ams-icon-portrait</span></span></li>
-        <li><span><i class="ams-icon-brand-equity"></i><span class="icon-name">ams-icon-brand-equity</span></span></li>
-        <li><span><i class="ams-icon-crowd-manage"></i><span class="icon-name">ams-icon-crowd-manage</span></span></li>
-        <li><span><i class="ams-icon-account-sales"></i><span class="icon-name">ams-icon-account-sales</span></span></li>
-        <li><span><i class="ams-icon-help-center"></i><span class="icon-name">ams-icon-help-center</span></span></li>
-        <li><span><i class="ams-icon-data-report"></i><span class="icon-name">ams-icon-data-report</span></span></li>
-        <li><span><i class="ams-icon-customer-operation"></i><span class="icon-name">ams-icon-customer-operation</span></span></li>
+        <li v-for="icon in icons">
+            <span><i :class="['ams-icon-' + icon]"></i><span class="icon-name">ams-icon-{{ icon }}</span></span>
+        </li>
     </ul>
 </template>
 
 <script>
 import '../../entry'
 
 export default {
+    data() {
+        return {
+            icons: [
+                'user', 'woman', 'man', 'question', 'watcher', 'advocate', 'fold', 'crown', 'heart', 'brick', 'dashboard',
+                'portrait', 'brand-equity', 'crowd-manage', 'account-sales', 'help-center', 'data-report', 'customer-operation'
+            ]
+        }
+    },
     mounted(){
         
     }

docs/zh-CN/.vuepress/components/block/calendar/demo.vue

@@ -1,6 +1,6 @@
 <template>
     <el-card shadow="hover" class="demo demo-card">
-        <ams-block v-if="init" :name="blockName"/>
+        <ams-block v-if="init" :name="blockName" class="demo-card-preview"/>
         <div :class="`demo-card-config ${showConfig ? 'open': ''}`">
             <highlight-code lang="javascript">
                 {{ configCode }}

docs/zh-CN/.vuepress/components/changelog/logs.js

@@ -1,8 +1,24 @@
 // 更新日志
 export default [
     {
-        version: '0.18.5',
-        date: '2019.10.15',
+        version: '0.19.7',
+        date: '2019.10.16',
+        log: [
+            'feat: 列表分页组件布局支持自定义',
+            'feat: vipshop主题的带导航菜单支持顶部栏',
+            'feat: field添加button类型，提取operation的tooltip和badge',
+            'feat: array/object field补全上下文',
+            'feat: block-title的标题支持html',
+            'feat: field的labelWidth为0时，不显示label',
+            'feat: color添加文字框',
+            'feat: block-title支持suffix-info消息提示',
+            'feat：新增icon：ams-icon-xinxitishiwenhao，fixed设置size时operations的label错位',
+            'fix: 修复field-file的before-upload无法覆盖问题'
+        ]
+    },
+    {
+        version: '0.18.6',
+        date: '2019.10.16',
         log: [
             'feat: 扩展列表行展开为表单展示',
             'fix: 列表高度自适应',

docs/zh-CN/.vuepress/components/config.js

@@ -22,7 +22,7 @@ export const fieldDefaultValue = {
     union: 'aaa',
     inputnumber: 1,
     image: "//b.appsimg.com/upload/vivaadmin/2018/11/07/69/1541579376290922128.png",
-    headimage: "//b.appsimg.com/upload/vivaadmin/2018/11/07/69/1541579376290922128.png",
+    // headimage: "//b.appsimg.com/upload/vivaadmin/2018/11/07/69/1541579376290922128.png",
     file: "http://b.appsimg.com/upload/vivaadmin/2018/11/07/69/1541579376290922128.png",
     video: "https://1251962819.vod2.myqcloud.com/54067453vodtransgzp125",
     audio: "https://a.vpimg2.com/upload/upimg2/i/9b0e909ed263b25c.mp3",

docs/zh-CN/.vuepress/components/doc-index.vue

@@ -7,8 +7,8 @@
                 <h2>面向管理后台的物料系统</h2>
                 <h3>ADMIN MATERIAL SYSTEM</h3>
                 <p>
-                    AMS是一套企业级的通用后台前端页面解决方案；<br/>
-                    使用它，可以零前端基础上手，可视化配置，生成后台页面。
+                    AMS是基于JSON配置来搭建后台管理系统页面的前端框架；<br/>
+                    使用它，能快速构建前端页面，提升页面开发效率。
                 </p>
                 <div class="banner-main-btns">
                     <a rel="noopener noreferrer"
@@ -79,15 +79,15 @@
                         <span class="s3"></span>
                         <span class="s4">30</span>
                         <span class="s5">通用区块</span>
-                        <P>若干个字段加上交互组成的功能单元（例：Form表单、List列表）</P>
+                        <P>若干字段与交互组成的功能单元（例如：Form表单、List列表）</P>
                     </a>
                     <a href="/ams/market/" class="item item3">
                         <span class="s1"></span>
                         <span class="s2"></span>
                         <span class="s3"></span>
                         <span class="s4">20</span>
                         <span class="s5">精选模板</span>
-                        <P>若干区块与交互组成的页面集合（具有增删改查功能的页面）</P>
+                        <P>若干区块与交互组成的页面集合（例如：具有增删改查功能的页面）</P>
                     </a>
                 </div>
             </div>
@@ -118,7 +118,8 @@
     </div>
 </template>
 <script>
-// 页面上报
+import Vue from 'vue';
+
 export default {
     // 在页面刚加载好时注册此行为
     mounted() {

docs/zh-CN/.vuepress/components/field/button/block.js

@@ -0,0 +1,33 @@
+export default {
+	buttonField1: {
+        ctx: 'edit',
+		type: 'form',
+		resource: {
+			fields: {
+                text: {
+                    type: 'text',
+                    label: '输入',
+                    props: {
+                        inline: true
+                    }
+                },
+                buttonA: {
+                    type: 'button',
+                    label: '按钮',
+                    labelWidth: '0',
+                    tooltip: '点击触发事件',
+                    props: {
+                        inline: true,
+                        type: 'primary'
+                    },
+                    event: 'pop'
+                }
+			}
+		},
+        actions: {
+            pop() {
+                this.$alert('你输入了：'+ this.data.text)
+            }
+        }
+	}
+};

docs/zh-CN/.vuepress/components/field/button/demo.vue

@@ -0,0 +1,40 @@
+<template>
+    <el-card shadow="hover" class="demo demo-card">
+        <ams-block v-if="init" :name="blockName" class="demo-card-preview"/>
+        <div :class="`demo-card-config ${showConfig ? 'open': ''}`">
+            <highlight-code lang="javascript">
+                {{ configCode }}
+            </highlight-code>
+        </div>
+        <div class="demo-card-config-btn" @click="toggleDemoCofig">
+            <i :class="`el-icon-caret-${showConfig ? 'top': 'bottom'}`"></i>
+             {{ showConfig ? '隐藏' : '显示'}}配置
+            <el-link v-if="onlineDemo" :href="onlineDemo" target="_blank" type="success">在线运行</el-link>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import demoMixins from '../../demo/demo-mixin'
+import block from './block'
+import stringify from '@ams-team/json-stringify'
+import beautify from 'js-beautify'
+
+export default {
+    mixins: [demoMixins],
+    mounted(){
+        const stringConfig = stringify(block[this.blockName])
+        this.configCode = beautify(stringConfig, { indent_size: 2, space_in_empty_paren: true })
+        
+        // 如果已经注册过则不再注册
+        if (ams && ams.blocks && ams.blocks[this.blockName]) {
+            this.init = true;
+            return;
+        }
+
+        ams.block(this.blockName, block[this.blockName])
+
+        this.init = true
+    }
+}
+</script>

docs/zh-CN/.vuepress/components/field/color/block.js

@@ -21,5 +21,31 @@ export default {
 			}
 		},
 		ctx: 'edit'
+	},
+	colorField2: {
+		type: 'form',
+		resource: {
+			fields: {
+				colorFieldA: {
+					type: 'color',
+                    label: '颜色',
+                    input: true,
+				},
+				colorFieldB: {
+					type: 'color',
+					default: '#f60',
+					label: '带默认值',
+                    input: true
+				},
+				colorFieldC: {
+					type: 'color',
+					default: '#f90',
+					label: '纯展示',
+                    ctx: 'view',
+                    input: true
+				}
+			}
+		},
+		ctx: 'edit'
 	}
 };

docs/zh-CN/.vuepress/components/field/image/block.js

@@ -247,5 +247,29 @@ export default {
 			image1: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
 			image2: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
 		}
+	},
+	imageFieldHeadimage: {
+		type: 'form',
+		resource: {
+			fields: {
+				image1: {
+					label: '头像上传',
+					type: 'image',
+					props: {
+						headimage: true
+					}
+				},
+				image2: {
+					label: '头像展示',
+					type: 'image',
+					ctx: 'view',
+					default: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+					props: {
+						headimage: true
+					}
+				}
+			}
+		},
+		ctx: 'edit'
 	}
 };

docs/zh-CN/.vuepress/components/scrimba.vue

@@ -1,13 +1,14 @@
 <template>
     <div class="scrimba">
-        <a :href="href" target="_blank" rel="noopener noreferrer">在 Scrimba 上尝试这节课</a>
+        <a :href="href" target="_blank" rel="noopener noreferrer">在 Scrimba 上尝试这节课{{ title ? '：' + title : '' }}</a>
     </div>
 </template>
 
 <script>
 export default {
     props: {
-        href: String
+        href: String,
+        title: String
     }
 }
 </script>

docs/zh-CN/.vuepress/config.js

@@ -35,6 +35,10 @@ module.exports = {
         text: '市场',
         link: '/market/'
       },
+      {
+        text: '示例',
+        link: '/example/'
+      },
       {
         text: '版本更新',
         items: [
@@ -95,7 +99,7 @@ module.exports = {
         {
           title: '基础',
           collapsable: false,
-          children: ['text','password', 'textarea', 'switch',  'color', 'rate', 'unitselect', 'link']
+          children: ['text','password', 'textarea', 'switch',  'color', 'rate', 'unitselect', 'link', 'button']
         },
         {
           title: '时间',
@@ -110,7 +114,7 @@ module.exports = {
         {
           title: '上传',
           collapsable: false,
-          children: ['image', 'headImage', 'audio', 'video', 'file', 'originfile']
+          children: ['image', 'audio', 'video', 'file', 'originfile']
         },
         {
           title: '数字',

docs/zh-CN/.vuepress/styles/index.styl

@@ -162,6 +162,7 @@ a, p a, li a, td a { color: #3eaf7c; }
 }
 .demo-card-preview{
     padding: 20px;
+    margin: 0!important;
     box-sizing: border-box;
     &.ams-block-router .sidebar-container{
         position: absolute

docs/zh-CN/api/ams-config.md

@@ -29,14 +29,12 @@ ams.config({
             return res;
         },
 
-        api: {
-            // 全局默认withCredentials，请求接口是否携带cookie
-            withCredentials: true,
-            // 全局默认contentType json | form
-            contentType: 'json',
-            // 全局成功code
-            successCode: 0
-        }
+        // 全局默认withCredentials，请求接口是否携带cookie
+        withCredentials: true,
+        // 全局默认contentType json | form
+        contentType: 'json',
+        // 全局成功code
+        successCode: 0
     }
 })
 ```

docs/zh-CN/api/block.md

@@ -2,6 +2,10 @@
 
 区块是AMS的基础组成单元，整个页面由多个 `block` 组合嵌套组成，每个 `block` 有自己的事件、行为、操作
 
+<ClientOnly>
+<scrimba href="https://scrimba.com/c/cV8vRKuR" title="字段和区块" />
+</ClientOnly>
+
 ## 注册 block
 
 注册一个name为 `formView` 的block

docs/zh-CN/api/custom.md

@@ -134,4 +134,4 @@ cli工具会跳过 `amsConfig` 配置的 `publish` 为 `false` 或者是线上
 
 ## 可用定制模块列表
 
-[npm模块列表](https://www.npmjs.com/search?q=%40ams-team) 内带 `@ams-team` scope的模块
+[npm模块列表](https://www.npmjs.com/search?q=%40ams-team) 内带 `@ams-team` scope的模块

docs/zh-CN/api/resource.md

@@ -2,6 +2,10 @@
 
 资源（resource）主要是用于描述接口的字段（field）组成以及请求配置参数，同一个资源可以被多个 `block` 共享使用
 
+<ClientOnly>
+<scrimba href="https://scrimba.com/c/cV8vRKuR" title="字段和区块" />
+</ClientOnly>
+
 ## 注册资源
 
 ```js

docs/zh-CN/block/api.md

@@ -9,7 +9,7 @@ API: API 配置
 - 类型：`string`
 - 默认值：`undefined`
 
-定义表单类型的block，目前可用类型有`form` `list` `dialog`
+定义区块的类型，目前可用类型有表单`form`、列表`list`、弹窗`dialog`、网格布局`Grid`等等
 
 ## resource
 

docs/zh-CN/block/grid.md

@@ -7,7 +7,7 @@ Grid: Grid 网格布局
 
 ### 基础用法
 
-> 一行两列，列间距为0，是通过设置`style: {'grid-gap': '0'}`控制
+> 一行两列，列间距为0，是通过设置`style: {'grid-gap': '0px'}`控制
 
 <ClientOnly>
 <block-grid-demo blockName="defaultGrid" onlineDemo="https://codepen.io/w3cmark/pen/eYOjPWo"/>