refactor(core editor): replace element-ui with ant-design-vue

ly525
1 parent e799d34b
Showing 8 changed files with 447 additions and 139 deletions
front-end/h5/package.json
front-end/h5/src/components/core/editor.js
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/plugins/lbp-button.js
front-end/h5/src/components/plugins/lbp-picture.js
front-end/h5/src/main.js
front-end/h5/src/views/Editor.vue
front-end/h5/yarn.lock
@@ -10,6 +10,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "ant-design-vue": "^1.3.10",
     "core-js": "^2.6.5",
     "element-ui": "^2.9.1",
     "font-awesome": "4.7.0",
 import Vue from 'vue'
 import Element from './models/element'
+import './styles/index.scss'
 export default {
   name: 'Editor',
   components: {
+    ShortcutButton: {
+      functional: true,
+      props: {
+        faIcon: {
+          required: true,
+          type: String
+        },
+        title: {
+          required: true,
+          type: String
+        },
+        clickFn: {
+          required: false,
+          type: Function
+        }
+      },
+      render: (h, { props, listeners, slots }) => {
+        const onClick = props.clickFn || function () {}
+        return (
+          <a-button
+            class="shortcut-button"
+            onClick={onClick}
+          >
+            <i
+              class={['shortcut-icon', 'fa', `fa-${props.faIcon}`]}
+              aria-hidden='true'
+            />
+            <span>{ props.title }</span>
+          </a-button>
+        )
+      }
+    }
   },
   data: () => ({
+    activeMenuKey: 'pluginList',
     pages: [],
     elements: [],
     editingElement: null,
@@ -20,6 +54,7 @@ export default {
     },
     /**
      * !#zh 点击插件，copy 其基础数据到组件树（中间画布）
+     * #!en click the plugin shortcut, create new Element with the plugin's meta data
      * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
      */
     clone ({ name }) {
@@ -40,7 +75,8 @@ export default {
       this.mixinPluginCustomComponents2Editor()
     },
     /**
-     * 在左侧或顶部导航上显示可用的组件快捷方式，用户点击之后，即可将其添加到中间画布上
+     * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式，用户点击之后，即可将其添加到中间画布上
+     * #!en: render shortcust at the sidebar or the header. if user click the shortcut, the related plugin will be added to the canvas
      * @param {Object} group: {children, title, icon}
      */
     renderPluginShortcut (group) {
@@ -49,39 +85,34 @@ export default {
         : this.renderMultiPluginShortcuts(group)
     },
     /**
-     * 渲染多个插件的快捷方式
+     * #!zh 渲染多个插件的快捷方式
+     * #!en render shortcuts for multi plugins
      * @param {Object} group: {children, title, icon}
      */
     renderMultiPluginShortcuts (group) {
       const plugins = group.children
-      return <el-popover
+      return <a-popover
         placement="bottom"
-        width="400"
+        class="shortcust-button"
         trigger="hover">
-        {
-          plugins.sort().map(item => (
-            <el-button
-              class='ma-0 no-border-radius'
-              onClick={this.clone.bind(this, item)}
-            >
-              <i
-                class={['fa', `fa-${item.icon}`]}
-                aria-hidden='true'
-                style='display: block;font-size: 16px;margin-bottom: 10px;'
-              />
-              <span>{ item.title }</span>
-            </el-button>
-          ))
-        }
-        <el-button slot="reference" class='ma-0 no-border-radius'>
-          <i
-            class={['fa', `fa-${group.icon}`]}
-            aria-hidden='true'
-            style='display: block;font-size: 16px;margin-bottom: 10px;'
-          />
-          <span class="plugin-item__text">{group.title}</span>
-        </el-button>
-      </el-popover>
+        <a-row slot="content" gutter={20} style={{ width: '400px' }}>
+          {
+            plugins.sort().map(item => (
+              <a-col span={6}>
+                <ShortcutButton
+                  clickFn={this.clone.bind(this, item)}
+                  title={item.title}
+                  faIcon={item.icon}
+                />
+              </a-col>
+            ))
+          }
+        </a-row>
+        <ShortcutButton
+          title={group.title}
+          faIcon={group.icon}
+        />
+      </a-popover>
     },
     /**
      * #!zh: 渲染单个插件的快捷方式
@@ -90,18 +121,11 @@ export default {
      */
     renderSinglePluginShortcut ({ children }) {
       const [plugin] = children
-      return <el-button
-        class='ma-0 no-border-radius'
-        style={{ width: '100%' }}
-        onClick={this.clone.bind(this, plugin)}
-      >
-        <i
-          class={['fa', `fa-${plugin.icon}`]}
-          aria-hidden='true'
-          style='display: block;font-size: 16px;margin-bottom: 10px;'
-        />
-        <span class="plugin-item__text">{ plugin.title }</span>
-      </el-button>
+      return <ShortcutButton
+        clickFn={this.clone.bind(this, plugin)}
+        title={plugin.title}
+        faIcon={plugin.icon}
+      />
     },
     /**
      * #!zh: renderCanvas 渲染中间画布
@@ -146,24 +170,15 @@ export default {
     },
     renderPluginListPanel () {
       return (
-        <el-tabs tab-position="left" class="lb-tabs">
-          <el-tab-pane label='组件列表'>
-            <div class="full-height">
-              <el-row gutter={20}>
-                {
-                  this.groups.sort().map(group => (
-                    <el-col span={12} style={{ marginTop: '10px' }}>
-                      {this.renderPluginShortcut(group)}
-                    </el-col>
-                  ))
-                }
-              </el-row>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label='页面管理'>
-            <span>页面管理</span>
-          </el-tab-pane>
-        </el-tabs>
+        <a-row gutter={20}>
+          {
+            this.groups.sort().map(group => (
+              <a-col span={12} style={{ marginTop: '10px' }}>
+                {this.renderPluginShortcut(group)}
+              </a-col>
+            ))
+          }
+        </a-row>
       )
     },
     renderPropsEditorPanel (h) {
@@ -171,7 +186,7 @@ export default {
       const editingElement = this.editingElement
       const propsConfig = editingElement.editorConfig.propsConfig
       return (
-        <el-form ref="form" label-width="100px" size="mini" label-position="left">
+        <a-form ref="form" label-width="100px" size="mini" label-position="left">
           {
             Object.keys(propsConfig).map(propKey => {
               const item = propsConfig[propKey]
@@ -180,56 +195,119 @@ export default {
                 props: {
                   ...item.prop,
                   // https://vuejs.org/v2/guide/render-function.html#v-model
-                  ...{ value: editingElement[propKey] || item.defaultPropValue }
+                  value: editingElement.pluginProps[propKey] || item.defaultPropValue
                 },
                 on: {
                   // https://vuejs.org/v2/guide/render-function.html#v-model
-                  input (value) {
-                    editingElement[propKey] = value
+                  // input (e) {
+                  //   editingElement.pluginProps[propKey] = e.target ? e.target.value : e
+                  // }
+                  change (e) {
+                    editingElement.pluginProps[propKey] = e.target ? e.target.value : e
                   }
                 }
               }
               return (
-                <el-form-item label={item.label}>
+                <a-form-item label={item.label}>
                   { h(item.type, data) }
-                </el-form-item>
+                </a-form-item>
               )
             })
           }
-        </el-form>
+        </a-form>
       )
     }
   },
   render (h) {
     return (
-      <div id='designer-page'>
-        <div class='el-col-5'>
-          { this.renderPluginListPanel() }
-        </div>
-        <div class='el-col-13'>
-          <div style="text-align: center;">
-            <el-radio-group value={this.isPreviewMode} onInput={(value) => {
-              this.isPreviewMode = value
-            }} size="mini">
-              <el-radio-button label={false}>Edit</el-radio-button>
-              <el-radio-button label={true}>Preview</el-radio-button>
-            </el-radio-group>
-          </div>
-          <div class='canvas-wrapper'>
-            { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) }
-          </div>
-        </div>
-        <div class='el-col-6' style="border-left: 1px solid #eee;">
-          <el-tabs type="border-card" style="height: 100%;">
-            <el-tab-pane>
-              <span slot="label"><i class="el-icon-date"></i> 属性</span>
-              { this.renderPropsEditorPanel(h) }
-            </el-tab-pane>
-            <el-tab-pane label="动画">动画</el-tab-pane>
-            <el-tab-pane label="动作">动作</el-tab-pane>
-          </el-tabs>
-        </div>
-      </div>
+      <a-layout id="luban-layout" style={{ height: '100vh' }}>
+        <a-layout-header class="header">
+          <div class="logo">鲁班 H5</div>
+          {/* TODO we can show the plugins shortcuts here
+          <a-menu
+            theme="dark"
+            mode="horizontal"
+            defaultSelectedKeys={['2']}
+            style={{ lineHeight: '64px', float: 'left', marginLeft: '30%', background: 'transparent' }}
+          >
+            {
+              this.groups.sort().map((group, id) => (
+                <a-menu-item key={id} class="transparent-bg">
+                  {this.renderPluginShortcut(group)}
+                </a-menu-item>
+              ))
+            }
+          </a-menu> */}
+          <a-menu
+            theme="dark"
+            mode="horizontal"
+            defaultSelectedKeys={['2']}
+            style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
+          >
+            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small">预览</a-button></a-menu-item>
+            <a-menu-item key="2" class="transparent-bg"><a-button size="small">保存</a-button></a-menu-item>
+            <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item>
+          </a-menu>
+        </a-layout-header>
+        <a-layout>
+          <a-layout-sider width="160" style="background: #fff">
+            <a-menu onSelect={val => { this.activeMenuKey = val }} mode="inline" defaultSelectedKeys={['pluginList']} style={{ height: '100%', borderRight: 1 }}>
+              <a-menu-item key="pluginList">
+                <a-icon type="user" />
+                <span>组件列表</span>
+              </a-menu-item>
+              <a-menu-item key="2">
+                <a-icon type="video-camera" />
+                <span>页面管理</span>
+              </a-menu-item>
+              <a-menu-item key="3">
+                <a-icon type="upload" />
+                <span>更多模板</span>
+              </a-menu-item>
+            </a-menu>
+          </a-layout-sider>
+          <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
+            { this.renderPluginListPanel() }
+          </a-layout-sider>
+          <a-layout style="padding: 0 24px 24px">
+            <a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
+              <div style="text-align: center;">
+                <a-radio-group
+                  value={this.isPreviewMode}
+                  onInput={value => {
+                    this.isPreviewMode = value
+                  }}
+                >
+                  <a-radio-button label={false} value={false}>Edit</a-radio-button>
+                  <a-radio-button label={true} value={true}>Preview</a-radio-button>
+                </a-radio-group>
+              </div>
+              <div class='canvas-wrapper'>
+                { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) }
+              </div>
+            </a-layout-content>
+          </a-layout>
+          <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
+            <a-tabs type="card" style="height: 100%;">
+              {/*
+                #!zh tab 标题：
+                #!en tab title
+                  ElementUI：label
+                  Ant Design Vue：tab
+              */}
+              <a-tab-pane key="属性">
+                <span slot="tab">
+                  <a-icon type="apple" />
+                  属性
+                </span>
+                { this.renderPropsEditorPanel(h) }
+              </a-tab-pane>
+              <a-tab-pane label="动画" key='动画' tab='动画'>动画</a-tab-pane>
+              <a-tab-pane label="动作" key='动作' tab='动作'>动作</a-tab-pane>
+            </a-tabs>
+          </a-layout-sider>
+        </a-layout>
+      </a-layout>
     )
   }
 }
+#luban-layout  {
+  .header {
+    padding: 0 10px;
+
+    .logo {
+      width: 120px;
+      height: 31px;
+      // background: rgba(255,255,255,.2);
+      margin: 16px 28px 16px 0;
+      float: left;
+    
+      line-height: 31px;
+      text-align: center;
+      color: white;
+      font-size: 16px;
+    }
+  }
+
+  .shortcut-button {
+    width: 100%;
+    height: 40px;
+
+    .shortcut-icon {
+      padding-right: 4px;
+      // display: block;
+      // font-size: 16px;
+      // margin-bottom: 10px;
+    }
+  }
+
+}
+
+
+
+.transparent-bg {
+  background: transparent !important;
+}
+
+.no-border {
+  border: none !important;
+}
 \ No newline at end of file
@@ -11,19 +11,21 @@ export default {
       borderWidth,
       text
     } = this
+
+    const style = {
+      color,
+      textAlign,
+      backgroundColor,
+      fontSize: fontSize,
+      lineHeight: lineHeight + 'em',
+      borderColor,
+      borderRadius: borderRadius + 'px',
+      borderWidth: borderWidth + 'px',
+      textDecoration: 'none'
+    }
     return (
       <button
-        style={{
-          color,
-          textAlign,
-          backgroundColor,
-          fontSize: fontSize + 'px',
-          lineHeight: lineHeight + 'em',
-          borderColor,
-          borderRadius: borderRadius + 'px',
-          borderWidth: borderWidth + 'px',
-          textDecoration: 'none'
-        }}
+        style={style}
       >{text}</button>)
   },
   name: 'lbp-button',
@@ -84,13 +86,13 @@ export default {
   editorConfig: {
     propsConfig: {
       text: {
-        type: 'el-input',
+        type: 'a-input',
         label: '按钮文字',
         require: true,
         defaultPropValue: '按钮'
       },
       fontSize: {
-        type: 'el-input-number',
+        type: 'a-input-number',
         label: '字号(px)',
         require: true,
         prop: {
@@ -101,7 +103,7 @@ export default {
         defaultPropValue: 14
       },
       color: {
-        type: 'el-input',
+        type: 'a-input',
         label: '文字颜色',
         // !#zh 为编辑组件指定 prop
         prop: {
@@ -111,7 +113,7 @@ export default {
         defaultPropValue: 'black'
       },
       backgroundColor: {
-        type: 'el-input', // lbs-color-picker
+        type: 'a-input', // lbs-color-picker
         label: '背景颜色',
         prop: {
           type: 'color'
@@ -120,7 +122,7 @@ export default {
         defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
       },
       borderColor: {
-        type: 'el-input', // lbs-color-picker
+        type: 'a-input', // lbs-color-picker
         label: '边框颜色',
         prop: {
           type: 'color'
@@ -129,7 +131,7 @@ export default {
         defaultPropValue: '#eeeeee'
       },
       borderWidth: {
-        type: 'el-input-number',
+        type: 'a-input-number',
         label: '边框宽度(px)',
         require: true,
         prop: {
@@ -140,7 +142,7 @@ export default {
         defaultPropValue: 1
       },
       borderRadius: {
-        type: 'el-input-number',
+        type: 'a-input-number',
         label: '圆角(px)',
         require: true,
         prop: {
@@ -151,7 +153,7 @@ export default {
         defaultPropValue: 0
       },
       lineHeight: {
-        type: 'el-input-number',
+        type: 'a-input-number',
         label: '行高',
         require: true,
         prop: {
@@ -172,14 +174,14 @@ export default {
       'lbs-text-align': {
         template: `
           <div class="wrap">
-            <el-radio-group v-model="value_" size="small">
-              <el-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
-                <el-radio-button :label="item.value">
+            <a-radio-group v-model="value_" size="small">
+              <a-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
+                <a-radio-button :label="item.value">
                   <!-- issue #8 -->
                   <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
-                </el-radio-button>
-              </el-tooltip>
-            </el-radio-group>
+                </a-radio-button>
+              </a-tooltip>
+            </a-radio-group>
           </div>`,
         props: {
           value: {
@@ -227,14 +229,14 @@ export default {
           }
         },
         template: `
-          <el-select v-model="value_" placeholder="类型">
-            <el-option
+          <a-select v-model="value_" placeholder="类型">
+            <a-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
-            </el-option>
-          </el-select>
+            </a-option>
+          </a-select>
         `,
         data: () => ({
           options: [
@@ -19,7 +19,7 @@ export default {
     propsConfig: {
       imgSrc: {
         // type: 'picture-picker',
-        type: 'el-input',
+        type: 'a-input',
         label: '图片url',
         prop: {
           type: 'textarea'
@@ -3,13 +3,17 @@ import App from &#39;./App.vue&#39;
 import router from './router'
 import store from './store/'
 import './registerServiceWorker'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+// import ElementUI from 'element-ui'
+import Antd from 'ant-design-vue'
+
+// import 'element-ui/lib/theme-chalk/index.css'
+import 'ant-design-vue/dist/antd.css'
 // !#zh 请注意，务必使用 font-awesome@4.7.0 版本
 import 'font-awesome/css/font-awesome.min.css'
 Vue.config.productionTip = false
-Vue.use(ElementUI)
+Vue.use(Antd)
+// Vue.use(ElementUI)
 new Vue({
   router,
@@ -91,14 +91,6 @@ $designerWidth: 320px;
 $designerHeight: 568px;
 $designerWidthHalf: $designerWidth / 2;
-#designer-page {
-  display: flex;
-  // https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc
-  // less: min-height: ~'calc(100% - 40px)';
-  min-height: calc(100% - 40px);
-
-}
-
 .canvas-wrapper {
   position: relative;
   top: 5%;
@@ -106,6 +98,7 @@ $designerWidthHalf: $designerWidth / 2;
   height: $designerHeight;
   border: 1px #ebeaea solid;
   margin: 0 auto;
+  background: #fff;
 }
 .lb-tabs {
@@ -2,6 +2,19 @@
 # yarn lockfile v1
+"@ant-design/icons-vue@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-1.0.1.tgz#343579219c04190831c9ca3826aec7361bb8b4d4"
+  integrity sha1-NDV5IZwEGQgxyco4Jq7HNhu4tNQ=
+  dependencies:
+    ant-design-palettes "^1.1.3"
+    babel-runtime "^6.26.0"
+
+"@ant-design/icons@^1.1.15":
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/@ant-design/icons/download/@ant-design/icons-1.2.1.tgz#8e19301b1433ec67d6bbd0e892782e2ade561ff9"
+  integrity sha1-jhkwGxQz7GfWu9DoknguKt5WH/k=
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35":
   version "7.0.0"
   resolved "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
@@ -1273,6 +1286,13 @@ acorn@^6.0.1, acorn@^6.0.2, acorn@^6.0.7, acorn@^6.1.1:
   resolved "https://registry.npm.taobao.org/acorn/download/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
   integrity sha1-fSWuBbuK0fm2mRCOEJTs14hK3B8=
+add-dom-event-listener@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/add-dom-event-listener/download/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
+  integrity sha1-apLbOg3Qq8JU4JXA8dwUrLuq4xA=
+  dependencies:
+    object-assign "4.x"
+
 address@^1.0.3:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/address/download/address-1.1.0.tgz#ef8e047847fcd2c5b6f50c16965f924fd99fe709"
@@ -1365,6 +1385,46 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
+ant-design-palettes@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npm.taobao.org/ant-design-palettes/download/ant-design-palettes-1.1.3.tgz#84119b1a4d86363adc52a38d587e65336a0a27dd"
+  integrity sha1-hBGbGk2GNjrcUqONWH5lM2oKJ90=
+  dependencies:
+    tinycolor2 "^1.4.1"
+
+ant-design-vue@^1.3.10:
+  version "1.3.10"
+  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.10.tgz#82813f90888f77dd0e56c8a71e14efa0f8d8e3da"
+  integrity sha1-goE/kIiPd90OVsinHhTvoPjY49o=
+  dependencies:
+    "@ant-design/icons" "^1.1.15"
+    "@ant-design/icons-vue" "^1.0.1"
+    add-dom-event-listener "^1.0.2"
+    array-tree-filter "^2.1.0"
+    async-validator "^1.8.2"
+    babel-helper-vue-jsx-merge-props "^2.0.3"
+    babel-runtime "6.x"
+    classnames "^2.2.5"
+    component-classes "^1.2.6"
+    dom-align "^1.7.0"
+    dom-closest "^0.2.0"
+    dom-scroll-into-view "^1.2.1"
+    enquire.js "^2.1.6"
+    intersperse "^1.0.0"
+    is-negative-zero "^2.0.0"
+    ismobilejs "^0.5.1"
+    json2mq "^0.2.0"
+    lodash "^4.17.5"
+    moment "^2.21.0"
+    mutationobserver-shim "^0.3.2"
+    omit.js "^1.0.0"
+    raf "^3.4.0"
+    resize-observer-polyfill "^1.5.1"
+    shallow-equal "^1.0.0"
+    shallowequal "^1.0.2"
+    vue-ref "^1.0.4"
+    warning "^3.0.0"
+
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.npm.taobao.org/any-promise/download/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -1470,6 +1530,11 @@ array-reduce@~0.0.0:
   resolved "https://registry.npm.taobao.org/array-reduce/download/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
   integrity sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=
+array-tree-filter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/array-tree-filter/download/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha1-hzrAD+yDdJ8lWsjdCDgUtPYykZA=
+
 array-union@^1.0.1, array-union@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/array-union/download/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -1546,6 +1611,13 @@ async-limiter@~1.0.0:
   resolved "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
   integrity sha1-ePrtjD0HSrgfIrTphdeehzj3IPg=
+async-validator@^1.8.2:
+  version "1.11.3"
+  resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-1.11.3.tgz?cache=0&sync_timestamp=1561700133414&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.11.3.tgz#23703b19740721d88edbcb6310f6d745da9ec109"
+  integrity sha1-I3A7GXQHIdiO28tjEPbXRdqewQk=
+  dependencies:
+    babel-runtime "6.x"
+
 async-validator@~1.8.1:
   version "1.8.5"
   resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
@@ -1677,7 +1749,7 @@ babel-generator@^6.18.0, babel-generator@^6.26.0:
     source-map "^0.5.7"
     trim-right "^1.0.1"
-babel-helper-vue-jsx-merge-props@^2.0.0:
+babel-helper-vue-jsx-merge-props@^2.0.0, babel-helper-vue-jsx-merge-props@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
   integrity sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=
@@ -1800,7 +1872,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
-babel-runtime@6.x, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.x, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -2388,6 +2460,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "https://registry.npm.taobao.org/classnames/download/classnames-2.2.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclassnames%2Fdownload%2Fclassnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha1-Q5Nb/90pHzJtrQogUwmzjQD2UM4=
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -2586,11 +2663,23 @@ commondir@^1.0.1:
   resolved "https://registry.npm.taobao.org/commondir/download/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+component-classes@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npm.taobao.org/component-classes/download/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
+  integrity sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=
+  dependencies:
+    component-indexof "0.0.3"
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A=
+component-indexof@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.npm.taobao.org/component-indexof/download/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
+  integrity sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=
+
 compressible@~2.0.16:
   version "2.0.17"
   resolved "https://registry.npm.taobao.org/compressible/download/compressible-2.0.17.tgz#6e8c108a16ad58384a977f3a482ca20bff2f38c1"
@@ -3344,6 +3433,18 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
+dom-align@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.npm.taobao.org/dom-align/download/dom-align-1.9.0.tgz#27339be5a2301e7d8470bdee54575c835c981654"
+  integrity sha1-JzOb5aIwHn2EcL3uVFdcg1yYFlQ=
+
+dom-closest@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npm.taobao.org/dom-closest/download/dom-closest-0.2.0.tgz#ebd9f91d1bf22e8d6f477876bbcd3ec90216c0cf"
+  integrity sha1-69n5HRvyLo1vR3h2u80+yQIWwM8=
+  dependencies:
+    dom-matches ">=1.0.1"
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.npm.taobao.org/dom-converter/download/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -3356,6 +3457,16 @@ dom-event-types@^1.0.0:
   resolved "https://registry.npm.taobao.org/dom-event-types/download/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
   integrity sha1-WDCgop4b+Df+UKcM2ApZcjKBPK4=
+dom-matches@>=1.0.1:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/dom-matches/download/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c"
+  integrity sha1-0nKLQWqHUzmA6wibhI0lPPI6dYw=
+
+dom-scroll-into-view@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/dom-scroll-into-view/download/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
+  integrity sha1-6PNnMt0ImwIBqI14Fdw/iObWbH4=
+
 dom-serializer@0:
   version "0.1.1"
   resolved "https://registry.npm.taobao.org/dom-serializer/download/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
@@ -3535,6 +3646,11 @@ enhanced-resolve@^4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.npm.taobao.org/enquire.js/download/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=
+
 entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.npm.taobao.org/entities/download/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -5238,6 +5354,11 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
+intersperse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/intersperse/download/intersperse-1.0.0.tgz#f2561fb1cfef9f5277cc3347a22886b4351a5181"
+  integrity sha1-8lYfsc/vn1J3zDNHoiiGtDUaUYE=
+
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finvariant%2Fdownload%2Finvariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -5464,6 +5585,11 @@ is-installed-globally@0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/is-negative-zero/download/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/is-number/download/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
@@ -5619,6 +5745,11 @@ isexe@^2.0.0:
   resolved "https://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+ismobilejs@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.npm.taobao.org/ismobilejs/download/ismobilejs-0.5.2.tgz#e81bacf6187c532ad8348355f4fecd6e6adfdce1"
+  integrity sha1-6Bus9hh8UyrYNINV9P7Nbmrf3OE=
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/isobject/download/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -6196,6 +6327,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npm.taobao.org/json2mq/download/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
+  dependencies:
+    string-convert "^0.2.0"
+
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.npm.taobao.org/json3/download/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -6892,7 +7030,7 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
   dependencies:
     minimist "0.0.8"
-moment@2.24.0:
+moment@2.24.0, moment@^2.21.0:
   version "2.24.0"
   resolved "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s=
@@ -6937,6 +7075,11 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
+mutationobserver-shim@^0.3.2:
+  version "0.3.3"
+  resolved "https://registry.npm.taobao.org/mutationobserver-shim/download/mutationobserver-shim-0.3.3.tgz#65869630bc89d7bf8c9cd9cb82188cd955aacd2b"
+  integrity sha1-ZYaWMLyJ17+MnNnLghiM2VWqzSs=
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.npm.taobao.org/mute-stream/download/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -7220,7 +7363,7 @@ oauth-sign@~0.9.0:
   resolved "https://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU=
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -7299,6 +7442,13 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.npm.taobao.org/obuf/download/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha1-Cb6jND1BhZ69RGKS0RydTbYZCE4=
+omit.js@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/omit.js/download/omit.js-1.0.2.tgz#91a14f0eba84066dfa015bf30e474c47f30bc858"
+  integrity sha1-kaFPDrqEBm36AVvzDkdMR/MLyFg=
+  dependencies:
+    babel-runtime "^6.23.0"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.npm.taobao.org/on-finished/download/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -8292,6 +8442,13 @@ querystringify@^2.1.1:
   resolved "https://registry.npm.taobao.org/querystringify/download/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
   integrity sha1-YOWl/WSn+L+k0qsu1v30yFutFU4=
+raf@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha1-B0LpmkplUvRF1z4+4DKK8P8e3jk=
+  dependencies:
+    performance-now "^2.1.0"
+
 ramda@0.24.1:
   version "0.24.1"
   resolved "https://registry.npm.taobao.org/ramda/download/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
@@ -8663,7 +8820,7 @@ reselect@^3.0.1:
   resolved "https://registry.npm.taobao.org/reselect/download/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
   integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
-resize-observer-polyfill@^1.5.0:
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=
@@ -8998,6 +9155,16 @@ shallow-clone@^1.0.0:
     kind-of "^5.0.0"
     mixin-object "^2.0.1"
+shallow-equal@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/shallow-equal/download/shallow-equal-1.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fshallow-equal%2Fdownload%2Fshallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc"
+  integrity sha1-/YKNICn/ThlWnbfhnlNelOLR9cw=
+
+shallowequal@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/shallowequal/download/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha1-GI1SHelbkIdAT9TctosT3wrk5/g=
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -9346,6 +9513,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.npm.taobao.org/strict-uri-encode/download/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.npm.taobao.org/string-convert/download/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/string-length/download/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -9696,6 +9868,11 @@ timsort@^0.3.0:
   resolved "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@0.1.0:
   version "0.1.0"
   resolved "https://registry.npm.taobao.org/tmp/download/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
@@ -10142,6 +10319,11 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
+vue-ref@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npm.taobao.org/vue-ref/download/vue-ref-1.0.6.tgz#b9b3d7d0e290ee2fd3d50d5d7bdac520806cb265"
+  integrity sha1-ubPX0OKQ7i/T1Q1de9rFIIBssmU=
+
 vue-router@^3.0.3:
   version "3.0.6"
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
@@ -10192,6 +10374,13 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/warning/download/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.npm.taobao.org/watch/download/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"