Merge pull request #127 from vipshop/develop

feat: 0.25.28
vipshop · Aug 11, 2020 · 397b955 · 397b955
2 parents 95c41b0 + 375c4bf
commit 397b955
Show file tree

Hide file tree

Showing 35 changed files with 576 additions and 31 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,27 @@
+module.exports = function (api) {
+    api.cache(true);
+
+    const presets = [
+        [
+            '@babel/preset-env',
+            {
+                'modules': false,
+                'loose': true,
+                'targets': {
+                    'browsers': ['> 1%', 'last 2 versions', 'not ie <= 8']
+                }
+            }
+        ]
+    ];
+    const plugins = ['transform-vue-jsx', '@babel/plugin-transform-runtime'];
+    const env = {
+        'test': {
+            'presets': [['@babel/preset-env', { 'targets': { 'node': 'current' }}]]
+        }
+    };
+    return {
+        presets,
+        plugins,
+        env
+    };
+};
diff --git a/build/webpack.component.js b/build/webpack.component.js
@@ -0,0 +1,170 @@
+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+const vueLoaderConfig = require('./vue-loader.conf');
+const FileManagerPlugin = require('filemanager-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const getPackages = require('./get-packages');
+let Components = getPackages();
+const config = require('./config');
+
+const entrys = {};
+let externals = {
+    vue: config.vue,
+    '@ams-team/ams': config.ams,
+    'element-ui': config.element
+};
+const moveFiles = [];
+
+// 打包类型
+let libraryTarget = process.argv && process.argv[5] || 'commonjs2'
+
+const webpackConfig = env => {
+    // 如果通过 npm run components -- --env.pkg=field-editor 传入会获取到 pkg，打包单一模块
+    if (env) {
+        if (env.pkg) {
+            Components = {
+                [env.pkg]: Components[env.pkg]
+            };
+        }
+    }
+    // 遍历需要打包的组件
+    Object.keys(Components).forEach(function(name) {
+        const componentPath = `packages/${name}`;
+        entrys[componentPath + '/lib/' + name] = path.join(
+            process.cwd(),
+            componentPath,
+            'src/index'
+        );
+        if (name === 'block-chart') {
+            entrys[componentPath + '/lib/theme/vipshop'] = path.join(
+                process.cwd(),
+                componentPath,
+                'src/theme/vipshop'
+            );
+            if (libraryTarget === 'umd') {
+                moveFiles.push({
+                    source: path.join(
+                        process.cwd(),
+                        componentPath,
+                        'lib/theme/vipshop.umd.js'
+                    ),
+                    destination:
+                        './dist/' +
+                        (/^field-/.test(name) ? 'fields/' : 'block/') +
+                        name +
+                        '-theme-vipshop@' +
+                        Components[name].version +
+                        '.js'
+                });
+            }
+        }
+        if (Components[name].externals) {
+            externals = {
+                ...externals,
+                ...Components[name].externals
+            };
+        }
+        // 不想发布的包将publish置为false
+        if (Components[name].publish !== false && libraryTarget === 'umd') {
+            moveFiles.push({
+                source: path.join(
+                    process.cwd(),
+                    componentPath,
+                    'lib/' + name + '.umd.js' // 只拷贝打包为umd的类型
+                ),
+                destination:
+                    './dist/' +
+                    (/^field-/.test(name) ? 'fields/' : 'block/') +
+                    name +
+                    '@' +
+                    Components[name].version +
+                    '.js'
+            });
+        }
+    });
+
+    return {
+        mode: 'production',
+        entry: entrys,
+        output: {
+            path: path.resolve(process.cwd(), './'),
+            filename: libraryTarget === 'umd' ? '[name].umd.js' : '[name].js',
+            chunkFilename: '[id].js',
+            libraryTarget,
+        },
+        resolve: {
+            extensions: ['.js', '.vue', '.json'],
+            alias: config.alias
+        },
+        externals: externals,
+        module: {
+            rules: [
+                {
+                    test: /\.(jsx?|babel|es6)$/,
+                    include: process.cwd(),
+                    exclude: config.jsexclude,
+                    loader: 'babel-loader'
+                },
+                {
+                    test: /\.vue$/,
+                    loader: 'vue-loader',
+                    options: vueLoaderConfig
+                },
+                {
+                    test: /\.css$/,
+                    loaders: ['style-loader', 'css-loader', 'postcss-loader']
+                },
+                {
+                    test: /\.scss$/,
+                    loaders: ['style-loader', 'css-loader', 'sass-loader']
+                },
+                {
+                    test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+                    loader: 'url-loader',
+                    query: {
+                        limit: 30000,
+                        name: path.posix.join('static', '[name].[hash:7].[ext]')
+                    }
+                },
+                {
+                    test: /\.svg(\?\S*)?$/,
+                    loader: 'url-loader',
+                    query: {
+                        limit: 30000,
+                        name: path.posix.join('static', '[name].[hash:7].[ext]')
+                    }
+                },
+                {
+                    test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+                    loader: 'url-loader',
+                    query: {
+                        limit: 10000,
+                        name: path.posix.join('static', '[name].[hash:7].[ext]')
+                    }
+                }
+            ]
+        },
+        plugins: [
+            new ProgressBarPlugin(),
+            new webpack.LoaderOptionsPlugin({
+                minimize: true
+            }),
+            new VueLoaderPlugin(),
+            new FileManagerPlugin({
+                onEnd: {
+                    mkdir:  [
+                        './dist/block',
+                        './dist/fields',
+                    ],
+                    move: moveFiles
+                }
+            })
+            // new BundleAnalyzerPlugin()
+        ]
+    };
+};
+
+module.exports = webpackConfig;
diff --git a/docs/package.json b/docs/package.json
@@ -6,7 +6,7 @@
   },
   "private": true,
   "dependencies": {
-    "@ams-team/ams": "latest",
+    "@ams-team/ams": "^0.25.28",
     "@ams-team/block-ams-config": "latest",
     "@ams-team/block-chart": "latest",
     "@ams-team/json-stringify": "latest",

diff --git a/docs/zh-CN/.vuepress/components/api/icon/list.vue b/docs/zh-CN/.vuepress/components/api/icon/list.vue
@@ -13,8 +13,12 @@ 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', 'code'
+                'lower-prices', 'petal', 'tag', 'vip-sales', 'caret-left', 'caret-right', 'caret-bottom', 'caret-bottom', 'caret-top', 
+                'information', 'export', 'data', 'flat', 'top', 'bottom', 'ams', 'vis', 'man', 'woman', 'watcher', 'brick', 'heart', 'advocate',
+                'crown', 'code', 'clock', 'car', 'star', 'edit', 'view', 'fixed', 'prohibit', 'balance', 'arrow-up', 'arrow-down', 'required', 'error',
+                'circle-plus', 'search', 'document-check', 'check', 'data-sale', 'data-uv', 'data-percent', 'reset', 'big-arrow-up',
+                'check2', 'close', 'data-line', 'dashboard', 'portrait', 'brand-equity', 'user-manager', 'account-sales', 'help', 'data-report',
+                'customer-operation', 'fold', 'question', 'user', 'mp', 'list-search', 'list-user', 'system-icon'
             ]
         }
     },

diff --git a/docs/zh-CN/.vuepress/components/changelog/logs.js b/docs/zh-CN/.vuepress/components/changelog/logs.js
@@ -1,9 +1,22 @@
 // 更新日志
 export default [
     {
-        version: '0.25.13',
-        date: '2020.06.05',
+        version: '0.25.28',
+        date: '2020.07.29',
         log: [
+            'feat: unitselect字段增加on.change回调',
+            'feat: list区块增加前端排序',
+            'feat: field-audio、field-image、field-video支持在props配置before-upload回调',
+            'feat: table组件支持tableTop的插槽',
+            'feat: list组件，前端分页时，点击排序请求接口',
+            'feat:  前端分页时，点击排序触发fieldChange',
+            'feat: object增加collapseKeys配置',
+            'feat: 字段button增加emitFieldChange配置，可手动触发fieldChange方法',
+            'feat: operation添加info支持',
+            'feat: 远程搜索组件添加onSuccess和onError的回调方法',
+            'fix: table组件添加context参数',
+            'feat: 补全list区块的props配置',
+            'feat: 内置action的read中，添加tansform配置',
             'feat: 内置的action支持配置path/method/successCode/transform',
             'feat: resource增加method的配置',
             'feat: table组件支持配置data.layout',
@@ -13,7 +26,7 @@ export default [
             'feat: [email protected]，导入的request支持withCredentials、contentType、headers、successCode的配置',
             'fix: list组件的列支持配置min-width',
             'feat: text-view增加suffix-icon配置',
-            'fix: options选项多时的popover交互修改'
+            'fix: options选项多时的popover交互修改',
         ]
     },
     {

diff --git a/.../.vuepress/components/block/tree/block.js → .../.vuepress/components/field/tree/block.js b/.../.vuepress/components/block/tree/block.js → .../.vuepress/components/field/tree/block.js
diff --git a/.../.vuepress/components/block/tree/demo.vue → .../.vuepress/components/field/tree/demo.vue b/.../.vuepress/components/block/tree/demo.vue → .../.vuepress/components/field/tree/demo.vue
diff --git a/docs/zh-CN/.vuepress/config.js b/docs/zh-CN/.vuepress/config.js
@@ -66,6 +66,7 @@ module.exports = {
             '',
             'resource',
             'block',
+            'template',
             'demo'
           ]
         },
@@ -103,7 +104,7 @@ module.exports = {
         {
           title: '基础',
           collapsable: false,
-          children: ['text','password', 'textarea', 'switch',  'color', 'rate', 'unitselect', 'link', 'button', 'html']
+          children: ['text','password', 'textarea', 'switch',  'color', 'rate', 'unitselect', 'link', 'button', 'html', 'tree']
         },
         {
           title: '时间',
@@ -159,8 +160,7 @@ module.exports = {
               'steps',
               'card',
               'dropdown',
-              'popover',
-              'tree'
+              'popover'
             ]
         },
         {

diff --git a/docs/zh-CN/api/quickstart.md b/docs/zh-CN/api/quickstart.md
@@ -0,0 +1,96 @@
+# 快速起步
+
+## 安装
+
+### 方式一：通过npm安装（依赖node环境）
+
+详见[通过npm安装](./npm.md)
+
+### 方式二：直接用 script 引入
+
+> 注意，需要先引入Vue.js element-ui的依赖
+
+```html
+<!-- Vue.js -->
+<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
+
+<!-- element-ui -->
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"/>
+<!-- 或者使用vipshop定制UI主题 -->
+<link rel="stylesheet" href="https://h5rsc.vipstatic.com/ams/[email protected]/index.css"/>
+
+<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
+
+<script src="https://h5rsc.vipstatic.com/ams/[email protected]"></script>
+```
+
+尝试AMS的最简单的方式是使用[JSRUN上的官方入门Demo](http://jsrun.net/sehKp/edit?utm_source=website)。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。
+
+## 使用
+
+AMS的核心思想是通过[规范数据接口](/api/api.html#read：读取单条数据)的数据结构，再用类JSON的格式配置对应的 `区块` 和 `资源`，即可渲染成有UI和数据交互的前端界面。
+
+<ClientOnly>
+<scrimba href="https://scrimba.com/c/cmkya6Tp" />
+</ClientOnly>
+
+### 第一步，注册资源
+
+```javascript
+ams.resource('demoRes', { // ”demoRes“为资源名
+    api: {
+        prefix: 'https://www.yournana.club/vipshop/', // 接口前缀
+        update: 'update', // 更新表单数据，值为更新接口的path，和接口前缀组成最终请求的url
+        read: 'read', // 读取表单数据，值为读取接口的path
+    },
+    fields: { // 字段
+        id: { // “id”为字段名
+            type: 'text', // 字段类型
+            label: '文本' // 该字段显示在页面的文本标签
+        },
+        testRate: {
+            type: 'rate',
+            label: '评分'
+        },
+        testTextarea: {
+            type: 'textarea',
+            label: '评语'
+        }
+    }
+})
+```
+
+### 第二步，注册区块
+
+```javascript
+ams.block('demo', { // “demo”为区块名
+    type: 'form', // 区块类型，“form”代表表单类型
+    ctx: 'edit', // 状态，“edit”代表为可编辑
+    resource: 'demoRes', // 该区块挂载的资源
+    operations: { // 操作
+        submit: { // 操作触发的事件名
+            type: 'button', // 操作类型
+            label: '提交' // 操作按钮显示的文案
+        }
+    },
+    events: { // 事件流
+        init: '@read', // “read”是内置的读取数据操作
+        submit: '@update' // “update”是内置的更新数据操作
+    }
+});
+```
+
+### 第三步，渲染区块
+
+```javascript
+// 渲染名字为“demo”的区块
+ams.render('demo')
+```
+
+<ClientOnly>
+<demo-start blockName="quickStart" onlineDemo="https://codepen.io/w3cmark/pen/bGbMVQq"/>
+</ClientOnly>
+
+我们已经成功完成了第一个AMS应用的配置了，通过简单的配置，不需要写UI和复杂的逻辑代码，就可以搭建出具备了数据读取、数据展示、数据编辑等基本功能的表单页面，接下来开始进入AMS核心概念`资源`的介绍。
+
+[下一节：资源](/api/resource.html)