diff --git a/src/components/navigate.vue b/src/components/navigate.vue
index 6371e66..a6db800 100644
--- a/src/components/navigate.vue
+++ b/src/components/navigate.vue
@@ -23,7 +23,6 @@
             <div class="navigate-group">组件</div>
             <Menu-group v-for="item in navigate.components" :key="item.type" :title="item.type">
                 <Menu-item v-for="component in item.list" :key="component.path" :name="component.path">
-                    <i class="ivu-icon" :class="'ivu-icon-' + component.icon"></i>
                     <template>
                         {{ component.title.split(' ')[0] }}
                         <span class="navigate-group-span">{{ component.title.split(' ')[1] }}</span>
@@ -31,16 +30,6 @@
                 </Menu-item>
             </Menu-group>
         </Menu>
-        <Menu width="auto" :active-name="activeKey" @on-select="handleSelect" v-if="type === 'practice'">
-            <Menu-item v-for="item in navigate.practice" :key="item.path" :name="item.path">
-                {{ item.title }}
-            </Menu-item>
-        </Menu>
-        <Menu width="auto" :active-name="activeKey" @on-select="handleSelect" v-if="type === 'live'">
-            <Menu-item v-for="item in navigate.live" :key="item.path" :name="item.path">
-                {{ item.title }}
-            </Menu-item>
-        </Menu>
     </div>
 </template>
 <script>
diff --git a/src/config/navigate.js b/src/config/navigate.js
index 055833f..7dadc9d 100644
--- a/src/config/navigate.js
+++ b/src/config/navigate.js
@@ -15,153 +15,103 @@ const list = {
     ],
     components: [
         {
-            type: 'Basic',
-            title: '基础',
+            type: 'Layout',
+            title: '布局',
             list: [
                 {
-                    title: 'Grid 栅格',
-                    path: '/components/grid',
-                    img: 'grid.png',
-                    icon: 'ios-grid-view-outline'
+                    title: 'Layout 栅格布局',
+                    path: '/components/layout'
                 },
                 {
-                    title: 'Layout 布局',
-                    path: '/components/layout',
-                    img: 'layout-new.png',
-                    icon: 'ios-browsers-outline'
+                    title: 'Grid 宫格',
+                    path: '/components/grid'
                 },
                 {
-                    title: 'Color 色彩',
-                    path: '/components/color',
-                    img: 'color.png',
-                    icon: 'android-color-palette'
+                    title: 'Panel 面板',
+                    path: '/components/panel'
                 },
                 {
-                    title: 'Font 字体',
-                    path: '/components/font',
-                    img: 'font.png',
-                    icon: 'at'
+                    title: 'List 列表',
+                    path: '/components/list'
                 },
                 {
-                    title: 'Button 按钮',
-                    path: '/components/button',
-                    img: 'button.png',
-                    icon: 'social-youtube-outline'
+                    title: 'Card 卡片',
+                    path: '/components/card'
                 },
-                {
-                    title: 'Icon 图标',
-                    path: '/components/icon',
-                    img: 'icon.png',
-                    icon: 'ios-heart-outline'
-                }
             ]
         },
         {
-            type: 'Form',
-            title: '表单',
+            type: 'Basic',
+            title: '基础',
             list: [
                 {
-                    title: 'Input 输入框',
-                    path: '/components/input',
-                    img: 'input.png',
-                    icon: 'ios-compose-outline'
-                },
-                {
-                    title: 'Radio 单选框',
-                    path: '/components/radio',
-                    img: 'radio.png',
-                    icon: 'ios-circle-filled'
-                },
-                {
-                    title: 'Checkbox 多选框',
-                    path: '/components/checkbox',
-                    img: 'checkbox.png',
-                    icon: 'android-checkbox-outline'
+                    title: 'Button 按钮',
+                    path: '/components/button'
                 },
                 {
-                    title: 'Switch 开关',
-                    path: '/components/switch',
-                    img: 'switch.png',
-                    icon: 'toggle'
+                    title: 'Color 色彩',
+                    path: '/components/color'
                 },
                 {
-                    title: 'Table 表格',
-                    path: '/components/table',
-                    img: 'table.png',
-                    icon: 'ios-grid-view'
+                    title: 'Icon 图标',
+                    path: '/components/icon'
                 },
+            ]
+        },
+        {
+            type: 'Navigation',
+            title: '导航',
+            list: [
                 {
-                    title: 'Select 选择器',
-                    path: '/components/select',
-                    img: 'select.png',
-                    icon: 'ios-arrow-down'
+                    title: 'TabBar 标签栏',
+                    path: '/components/tab-bar'
                 },
                 {
-                    title: 'AutoComplete 自动完成',
-                    path: '/components/auto-complete',
-                    img: 'auto-complete.png',
-                    icon: 'ios-list-outline'
+                    title: 'Tabs 标签页',
+                    path: '/components/tabs'
                 },
                 {
-                    title: 'Slider 滑块',
-                    path: '/components/slider',
-                    img: 'slider.png',
-                    icon: 'minus-round'
+                    title: 'Drawer 抽屉',
+                    path: '/components/drawer'
                 },
                 {
-                    title: 'DatePicker 日期选择器',
-                    path: '/components/date-picker',
-                    img: 'date-picker.png',
-                    icon: 'ios-calendar-outline'
+                    title: 'Page 分页',
+                    path: '/components/page'
                 },
                 {
-                    title: 'TimePicker 时间选择器',
-                    path: '/components/time-picker',
-                    img: 'time-picker.png',
-                    icon: 'ios-clock-outline'
+                    title: 'Steps 步骤条',
+                    path: '/components/steps'
                 },
                 {
-                    title: 'Cascader 级联选择',
-                    path: '/components/cascader',
-                    img: 'cascader.png',
-                    icon: 'ios-more-outline'
+                    title: 'NoticeBar 通告栏',
+                    path: '/components/notice-bar'
                 },
+            ]
+        },
+        {
+            type: 'Feedback',
+            title: '操作反馈',
+            list: [
                 {
-                    title: 'Transfer 穿梭框',
-                    path: '/components/transfer',
-                    img: 'transfer.png',
-                    icon: 'ios-pause-outline'
+                    title: 'ActionSheet 行动按钮',
+                    path: '/components/action-sheet'
                 },
                 {
-                    title: 'InputNumber 数字输入框',
-                    path: '/components/input-number',
-                    img: 'input-number.png',
-                    icon: 'ios-calculator'
+                    title: 'Toast 轻提示',
+                    path: '/components/toast'
                 },
                 {
-                    title: 'Rate 评分',
-                    path: '/components/rate',
-                    img: 'rate.png',
-                    icon: 'ios-star'
+                    title: 'Modal 对话框',
+                    path: '/components/modal'
                 },
                 {
-                    title: 'Upload 上传',
-                    path: '/components/upload',
-                    img: 'upload.png',
-                    icon: 'ios-cloud-upload-outline'
+                    title: 'Message 全局提醒',
+                    path: '/components/message'
                 },
                 {
-                    title: 'ColorPicker 颜色选择器',
-                    path: '/components/color-picker',
-                    img: 'color-picker.png',
-                    icon: 'android-color-palette'
+                    title: 'Spin 加载中',
+                    path: '/components/spin'
                 },
-                {
-                    title: 'Form 表单',
-                    path: '/components/form',
-                    img: 'form.png',
-                    icon: 'ios-list-outline'
-                }
             ]
         },
         {
@@ -169,185 +119,55 @@ const list = {
             title: '视图',
             list: [
                 {
-                    title: 'Alert 警告提示',
-                    path: '/components/alert',
-                    img: 'alert.png',
-                    icon: 'alert'
+                    title: 'Badge 徽章',
+                    path: '/components/badge'
                 },
                 {
-                    title: 'Card 卡片',
-                    path: '/components/card',
-                    img: 'card.png',
-                    icon: 'ios-browsers-outline'
-                },
-                {
-                    title: 'Message 全局提示',
-                    path: '/components/message',
-                    img: 'message.png',
-                    icon: 'ios-information-outline'
-                },
-                {
-                    title: 'Notice 通知提醒',
-                    path: '/components/notice',
-                    img: 'notice.png',
-                    icon: 'ios-bell-outline'
+                    title: 'Alert 警告提示',
+                    path: '/components/alert'
                 },
                 {
-                    title: 'Modal 对话框',
-                    path: '/components/modal',
-                    img: 'modal.png',
-                    icon: 'ios-chatbubble-outline'
+                    title: 'Tag 标签',
+                    path: '/components/tag'
                 },
                 {
                     title: 'Progress 进度条',
-                    path: '/components/progress',
-                    img: 'progress.png',
-                    icon: 'android-remove'
+                    path: '/components/progress'
                 },
                 {
                     title: 'Avatar 头像',
-                    path: '/components/avatar',
-                    img: 'avatar.png',
-                    icon: 'person'
-                },
-                {
-                    title: 'Badge 徽标数',
-                    path: '/components/badge',
-                    img: 'badge.png',
-                    icon: 'email-unread'
-                },
-                {
-                    title: 'Collapse 折叠面板',
-                    path: '/components/collapse',
-                    img: 'collapse.png',
-                    icon: 'ios-albums-outline'
-                },
-                {
-                    title: 'Timeline 时间轴',
-                    path: '/components/timeline',
-                    img: 'timeline.png',
-                    icon: 'android-more-vertical'
-                },
-                {
-                    title: 'Tag 标签',
-                    path: '/components/tag',
-                    img: 'tag.png',
-                    icon: 'ios-pricetags-outline'
-                },
-                {
-                    title: 'Tooltip 文字提示',
-                    path: '/components/tooltip',
-                    img: 'tooltip.png',
-                    icon: 'chatbox-working'
+                    path: '/components/avatar'
                 },
-                {
-                    title: 'Poptip 气泡提示',
-                    path: '/components/poptip',
-                    img: 'poptip.png',
-                    icon: 'chatbubble-working'
-                },
-                {
-                    title: 'Carousel 走马灯',
-                    path: '/components/carousel',
-                    img: 'carousel.png',
-                    icon: 'ios-film-outline'
-                },
-                {
-                    title: 'Tree 树形控件',
-                    path: '/components/tree',
-                    img: 'tree.png',
-                    icon: 'network'
-                }
             ]
         },
         {
-            type: 'Navigation',
-            title: '导航',
+            type: 'Form',
+            title: '表单',
             list: [
                 {
-                    title: 'Menu 导航菜单',
-                    path: '/components/menu',
-                    img: 'menu.png',
-                    icon: 'navicon-round'
-                },
-                {
-                    title: 'Tabs 标签页',
-                    path: '/components/tabs',
-                    img: 'tabs.png',
-                    icon: 'social-windows-outline'
-                },
-                {
-                    title: 'Dropdown 下拉菜单',
-                    path: '/components/dropdown',
-                    img: 'dropdown.png',
-                    icon: 'arrow-down-b'
-                },
-                {
-                    title: 'Page 分页',
-                    path: '/components/page',
-                    img: 'page.png',
-                    icon: 'ios-book-outline'
+                    title: 'Input 输入框',
+                    path: '/components/input'
                 },
                 {
-                    title: 'Breadcrumb 面包屑',
-                    path: '/components/breadcrumb',
-                    img: 'breadcrumb.png',
-                    icon: 'ios-arrow-right'
+                    title: 'Radio 单选',
+                    path: '/components/radio'
                 },
                 {
-                    title: 'Steps 步骤条',
-                    path: '/components/steps',
-                    img: 'steps.png',
-                    icon: 'ios-checkmark-outline'
+                    title: 'Checkbox 复选',
+                    path: '/components/checkbox'
                 },
                 {
-                    title: 'LoadingBar 加载进度条',
-                    path: '/components/loading-bar',
-                    img: 'loading-bar.png',
-                    icon: 'ios-minus-empty'
-                }
-            ]
-        },
-        {
-            type: 'Chart',
-            title: '图表',
-            list: [
-                {
-                    title: 'Circle 进度环',
-                    path: '/components/circle',
-                    img: 'circle.png',
-                    icon: 'ios-circle-outline'
-                }
-            ]
-        },
-        {
-            type: 'Other',
-            title: '其它',
-            list: [
-                {
-                    title: 'Affix 图钉',
-                    path: '/components/affix',
-                    img: 'affix.png',
-                    icon: 'pin'
+                    title: 'Switch 开关',
+                    path: '/components/switch'
                 },
                 {
-                    title: 'BackTop 返回顶部',
-                    path: '/components/back-top',
-                    img: 'back-top.png',
-                    icon: 'ios-arrow-up'
+                    title: 'Rate 评分',
+                    path: '/components/rate'
                 },
                 {
-                    title: 'Spin 加载中',
-                    path: '/components/spin',
-                    img: 'spin.png',
-                    icon: 'load-d'
+                    title: 'InputNumber 数字输入框',
+                    path: '/components/input-number'
                 },
-                {
-                    title: 'Scroll 无限滚动',
-                    path: '/components/scroll',
-                    img: 'scroll.png',
-                    icon: 'ios-more'
-                }
             ]
         }
     ]
diff --git a/src/router.js b/src/router.js
index 7c8368a..545061e 100755
--- a/src/router.js
+++ b/src/router.js
@@ -16,6 +16,20 @@ const routers = [
         },
         component: (resolve) => require(['./views/guide/start.vue'], resolve)
     },
+    {
+        path: '/docs/guide/update',
+        meta: {
+            title: '更新日志'
+        },
+        component: (resolve) => require(['./views/guide/update.vue'], resolve)
+    },
+    {
+        path: '/components/layout',
+        meta: {
+            title: '栅格布局 Layout'
+        },
+        component: (resolve) => require(['./views/components/layout.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'
diff --git a/src/views/components/affix-en.vue b/src/views/components/affix-en.vue
deleted file mode 100644
index f2c7e87..0000000
--- a/src/views/components/affix-en.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<style scoped>
-    article{
-        min-height: 1500px;
-    }
-    .demo-affix{
-        display: inline-block;
-        color: #fff;
-        padding: 10px 30px;
-        text-align: center;
-        background: rgba(0, 153, 229, .9);
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Affix</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>By using Affix, user can fix the content at the screen position and it won't scroll with page scrolling. Common Usage: Sidebar etc.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Affix>
-                        <span class="demo-affix">Fixed at the top</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>Simple Use: Fixed at the top when element is invisible.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Offset">
-                <div slot="demo">
-                    <Affix :offset-top="50">
-                        <span class="demo-affix">Fixed at the top 50px from the top</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>Fixed after rolling a certain distance.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.top }}</i-code>
-            </Demo>
-            <Demo title="Fixed at the bottom">
-                <div slot="demo">
-                    <Affix :offset-bottom="20">
-                        <span class="demo-affix">Fix at the bottom 20px</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>Fixed at the under screen area. Reduce the height of the browser window to see the effect.</p>
-                    <p>Attention，Only one of <code>offset-top</code> and <code>offset-bottom</code> can be set，If you set both，<code>offset-top</code> will be used.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.bottom }}</i-code>
-            </Demo>
-            <Demo title="Callback when affix state is changed">
-                <div slot="demo">
-                    <Affix :offset-top="100" @on-change="change">
-                        <span class="demo-affix">Fix the position at the top of 100px at the top</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>When affix state is changed，a event will be emitted.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.change }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Affix props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>offset-top</td>
-                            <td>Pixels to offset from top when calculating position of scroll.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>offset-bottom</td>
-                            <td>Pixels to offset from bottom when calculating position of scroll.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Affix events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emit when affix state is changed</td>
-                            <td>true | false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/affix';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            change (status) {
-                this.$Message.info(`Status: ${status}`);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/affix.vue b/src/views/components/affix.vue
deleted file mode 100644
index 6234700..0000000
--- a/src/views/components/affix.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<style scoped>
-    article{
-        min-height: 1500px;
-    }
-    .demo-affix{
-        display: inline-block;
-        color: #fff;
-        padding: 10px 30px;
-        text-align: center;
-        background: rgba(0, 153, 229, .9);
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Affix 图钉</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>使用图钉，可以将内容固定在屏幕上，并且不随页面的滚动而滚动。常用于侧边菜单等。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Affix>
-                        <span class="demo-affix">固定在最顶部</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>简单使用，当元素不可见时，直接固定在最顶端。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="偏移">
-                <div slot="demo">
-                    <Affix :offset-top="50">
-                        <span class="demo-affix">固定在距离顶部 50px 的位置</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>当滚动到一定距离时再固定。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.top }}</i-code>
-            </Demo>
-            <Demo title="固定在底部">
-                <div slot="demo">
-                    <Affix :offset-bottom="20">
-                        <span class="demo-affix">固定在距离底部 20px 的位置</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>在屏幕下方固定，可以通过缩小浏览器窗口高度来查看效果。</p>
-                    <p>注意，<code>offset-top</code>和<code>offset-bottom</code>只可以设置一个，如果都设置，会使用<code>offset-top</code>。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.bottom }}</i-code>
-            </Demo>
-            <Demo title="固定状态改变时的回调">
-                <div slot="demo">
-                    <Affix :offset-top="100" @on-change="change">
-                        <span class="demo-affix">固定在距离顶部 100px 的位置</span>
-                    </Affix>
-                </div>
-                <div slot="desc">
-                    <p>当固定状态发生改变时，会触发事件。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.change }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Affix props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>offset-top</td>
-                            <td>距离窗口顶部达到指定偏移量后触发</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>offset-bottom</td>
-                            <td>距离窗口底部达到指定偏移量后触发</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Affix events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>在固定状态发生改变时触发</td>
-                            <td>true | false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/affix';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            change (status) {
-                this.$Message.info(`当前状态：${status}`);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/alert-en.vue b/src/views/components/alert-en.vue
deleted file mode 100644
index ba7e910..0000000
--- a/src/views/components/alert-en.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Alert</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Present some warning messages staticlly, can be closed manually.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Alert>An info prompt</Alert>
-                    <Alert type="success">A success prompt</Alert>
-                    <Alert type="warning">A warning prompt</Alert>
-                    <Alert type="error">An error prompt</Alert>
-                </div>
-                <div slot="desc">
-                    <p>Basic Usage: 4 alternative types: <code>info</code>, <code>success</code>, <code>warning</code>, <code>error</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="With Description">
-                <div slot="demo">
-                    <Alert>
-                        An info prompt
-                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
-                    </Alert>
-                    <Alert type="success">
-                        A success prompt
-                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
-                    </Alert>
-                    <Alert type="warning">
-                        A warning prompt
-                        <template slot="desc">
-                        Content of prompt. Content of prompt. Content of prompt.
-                    </template>
-                    </Alert>
-                    <Alert type="error">
-                        An error prompt
-                        <span slot="desc">
-                            Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
-                        </span>
-                    </Alert>
-                </div>
-                <div slot="desc">
-                    <p>Customize <code>&lt;slot name="desc"&gt;</code> Discription Content.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.desc }}</i-code>
-            </Demo>
-            <Demo title="Icon">
-                <div slot="demo">
-                    <Alert show-icon>An info prompt</Alert>
-                    <Alert type="success" show-icon>A success prompt</Alert>
-                    <Alert type="warning" show-icon>A warning prompt</Alert>
-                    <Alert type="error" show-icon>An error prompt</Alert>
-                    <Alert show-icon>
-                        An info prompt
-                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
-                    </Alert>
-                    <Alert type="success" show-icon>
-                        A success prompt
-                        <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
-                    </Alert>
-                    <Alert type="warning" show-icon>
-                        A warning prompt
-                        <template slot="desc">
-                        Content of prompt. Content of prompt. Content of prompt.
-                    </template>
-                    </Alert>
-                    <Alert type="error" show-icon>
-                        An error prompt
-                        <span slot="desc">
-                            Custom error description copywriting.
-                        </span>
-                    </Alert>
-                    <Alert show-icon>
-                        Custom icon
-                        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
-                        <template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
-                    </Alert>
-                </div>
-                <div slot="desc">
-                    <p>Add different icons by type property, or customize icon slot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="Closable">
-                <div slot="demo">
-                    <Alert closable>An info prompt</Alert>
-                    <Alert type="success" show-icon closable>
-                        A success prompt
-                        <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
-                    </Alert>
-                    <Alert type="warning" closable>
-                        Custom closing content
-                        <span slot="close">No longer prompt</span>
-                    </Alert>
-                </div>
-                <div slot="desc">
-                    <p>Show close button, click to close alert. User can also customize close slot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.close }}</i-code>
-            </Demo>
-            <Demo title="Banner">
-                <div slot="demo">
-                    <Alert banner type="warning">Notice: notification contents...</Alert>
-                    <Alert banner closable type="warning">Notice: notification contents...</Alert>
-                </div>
-                <div slot="desc">
-                    <p>Set property <code>banner</code> can apply banner style.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.banner }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Alert props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>Alert style, alternative value: <code>info</code>, <code>success</code>, <code>warning</code>, <code>error</code></td>
-                            <td>String</td>
-                            <td>info</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>Closable or not</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-icon</td>
-                            <td>Show Icon or not</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Alert events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-close</td>
-                            <td>Emit when close the alert.</td>
-                            <td>event</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Alert slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Alert text</td>
-                        </tr>
-                        <tr>
-                            <td>desc</td>
-                            <td>Alert assistant text description</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>Customized icon content</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>Customized close content</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/alert';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/alert.vue b/src/views/components/alert.vue
deleted file mode 100644
index 30eb12c..0000000
--- a/src/views/components/alert.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Alert 警告提示</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>静态地呈现一些警告信息，可手动关闭。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Alert>An info prompt</Alert>
-                    <Alert type="success">A success prompt</Alert>
-                    <Alert type="warning">A warning prompt</Alert>
-                    <Alert type="error">An error prompt</Alert>
-                </div>
-                <div slot="desc">
-                    <p>基本使用方法，有四种样式可以选择<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="含描述信息">
-                <div slot="demo">
-                    <Alert>
-                        An info prompt
-                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
-                    </Alert>
-                    <Alert type="success">
-                        A success prompt
-                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
-                    </Alert>
-                    <Alert type="warning">
-                        A warning prompt
-                        <template slot="desc">
-                        Content of prompt. Content of prompt. Content of prompt.
-                    </template>
-                    </Alert>
-                    <Alert type="error">
-                        An error prompt
-                        <span slot="desc">
-                            Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
-                        </span>
-                    </Alert>
-                </div>
-                <div slot="desc">
-                    <p>自定义<code>&lt;slot name="desc"&gt;</code>描述内容。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.desc }}</i-code>
-            </Demo>
-            <Demo title="图标">
-                <div slot="demo">
-                    <Alert show-icon>An info prompt</Alert>
-                    <Alert type="success" show-icon>A success prompt</Alert>
-                    <Alert type="warning" show-icon>A warning prompt</Alert>
-                    <Alert type="error" show-icon>An error prompt</Alert>
-                    <Alert show-icon>
-                        An info prompt
-                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
-                    </Alert>
-                    <Alert type="success" show-icon>
-                        A success prompt
-                        <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
-                    </Alert>
-                    <Alert type="warning" show-icon>
-                        A warning prompt
-                        <template slot="desc">
-                        Content of prompt. Content of prompt. Content of prompt.
-                    </template>
-                    </Alert>
-                    <Alert type="error" show-icon>
-                        An error prompt
-                        <span slot="desc">
-                            Custom error description copywriting.
-                        </span>
-                    </Alert>
-                    <Alert show-icon>
-                        Custom icon
-                        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
-                        <template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
-                    </Alert>
-                </div>
-                <div slot="desc">
-                    <p>根据 type 属性自动添加不同图标，或者自定义图标 slot 。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="可关闭">
-                <div slot="demo">
-                    <Alert closable>An info prompt</Alert>
-                    <Alert type="success" show-icon closable>
-                        A success prompt
-                        <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
-                    </Alert>
-                    <Alert type="warning" closable>
-                        Custom closing content
-                        <span slot="close">No longer prompt</span>
-                    </Alert>
-                </div>
-                <div slot="desc">
-                    <p>显示关闭按钮，点击可关闭提示，也可以自定义关闭 slot 。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.close }}</i-code>
-            </Demo>
-            <Demo title="顶部公告">
-                <div slot="demo">
-                    <Alert banner type="warning">Notice: notification contents...</Alert>
-                    <Alert banner closable type="warning">Notice: notification contents...</Alert>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>banner</code> 可以应用顶部公告的样式。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.banner }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Alert props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>警告提示样式，可选值为<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code></td>
-                            <td>String</td>
-                            <td>info</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>是否可关闭</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-icon</td>
-                            <td>是否显示图标</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Alert events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-close</td>
-                            <td>关闭时触发</td>
-                            <td>event</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Alert slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>警告提示内容</td>
-                        </tr>
-                        <tr>
-                            <td>desc</td>
-                            <td>警告提示辅助性文字介绍</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>自定义图标内容</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>自定义关闭内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/alert';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/auto-complete-en.vue b/src/views/components/auto-complete-en.vue
deleted file mode 100644
index 61fd3f3..0000000
--- a/src/views/components/auto-complete-en.vue
+++ /dev/null
@@ -1,318 +0,0 @@
-<style>
-    .demo-auto-complete-item{
-        padding: 4px 0;
-        border-bottom: 1px solid #F6F6F6;
-    }
-    .demo-auto-complete-group{
-        font-size: 12px;
-        padding: 4px 6px;
-    }
-    .demo-auto-complete-group span{
-        color: #666;
-        font-weight: bold;
-    }
-    .demo-auto-complete-group a{
-        float: right;
-    }
-    .demo-auto-complete-count{
-        float: right;
-        color: #999;
-    }
-    .demo-auto-complete-more{
-        display: block;
-        margin: 0 auto;
-        padding: 4px;
-        text-align: center;
-        font-size: 12px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>AutoComplete</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Autocomplete function of input field.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <AutoComplete
-                        v-model="value1"
-                        :data="data1"
-                        @on-search="handleSearch1"
-                        placeholder="input here"
-                        style="width:200px"></AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>Basic Usage, set datasource of AutoComplete with <code>data</code> property.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Customized">
-                <div slot="demo">
-                    <AutoComplete
-                        v-model="value2"
-                        @on-search="handleSearch2"
-                        placeholder="input here"
-                        style="width:200px">
-                        <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
-                    </AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>You could pass <code>Option</code> as slot of <code>AutoComplete</code>, instead of using data. This allows you to customize the display</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-            </Demo>
-            <Demo title="Non-case-sensitive AutoComplete">
-                <div slot="demo">
-                    <AutoComplete
-                        v-model="value3"
-                        :data="data3"
-                        :filter-method="filterMethod"
-                        placeholder="input here"
-                        style="width:200px">
-                    </AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>A non-case-sensitive AutoComplete and how to use filter method.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.filter }}</i-code>
-            </Demo>
-            <Demo title="Lookup-Patterns">
-                <div slot="demo">
-                    <AutoComplete
-                            v-model="value4"
-                            icon="ios-search"
-                            placeholder="input here"
-                            style="width:300px">
-                        <div class="demo-auto-complete-item" v-for="item in data4">
-                            <div class="demo-auto-complete-group">
-                                <span>{{ item.title }}</span>
-                                <a href="https://www.google.com/search?q=iView" target="_blank">更多</a>
-                            </div>
-                            <Option v-for="option in item.children" :value="option.title" :key="option.title">
-                                <span class="demo-auto-complete-title">{{ option.title }}</span>
-                                <span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
-                            </Option>
-                        </div>
-                        <a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
-                    </AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>Fully customizable Option to display a complex layout.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.search }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="AutoComplete props" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Property</th>
-                        <th>Description</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>value</td>
-                        <td>Bound value. Use v-model to enable a two-way binding.</td>
-                        <td>String | Number</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>data</td>
-                        <td>Data source for autocomplete.</td>
-                        <td>Array</td>
-                        <td>[]</td>
-                    </tr>
-                    <tr>
-                        <td>clearable</td>
-                        <td>Set AutoComplete to clear option.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>disabled</td>
-                        <td>Whether disabled select.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>placeholder</td>
-                        <td>Placeholder of input.</td>
-                        <td>String</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>size</td>
-                        <td>The size of Input. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                        <td>String</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>icon</td>
-                        <td>Icon at the end of Input.</td>
-                        <td>String</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>filter-method</td>
-                        <td>Filter options by input, if function, filter options against it. The function will receive two arguments, <code>value</code> and <code>option</code>, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded.</td>
-                        <td>Function | Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>placement</td>
-                        <td>The direction of pop-ups. The value could be <code>bottom</code> or <code>top</code>, supports automatic recognition after 2.12.0</td>
-                        <td>String</td>
-                        <td>bottom</td>
-                    </tr>
-                    <tr>
-                        <td>transfer</td>
-                        <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>element-id</td>
-                        <td>Set the <code>id</code> for the input element, more info can be found in Form.</td>
-                        <td>String</td>
-                        <td>-</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <Anchor title="AutoComplete events" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Event Name</th>
-                        <th>Description</th>
-                        <th>Return Value</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>on-change</td>
-                        <td>Called when select an option or input value change, or value of input is changed.</td>
-                        <td>value</td>
-                    </tr>
-                    <tr>
-                        <td>on-select</td>
-                        <td>Called when a option is selected. param is option's value and option instance.</td>
-                        <td>value</td>
-                    </tr>
-                    <tr>
-                        <td>on-search</td>
-                        <td>Called when searching items.</td>
-                        <td>query</td>
-                    </tr>
-                    <tr>
-                        <td>on-focus</td>
-                        <td>Called when focus.</td>
-                        <td>event</td>
-                    </tr>
-                    <tr>
-                        <td>on-blur</td>
-                        <td>Called when blur.</td>
-                        <td>event</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/auto-complete';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: '',
-                data1: [],
-                value2: '',
-                data2: [],
-                value3: '',
-                data3: ['Steve Jobs', 'Stephen Gary Wozniak', 'Jonathan Paul Ive'],
-                value4: '',
-                data4: [
-                    {
-                        title: '话题',
-                        children: [
-                            {
-                                title: 'iView',
-                                count: 10000,
-
-                            },
-                            {
-                                title: 'iView UI',
-                                count: 10600,
-
-                            }
-                        ]
-                    },
-                    {
-                        title: '问题',
-                        children: [
-                            {
-                                title: 'iView UI 有多好',
-                                count: 60100,
-
-                            },
-                            {
-                                title: 'iView 是啥',
-                                count: 30010,
-
-                            }
-                        ]
-                    },
-                    {
-                        title: '文章',
-                        children: [
-                            {
-                                title: 'iView 是一个设计语言',
-                                count: 100000,
-
-                            }
-                        ]
-                    }
-                ]
-            }
-        },
-        methods: {
-            handleSearch1 (value) {
-                this.data1 = !value ? [] : [
-                    value,
-                    value + value,
-                    value + value + value
-                ];
-            },
-            handleSearch2 (value) {
-                this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
-                    value + '@qq.com',
-                    value + '@sina.com',
-                    value + '@163.com'
-                ];
-            },
-            filterMethod (value, option) {
-                return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/auto-complete.vue b/src/views/components/auto-complete.vue
deleted file mode 100644
index f8ca70c..0000000
--- a/src/views/components/auto-complete.vue
+++ /dev/null
@@ -1,318 +0,0 @@
-<style>
-    .demo-auto-complete-item{
-        padding: 4px 0;
-        border-bottom: 1px solid #F6F6F6;
-    }
-    .demo-auto-complete-group{
-        font-size: 12px;
-        padding: 4px 6px;
-    }
-    .demo-auto-complete-group span{
-        color: #666;
-        font-weight: bold;
-    }
-    .demo-auto-complete-group a{
-        float: right;
-    }
-    .demo-auto-complete-count{
-        float: right;
-        color: #999;
-    }
-    .demo-auto-complete-more{
-        display: block;
-        margin: 0 auto;
-        padding: 4px;
-        text-align: center;
-        font-size: 12px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>AutoComplete 自动完成</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>输入框自动完成功能。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <AutoComplete
-                        v-model="value1"
-                        :data="data1"
-                        @on-search="handleSearch1"
-                        placeholder="input here"
-                        style="width:200px"></AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>基本用法，通过 data 设置自动完成的数据源。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="自定义选项">
-                <div slot="demo">
-                    <AutoComplete
-                        v-model="value2"
-                        @on-search="handleSearch2"
-                        placeholder="input here"
-                        style="width:200px">
-                        <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
-                    </AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>除了使用 data，还可以直接传入 <code>Option</code> 组件作为 slot 使用，这样可以自定义显示效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-            </Demo>
-            <Demo title="不区分大小写">
-                <div slot="demo">
-                    <AutoComplete
-                        v-model="value3"
-                        :data="data3"
-                        :filter-method="filterMethod"
-                        placeholder="input here"
-                        style="width:200px">
-                    </AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>不区分大小写的 AutoComplete，及过滤的用法。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.filter }}</i-code>
-            </Demo>
-            <Demo title="查询模式">
-                <div slot="demo">
-                    <AutoComplete
-                        v-model="value4"
-                        icon="ios-search"
-                        placeholder="input here"
-                        style="width:300px">
-                        <div class="demo-auto-complete-item" v-for="item in data4">
-                            <div class="demo-auto-complete-group">
-                                <span>{{ item.title }}</span>
-                                <a href="https://www.google.com/search?q=iView" target="_blank">更多</a>
-                            </div>
-                            <Option v-for="option in item.children" :value="option.title" :key="option.title">
-                                <span class="demo-auto-complete-title">{{ option.title }}</span>
-                                <span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
-                            </Option>
-                        </div>
-                        <a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
-                    </AutoComplete>
-                </div>
-                <div slot="desc">
-                    <p>完全自定义 Option，显示复杂的布局。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.search }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="AutoComplete props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>绑定的值，可使用 v-model 双向绑定</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>自动完成的数据源</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>是否可以清空选项</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>占位文本</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>输入框尺寸，可选值为 <code>large</code>、<code>small</code>、<code>default</code> 或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>输入框尾部图标</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filter-method</td>
-                            <td>是否根据输入项进行筛选。当其为一个函数时，会接收 <code>value</code> 和 <code>option</code> 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false</td>
-                            <td>Function | Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>弹窗的展开方向，可选值为 <code>bottom</code> 和 <code>top</code>，2.12.0 版本开始支持自动识别</td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>给表单元素设置 <code>id</code>，详见 Form 用法。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="AutoComplete events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>选中 option，或 input 的 value 变化时，调用此函数</td>
-                            <td>value</td>
-                        </tr>
-                        <tr>
-                            <td>on-select</td>
-                            <td>被选中时调用，参数为选中项的 value 值</td>
-                            <td>value</td>
-                        </tr>
-                        <tr>
-                            <td>on-search</td>
-                            <td>搜索补全项的时候调用</td>
-                            <td>query</td>
-                        </tr>
-                        <tr>
-                            <td>on-focus</td>
-                            <td>聚焦时触发</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-blur</td>
-                            <td>失焦时触发</td>
-                            <td>event</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/auto-complete';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: '',
-                data1: [],
-                value2: '',
-                data2: [],
-                value3: '',
-                data3: ['Steve Jobs', 'Stephen Gary Wozniak', 'Jonathan Paul Ive'],
-                value4: '',
-                data4: [
-                    {
-                        title: '话题',
-                        children: [
-                            {
-                                title: 'iView',
-                                count: 10000,
-
-                            },
-                            {
-                                title: 'iView UI',
-                                count: 10600,
-
-                            }
-                        ]
-                    },
-                    {
-                        title: '问题',
-                        children: [
-                            {
-                                title: 'iView UI 有多好',
-                                count: 60100,
-
-                            },
-                            {
-                                title: 'iView 是啥',
-                                count: 30010,
-
-                            }
-                        ]
-                    },
-                    {
-                        title: '文章',
-                        children: [
-                            {
-                                title: 'iView 是一个设计语言',
-                                count: 100000,
-
-                            }
-                        ]
-                    }
-                ]
-            }
-        },
-        methods: {
-            handleSearch1 (value) {
-                this.data1 = !value ? [] : [
-                    value,
-                    value + value,
-                    value + value + value
-                ];
-            },
-            handleSearch2 (value) {
-                this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
-                    value + '@qq.com',
-                    value + '@sina.com',
-                    value + '@163.com'
-                ];
-            },
-            filterMethod (value, option) {
-                return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/avatar-en.vue b/src/views/components/avatar-en.vue
deleted file mode 100644
index 2436174..0000000
--- a/src/views/components/avatar-en.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<style>
-    .demo-avatar .ivu-avatar{
-        margin-top: 16px;
-        margin-right: 16px;
-    }
-    .demo-avatar-badge .ivu-badge{
-        margin-right: 16px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Avatar</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Avatars can be used to represent people or object, which supports image, iView-Icon, or letter.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic">
-                <div slot="demo">
-                    <div class="demo-avatar">
-                        <Avatar icon="person" size="large" />
-                        <Avatar icon="person" />
-                        <Avatar icon="person" size="small" />
-                    </div>
-                    <div class="demo-avatar">
-                        <Avatar shape="square" icon="person" size="large" />
-                        <Avatar shape="square" icon="person" />
-                        <Avatar shape="square" icon="person" size="small" />
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>Three sizes and two shapes are available.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Type">
-                <div slot="demo">
-                    <div class="demo-avatar">
-                        <Avatar icon="person" />
-                        <Avatar>U</Avatar>
-                        <Avatar>USER</Avatar>
-                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
-                        <Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar>
-                        <Avatar style="background-color: #87d068" icon="person" />
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="With Badge">
-                <div slot="demo">
-                    <div class="demo-avatar-badge">
-                        <Badge count="1">
-                            <Avatar shape="square" icon="person" />
-                        </Badge>
-                        <Badge dot>
-                            <Avatar shape="square" icon="person" />
-                        </Badge>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>Usually used for messages remind.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.badge }}</i-code>
-            </Demo>
-            <Demo title="Autoset Font Size">
-                <div slot="demo">
-                    <div class="demo-avatar">
-                        <Avatar :style="{background: color}">{{ user }}</Avatar>
-                        <Button size="small" @click="handleChange">Change</Button>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.string }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Avatar props" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Property</th>
-                        <th>Description</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>shape</td>
-                        <td>To set the shape of avatar, options include circle, square.</td>
-                        <td>String</td>
-                        <td>circle</td>
-                    </tr>
-                    <tr>
-                        <td>size</td>
-                        <td>To set the size of avatar, options include large, small, default.</td>
-                        <td>String</td>
-                        <td>default</td>
-                    </tr>
-                    <tr>
-                        <td>src</td>
-                        <td>The address of a image avatar.</td>
-                        <td>String</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>icon</td>
-                        <td>The icon type of a icon avatar, see <code>Icon</code> Component.</td>
-                        <td>String</td>
-                        <td>-</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/avatar';
-    import Anchor from '../../components/anchor.vue';
-
-    const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
-    const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                user: UserList[0],
-                color: ColorList[0]
-            }
-        },
-        methods: {
-            handleChange () {
-                const index = UserList.indexOf(this.user);
-                this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
-                this.color = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0];
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/avatar.vue b/src/views/components/avatar.vue
deleted file mode 100644
index 0b71031..0000000
--- a/src/views/components/avatar.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<style>
-    .demo-avatar .ivu-avatar{
-        margin-top: 16px;
-        margin-right: 16px;
-    }
-    .demo-avatar-badge .ivu-badge{
-        margin-right: 16px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Avatar 头像</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>用来代表用户或事物，支持图片、图标或字符展示。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <div class="demo-avatar">
-                        <Avatar icon="person" size="large" />
-                        <Avatar icon="person" />
-                        <Avatar icon="person" size="small" />
-                    </div>
-                    <div class="demo-avatar">
-                        <Avatar shape="square" icon="person" size="large" />
-                        <Avatar shape="square" icon="person" />
-                        <Avatar shape="square" icon="person" size="small" />
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>头像有三种尺寸，两种形状可选。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="类型">
-                <div slot="demo">
-                    <div class="demo-avatar">
-                        <Avatar icon="person" />
-                        <Avatar>U</Avatar>
-                        <Avatar>USER</Avatar>
-                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
-                        <Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar>
-                        <Avatar style="background-color: #87d068" icon="person" />
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="带徽标的头像">
-                <div slot="demo">
-                    <div class="demo-avatar-badge">
-                        <Badge count="1">
-                            <Avatar shape="square" icon="person" />
-                        </Badge>
-                        <Badge dot>
-                            <Avatar shape="square" icon="person" />
-                        </Badge>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>通常用于消息提示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.badge }}</i-code>
-            </Demo>
-            <Demo title="自动调整字符大小">
-                <div slot="demo">
-                    <div class="demo-avatar">
-                        <Avatar :style="{background: color}">{{ user }}</Avatar>
-                        <Button size="small" @click="handleChange">Change</Button>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.string }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Avatar props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>shape</td>
-                            <td>指定头像的形状，可选值为 circle、square</td>
-                            <td>String</td>
-                            <td>circle</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>设置头像的大小，可选值为 large、small、default</td>
-                            <td>String</td>
-                            <td>default</td>
-                        </tr>
-                        <tr>
-                            <td>src</td>
-                            <td>图片类头像的资源地址</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>设置头像的图标类型，参考 <code>Icon</code> 组件</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/avatar';
-    import Anchor from '../../components/anchor.vue';
-
-    const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
-    const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                user: UserList[0],
-                color: ColorList[0]
-            }
-        },
-        methods: {
-            handleChange () {
-                const index = UserList.indexOf(this.user);
-                this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
-                this.color = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0];
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/back-top-en.vue b/src/views/components/back-top-en.vue
deleted file mode 100644
index 47ec60a..0000000
--- a/src/views/components/back-top-en.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<style scoped>
-    .top{
-        padding: 10px;
-        background: rgba(0, 153, 229, .7);
-        color: #fff;
-        text-align: center;
-        border-radius: 2px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>BackTop</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Backtop can be used when page content is very long and a shortcut is needed to go back to the top fluently. Usually placed at the right bottom of the page.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <p>Scroll down. The gray button shows the default BackTop style.</p>
-                </div>
-                <div slot="desc">
-                    <p>Default at 30px to the right and the bottom, display when scroll to 400px to the top.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Customized Style">
-                <div slot="demo">
-                    <BackTop :height="100" :bottom="200">
-                        <div class="top">返回顶端</div>
-                    </BackTop>
-                    <p>Scroll down. The blue button shows the customized BackTop style.</p>
-                </div>
-                <div slot="desc">
-                    <p>Custimize the position of the BackTop button at 200px to the bottom, and display when scroll to 200px to the top.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="BackTop props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>height</td>
-                            <td>Display <code>BackTop</code> component when scrolled height reach this value.</td>
-                            <td>Number</td>
-                            <td>400</td>
-                        </tr>
-                        <tr>
-                            <td>bottom</td>
-                            <td>The distance of the component to the bottom.</td>
-                            <td>Number</td>
-                            <td>30</td>
-                        </tr>
-                        <tr>
-                            <td>right</td>
-                            <td>The distance of the component to the right.</td>
-                            <td>Number</td>
-                            <td>30</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>Duration time of scrolling animation. Unit: ms</td>
-                            <td>Number</td>
-                            <td>1000</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="BackTop events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-click</td>
-                            <td>Emit when click button.</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/back-top';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/back-top.vue b/src/views/components/back-top.vue
deleted file mode 100644
index f7e2697..0000000
--- a/src/views/components/back-top.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<style scoped>
-    .top{
-        padding: 10px;
-        background: rgba(0, 153, 229, .7);
-        color: #fff;
-        text-align: center;
-        border-radius: 2px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>BackTop 返回顶部</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>当页面内容冗长，需要快捷返回顶部时使用，一般放置在页面右下角位置。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <p>向下滚动页面，灰色的按钮为默认效果。</p>
-                </div>
-                <div slot="desc">
-                    <p>默认位置距离页面右部和底部 30px，滚动至距顶端 400px 时显示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="自定义样式">
-                <div slot="demo">
-                    <BackTop :height="100" :bottom="200">
-                        <div class="top">返回顶端</div>
-                    </BackTop>
-                    <p>向下滚动页面，蓝色的按钮为自定义效果。</p>
-                </div>
-                <div slot="desc">
-                    <p>自定义了位置在页面底部 200px,滚动至距顶端 200px 时显示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="BackTop props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>height</td>
-                            <td>页面滚动高度达到该值时才显示<code>BackTop</code>组件</td>
-                            <td>Number</td>
-                            <td>400</td>
-                        </tr>
-                        <tr>
-                            <td>bottom</td>
-                            <td>组件距离底部的距离</td>
-                            <td>Number</td>
-                            <td>30</td>
-                        </tr>
-                        <tr>
-                            <td>right</td>
-                            <td>组件距离右部的距离</td>
-                            <td>Number</td>
-                            <td>30</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>滚动动画持续时间，单位 毫秒</td>
-                            <td>Number</td>
-                            <td>1000</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="BackTop events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-click</td>
-                            <td>点击按钮时触发</td>
-                            <td>无</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/back-top';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/badge-en.vue b/src/views/components/badge-en.vue
deleted file mode 100644
index e543d0e..0000000
--- a/src/views/components/badge-en.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<style scoped>
-    .demo-badge{
-        width: 42px;
-        height: 42px;
-        background: #eee;
-        border-radius: 6px;
-        display: inline-block;
-    }
-</style>
-<style>
-    .demo-badge-alone{
-        background: #5cb85c !important;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Badge</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Mainly used to set a corner mark to notice the count of unread messages, remind user to read.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Badge count="3">
-                        <a href="#" class="demo-badge"></a>
-                    </Badge>
-                </div>
-                <div slot="desc">
-                    <p>The simplest usage.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Little Red Dot">
-                <div slot="demo">
-                    <Row>
-                        <Col span="6">
-                            <Badge dot>
-                                <a href="#" class="demo-badge"></a>
-                            </Badge>
-                        </Col>
-                        <Col span="6">
-                            <Badge dot>
-                                <Icon type="ios-bell-outline" size="26"></Icon>
-                            </Badge>
-                        </Col>
-                        <Col span="6">
-                            <Badge dot>
-                                <a href="#">可以是一个链接</a>
-                            </Badge>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Never use it if you have Qiang Po Zheng (Those who feel uncomfortable with any discordant things). </p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.dot }}</i-code>
-            </Demo>
-            <Demo title="Overflow Count">
-                <div slot="demo">
-                    <Row>
-                        <Col span="6">
-                            <Badge count="100">
-                                <a href="#" class="demo-badge"></a>
-                            </Badge>
-                        </Col>
-                        <Col span="6">
-                            <Badge count="1000" overflow-count="999">
-                                <a href="#" class="demo-badge"></a>
-                            </Badge>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>You can set a maximal count by setting <code>overflow-count</code>.  When message count exceed the number, <code>${overflowCount}+</code> will be shown.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.overflow }}</i-code>
-            </Demo>
-            <Demo title="Standalone Usage and Customized Style">
-                <div slot="demo">
-                    <Badge count="10"></Badge>
-                    <Badge count="20" class-name="demo-badge-alone"></Badge>
-                </div>
-                <div slot="desc">
-                    <p>Display without slot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.alone }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Badge props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>count</td>
-                            <td>Count to be shown. Show <code>${overflowCount}+</code> if bigger than <code>overflowCount</code>. Hide if 0.</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>overflow-count</td>
-                            <td>Maximal count that is allowed to be shown.</td>
-                            <td>Number | String</td>
-                            <td>99</td>
-                        </tr>
-                        <tr>
-                            <td>dot</td>
-                            <td>Only a red dot without count. Set <code>count</code> to 0 to hide the dot.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>Customized class name, invalid in dot mode.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/badge';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/badge.vue b/src/views/components/badge.vue
deleted file mode 100644
index 4de6c42..0000000
--- a/src/views/components/badge.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<style scoped>
-    .demo-badge{
-        width: 42px;
-        height: 42px;
-        background: #eee;
-        border-radius: 6px;
-        display: inline-block;
-    }
-</style>
-<style>
-    .demo-badge-alone{
-        background: #5cb85c !important;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Badge 徽标数</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>主要用于通知未读数的角标，提醒用户点击。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Badge count="3">
-                        <a href="#" class="demo-badge"></a>
-                    </Badge>
-                </div>
-                <div slot="desc">
-                    <p>最简单的使用方法。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="小红点">
-                <div slot="demo">
-                    <Row>
-                        <Col span="6">
-                            <Badge dot>
-                                <a href="#" class="demo-badge"></a>
-                            </Badge>
-                        </Col>
-                        <Col span="6">
-                            <Badge dot>
-                                <Icon type="ios-bell-outline" size="26"></Icon>
-                            </Badge>
-                        </Col>
-                        <Col span="6">
-                            <Badge dot>
-                                <a href="#">可以是一个链接</a>
-                            </Badge>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>强迫症患者慎用！</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.dot }}</i-code>
-            </Demo>
-            <Demo title="封顶数字">
-                <div slot="demo">
-                    <Row>
-                        <Col span="6">
-                            <Badge count="100">
-                                <a href="#" class="demo-badge"></a>
-                            </Badge>
-                        </Col>
-                        <Col span="6">
-                            <Badge count="1000" overflow-count="999">
-                                <a href="#" class="demo-badge"></a>
-                            </Badge>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>overflow-count</code>属性设置一个封顶值，当超过时，会显示<code>${overflowCount}+</code></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.overflow }}</i-code>
-            </Demo>
-            <Demo title="独立使用及自定义样式">
-                <div slot="demo">
-                    <Badge count="10"></Badge>
-                    <Badge count="20" class-name="demo-badge-alone"></Badge>
-                </div>
-                <div slot="desc">
-                    <p>可以没有 slot 独立展示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.alone }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Badge props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>count</td>
-                            <td>显示的数字，大于<code>overflowCount</code>时，显示<code>${overflowCount}+</code>，为 0 时隐藏</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>overflow-count</td>
-                            <td>展示封顶的数字值</td>
-                            <td>Number | String</td>
-                            <td>99</td>
-                        </tr>
-                        <tr>
-                            <td>dot</td>
-                            <td>不展示数字，只有一个小红点，如需隐藏 dot ，需要设置<code>count</code>为 0 </td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>自定义的class名称，dot 模式下无效</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/badge';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/breadcrumb-en.vue b/src/views/components/breadcrumb-en.vue
deleted file mode 100644
index b7d6e11..0000000
--- a/src/views/components/breadcrumb-en.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<style>
-    .demo-breadcrumb-separator{
-        color: #ff5500;
-        padding: 0 5px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Breadcrumb</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Show the hierarchical structure of the website, inform the user of current location, and provide a navigation to upper nodes.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Breadcrumb>
-                        <BreadcrumbItem to="/">Home</BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
-                        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
-                    </Breadcrumb>
-                </div>
-                <div slot="desc">
-                    <p>Simplest usage: add link by setting <code>to</code> prop.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="With Icon">
-                <div slot="demo">
-                    <Breadcrumb>
-                        <BreadcrumbItem to="/">
-                            <Icon type="ios-home-outline"></Icon> Home
-                        </BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">
-                            <Icon type="social-buffer-outline"></Icon> Components
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            <Icon type="pound"></Icon> Breadcrumb
-                        </BreadcrumbItem>
-                    </Breadcrumb>
-                </div>
-                <div slot="desc">
-                    <p>可自定义每项的内容，比如带有一个图标。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="Separator">
-                <div slot="demo">
-                    <Breadcrumb separator=">">
-                        <BreadcrumbItem to="/">Home</BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
-                        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
-                    </Breadcrumb>
-                    <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
-                        <BreadcrumbItem to="/">Home</BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
-                        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
-                    </Breadcrumb>
-                </div>
-                <div slot="desc">
-                    <p>Customize separator by setting <code>separator</code> prop like <code> > </code>. Customized HTML string is also acceptable.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.separator }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Breadcrumb props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>separator</td>
-                            <td>Customized separator</td>
-                            <td>String | Element String</td>
-                            <td>/</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="BreadcrumbItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>to</td>
-                            <td>Link, no link if not set.</td>
-                            <td>String | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>href</td>
-                            <td>Same as to, and will be abandoned.</td>
-                            <td>String | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>replace</td>
-                            <td>set <code>true</code>, the navigation will not leave a history record</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/breadcrumb';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/breadcrumb.vue b/src/views/components/breadcrumb.vue
deleted file mode 100644
index 434ae04..0000000
--- a/src/views/components/breadcrumb.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<style>
-    .demo-breadcrumb-separator{
-        color: #ff5500;
-        padding: 0 5px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Breadcrumb 面包屑</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>显示网站的层级结构，告知用户当前所在位置，以及在需要向上级导航时使用。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Breadcrumb>
-                        <BreadcrumbItem to="/">Home</BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
-                        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
-                    </Breadcrumb>
-                </div>
-                <div slot="desc">
-                    <p>最基础的用法，通过设置<code>to</code>属性添加链接。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="带图标的">
-                <div slot="demo">
-                    <Breadcrumb>
-                        <BreadcrumbItem to="/">
-                            <Icon type="ios-home-outline"></Icon> Home
-                        </BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">
-                            <Icon type="social-buffer-outline"></Icon> Components
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            <Icon type="pound"></Icon> Breadcrumb
-                        </BreadcrumbItem>
-                    </Breadcrumb>
-                </div>
-                <div slot="desc">
-                    <p>可自定义每项的内容，比如带有一个图标。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="分隔符">
-                <div slot="demo">
-                    <Breadcrumb separator=">">
-                        <BreadcrumbItem to="/">Home</BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
-                        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
-                    </Breadcrumb>
-                    <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
-                        <BreadcrumbItem to="/">Home</BreadcrumbItem>
-                        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
-                        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
-                    </Breadcrumb>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>separator</code>属性来自定义分隔符，比如<code> > </code>，也可以接受自定义的HTML字符串。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.separator }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Breadcrumb props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>separator</td>
-                            <td>自定义分隔符</td>
-                            <td>String | Element String</td>
-                            <td>/</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="BreadcrumbItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>to</td>
-                            <td>链接，不传则没有链接</td>
-                            <td>String | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>href</td>
-                            <td>同 to，未来将废弃</td>
-                            <td>String | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>replace</td>
-                            <td>路由跳转时，开启 replace 将不会向 history 添加新记录</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/breadcrumb';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/button-en.vue b/src/views/components/button-en.vue
deleted file mode 100644
index 448102f..0000000
--- a/src/views/components/button-en.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Button</h1>
-            <p>Basic component that is used to trigger bussiness logic.</p>
-            <Alert show-icon style="margin-top: 16px">Warning：Except for template/render mode，use <code>i-button</code> instead.</Alert>
-            <Anchor title="Example" h2></Anchor>
-            <Demo title="Types">
-                <div slot="demo">
-                    <Button>Default</Button>
-                    <Button type="primary">Primary</Button>
-                    <Button type="ghost">Ghost</Button>
-                    <Button type="dashed">Dashed</Button>
-                    <Button type="text">Text</Button>
-                    <br><br>
-                    <Button type="info">Info</Button>
-                    <Button type="success">Success</Button>
-                    <Button type="warning">Warning</Button>
-                    <Button type="error">Error</Button>
-                </div>
-                <div slot="desc">
-                    <p>Types of buttons: default, primary, ghost, dashed, text and 4 buttons of different colors.</p>
-                    <p>Set the <code>type</code> to<code>primary</code>、<code>ghost</code>、<code>dashed</code>、<code>text</code>、<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>to choose different buttons, by default the default type is used.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="Icons & Shapes">
-                <div slot="demo">
-                    <Button type="primary" shape="circle" icon="ios-search"></Button>
-                    <Button type="primary" icon="ios-search">Search</Button>
-                    <Button type="primary" shape="circle" icon="ios-search">Search</Button>
-                    <Button type="primary" shape="circle">Circle</Button>
-                    <br><br>
-                    <Button type="ghost" shape="circle" icon="ios-search"></Button>
-                    <Button type="ghost" icon="ios-search">Search</Button>
-                    <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
-                    <Button type="ghost" shape="circle">Circle</Button>
-                </div>
-                <div slot="desc">
-                    <p>Set the <code>icon</code> to insert an <code>Icon</code> to the <code>Button</code>, or use the <code>Icon</code> component inside the <code>Button</code> directly.</p>
-                    The icon would appear at the leftmost side of the <code>Button</code> when <p>using the <code>icon</code>; use <code>Icon</code> component for different icons' positions.</p>
-                    <p>Set the <code>shape</code> to <code>circle</code> to use a circle button.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <Button type="primary" size="large">Large</Button>
-                    <Button type="primary">Default</Button>
-                    <Button type="primary" size="small">Small</Button>
-                    <br><br>
-                    <Button type="primary" shape="circle" size="large">Large</Button>
-                    <Button type="primary" shape="circle">Default</Button>
-                    <Button type="primary" shape="circle" size="small">Small</Button>
-                </div>
-                <div slot="desc">
-                    <p>Sizes of buttons: large, default (medium) and small.</p>
-                    <p>Set the <code>size</code> to <code>large</code> or <code>small</code> to use large/small size of button, by default the button's size is medium.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="Long Button">
-                <div slot="demo">
-                    <Button type="success" long>SUBMIT</Button>
-                    <br><br>
-                    <Button type="error" long>DELETE</Button>
-                </div>
-                <div slot="desc">
-                    <p>Set the <code>long</code> to set the width of the button to 100%，it's usually used for modals.</p>
-                    <p>Users could also add <code>style</code> to the component to furtherly refine, e.g., use customed width.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.long }}</i-code>
-            </Demo>
-            <Demo title="Disabled">
-                <div slot="demo">
-                    <Button>Default</Button>
-                    <Button disabled>Default(Disabled)</Button>
-                    <br><br>
-                    <Button type="primary">Primary</Button>
-                    <Button type="primary" disabled>Primary(Disabled)</Button>
-                    <br><br>
-                    <Button type="ghost">Ghost</Button>
-                    <Button type="ghost" disabled>Ghost(Disabled)</Button>
-                    <br><br>
-                    <Button type="dashed">Dashed</Button>
-                    <Button type="dashed" disabled>Dashed(Disabled)</Button>
-                    <br><br>
-                    <Button type="text">Text</Button>
-                    <Button type="text" disabled>Text(Disabled)</Button>
-                </div>
-                <div slot="desc">
-                    <p>Set the <code>disabled</code> attribute to disable the button.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Loading">
-                <div slot="demo">
-                    <Button type="primary" loading>Loading...</Button>
-                    <Button type="primary" :loading="loading" @click="toLoading">
-                        <span v-if="!loading">Click me!</span>
-                        <span v-else>Loading...</span>
-                    </Button>
-                    <Button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
-                        <span v-if="!loading2">Click me!</span>
-                        <span v-else>Loading...</span>
-                    </Button>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>loading</code> attribute to set the button to loading status, click the latter two buttons to see the loading effect in action.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.loading }}</i-code>
-            </Demo>
-            <Demo title="Group">
-                <div slot="demo">
-                    <h4>Basic</h4>
-                    <br><br>
-                    <ButtonGroup>
-                        <Button>Cancel</Button>
-                        <Button type="primary">Confirm</Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button disabled>Yesterday</Button>
-                        <Button disabled>Today</Button>
-                        <Button disabled>Tomorrow</Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="primary">L</Button>
-                        <Button>M</Button>
-                        <Button type="ghost">M</Button>
-                        <Button type="dashed">R</Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <h4>Icons</h4>
-                    <br><br>
-                    <ButtonGroup>
-                        <Button type="primary">
-                            <Icon type="chevron-left"></Icon>
-                            Backward
-                        </Button>
-                        <Button type="primary">
-                            Forward
-                            <Icon type="chevron-right"></Icon>
-                        </Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="primary" icon="ios-skipbackward"></Button>
-                        <Button type="primary" icon="ios-skipforward"></Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="ghost" icon="ios-color-wand-outline"></Button>
-                        <Button type="ghost" icon="ios-sunny-outline"></Button>
-                        <Button type="ghost" icon="ios-crop"></Button>
-                        <Button type="ghost" icon="ios-color-filter-outline"></Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <h4>Circle</h4>
-                    <br><br>
-                    <ButtonGroup shape="circle">
-                        <Button type="primary">
-                            <Icon type="chevron-left"></Icon>
-                            Backward
-                        </Button>
-                        <Button type="primary">
-                            Forward
-                            <Icon type="chevron-right"></Icon>
-                        </Button>
-                    </ButtonGroup>
-                    <ButtonGroup shape="circle">
-                        <Button type="primary" icon="ios-skipbackward"></Button>
-                        <Button type="primary" icon="ios-skipforward"></Button>
-                    </ButtonGroup>
-                    <ButtonGroup shape="circle">
-                        <Button type="ghost" icon="ios-color-wand-outline"></Button>
-                        <Button type="ghost" icon="ios-sunny-outline"></Button>
-                        <Button type="ghost" icon="ios-crop"></Button>
-                        <Button type="ghost" icon="ios-color-filter-outline"></Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <h4>Size</h4>
-                    <br><br>
-                    <ButtonGroup size="large">
-                        <Button type="ghost">Large</Button>
-                        <Button type="ghost">Large</Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="ghost">Default</Button>
-                        <Button type="ghost">Default</Button>
-                    </ButtonGroup>
-                    <ButtonGroup size="small">
-                        <Button type="ghost">Small</Button>
-                        <Button type="ghost">Small</Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <ButtonGroup size="large" shape="circle">
-                        <Button type="ghost">Large</Button>
-                        <Button type="ghost">Large</Button>
-                    </ButtonGroup>
-                    <ButtonGroup shape="circle">
-                        <Button type="ghost">Default</Button>
-                        <Button type="ghost">Default</Button>
-                    </ButtonGroup>
-                    <ButtonGroup size="small" shape="circle">
-                        <Button type="ghost">Small</Button>
-                        <Button type="ghost">Small</Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>Combine multiple <code>Button</code> together into <code>ButtonGroup</code> to get a buttons set.</p>
-                    <p>Set the <code>ButtonGroup</code> attribute <code>size</code> to <code>large</code> or <code>small</code> to choose large/small size of botton group, by default the <code>size</code> is medium.</p>
-                    <p>Set the <code>ButtonGroup</code> atrribute <code>shape</code> to <code>circle</code> to apply a border-radius to the button's shape.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="Vertical ButtonGroup">
-                <div slot="demo">
-                    <ButtonGroup vertical>
-                        <Button type="ghost" icon="social-facebook"></Button>
-                        <Button type="ghost" icon="social-twitter"></Button>
-                        <Button type="ghost" icon="social-googleplus"></Button>
-                        <Button type="ghost" icon="social-tumblr"></Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>Set the <code>ButtonGroup</code> attribute <code>vertical</code> to set up a vertical button group.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Button props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Attribute</th>
-                            <th>Explanation</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>Button type, options include <code>primary</code>、<code>ghost</code>、<code>dashed</code>、<code>text</code>、<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>, optional</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>Button size，options include <code>large</code>, <code>small</code>, <code>default</code> optional</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>shape</td>
-                            <td>Button shape, options include <code>circle</code>, optional</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>long</td>
-                            <td>Set the width of the button to 100%</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>html-type</td>
-                            <td>Set the <code>button</code> raw <code>type</code>，options include <code>button</code>、<code>submit</code>、<code>reset</code></td>
-                            <td>String</td>
-                            <td>button</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Disable the button</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>Set the button to loading status</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>Set the icons used in the button</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="ButtonGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Attribute</th>
-                            <th>Explanation</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>size</td>
-                            <td>ButtonGroup size, options include <code>large</code>, <code>small</code>, <code>default</code> optional</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>shape</td>
-                            <td>ButtonGroup shape, options include<code>circle</code>, optional</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>vertical</td>
-                            <td>For vertical ButtonGroup</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/button';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                loading: false,
-                loading2: false
-            }
-        },
-        methods: {
-            toLoading () {
-                this.loading = true;
-            },
-            toLoading2 () {
-                this.loading2 = true;
-            }
-        }
-    }
-</script>
diff --git a/src/views/components/button.vue b/src/views/components/button.vue
deleted file mode 100644
index 2ae96be..0000000
--- a/src/views/components/button.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Button 按钮</h1>
-            <p>基础组件，触发业务逻辑时使用。</p>
-            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-button</code>。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="按钮类型">
-                <div slot="demo">
-                    <Button>Default</Button>
-                    <Button type="primary">Primary</Button>
-                    <Button type="ghost">Ghost</Button>
-                    <Button type="dashed">Dashed</Button>
-                    <Button type="text">Text</Button>
-                    <br><br>
-                    <Button type="info">Info</Button>
-                    <Button type="success">Success</Button>
-                    <Button type="warning">Warning</Button>
-                    <Button type="error">Error</Button>
-                </div>
-                <div slot="desc">
-                    <p>按钮类型有：默认按钮、主按钮、幽灵按钮、虚线按钮、文字按钮以及四种颜色按钮。</p>
-                    <p>通过设置<code>type</code>为<code>primary</code>、<code>ghost</code>、<code>dashed</code>、<code>text</code>、<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>创建不同样式的按钮，不设置为默认样式。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="图标按钮及按钮形状">
-                <div slot="demo">
-                    <Button type="primary" shape="circle" icon="ios-search"></Button>
-                    <Button type="primary" icon="ios-search">Search</Button>
-                    <Button type="primary" shape="circle" icon="ios-search">Search</Button>
-                    <Button type="primary" shape="circle">Circle</Button>
-                    <br><br>
-                    <Button type="ghost" shape="circle" icon="ios-search"></Button>
-                    <Button type="ghost" icon="ios-search">Search</Button>
-                    <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
-                    <Button type="ghost" shape="circle">Circle</Button>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>icon</code>属性在<code>Button</code>内嵌入一个<code>Icon</code>，或者直接在<code>Button</code>内使用<code>Icon</code>组件。</p>
-                    <p>使用<code>Button</code>的<code>icon</code>属性，图标位置将在最左边，如果需要自定义位置，需使用<code>Icon</code>组件。</p>
-                    <p>通过设置<code>shape</code>属性为<code>circle</code>，可将按钮置为圆的形状。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="按钮尺寸">
-                <div slot="demo">
-                    <Button type="primary" size="large">Large</Button>
-                    <Button type="primary">Default</Button>
-                    <Button type="primary" size="small">Small</Button>
-                    <br><br>
-                    <Button type="primary" shape="circle" size="large">Large</Button>
-                    <Button type="primary" shape="circle">Default</Button>
-                    <Button type="primary" shape="circle" size="small">Small</Button>
-                </div>
-                <div slot="desc">
-                    <p>按钮有三种尺寸：大、默认（中）、小</p>
-                    <p>通过设置<code>size</code>为<code>large</code>和<code>small</code>将按钮设置为大和小尺寸，不设置为默认（中）尺寸。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="长按钮">
-                <div slot="demo">
-                    <Button type="success" long>SUBMIT</Button>
-                    <br><br>
-                    <Button type="error" long>DELETE</Button>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>long</code> 可将按钮宽度设置为 100%，常用于弹窗内操作按钮。</p>
-                    <p>使用者也可以直接通过给组件添加 <code>style</code> 来设置更细节的样式，比如定宽。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.long }}</i-code>
-            </Demo>
-            <Demo title="不可用状态">
-                <div slot="demo">
-                    <Button>Default</Button>
-                    <Button disabled>Default(Disabled)</Button>
-                    <br><br>
-                    <Button type="primary">Primary</Button>
-                    <Button type="primary" disabled>Primary(Disabled)</Button>
-                    <br><br>
-                    <Button type="ghost">Ghost</Button>
-                    <Button type="ghost" disabled>Ghost(Disabled)</Button>
-                    <br><br>
-                    <Button type="dashed">Dashed</Button>
-                    <Button type="dashed" disabled>Dashed(Disabled)</Button>
-                    <br><br>
-                    <Button type="text">Text</Button>
-                    <Button type="text" disabled>Text(Disabled)</Button>
-                </div>
-                <div slot="desc">
-                    <p>通过添加<code>disabled</code>属性可将按钮设置为不可用状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="加载中状态">
-                <div slot="demo">
-                    <Button type="primary" loading>Loading...</Button>
-                    <Button type="primary" :loading="loading" @click="toLoading">
-                        <span v-if="!loading">Click me!</span>
-                        <span v-else>Loading...</span>
-                    </Button>
-                    <Button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
-                        <span v-if="!loading2">Click me!</span>
-                        <span v-else>Loading...</span>
-                    </Button>
-                </div>
-                <div slot="desc">
-                    <p>通过添加<code>loading</code>属性可以让按钮处于加载中状态，后两个按钮在点击时进入加载状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.loading }}</i-code>
-            </Demo>
-            <Demo title="按钮组合">
-                <div slot="demo">
-                    <h4>Basic</h4>
-                    <br><br>
-                    <ButtonGroup>
-                        <Button>Cancel</Button>
-                        <Button type="primary">Confirm</Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button disabled>Yesterday</Button>
-                        <Button disabled>Today</Button>
-                        <Button disabled>Tomorrow</Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="primary">L</Button>
-                        <Button>M</Button>
-                        <Button type="ghost">M</Button>
-                        <Button type="dashed">R</Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <h4>Icons</h4>
-                    <br><br>
-                    <ButtonGroup>
-                        <Button type="primary">
-                            <Icon type="chevron-left"></Icon>
-                            Backward
-                        </Button>
-                        <Button type="primary">
-                            Forward
-                            <Icon type="chevron-right"></Icon>
-                        </Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="primary" icon="ios-skipbackward"></Button>
-                        <Button type="primary" icon="ios-skipforward"></Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="ghost" icon="ios-color-wand-outline"></Button>
-                        <Button type="ghost" icon="ios-sunny-outline"></Button>
-                        <Button type="ghost" icon="ios-crop"></Button>
-                        <Button type="ghost" icon="ios-color-filter-outline"></Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <h4>Circle</h4>
-                    <br><br>
-                    <ButtonGroup shape="circle">
-                        <Button type="primary">
-                            <Icon type="chevron-left"></Icon>
-                            Backward
-                        </Button>
-                        <Button type="primary">
-                            Forward
-                            <Icon type="chevron-right"></Icon>
-                        </Button>
-                    </ButtonGroup>
-                    <ButtonGroup shape="circle">
-                        <Button type="primary" icon="ios-skipbackward"></Button>
-                        <Button type="primary" icon="ios-skipforward"></Button>
-                    </ButtonGroup>
-                    <ButtonGroup shape="circle">
-                        <Button type="ghost" icon="ios-color-wand-outline"></Button>
-                        <Button type="ghost" icon="ios-sunny-outline"></Button>
-                        <Button type="ghost" icon="ios-crop"></Button>
-                        <Button type="ghost" icon="ios-color-filter-outline"></Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <h4>Size</h4>
-                    <br><br>
-                    <ButtonGroup size="large">
-                        <Button type="ghost">Large</Button>
-                        <Button type="ghost">Large</Button>
-                    </ButtonGroup>
-                    <ButtonGroup>
-                        <Button type="ghost">Default</Button>
-                        <Button type="ghost">Default</Button>
-                    </ButtonGroup>
-                    <ButtonGroup size="small">
-                        <Button type="ghost">Small</Button>
-                        <Button type="ghost">Small</Button>
-                    </ButtonGroup>
-                    <br><br>
-                    <ButtonGroup size="large" shape="circle">
-                        <Button type="ghost">Large</Button>
-                        <Button type="ghost">Large</Button>
-                    </ButtonGroup>
-                    <ButtonGroup shape="circle">
-                        <Button type="ghost">Default</Button>
-                        <Button type="ghost">Default</Button>
-                    </ButtonGroup>
-                    <ButtonGroup size="small" shape="circle">
-                        <Button type="ghost">Small</Button>
-                        <Button type="ghost">Small</Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>将多个<code>Button</code>放入<code>ButtonGroup</code>内，可实现按钮组合的效果。</p>
-                    <p>通过设置<code>ButtonGroup</code>的属性<code>size</code>为<code>large</code>和<code>small</code>，可将按钮组尺寸设置为大和小，不设置<code>size</code>，则为默认（中）尺寸。</p>
-                    <p>通过设置<code>ButtonGroup</code>的属性<code>shape</code>为<code>circle</code>，可将按钮组形状设置为圆角。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="按钮组纵向排列">
-                <div slot="demo">
-                    <ButtonGroup vertical>
-                        <Button type="ghost" icon="social-facebook"></Button>
-                        <Button type="ghost" icon="social-twitter"></Button>
-                        <Button type="ghost" icon="social-googleplus"></Button>
-                        <Button type="ghost" icon="social-tumblr"></Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>ButtonGroup</code>的属性<code>vertical</code>，可以使按钮组纵向排列。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Button props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>按钮类型，可选值为<code>primary</code>、<code>ghost</code>、<code>dashed</code>、<code>text</code>、<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>按钮大小，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>shape</td>
-                            <td>按钮形状，可选值为<code>circle</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>long</td>
-                            <td>开启后，按钮的长度为 100%</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>html-type</td>
-                            <td>设置<code>button</code>原生的<code>type</code>，可选值为<code>button</code>、<code>submit</code>、<code>reset</code></td>
-                            <td>String</td>
-                            <td>button</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>设置按钮为禁用状态</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>设置按钮为加载中状态</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>设置按钮的图标类型</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="ButtonGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>size</td>
-                            <td>按钮组合大小，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>shape</td>
-                            <td>按钮组合形状，可选值为<code>circle</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>vertical</td>
-                            <td>是否纵向排列按钮组</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/button';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                loading: false,
-                loading2: false
-            }
-        },
-        methods: {
-            toLoading () {
-                this.loading = true;
-            },
-            toLoading2 () {
-                this.loading2 = true;
-            }
-        }
-    }
-</script>
diff --git a/src/views/components/card-en.vue b/src/views/components/card-en.vue
deleted file mode 100644
index 2296511..0000000
--- a/src/views/components/card-en.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<style lang="less">
-    .ivu-article{
-        .ivu-card p{
-            margin: 0;
-        }
-        .ivu-card ul{
-            padding: 0 !important;
-            li{
-                list-style: none;
-                span{
-                    float: right;
-                    color: #ffac2d;
-                    i:last-child{
-                        margin-right: 5px;
-                    }
-                }
-            }
-        }
-        .ivu-card img{
-            height: 85px;
-        }
-
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Card</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Basic container, used to display text, list, images, etc. Can also be used with other components.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Card style="width:350px">
-                        <p slot="title">
-                            <Icon type="ios-film-outline"></Icon>
-                            Classic film
-                        </p>
-                        <a href="#" slot="extra" @click.prevent="changeLimit">
-                            <Icon type="ios-loop-strong"></Icon>
-                            Change
-                        </a>
-                        <ul>
-                            <li v-for="item in randomMovieList">
-                                <a :href="item.url" target="_blank">{{ item.name }}</a>
-                                <span>
-                                    <Icon type="ios-star" v-for="n in 4" :key="n"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
-                                    {{ item.rate }}
-                                </span>
-                            </li>
-                        </ul>
-                    </Card>
-                </div>
-                <div slot="desc">
-                    <p>Customized title, extra operation and main content. User can customize all parts of the component, and combined with other components. It's relatively flexible.</p>
-                    <p><blockquote>You can quickly set the title bar by setting the properties <code>title</code> and <code>icon</code> after 2.12.0</blockquote></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="No Border">
-                <div slot="demo">
-                    <div style="background:#eee;padding: 20px">
-                        <Card :bordered="false">
-                            <p slot="title">No border title</p>
-                            <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
-                        </Card>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>Disable the border by setting <code>bordered</code> prop to false. We recommend you to use it when background color is gray.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.bordered }}</i-code>
-            </Demo>
-            <Demo title="Disable Hover Shadow">
-                <div slot="demo">
-                    <Row>
-                        <Col span="11">
-                            <Card>
-                                <p slot="title">The standard card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                        <Col span="11" offset="2">
-                            <Card dis-hover>
-                                <p slot="title">Disable card with hover shadows</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Disable mouse hover shadow by setting <code>dis-hover</code> prop. </p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disHover }}</i-code>
-            </Demo>
-            <Demo title="Card Shadow">
-                <div slot="demo">
-                    <Row style="background:#eee;padding:20px">
-                        <Col span="11">
-                            <Card :bordered="false">
-                                <p slot="title">Borderless card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                        <Col span="11" offset="2">
-                            <Card shadow>
-                                <p slot="title">Use a card with a shadow effect</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>shadow</code> prop to display card shadow. If the prop is set, <code>bordered</code> prop and <code
-                    >dis-hover</code> prop will be invalid. We recommend you to use it when background color is gray.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.shadow }}</i-code>
-            </Demo>
-            <Demo title="Succinct Card">
-                <div slot="demo">
-                    <Card style="width:320px">
-                        <div style="text-align:center">
-                            <img src="../../images/logo.png">
-                            <h3>A high quality UI Toolkit based on Vue.js</h3>
-                        </div>
-                    </Card>
-                </div>
-                <div slot="desc">
-                    <p>Only contains content, no title.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.simple }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Card props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>bordered</td>
-                            <td>Show the border or not, recommend setting to true when background color is gray.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>dis-hover</td>
-                            <td>Disable mouse hover shadow.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>shadow</td>
-                            <td>Card shadow, recommend using it when background color is gray.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>padding</td>
-                            <td>Padding of the card. Unit: px</td>
-                            <td>Number</td>
-                            <td>16</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>Title, new property after 2.12.0</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>Icon of title, new property after 2.12.0</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Card slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Decsription</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>Custoimzed card title. If the title is simple text, you can use <code>&lt;p&gt;</code> tag to wrap it.</td>
-                        </tr>
-                        <tr>
-                            <td>extra</td>
-                            <td>Extra contents, shown at the right head corner by default.</td>
-                        </tr>
-                        <tr>
-                            <td>-</td>
-                            <td>Main content of the card</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/card';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                movieList: [
-                    {
-                        name: 'The Shawshank Redemption',
-                        url: 'https://movie.douban.com/subject/1292052/',
-                        rate: 9.6
-                    },
-                    {
-                        name: 'Leon:The Professional',
-                        url: 'https://movie.douban.com/subject/1295644/',
-                        rate: 9.4
-                    },
-                    {
-                        name: 'Farewell to My Concubine',
-                        url: 'https://movie.douban.com/subject/1291546/',
-                        rate: 9.5
-                    },
-                    {
-                        name: 'Forrest Gump',
-                        url: 'https://movie.douban.com/subject/1292720/',
-                        rate: 9.4
-                    },
-                    {
-                        name: 'Life Is Beautiful',
-                        url: 'https://movie.douban.com/subject/1292063/',
-                        rate: 9.5
-                    },
-                    {
-                        name: 'Spirited Away',
-                        url: 'https://movie.douban.com/subject/1291561/',
-                        rate: 9.2
-                    },
-                    {
-                        name: 'Schindler\'s List',
-                        url: 'https://movie.douban.com/subject/1295124/',
-                        rate: 9.4
-                    },
-                    {
-                        name: 'The Legend of 1900',
-                        url: 'https://movie.douban.com/subject/1292001/',
-                        rate: 9.2
-                    },
-                    {
-                        name: 'WALL·E',
-                        url: 'https://movie.douban.com/subject/2131459/',
-                        rate: 9.3
-                    },
-                    {
-                        name: 'Inception',
-                        url: 'https://movie.douban.com/subject/3541415/',
-                        rate: 9.2
-                    }
-                ],
-                randomMovieList: []
-            }
-        },
-        methods: {
-            changeLimit () {
-                function getArrayItems(arr, num) {
-                    const temp_array = [];
-                    for (let index in arr) {
-                        temp_array.push(arr[index]);
-                    }
-                    const return_array = [];
-                    for (let i = 0; i<num; i++) {
-                        if (temp_array.length>0) {
-                            const arrIndex = Math.floor(Math.random()*temp_array.length);
-                            return_array[i] = temp_array[arrIndex];
-                            temp_array.splice(arrIndex, 1);
-                        } else {
-                            break;
-                        }
-                    }
-                    return return_array;
-                }
-                this.randomMovieList = getArrayItems(this.movieList, 5);
-            }
-        },
-        mounted () {
-            this.changeLimit();
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/card.vue b/src/views/components/card.vue
deleted file mode 100644
index dc3803d..0000000
--- a/src/views/components/card.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<style lang="less">
-    .ivu-article{
-        .ivu-card p{
-            margin: 0;
-        }
-        .ivu-card ul{
-            padding: 0 !important;
-            li{
-                list-style: none;
-                span{
-                    float: right;
-                    color: #ffac2d;
-                    i:last-child{
-                        margin-right: 5px;
-                    }
-                }
-            }
-        }
-        .ivu-card img{
-            height: 85px;
-        }
-
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Card 卡片</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>基础容器，用来显示文字、列表、图文等内容，也可以配合其它组件一起使用。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基本用法">
-                <div slot="demo">
-                    <Card style="width:350px">
-                        <p slot="title">
-                            <Icon type="ios-film-outline"></Icon>
-                            Classic film
-                        </p>
-                        <a href="#" slot="extra" @click.prevent="changeLimit">
-                            <Icon type="ios-loop-strong"></Icon>
-                            Change
-                        </a>
-                        <ul>
-                            <li v-for="item in randomMovieList">
-                                <a :href="item.url" target="_blank">{{ item.name }}</a>
-                                <span>
-                                    <Icon type="ios-star" v-for="n in 4" :key="n"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
-                                    {{ item.rate }}
-                                </span>
-                            </li>
-                        </ul>
-                    </Card>
-                </div>
-                <div slot="desc">
-                    <p>自定义标题、额外操作和主体内容，可以完全自由控制各个部分，也可以结合其它组件一起使用，较为灵活。</p>
-                    <p><blockquote>2.12.0 版本开始，可以通过设置属性 <code>title</code> 和 <code>icon</code> 快速设置标题栏。</blockquote></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="无边框">
-                <div slot="demo">
-                    <div style="background:#eee;padding: 20px">
-                        <Card :bordered="false">
-                            <p slot="title">No border title</p>
-                            <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
-                        </Card>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>bordered</code>为 false ，可以不添加边框，建议在灰色背景下使用。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.bordered }}</i-code>
-            </Demo>
-            <Demo title="禁用悬停阴影">
-                <div slot="demo">
-                    <Row>
-                        <Col span="11">
-                            <Card>
-                                <p slot="title">The standard card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                        <Col span="11" offset="2">
-                            <Card dis-hover>
-                                <p slot="title">Disable card with hover shadows</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>dis-hover</code>来禁用鼠标悬停显示阴影的效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disHover }}</i-code>
-            </Demo>
-            <Demo title="卡片阴影">
-                <div slot="demo">
-                    <Row style="background:#eee;padding:20px">
-                        <Col span="11">
-                            <Card :bordered="false">
-                                <p slot="title">Borderless card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                        <Col span="11" offset="2">
-                            <Card shadow>
-                                <p slot="title">Use a card with a shadow effect</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                                <p>Content of card</p>
-                            </Card>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>shadow</code>来显示卡片阴影，使用该属性后，<code>bordered</code>和<code
-                    >dis-hover</code>将无效，建议在灰色背景下使用。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.shadow }}</i-code>
-            </Demo>
-            <Demo title="简洁卡片">
-                <div slot="demo">
-                    <Card style="width:320px">
-                        <div style="text-align:center">
-                            <img src="../../images/logo.png">
-                            <h3>A high quality UI Toolkit based on Vue.js</h3>
-                        </div>
-                    </Card>
-                </div>
-                <div slot="desc">
-                    <p>只包含内容区域，没有标题。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.simple }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Card props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>bordered</td>
-                            <td>是否显示边框，建议在灰色背景下使用</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>dis-hover</td>
-                            <td>禁用鼠标悬停显示阴影</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>shadow</td>
-                            <td>卡片阴影，建议在灰色背景下使用</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>padding</td>
-                            <td>卡片内部间距，单位 px</td>
-                            <td>Number</td>
-                            <td>16</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>标题，2.12.0 新增</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>标题前的图标，2.12.0 新增</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Card slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>自定义卡片标题，如果是简单文字，可以使用<code>&lt;p&gt;</code>标签包裹</td>
-                        </tr>
-                        <tr>
-                            <td>extra</td>
-                            <td>额外显示的内容，默认位置在右上角</td>
-                        </tr>
-                        <tr>
-                            <td>无</td>
-                            <td>卡片主体内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/card';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                movieList: [
-                    {
-                        name: 'The Shawshank Redemption',
-                        url: 'https://movie.douban.com/subject/1292052/',
-                        rate: 9.6
-                    },
-                    {
-                        name: 'Leon:The Professional',
-                        url: 'https://movie.douban.com/subject/1295644/',
-                        rate: 9.4
-                    },
-                    {
-                        name: 'Farewell to My Concubine',
-                        url: 'https://movie.douban.com/subject/1291546/',
-                        rate: 9.5
-                    },
-                    {
-                        name: 'Forrest Gump',
-                        url: 'https://movie.douban.com/subject/1292720/',
-                        rate: 9.4
-                    },
-                    {
-                        name: 'Life Is Beautiful',
-                        url: 'https://movie.douban.com/subject/1292063/',
-                        rate: 9.5
-                    },
-                    {
-                        name: 'Spirited Away',
-                        url: 'https://movie.douban.com/subject/1291561/',
-                        rate: 9.2
-                    },
-                    {
-                        name: 'Schindler\'s List',
-                        url: 'https://movie.douban.com/subject/1295124/',
-                        rate: 9.4
-                    },
-                    {
-                        name: 'The Legend of 1900',
-                        url: 'https://movie.douban.com/subject/1292001/',
-                        rate: 9.2
-                    },
-                    {
-                        name: 'WALL·E',
-                        url: 'https://movie.douban.com/subject/2131459/',
-                        rate: 9.3
-                    },
-                    {
-                        name: 'Inception',
-                        url: 'https://movie.douban.com/subject/3541415/',
-                        rate: 9.2
-                    }
-                ],
-                randomMovieList: []
-            }
-        },
-        methods: {
-            changeLimit () {
-                function getArrayItems(arr, num) {
-                    const temp_array = [];
-                    for (let index in arr) {
-                        temp_array.push(arr[index]);
-                    }
-                    const return_array = [];
-                    for (let i = 0; i<num; i++) {
-                        if (temp_array.length>0) {
-                            const arrIndex = Math.floor(Math.random()*temp_array.length);
-                            return_array[i] = temp_array[arrIndex];
-                            temp_array.splice(arrIndex, 1);
-                        } else {
-                            break;
-                        }
-                    }
-                    return return_array;
-                }
-                this.randomMovieList = getArrayItems(this.movieList, 5);
-            }
-        },
-        mounted () {
-            this.changeLimit();
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/carousel-en.vue b/src/views/components/carousel-en.vue
deleted file mode 100644
index 12634c0..0000000
--- a/src/views/components/carousel-en.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<style>
-    .demo-carousel{
-        height: 200px;
-        line-height: 200px;
-        text-align: center;
-        color: #fff;
-        font-size: 20px;
-        background: #506b9e;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Carousel</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Usually used on a set of pictures or cards. Use Carousel to take in the content when lack of space.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Carousel v-model="value1" loop>
-                        <CarouselItem>
-                            <div class="demo-carousel">1</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">2</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">3</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">4</div>
-                        </CarouselItem>
-                    </Carousel>
-                </div>
-                <div slot="desc">
-                    <p>The simplest usage.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Auto Play">
-                <div slot="demo">
-                    <Carousel autoplay v-model="value2" loop>
-                        <CarouselItem>
-                            <div class="demo-carousel">1</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">2</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">3</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">4</div>
-                        </CarouselItem>
-                    </Carousel>
-                </div>
-                <div slot="desc">
-                    <p>Enable auto play by setting <code>autoplay</code> prop. You can also set <code>autoplay-speed</code> to change the play speed.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.autoplay }}</i-code>
-            </Demo>
-            <Demo title="Integrated Properties">
-                <div slot="demo">
-                    <Form :model="setting" :label-width="100">
-                        <FormItem label="Automatic switching">
-                            <Switch v-model="setting.autoplay">
-                                <span slot="open">On</span>
-                                <span slot="close">Off</span>
-                            </Switch>
-                        </FormItem>
-                        <FormItem label="Circular indicator">
-                            <Switch v-model="setting.radiusDot">
-                                <span slot="open">On</span>
-                                <span slot="close">Off</span>
-                            </Switch>
-                        </FormItem>
-                        <FormItem label="Automatic switching speed">
-                            <Slider v-model="setting.autoplaySpeed" :min="300" :max="10000" :step="100"></Slider>
-                        </FormItem>
-                        <FormItem label="Indicator position">
-                            <RadioGroup v-model="setting.dots" type="button">
-                                <Radio label="inside">interior</Radio>
-                                <Radio label="outside">exterior</Radio>
-                                <Radio label="none">Don't show</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="Switch the arrow">
-                            <RadioGroup v-model="setting.arrow" type="button">
-                                <Radio label="hover">Hover displayed when</Radio>
-                                <Radio label="always">Always show</Radio>
-                                <Radio label="never">Don't show</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="Indicator trigger mode">
-                            <RadioGroup v-model="setting.trigger" type="button">
-                                <Radio label="click">Click</Radio>
-                                <Radio label="hover">Hover</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                    </Form>
-                    <Carousel
-                        v-model="value3"
-                        :autoplay="setting.autoplay"
-                        :autoplay-speed="setting.autoplaySpeed"
-                        :dots="setting.dots"
-                        :radius-dot="setting.radiusDot"
-                        :trigger="setting.trigger"
-                        :arrow="setting.arrow">
-                        <CarouselItem>
-                            <div class="demo-carousel">1</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">2</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">3</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">4</div>
-                        </CarouselItem>
-                    </Carousel>
-                </div>
-                <div slot="desc">
-                    <p>Adjust properties dynamically.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.setting }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Carousel props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Index of the slider, starts from 0. Use v-model to enable a two-way binding on data.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>height</td>
-                            <td>The height of the carousel, 'auto' or specific height value. Unit: px</td>
-                            <td>String | Number</td>
-                            <td>auto</td>
-                        </tr>
-                        <tr>
-                            <td>loop</td>
-                            <td>Enable loop.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autoplay</td>
-                            <td>Enable auto play.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autoplay-speed</td>
-                            <td>Time interval of the auto play. Unit: ms</td>
-                            <td>Number</td>
-                            <td>2000</td>
-                        </tr>
-                        <tr>
-                            <td>dots</td>
-                            <td>Position of the in indicator. Optional value: inside, outside, none.</td>
-                            <td>String</td>
-                            <td>inside</td>
-                        </tr>
-                        <tr>
-                            <td>radius-dot</td>
-                            <td>Enable radius dot type.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>trigger</td>
-                            <td>The way to activate the indicator. Optional value: click, hover.</td>
-                            <td>String</td>
-                            <td>click</td>
-                        </tr>
-                        <tr>
-                            <td>arrow</td>
-                            <td>When to show switch arrow button. Optional value: hover, always, never.</td>
-                            <td>String</td>
-                            <td>hover</td>
-                        </tr>
-                        <tr>
-                            <td>easing</td>
-                            <td>Animation Effects</td>
-                            <td>String</td>
-                            <td>ease</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Carousel events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emit when slide is changed. Transmit two arguments: Current activated slider index, previous slider index.</td>
-                            <td>oldValue, value</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/carousel';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: 0,
-                value2: 0,
-                value3: 0,
-                setting: {
-                    autoplay: false,
-                    autoplaySpeed: 2000,
-                    dots: 'inside',
-                    radiusDot: false,
-                    trigger: 'click',
-                    arrow: 'hover'
-                }
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/components/carousel.vue b/src/views/components/carousel.vue
deleted file mode 100644
index b07a99c..0000000
--- a/src/views/components/carousel.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<style>
-    .demo-carousel{
-        height: 200px;
-        line-height: 200px;
-        text-align: center;
-        color: #fff;
-        font-size: 20px;
-        background: #506b9e;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Carousel 走马灯</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Carousel v-model="value1" loop>
-                        <CarouselItem>
-                            <div class="demo-carousel">1</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">2</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">3</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">4</div>
-                        </CarouselItem>
-                    </Carousel>
-                </div>
-                <div slot="desc">
-                    <p>最基本的用法。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="自动切换">
-                <div slot="demo">
-                    <Carousel autoplay v-model="value2" loop>
-                        <CarouselItem>
-                            <div class="demo-carousel">1</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">2</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">3</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">4</div>
-                        </CarouselItem>
-                    </Carousel>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>autoplay</code> 可以自动轮播，同时可以设置属性 <code>autoplay-speed</code> 改变自动播放的速度。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.autoplay }}</i-code>
-            </Demo>
-            <Demo title="综合设置">
-                <div slot="demo">
-                    <Form :model="setting" :label-width="100">
-                        <FormItem label="自动切换">
-                            <Switch v-model="setting.autoplay">
-                                <span slot="open">开</span>
-                                <span slot="close">关</span>
-                            </Switch>
-                        </FormItem>
-                        <FormItem label="圆形指示器">
-                            <Switch v-model="setting.radiusDot">
-                                <span slot="open">开</span>
-                                <span slot="close">关</span>
-                            </Switch>
-                        </FormItem>
-                        <FormItem label="自动切换速度">
-                            <Slider v-model="setting.autoplaySpeed" :min="300" :max="10000" :step="100"></Slider>
-                        </FormItem>
-                        <FormItem label="指示器位置">
-                            <RadioGroup v-model="setting.dots" type="button">
-                                <Radio label="inside">内部</Radio>
-                                <Radio label="outside">外部</Radio>
-                                <Radio label="none">不显示</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="切换箭头">
-                            <RadioGroup v-model="setting.arrow" type="button">
-                                <Radio label="hover">悬停时显示</Radio>
-                                <Radio label="always">一直显示</Radio>
-                                <Radio label="never">不显示</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="指示器触发方式">
-                            <RadioGroup v-model="setting.trigger" type="button">
-                                <Radio label="click">点击</Radio>
-                                <Radio label="hover">悬停</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                    </Form>
-                    <Carousel
-                        v-model="value3"
-                        :autoplay="setting.autoplay"
-                        :autoplay-speed="setting.autoplaySpeed"
-                        :dots="setting.dots"
-                        :radius-dot="setting.radiusDot"
-                        :trigger="setting.trigger"
-                        :arrow="setting.arrow">
-                        <CarouselItem>
-                            <div class="demo-carousel">1</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">2</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">3</div>
-                        </CarouselItem>
-                        <CarouselItem>
-                            <div class="demo-carousel">4</div>
-                        </CarouselItem>
-                    </Carousel>
-                </div>
-                <div slot="desc">
-                    <p>动态调整各配置。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.setting }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Carousel props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>幻灯片的索引，从 0 开始，可以使用 v-model 双向绑定数据</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>height</td>
-                            <td>走马灯的高度，可填 auto 或具体高度数值，单位 px</td>
-                            <td>String | Number</td>
-                            <td>auto</td>
-                        </tr>
-                        <tr>
-                            <td>loop</td>
-                            <td>是否开启循环</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autoplay</td>
-                            <td>是否自动切换</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autoplay-speed</td>
-                            <td>自动切换的时间间隔，单位为毫秒</td>
-                            <td>Number</td>
-                            <td>2000</td>
-                        </tr>
-                        <tr>
-                            <td>dots</td>
-                            <td>指示器的位置，可选值为 inside （内部），outside（外部），none（不显示）</td>
-                            <td>String</td>
-                            <td>inside</td>
-                        </tr>
-                        <tr>
-                            <td>radius-dot</td>
-                            <td>是否显示圆形指示器</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>trigger</td>
-                            <td>指示器的触发方式，可选值为 click（点击），hover（悬停）</td>
-                            <td>String</td>
-                            <td>click</td>
-                        </tr>
-                        <tr>
-                            <td>arrow</td>
-                            <td>切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示）</td>
-                            <td>String</td>
-                            <td>hover</td>
-                        </tr>
-                        <tr>
-                            <td>easing</td>
-                            <td>动画效果</td>
-                            <td>String</td>
-                            <td>ease</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Carousel events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>幻灯片切换时触发，目前激活的幻灯片的索引，原幻灯片的索引</td>
-                            <td>oldValue, value</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/carousel';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: 0,
-                value2: 0,
-                value3: 0,
-                setting: {
-                    autoplay: false,
-                    autoplaySpeed: 2000,
-                    dots: 'inside',
-                    radiusDot: false,
-                    trigger: 'click',
-                    arrow: 'hover'
-                }
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/components/cascader-en.vue b/src/views/components/cascader-en.vue
deleted file mode 100644
index af9ea89..0000000
--- a/src/views/components/cascader-en.vue
+++ /dev/null
@@ -1,428 +0,0 @@
-<style scoped>
-    .ivu-cascader{
-        width: 200px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Cascader</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Select from a set of associated data, such as province/city/district, company level, things classification.</p>
-            <p>User will have better experience using Cascader than Select for they can complete their selection in one operation.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Cascader :data="data" v-model="value1"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Cascader has a strict requirement on data. Please follow the demo to use <code>data</code>. Each piece of data should contains at least two items: <code>value</code>, <code>label</code>. Its subset is called <code>children</code>.</p>
-                    <p><code>value</code> is an array stored selected data's value, for example:  <code>['beijing', 'gugong']</code>. It will sorted by cascader's order. Use <code>v-model</code> to enable a two-way binding.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Default Value">
-                <div slot="demo">
-                    <Cascader :data="data" v-model="value2"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Let the component select default selected data on initialization by setting default <code>value</code> prop.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.value }}</i-code>
-            </Demo>
-            <Demo title="Move In and Spread">
-                <div slot="demo">
-                    <Cascader :data="data" trigger="hover"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>trigger</code> to <code>hover</code> to spread the subset when mouse hovers on.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.trigger }}</i-code>
-            </Demo>
-            <Demo title="Customize Display">
-                <div slot="demo">
-                    {{ text }}
-                    <Cascader :data="data" @on-change="handleChange">
-                        <a href="javascript:void(0)">选择</a>
-                    </Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Customize display content by setting slot. You can not only use it on input box.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-            </Demo>
-            <Demo title="Disable">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            <Cascader :data="data2" disabled></Cascader>
-                        </Col>
-                        <Col span="12">
-                            <Cascader :data="data2"></Cascader>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Disable the component by setting <code>disabled</code> prop.</p>
-                    <p>Set <code>disabled: true</code> prop to a certain item can disable it.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Change When Selected">
-                <div slot="demo">
-                    <Cascader :data="data" change-on-select></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>change-on-select</code> to allow user select any level.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.select }}</i-code>
-            </Demo>
-            <Demo title="Customize Selected Items.">
-                <div slot="demo">
-                    <Cascader :data="data3" :render-format="format"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>You can use <code>render-format</code> which accepts a function to customize displayed result.</p>
-                    <p>The first argument <code>labels</code> is current selected label set, the second argument <code>selectedData</code> is current selected data set. You can make what you want to display by combining them.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.format }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <Cascader :data="data" size="large"></Cascader>
-                    <br>
-                    <Cascader :data="data"></Cascader>
-                    <br>
-                    <Cascader :data="data" size="small"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>size</code> prop to <code>large</code> or <code>small</code> to set the input box to large or small size. Default size is medium.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="Load Options Lazily">
-                <div slot="demo">
-                    <Cascader :data="data4" :load-data="loadData"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Load options lazily with <code>load-data</code>. You need add <code>loading</code> to your data to show whether it is loading.</p>
-                    <p>The second arguments of load-data is callback function, if you run it, the children options will be opened.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.loadData }}</i-code>
-            </Demo>
-            <Demo title="Filterable">
-                <div slot="demo">
-                    <Cascader v-model="value3" :data="data" filterable></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>Search and select options directly with <code>filterable</code>.</p>
-                    <p>Now, it doesn't support search on server.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.filterable }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Cascader props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>data</td>
-                            <td>Optional data source, the format is shown on the demos above.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>Selected item's data, the format is shown on the demos above.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>render-format</td>
-                            <td>Customize display format by sending a function to this property. It will be called after selection.</td>
-                            <td>Function</td>
-                            <td>label => label.join(' / ')</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Disable the selector or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>Support clear operation or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-
-                        <tr>
-                            <td>placeholder</td>
-                            <td>Input box placeholder.</td>
-                            <td>String</td>
-                            <td>Select</td>
-                        </tr>
-                        <tr>
-                            <td>trigger</td>
-                            <td>The way subset spreading. Optional value: <code>click</code> or <code>hover</code></td>
-                            <td>String</td>
-                            <td>click</td>
-                        </tr>
-                        <tr>
-                            <td>change-on-select</td>
-                            <td>When it's set to true, change will occur when selecting each level of the data set. For more details, see demos above.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of the input box, Optional value: <code>large</code> or <code>small</code> or leave blank.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>load-data</td>
-                            <td>Load options lazily, you need add loading to data.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterable</td>
-                            <td>Whether show search input.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>not-found-text</td>
-                            <td>Specify content to show when no result matches.</td>
-                            <td>String</td>
-                            <td>Not Found</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>Set the <code>id</code> for the input element, more info can be found in Form.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Cascader events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Callback function after selection. value is the selected item's value. selectedData is the detail data of the selected item./td>
-                            <td>value, selectedData</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/cascader';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                text: '未选择',
-                value1: [],
-                value2: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
-                data: [{
-                    value: 'beijing',
-                    label: '北京',
-                    children: [
-                        {
-                            value: 'gugong',
-                            label: '故宫'
-                        },
-                        {
-                            value: 'tiantan',
-                            label: '天坛'
-                        },
-                        {
-                            value: 'wangfujing',
-                            label: '王府井'
-                        }
-                    ]
-                }, {
-                    value: 'jiangsu',
-                    label: '江苏',
-                    children: [
-                        {
-                            value: 'nanjing',
-                            label: '南京',
-                            children: [
-                                {
-                                    value: 'fuzimiao',
-                                    label: '夫子庙',
-                                }
-                            ]
-                        },
-                        {
-                            value: 'suzhou',
-                            label: '苏州',
-                            children: [
-                                {
-                                    value: 'zhuozhengyuan',
-                                    label: '拙政园',
-                                },
-                                {
-                                    value: 'shizilin',
-                                    label: '狮子林',
-                                }
-                            ]
-                        }
-                    ],
-                }],
-                data2: [{
-                    value: 'zhejiang',
-                    label: '浙江',
-                    children: [{
-                        value: 'hangzhou',
-                        label: '杭州',
-                        children: [{
-                            value: 'xihu',
-                            label: '西湖'
-                        }]
-                    }]
-                }, {
-                    value: 'jiangsu',
-                    label: '江苏',
-                    disabled: true,
-                    children: [{
-                        value: 'nanjing',
-                        label: '南京',
-                        children: [{
-                            value: 'zhonghuamen',
-                            label: '中华门'
-                        }]
-                    }]
-                }],
-                data3: [{
-                    value: 'zhejiang',
-                    label: '浙江',
-                    children: [{
-                        value: 'hangzhou',
-                        label: '杭州',
-                        children: [{
-                            value: 'xihu',
-                            label: '西湖',
-                            code: 310000
-                        }]
-                    }]
-                }, {
-                    value: 'jiangsu',
-                    label: '江苏',
-                    children: [{
-                        value: 'nanjing',
-                        label: '南京',
-                        children: [{
-                            value: 'zhonghuamen',
-                            label: '中华门',
-                            code: 210000
-                        }]
-                    }]
-                }],
-                data4: [
-                    {
-                        value: 'beijing',
-                        label: '北京',
-                        children: [],
-                        loading: false
-                    },
-                    {
-                        value: 'hangzhou',
-                        label: '杭州',
-                        children: [],
-                        loading:false
-                    }
-                ],
-                value3: []
-            }
-        },
-        methods: {
-            format (labels, selectedData) {
-                const index = labels.length - 1;
-                const data = selectedData[index] || false;
-                if (data && data.code) {
-                    return labels[index] + ' - ' + data.code;
-                }
-                return labels[index];
-            },
-            handleChange (value, selectedData) {
-                this.text = selectedData.map(o => o.label).join(', ');
-            },
-            loadData (item, callback) {
-                item.loading = true;
-                setTimeout(() => {
-                    if (item.value === 'beijing') {
-                        item.children = [
-                            {
-                                value: 'talkingdata',
-                                label: 'TalkingData'
-                            },
-                            {
-                                value: 'baidu',
-                                label: '百度'
-                            },
-                            {
-                                value: 'sina',
-                                label: '新浪'
-                            }
-                        ];
-                    } else if (item.value === 'hangzhou') {
-                        item.children = [
-                            {
-                                value: 'ali',
-                                label: '阿里巴巴'
-                            },
-                            {
-                                value: '163',
-                                label: '网易'
-                            }
-                        ];
-                    }
-                    item.loading = false;
-                    callback();
-                }, 1000);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/cascader.vue b/src/views/components/cascader.vue
deleted file mode 100644
index 957c476..0000000
--- a/src/views/components/cascader.vue
+++ /dev/null
@@ -1,433 +0,0 @@
-<style scoped>
-    .ivu-cascader{
-        width: 200px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Cascader 级联选择</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。</p>
-            <p>相比 Select 组件，可以一次性完成选择，体验更好。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Cascader :data="data" v-model="value1"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>级联选择对数据有较严格要求，请参照示例的格式使用<code>data</code>，每项数据至少包含 <code>value</code>、<code>label</code> 两项，子集为 <code>children</code>，以此类推。</p>
-                    <p><code>value</code> 为当前选择的数据的 value 值的数组，比如 <code>['beijing', 'gugong']</code> ，按照级联顺序依次排序，使用 <code>v-model</code> 进行双向绑定。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="默认值">
-                <div slot="demo">
-                    <Cascader :data="data" v-model="value2"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>指定 <code>value</code> 默认值，组件会在初始化时选定数据。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.value }}</i-code>
-            </Demo>
-            <Demo title="移入展开">
-                <div slot="demo">
-                    <Cascader :data="data" trigger="hover"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>trigger</code> 为 <code>hover</code>，当鼠标悬停时就会展开子集。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.trigger }}</i-code>
-            </Demo>
-            <Demo title="自定义显示">
-                <div slot="demo">
-                    {{ text }}
-                    <Cascader :data="data" @on-change="handleChange">
-                        <a href="javascript:void(0)">选择</a>
-                    </Cascader>
-                </div>
-                <div slot="desc">
-                    <p>通过设置 slot 可以自定义显示内容，不局限于输入框。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-            </Demo>
-            <Demo title="禁用">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            <Cascader :data="data2" disabled></Cascader>
-                        </Col>
-                        <Col span="12">
-                            <Cascader :data="data2"></Cascader>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>disabled</code> 可以禁用组件。</p>
-                    <p>给某项数据设置 <code>disabled: true</code> 可以禁用某一项。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="选择即改变">
-                <div slot="demo">
-                    <Cascader :data="data" change-on-select></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>change-on-select</code> 点任何一级都可以选择。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.select }}</i-code>
-            </Demo>
-            <Demo title="自定义已选项">
-                <div slot="demo">
-                    <Cascader :data="data3" :render-format="format"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>对于显示的结果，可以通过 <code>render-format</code> 接收一个函数来自定义。</p>
-                    <p>其中第一个参数 <code>labels</code> 是当前选择的label的集合，第二个参数 <code>selectedData</code> 是当前选择的数据集合，可以利用它们组合出你想要显示的内容。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.format }}</i-code>
-            </Demo>
-            <Demo title="尺寸">
-                <div slot="demo">
-                    <Cascader :data="data" size="large"></Cascader>
-                    <br>
-                    <Cascader :data="data"></Cascader>
-                    <br>
-                    <Cascader :data="data" size="small"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>size</code>属性为<code>large</code>和<code>small</code>将输入框设置为大和小尺寸，不设置为默认（中）尺寸。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="动态加载选项">
-                <div slot="demo">
-                    <Cascader :data="data4" :load-data="loadData"></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>使用 <code>load-data</code> 属性可以异步加载子选项，需要给数据增加 <code>loading</code> 来标识当前是否在加载中。</p>
-                    <p>load-data 的第二个参数为回调，如果执行，则会自动展开当前项的子列表。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.loadData }}</i-code>
-            </Demo>
-            <Demo title="搜索">
-                <div slot="demo">
-                    <Cascader v-model="value3" :data="data" filterable></Cascader>
-                </div>
-                <div slot="desc">
-                    <p>使用属性 <code>filterable</code> 可直接搜索选项并选择。</p>
-                    <p>暂不支持服务端搜索。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.filterable }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Cascader props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>data</td>
-                            <td>可选项的数据源，格式参照示例说明</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>当前已选项的数据，格式参照示例说明</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>render-format</td>
-                            <td>选择后展示的函数，用于自定义显示格式</td>
-                            <td>Function</td>
-                            <td>label => label.join(' / ')</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用选择器</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>是否支持清除</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-
-                        <tr>
-                            <td>placeholder</td>
-                            <td>输入框占位符</td>
-                            <td>String</td>
-                            <td>请选择</td>
-                        </tr>
-                        <tr>
-                            <td>trigger</td>
-                            <td>次级菜单展开方式，可选值为 <code>click</code> 或 <code>hover</code></td>
-                            <td>String</td>
-                            <td>click</td>
-                        </tr>
-                        <tr>
-                            <td>change-on-select</td>
-                            <td>当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>输入框大小，可选值为<code>large</code>和<code>small</code>或者不填</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>load-data</td>
-                            <td>动态获取数据，数据源需标识 loading</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterable</td>
-                            <td>是否支持搜索</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>not-found-text</td>
-                            <td>当搜索列表为空时显示的内容</td>
-                            <td>String</td>
-                            <td>无匹配数据</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>给表单元素设置 <code>id</code>，详见 Form 用法。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Cascader events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据</td>
-                            <td>value, selectedData</td>
-                        </tr>
-                        <tr>
-                            <td>on-visible-change</td>
-                            <td>展开和关闭弹窗时触发</td>
-                            <td>显示状态，Boolean</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/cascader';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                text: '未选择',
-                value1: [],
-                value2: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
-                data: [{
-                    value: 'beijing',
-                    label: '北京',
-                    children: [
-                        {
-                            value: 'gugong',
-                            label: '故宫'
-                        },
-                        {
-                            value: 'tiantan',
-                            label: '天坛'
-                        },
-                        {
-                            value: 'wangfujing',
-                            label: '王府井'
-                        }
-                    ]
-                }, {
-                    value: 'jiangsu',
-                    label: '江苏',
-                    children: [
-                        {
-                            value: 'nanjing',
-                            label: '南京',
-                            children: [
-                                {
-                                    value: 'fuzimiao',
-                                    label: '夫子庙',
-                                }
-                            ]
-                        },
-                        {
-                            value: 'suzhou',
-                            label: '苏州',
-                            children: [
-                                {
-                                    value: 'zhuozhengyuan',
-                                    label: '拙政园',
-                                },
-                                {
-                                    value: 'shizilin',
-                                    label: '狮子林',
-                                }
-                            ]
-                        }
-                    ],
-                }],
-                data2: [{
-                    value: 'zhejiang',
-                    label: '浙江',
-                    children: [{
-                        value: 'hangzhou',
-                        label: '杭州',
-                        children: [{
-                            value: 'xihu',
-                            label: '西湖'
-                        }]
-                    }]
-                }, {
-                    value: 'jiangsu',
-                    label: '江苏',
-                    disabled: true,
-                    children: [{
-                        value: 'nanjing',
-                        label: '南京',
-                        children: [{
-                            value: 'zhonghuamen',
-                            label: '中华门'
-                        }]
-                    }]
-                }],
-                data3: [{
-                    value: 'zhejiang',
-                    label: '浙江',
-                    children: [{
-                        value: 'hangzhou',
-                        label: '杭州',
-                        children: [{
-                            value: 'xihu',
-                            label: '西湖',
-                            code: 310000
-                        }]
-                    }]
-                }, {
-                    value: 'jiangsu',
-                    label: '江苏',
-                    children: [{
-                        value: 'nanjing',
-                        label: '南京',
-                        children: [{
-                            value: 'zhonghuamen',
-                            label: '中华门',
-                            code: 210000
-                        }]
-                    }]
-                }],
-                data4: [
-                    {
-                        value: 'beijing',
-                        label: '北京',
-                        children: [],
-                        loading: false
-                    },
-                    {
-                        value: 'hangzhou',
-                        label: '杭州',
-                        children: [],
-                        loading:false
-                    }
-                ],
-                value3: []
-            }
-        },
-        methods: {
-            format (labels, selectedData) {
-                const index = labels.length - 1;
-                const data = selectedData[index] || false;
-                if (data && data.code) {
-                    return labels[index] + ' - ' + data.code;
-                }
-                return labels[index];
-            },
-            handleChange (value, selectedData) {
-                this.text = selectedData.map(o => o.label).join(', ');
-            },
-            loadData (item, callback) {
-                item.loading = true;
-                setTimeout(() => {
-                    if (item.value === 'beijing') {
-                        item.children = [
-                            {
-                                value: 'talkingdata',
-                                label: 'TalkingData'
-                            },
-                            {
-                                value: 'baidu',
-                                label: '百度'
-                            },
-                            {
-                                value: 'sina',
-                                label: '新浪'
-                            }
-                        ];
-                    } else if (item.value === 'hangzhou') {
-                        item.children = [
-                            {
-                                value: 'ali',
-                                label: '阿里巴巴'
-                            },
-                            {
-                                value: '163',
-                                label: '网易'
-                            }
-                        ];
-                    }
-                    item.loading = false;
-                    callback();
-                }, 1000);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/checkbox-en.vue b/src/views/components/checkbox-en.vue
deleted file mode 100644
index 670245f..0000000
--- a/src/views/components/checkbox-en.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<style scoped>
-    .ivu-icon{
-        font-size: 14px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Checkbox</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Basic Component - Checkbox. Mainly used for selecting multiple values from several options, or used to tag state switching seprately.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Standalone Usage">
-                <div slot="demo">
-                    <Checkbox v-model="single">Checkbox</Checkbox>
-                    <p class="demo-data">{{ single }}</p>
-                </div>
-                <div slot="desc">
-                    <p>Use v-model to enable two-way binding.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.single }}</i-code>
-            </Demo>
-            <Demo title="Combination Usage">
-                <div slot="demo">
-                    <CheckboxGroup v-model="social">
-                        <Checkbox label="twitter">
-                            <Icon type="social-twitter"></Icon>
-                            <span>Twitter</span>
-                        </Checkbox>
-                        <Checkbox label="facebook">
-                            <Icon type="social-facebook"></Icon>
-                            <span>Facebook</span>
-                        </Checkbox>
-                        <Checkbox label="github">
-                            <Icon type="social-github"></Icon>
-                            <span>Github</span>
-                        </Checkbox>
-                        <Checkbox label="snapchat">
-                            <Icon type="social-snapchat"></Icon>
-                            <span>Snapchat</span>
-                        </Checkbox>
-                    </CheckboxGroup>
-                    <p class="demo-data">{{ social }}</p>
-                    <CheckboxGroup v-model="fruit">
-                        <Checkbox label="香蕉"></Checkbox>
-                        <Checkbox label="苹果"></Checkbox>
-                        <Checkbox label="西瓜"></Checkbox>
-                    </CheckboxGroup>
-                    <p class="demo-data">{{ fruit }}</p>
-                </div>
-                <div slot="desc">
-                    <p>Use <code>CheckboxGroup</code> combined with array to generate a combination. In this case, <code>Checkbox</code> uses <code>label</code> to judge selected state automatically. The content of each Checkbox can be customized. If not filled, the value of label prop will be used by default.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="Disabled">
-                <div slot="demo">
-                    <Checkbox v-model="disabledSingle" disabled>Checkbox</Checkbox>
-                    <p class="demo-data">{{ disabledSingle }}</p>
-                    <CheckboxGroup v-model="disabledGroup">
-                        <Checkbox label="香蕉" disabled></Checkbox>
-                        <Checkbox label="苹果" disabled></Checkbox>
-                        <Checkbox label="西瓜"></Checkbox>
-                    </CheckboxGroup>
-                    <p class="demo-data">{{ disabledGroup }}</p>
-                </div>
-                <div slot="desc">
-                    <p>To disable Checkbox by setting <code>disabled</code> prop.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Communication with Other Components">
-                <div slot="demo">
-                    <Checkbox v-model="checked" :disabled="disabled">
-                        <span v-if="checked">Checked</span>
-                        <span v-else>Unchecked</span>
-                        -
-                       <span v-if="!disabled">Usable</span>
-                        <span v-else>Disabled</span>
-                    </Checkbox>
-                    <br>
-                    <Button type="primary" @click="checked = !checked">
-                        <span v-if="!checked">Checked</span>
-                        <span v-else>Unchecked</span>
-                    </Button>
-                    <Button type="primary" @click="disabled = !disabled">
-                        <span v-if="disabled">Usable</span>
-                        <span v-else>Disabled</span>
-                    </Button>
-                </div>
-                <div slot="desc">
-                    <p>Data linking with other components.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.communication }}</i-code>
-            </Demo>
-            <Demo title="Select All">
-                <div slot="demo">
-                    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
-                        <Checkbox
-                            :indeterminate="indeterminate"
-                            :value="checkAll"
-                            @click.prevent.native="handleCheckAll">全选</Checkbox>
-                    </div>
-                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
-                        <Checkbox label="香蕉"></Checkbox>
-                        <Checkbox label="苹果"></Checkbox>
-                        <Checkbox label="西瓜"></Checkbox>
-                    </CheckboxGroup>
-                </div>
-                <div slot="desc">
-                    <p>You might use <code>indeterminate</code> prop when realise select-all effect. The demo code is just a kind of realisation. There are many other ways you can use in your bussiness.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.indeterminate }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Checkbox props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Only works when used alone. Use v-model to enable two-way binding.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>Only works when combined with other components. The combination will judge the selected state automatically if current selection's value prop is set.</td>
-                            <td>String | Number | Boolean</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Disable current selection or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>indeterminate</td>
-                            <td>Used to set the state of indeterminate. Only used to control styles.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of Checkbox. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>true-value</td>
-                            <td>Value of the checkbox if it's checked.</td>
-                            <td>String, Number, Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>false-value</td>
-                            <td>Value of the checkbox if it's not checked.</td>
-                            <td>String, Number, Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Checkbox events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Only emitted when used alone. Emitted when the state of the selection changed, but won't be emitted if outer data is changed.</td>
-                            <td>true | false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="CheckboxGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Specify the selected item's set. Use v-model to enable a two-way binding.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of the CheckboxGroup. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="CheckboxGroup events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emit when the state of the selection is changed. Selected array will be returned. It won't be emitted if outer data is changed.</td>
-                            <td>[...]</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/checkbox';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                single: false,
-                social: ['facebook', 'github'],
-                fruit: ['苹果'],
-                disabledSingle: true,
-                disabledGroup: ['苹果'],
-                checked: true,
-                disabled: false,
-                indeterminate: true,
-                checkAll: false,
-                checkAllGroup: ['香蕉', '西瓜']
-            }
-        },
-        methods: {
-            handleCheckAll () {
-                if (this.indeterminate) {
-                    this.checkAll = false;
-                } else {
-                    this.checkAll = !this.checkAll;
-                }
-                this.indeterminate = false;
-
-                if (this.checkAll) {
-                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
-                } else {
-                    this.checkAllGroup = [];
-                }
-            },
-            checkAllGroupChange (data) {
-                if (data.length === 3) {
-                    this.indeterminate = false;
-                    this.checkAll = true;
-                } else if (data.length > 0) {
-                    this.indeterminate = true;
-                    this.checkAll = false;
-                } else {
-                    this.indeterminate = false;
-                    this.checkAll = false;
-                }
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/checkbox.vue b/src/views/components/checkbox.vue
deleted file mode 100644
index 2c9f4d0..0000000
--- a/src/views/components/checkbox.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<style scoped>
-    .ivu-icon{
-        font-size: 14px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Checkbox 多选框</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>基本组件-多选框。主要用于一组可选项多项选择，或者单独用于标记切换某种状态。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="单独使用">
-                <div slot="demo">
-                    <Checkbox v-model="single">Checkbox</Checkbox>
-                    <p class="demo-data">{{ single }}</p>
-                </div>
-                <div slot="desc">
-                    <p>使用 v-model 可以双向绑定数据。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.single }}</i-code>
-            </Demo>
-            <Demo title="组合使用">
-                <div slot="demo">
-                    <CheckboxGroup v-model="social">
-                        <Checkbox label="twitter">
-                            <Icon type="social-twitter"></Icon>
-                            <span>Twitter</span>
-                        </Checkbox>
-                        <Checkbox label="facebook">
-                            <Icon type="social-facebook"></Icon>
-                            <span>Facebook</span>
-                        </Checkbox>
-                        <Checkbox label="github">
-                            <Icon type="social-github"></Icon>
-                            <span>Github</span>
-                        </Checkbox>
-                        <Checkbox label="snapchat">
-                            <Icon type="social-snapchat"></Icon>
-                            <span>Snapchat</span>
-                        </Checkbox>
-                    </CheckboxGroup>
-                    <p class="demo-data">{{ social }}</p>
-                    <CheckboxGroup v-model="fruit">
-                        <Checkbox label="香蕉"></Checkbox>
-                        <Checkbox label="苹果"></Checkbox>
-                        <Checkbox label="西瓜"></Checkbox>
-                    </CheckboxGroup>
-                    <p class="demo-data">{{ fruit }}</p>
-                </div>
-                <div slot="desc">
-                    <p>使用<code>CheckboxGroup</code>配合数组来生成组合。在组合使用时，<code>Checkbox</code> 使用 <code>label</code> 来自动判断选中状态。每个 Checkbox 的内容可以自定义，如不填写则默认使用 label 的值。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="不可用">
-                <div slot="demo">
-                    <Checkbox v-model="disabledSingle" disabled>Checkbox</Checkbox>
-                    <p class="demo-data">{{ disabledSingle }}</p>
-                    <CheckboxGroup v-model="disabledGroup">
-                        <Checkbox label="香蕉" disabled></Checkbox>
-                        <Checkbox label="苹果" disabled></Checkbox>
-                        <Checkbox label="西瓜"></Checkbox>
-                    </CheckboxGroup>
-                    <p class="demo-data">{{ disabledGroup }}</p>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>disabled</code>属性来禁用多选框。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="与其它组件通信">
-                <div slot="demo">
-                    <Checkbox v-model="checked" :disabled="disabled">
-                        <span v-if="checked">Checked</span>
-                        <span v-else>Unchecked</span>
-                         - 
-                        <span v-if="!disabled">Usable</span>
-                        <span v-else>Disabled</span>
-                    </Checkbox>
-                    <br>
-                    <Button type="primary" @click="checked = !checked">
-                        <span v-if="!checked">Checked</span>
-                        <span v-else>Unchecked</span>
-                    </Button>
-                    <Button type="primary" @click="disabled = !disabled">
-                        <span v-if="disabled">Usable</span>
-                        <span v-else>Disabled</span>
-                    </Button>
-                </div>
-                <div slot="desc">
-                    <p>与其它组件进行数据联动。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.communication }}</i-code>
-            </Demo>
-            <Demo title="全选">
-                <div slot="demo">
-                    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
-                        <Checkbox
-                            :indeterminate="indeterminate"
-                            :value="checkAll"
-                            @click.prevent.native="handleCheckAll">全选</Checkbox>
-                    </div>
-                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
-                        <Checkbox label="香蕉"></Checkbox>
-                        <Checkbox label="苹果"></Checkbox>
-                        <Checkbox label="西瓜"></Checkbox>
-                    </CheckboxGroup>
-                </div>
-                <div slot="desc">
-                    <p>在实现全选效果时，你可能会用到 <code>indeterminate</code> 属性。示例代码只是一种写法，业务中可以用更多的方法，比如计算属性。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.indeterminate }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Checkbox props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>只在单独使用时有效。可以使用 v-model 双向绑定数据</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>只在组合使用时有效。指定当前选项的 value 值，组合会自动判断是否选中</td>
-                            <td>String | Number | Boolean</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用当前项</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>indeterminate</td>
-                            <td>设置 indeterminate 状态，只负责样式控制</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>多选框的尺寸，可选值为 <code>large</code>、<code>small</code>、<code>default</code> 或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>true-value</td>
-                            <td>选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
-                            <td>String, Number, Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>false-value</td>
-                            <td>没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
-                            <td>String, Number, Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Checkbox events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>只在单独使用时有效。在选项状态发生改变时触发，通过修改外部的数据改变时不会触发</td>
-                            <td>true | false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="CheckboxGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>指定选中项目的集合，可以使用 v-model 双向绑定数据</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>多选框组的尺寸，可选值为 <code>large</code>、<code>small</code>、<code>default</code> 或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="CheckboxGroup events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>在选项状态发生改变时触发，返回已选中的数组。通过修改外部的数据改变时不会触发</td>
-                            <td>[...]</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/checkbox';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                single: false,
-                social: ['facebook', 'github'],
-                fruit: ['苹果'],
-                disabledSingle: true,
-                disabledGroup: ['苹果'],
-                checked: true,
-                disabled: false,
-                indeterminate: true,
-                checkAll: false,
-                checkAllGroup: ['香蕉', '西瓜']
-            }
-        },
-        methods: {
-            handleCheckAll () {
-                if (this.indeterminate) {
-                    this.checkAll = false;
-                } else {
-                    this.checkAll = !this.checkAll;
-                }
-                this.indeterminate = false;
-
-                if (this.checkAll) {
-                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
-                } else {
-                    this.checkAllGroup = [];
-                }
-            },
-            checkAllGroupChange (data) {
-                if (data.length === 3) {
-                    this.indeterminate = false;
-                    this.checkAll = true;
-                } else if (data.length > 0) {
-                    this.indeterminate = true;
-                    this.checkAll = false;
-                } else {
-                    this.indeterminate = false;
-                    this.checkAll = false;
-                }
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/circle-en.vue b/src/views/components/circle-en.vue
deleted file mode 100644
index 78fc45f..0000000
--- a/src/views/components/circle-en.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<style lang="less">
-    .demo-circle-custom{
-        & h5{
-            color: #3f414d;
-            font-size: 28px;
-            font-weight: normal;
-        }
-        & p{
-            color: #657180;
-            font-size: 14px;
-            margin: 10px 0 15px;
-        }
-        & span{
-            display: block;
-            padding-top: 15px;
-            color: #657180;
-            font-size: 14px;
-            &:before{
-                content: '';
-                display: block;
-                width: 50px;
-                height: 1px;
-                margin: 0 auto;
-                background: #e0e3e6;
-                position: relative;
-                top: -15px;
-            };
-        }
-        & span i{
-            font-style: normal;
-            color: #3f414d;
-        }
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Circle</h1>
-            <Anchor title="Overview" h2></Anchor>
-            <p>Circular progress bar. When to use:</p>
-            <ul>
-                <li>To display the current progress of an operation flow.</li>
-                <li>To display the percentage of some indexes.</li>
-            </ul>
-            <Alert show-icon style="margin-top: 16px" type="warning">Warning: If you don't use <router-link to="/docs/guide/iview-loader-en">iview-loader</router-link>, you have to use <code>i-circle</code> tag.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <Circle :percent="80">
-                                <span class="demo-circle-inner" style="font-size:24px">80%</span>
-                            </Circle>
-                        </Col>
-                        <Col span="8">
-                            <Circle :percent="100" stroke-color="#5cb85c">
-                                <Icon type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
-                            </Circle>
-                        </Col>
-                        <Col span="8">
-                            <Circle :percent="35" stroke-color="#ff5500">
-                        <span class="demo-circle-inner">
-                            <Icon type="ios-close-empty" size="50" style="color:#ff5500"></Icon>
-                        </span>
-                            </Circle>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Circle has many modifiable attributes. Check out the details at the bottom.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="With Other Components">
-                <div slot="demo">
-                    <Circle :percent="percent" :stroke-color="color">
-                        <Icon v-if="percent == 100" type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
-                        <span v-else style="font-size:24px">{{ percent }}%</span>
-                    </Circle>
-                    <ButtonGroup size="large">
-                        <Button icon="ios-plus-empty" @click="add"></Button>
-                        <Button icon="ios-minus-empty" @click="minus"></Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>Circle can interact with other useful components, such as update the value dynamically.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.percent }}</i-code>
-            </Demo>
-            <Demo title="Customize">
-                <div slot="demo">
-                    <Circle
-                        :size="250"
-                        :trail-width="4"
-                        :stroke-width="5"
-                        :percent="75"
-                        stroke-linecap="square"
-                        stroke-color="#43a3fb">
-                        <div class="demo-circle-custom">
-                            <h1>42,001,776</h1>
-                            <p>消费人群规模</p>
-                            <span>
-                                总占人数
-                                <i>75%</i>
-                            </span>
-                        </div>
-                    </Circle>
-                </div>
-                <div slot="desc">
-                    <p>You can customize inner content by <code>slot</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Circle props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>percent</td>
-                            <td>Completion percentage.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>Size (i.e. width and height) of circular progress bar in px.</td>
-                            <td>Number</td>
-                            <td>120</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-linecap</td>
-                            <td>Shape of cap, options: <code>square</code>, <code>round</code>.</td>
-                            <td>String</td>
-                            <td>round</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-width</td>
-                            <td>Width of the line in px.</td>
-                            <td>Number</td>
-                            <td>6</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-color</td>
-                            <td>Color of the line.</td>
-                            <td>String</td>
-                            <td>#2db7f5</td>
-                        </tr>
-                        <tr>
-                            <td>trail-width</td>
-                            <td>Width of unfilled circle in px</td>
-                            <td>Number</td>
-                            <td>5</td>
-                        </tr>
-                        <tr>
-                            <td>trail-color</td>
-                            <td>Color of unfilled circle.</td>
-                            <td>String</td>
-                            <td>#eaeef2</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Circle slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>—</td>
-                            <td>Customized inner content. Be vertically centered by default.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/circle';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                percent: 0
-            }
-        },
-        computed: {
-            color () {
-                let color = '#2db7f5';
-                if (this.percent == 100) {
-                    color = '#5cb85c';
-                }
-                return color;
-            }
-        },
-        methods: {
-            add () {
-                if (this.percent >= 100) {
-                    return false;
-                }
-                this.percent += 10;
-            },
-            minus () {
-                if (this.percent <= 0) {
-                    return false;
-                }
-                this.percent -= 10;
-            }
-        }
-    }
-</script>
diff --git a/src/views/components/circle.vue b/src/views/components/circle.vue
deleted file mode 100644
index a2934b1..0000000
--- a/src/views/components/circle.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<style lang="less">
-    .demo-circle-custom{
-        & h5{
-            color: #3f414d;
-            font-size: 28px;
-            font-weight: normal;
-        }
-        & p{
-            color: #657180;
-            font-size: 14px;
-            margin: 10px 0 15px;
-        }
-        & span{
-            display: block;
-            padding-top: 15px;
-            color: #657180;
-            font-size: 14px;
-            &:before{
-                content: '';
-                display: block;
-                width: 50px;
-                height: 1px;
-                margin: 0 auto;
-                background: #e0e3e6;
-                position: relative;
-                top: -15px;
-            };
-        }
-        & span i{
-            font-style: normal;
-            color: #3f414d;
-        }
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Circle 进度环</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>图表类组件。一般有两种用途：</p>
-            <ul>
-                <li>显示某项任务进度的百分比；</li>
-                <li>统计某些指标的占比。</li>
-            </ul>
-            <Alert show-icon style="margin-top: 16px" type="warning">注意：没有使用 <router-link to="/docs/guide/iview-loader">iview-loader</router-link> 时，必须使用 <code>i-circle</code> 标签。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <Circle :percent="80">
-                                <span class="demo-circle-inner" style="font-size:24px">80%</span>
-                            </Circle>
-                        </Col>
-                        <Col span="8">
-                            <Circle :percent="100" stroke-color="#5cb85c">
-                                <Icon type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
-                            </Circle>
-                        </Col>
-                        <Col span="8">
-                            <Circle :percent="35" stroke-color="#ff5500">
-                        <span class="demo-circle-inner">
-                            <Icon type="ios-close-empty" size="50" style="color:#ff5500"></Icon>
-                        </span>
-                            </Circle>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>圆形进度环有一系列的参数可配置，具体可以查看下面的API文档。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="配合外部组件使用">
-                <div slot="demo">
-                    <Circle :percent="percent" :stroke-color="color">
-                        <Icon v-if="percent == 100" type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
-                        <span v-else style="font-size:24px">{{ percent }}%</span>
-                    </Circle>
-                    <ButtonGroup size="large">
-                        <Button icon="ios-plus-empty" @click="add"></Button>
-                        <Button icon="ios-minus-empty" @click="minus"></Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>通过数据的联动和逻辑控制，实现交互效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.percent }}</i-code>
-            </Demo>
-            <Demo title="自定义更多样式">
-                <div slot="demo">
-                    <Circle
-                        :size="250"
-                        :trail-width="4"
-                        :stroke-width="5"
-                        :percent="75"
-                        stroke-linecap="square"
-                        stroke-color="#43a3fb">
-                        <div class="demo-circle-custom">
-                            <h1>42,001,776</h1>
-                            <p>消费人群规模</p>
-                            <span>
-                                总占人数
-                                <i>75%</i>
-                            </span>
-                        </div>
-                    </Circle>
-                </div>
-                <div slot="desc">
-                    <p>通过自定义<code>slot</code>和丰富的配置，可以组合出很多统计效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Circle props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>percent</td>
-                            <td>百分比</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>图表的宽度和高度，单位 px</td>
-                            <td>Number</td>
-                            <td>120</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-linecap</td>
-                            <td>进度环顶端的形状，可选值为<code>square</code>（方）和<code>round</code>（圆）</td>
-                            <td>String</td>
-                            <td>round</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-width</td>
-                            <td>进度环的线宽，单位 px</td>
-                            <td>Number</td>
-                            <td>6</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-color</td>
-                            <td>进度环的颜色</td>
-                            <td>String</td>
-                            <td>#2db7f5</td>
-                        </tr>
-                        <tr>
-                            <td>trail-width</td>
-                            <td>进度环背景的线宽，单位 px</td>
-                            <td>Number</td>
-                            <td>5</td>
-                        </tr>
-                        <tr>
-                            <td>trail-color</td>
-                            <td>进度环背景的颜色</td>
-                            <td>String</td>
-                            <td>#eaeef2</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Circle slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>自定义显示中间内容，内容默认垂直居中</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/circle';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                percent: 0
-            }
-        },
-        computed: {
-            color () {
-                let color = '#2db7f5';
-                if (this.percent == 100) {
-                    color = '#5cb85c';
-                }
-                return color;
-            }
-        },
-        methods: {
-            add () {
-                if (this.percent >= 100) {
-                    return false;
-                }
-                this.percent += 10;
-            },
-            minus () {
-                if (this.percent <= 0) {
-                    return false;
-                }
-                this.percent -= 10;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/collapse-en.vue b/src/views/components/collapse-en.vue
deleted file mode 100644
index 8af7c50..0000000
--- a/src/views/components/collapse-en.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Collapse</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Used to fold/spread the content area.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Collapse v-model="value1">
-                        <Panel name="1">
-                            史蒂夫·乔布斯
-                            <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
-                        </Panel>
-                        <Panel name="2">
-                            斯蒂夫·盖瑞·沃兹尼亚克
-                            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
-                        </Panel>
-                        <Panel name="3">
-                            乔纳森·伊夫
-                            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
-                        </Panel>
-                    </Collapse>
-                </div>
-                <div slot="desc">
-                    <p>You can spread multiple panels simultaneously by default. You can also set which one to be spread.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Accordion">
-                <div slot="demo">
-                    <Collapse accordion v-model="value2">
-                        <Panel name="1">
-                            史蒂夫·乔布斯
-                            <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
-                        </Panel>
-                        <Panel name="2">
-                            斯蒂夫·盖瑞·沃兹尼亚克
-                            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
-                        </Panel>
-                        <Panel name="3">
-                            乔纳森·伊夫
-                            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
-                        </Panel>
-                    </Collapse>
-                </div>
-                <div slot="desc">
-                    <p>Enable accordion effect by setting <code>accordion</code> prop. In this mode, you can only spread one panel each time.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.accordion }}</i-code>
-            </Demo>
-            <Demo title="Panel Nesting">
-                <div slot="demo">
-                    <Collapse accordion v-model="value3">
-                        <Panel name="1">
-                            史蒂夫·乔布斯
-                            <div slot="content">
-                                史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
-                                <Collapse accordion v-model="value4">
-                                    <Panel name="1-1">
-                                        iPhone
-                                        <p slot="content">iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。</p>
-                                    </Panel>
-                                    <Panel name="1-2">
-                                        iPad
-                                        <p slot="content">iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan Ive）（有些翻译为 乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter Rams的崇敬之情。</p>
-                                    </Panel>
-                                </Collapse>
-                            </div>
-                        </Panel>
-                        <Panel name="2">
-                            斯蒂夫·盖瑞·沃兹尼亚克
-                            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
-                        </Panel>
-                        <Panel name="3">
-                            乔纳森·伊夫
-                            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
-                        </Panel>
-                    </Collapse>
-                </div>
-                <div slot="desc">
-                    <p>Collapse can be nested.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.nest }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Collapse props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>The name of the activated panel. Use v-model to enable a two-way binding.</td>
-                            <td>Array | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>accordion</td>
-                            <td>Enable accordion effect or not. In this mode, you can only spread one panel each time.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Collapse events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emit when panel is switched. Return the key of the spread panel(s) in an array. </td>
-                            <td>[]</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Panel props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>The name of current panel, corresponds with <code>value</code> of Collapse. Index value will be used if not filled.</td>
-                            <td>String</td>
-                            <td>index</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Panel slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Header of the panel.</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>Description content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/collapse';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: '1',
-                value2: '1',
-                value3: '1',
-                value4: '1-1'
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/collapse.vue b/src/views/components/collapse.vue
deleted file mode 100644
index e69dd1c..0000000
--- a/src/views/components/collapse.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Collapse 折叠面板</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>将内容区域折叠/展开。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Collapse v-model="value1">
-                        <Panel name="1">
-                            史蒂夫·乔布斯
-                            <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
-                        </Panel>
-                        <Panel name="2">
-                            斯蒂夫·盖瑞·沃兹尼亚克
-                            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
-                        </Panel>
-                        <Panel name="3">
-                            乔纳森·伊夫
-                            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
-                        </Panel>
-                    </Collapse>
-                </div>
-                <div slot="desc">
-                    <p>默认可以同时展开多个面板，可以设置默认展开第几个。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="手风琴">
-                <div slot="demo">
-                    <Collapse accordion v-model="value2">
-                        <Panel name="1">
-                            史蒂夫·乔布斯
-                            <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
-                        </Panel>
-                        <Panel name="2">
-                            斯蒂夫·盖瑞·沃兹尼亚克
-                            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
-                        </Panel>
-                        <Panel name="3">
-                            乔纳森·伊夫
-                            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
-                        </Panel>
-                    </Collapse>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>accordion</code>开启手风琴模式，每次只能打开一个面板。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.accordion }}</i-code>
-            </Demo>
-            <Demo title="面板嵌套">
-                <div slot="demo">
-                    <Collapse accordion v-model="value3">
-                        <Panel name="1">
-                            史蒂夫·乔布斯
-                            <div slot="content">
-                                史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
-                                <Collapse accordion v-model="value4">
-                                    <Panel name="1-1">
-                                        iPhone
-                                        <p slot="content">iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。</p>
-                                    </Panel>
-                                    <Panel name="1-2">
-                                        iPad
-                                        <p slot="content">iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan Ive）（有些翻译为 乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter Rams的崇敬之情。</p>
-                                    </Panel>
-                                </Collapse>
-                            </div>
-                        </Panel>
-                        <Panel name="2">
-                            斯蒂夫·盖瑞·沃兹尼亚克
-                            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
-                        </Panel>
-                        <Panel name="3">
-                            乔纳森·伊夫
-                            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
-                        </Panel>
-                    </Collapse>
-                </div>
-                <div slot="desc">
-                    <p>折叠面板可以进行嵌套。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.nest }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Collapse props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>当前激活的面板的 name，可以使用 v-model 双向绑定</td>
-                            <td>Array | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>accordion</td>
-                            <td>是否开启手风琴模式，开启后每次至多展开一个面板</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Collapse events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>切换面板时触发，返回当前已展开的面板的 key，格式为数组</td>
-                            <td>[]</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Panel props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>当前面板的 name，与 Collapse的<code>value</code>对应，不填为索引值</td>
-                            <td>String</td>
-                            <td>index</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Panel slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>面板头内容</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>描述内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/collapse';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: '1',
-                value2: '1',
-                value3: '1',
-                value4: '1-1'
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/color-en.vue b/src/views/components/color-en.vue
deleted file mode 100644
index 89bca00..0000000
--- a/src/views/components/color-en.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<style scoped lang="less">
-    .demo-color-name{
-        color: #fff;
-        font-size: 16px;
-        &.dark{
-            color: #657180;
-        }
-    }
-    .demo-color-desc{
-        color: #fff;
-        opacity: .7;
-        &.dark{
-            color: #657180;
-        }
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Color</h1>
-            <Anchor title="Overview" h2></Anchor>
-            <p>iView recommends to use the colors of the palette below as the rule for design and development for ensuring the visual consistence among the pages and components.</p>
-            <Anchor title="Primary Colors" h3></Anchor>
-            <p>iView use the safe blue colors as the primary colors, among which the <strong>Light Primary</strong> is usually used for <i>hover</i> state while the <strong>Dark Primary</strong> for <i>active</i>.</p>
-            <Row :gutter="16">
-                <i-col span="8">
-                    <Card :bordered="false" style="background:#2d8cf0">
-                        <div class="demo-color-name">Primary</div>
-                        <div class="demo-color-desc">#2d8cf0</div>
-                    </Card>
-                </i-col>
-                <i-col span="8">
-                    <Card :bordered="false" style="background:#5cadff">
-                        <div class="demo-color-name">Light Primary</div>
-                        <div class="demo-color-desc">#5cadff</div>
-                    </Card>
-                </i-col>
-                <i-col span="8">
-                    <Card :bordered="false" style="background:#2b85e4">
-                        <div class="demo-color-name">Dark Primary</div>
-                        <div class="demo-color-desc">#2b85e4</div>
-                    </Card>
-                </i-col>
-            </Row>
-            <br>
-            <Anchor title="Secondary Colors" h3></Anchor>
-            <p>The secondary colors are typical ones, which usually used for messages, e.g., success, warning and fail.</p>
-            <Row :gutter="16">
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#2d8cf0">
-                        <div class="demo-color-name">Info</div>
-                        <div class="demo-color-desc">#2d8cf0</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#19be6b">
-                        <div class="demo-color-name">Success</div>
-                        <div class="demo-color-desc">#19be6b</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#ff9900">
-                        <div class="demo-color-name">Warning</div>
-                        <div class="demo-color-desc">#ff9900</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#ed3f14">
-                        <div class="demo-color-name">Error</div>
-                        <div class="demo-color-desc">#ed3f14</div>
-                    </Card>
-                </i-col>
-            </Row>
-            <br>
-            <Anchor title="Neutral Colors" h3></Anchor>
-            <p>Neutral colors are usually used for text, background, border, shadow, etc, showing the hierachical structure of the page.</p>
-            <Row :gutter="16">
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#1c2438">
-                        <div class="demo-color-name">Title</div>
-                        <div class="demo-color-desc">#1c2438</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#495060">
-                        <div class="demo-color-name">Content</div>
-                        <div class="demo-color-desc">#495060</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#80848f">
-                        <div class="demo-color-name">Sub Color</div>
-                        <div class="demo-color-desc">#80848f</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#bbbec4">
-                        <div class="demo-color-name">Disabled</div>
-                        <div class="demo-color-desc">#bbbec4</div>
-                    </Card>
-                </i-col>
-            </Row>
-            <br>
-            <Row :gutter="16">
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#dddee1">
-                        <div class="demo-color-name dark">Border</div>
-                        <div class="demo-color-desc dark">#dddee1</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#e9eaec">
-                        <div class="demo-color-name dark">Divider</div>
-                        <div class="demo-color-desc dark">#e9eaec</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#f8f8f9">
-                        <div class="demo-color-name dark">Background</div>
-                        <div class="demo-color-desc dark">#f8f8f9</div>
-                    </Card>
-                </i-col>
-            </Row>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/color-picker-en.vue b/src/views/components/color-picker-en.vue
deleted file mode 100644
index 284e8f9..0000000
--- a/src/views/components/color-picker-en.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>ColorPicker</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>For color selection, support for multiple color formats and color presets.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            With default value
-                            <ColorPicker v-model="color1" />
-                        </Col>
-                        <Col span="12">
-                            With no default value
-                            <ColorPicker v-model="color2" />
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Basic usage. You can use <code>v-model</code> to enable a two-way bingding on data.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Alpha">
-                <div slot="demo">
-                    <ColorPicker v-model="color3" alpha />
-                </div>
-                <div slot="desc">
-                    <p>Add the property <code>alpha</code> to select a color with alpha channel.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.alpha }}</i-code>
-            </Demo>
-            <Demo title="Hue">
-                <div slot="demo">
-                    <ColorPicker v-model="color7" :hue="false" />
-                </div>
-                <div slot="desc">
-                    <p>Set property <code>hue</code> to false, can hide hue slider.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.hue }}</i-code>
-            </Demo>
-            <Demo title="Color Presets">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            <ColorPicker v-model="color4" recommend />
-                        </Col>
-                        <Col span="12">
-                            <ColorPicker v-model="color5" :colors="colors" />
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Add the property <code>recommend</code> to display the recommended color presets, or set <code>colors</code> to customize the default colors.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.colors }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <ColorPicker v-model="color6" size="large" />
-                        </Col>
-                        <Col span="8">
-                            <ColorPicker v-model="color6" />
-                        </Col>
-                        <Col span="8">
-                            <ColorPicker v-model="color6" size="small" />
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>There are three size of ColorPicker: large, medium(default), small.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="ColorPicker props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Bound value. Use v-model to enable a two-way binding.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Set picker to disable.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>alpha</td>
-                            <td>Whether to display the alpha slider.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>hue</td>
-                            <td>Whether to display the hue slider.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>recommend</td>
-                            <td>Whether to display the color presets.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>colors</td>
-                            <td>Customize color presets.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>Color format, Optional value: hsl, hsv, hex, rgb</td>
-                            <td>String</td>
-                            <td>When opening alpha is rgb, the other is hex</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of the component. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave blank.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="ColorPicker events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Triggers when input value changes.</td>
-                            <td>color value</td>
-                        </tr>
-                        <tr>
-                            <td>on-active-change</td>
-                            <td>Triggers when the current active color changes.</td>
-                            <td>active color value</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>Emitted when dropdown show or hide.</td>
-                            <td>true / false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/color-picker';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                color1: '#19be6b',
-                color2: '',
-                color3: 'rgba(25, 190,107, .5)',
-                color4: '#19be6b',
-                color5: '#19be6b',
-                colors: ['#311B92', '#512DA8', '#673AB7', '#9575CD', '#D1C4E9'],
-                color6: '#19be6b',
-                color7: '#19be6b'
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/color-picker.vue b/src/views/components/color-picker.vue
deleted file mode 100644
index cc14186..0000000
--- a/src/views/components/color-picker.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>ColorPicker 颜色选择器</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>用于颜色选择，支持多种颜色格式，支持颜色预设。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            有默认值
-                            <ColorPicker v-model="color1" />
-                        </Col>
-                        <Col span="12">
-                            无默认值
-                            <ColorPicker v-model="color2" />
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>基本用法，可以使用 <code>v-model</code> 实现数据的双向绑定。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="透明度">
-                <div slot="demo">
-                    <ColorPicker v-model="color3" alpha />
-                </div>
-                <div slot="desc">
-                    <p>开启属性 <code>alpha</code>，可以选择带 Alpha 通道的颜色。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.alpha }}</i-code>
-            </Demo>
-            <Demo title="色彩">
-                <div slot="demo">
-                    <ColorPicker v-model="color7" :hue="false" />
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>hue</code> 为 false，可以禁用色彩选项。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.hue }}</i-code>
-            </Demo>
-            <Demo title="颜色预设">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            <ColorPicker v-model="color4" recommend />
-                        </Col>
-                        <Col span="12">
-                            <ColorPicker v-model="color5" :colors="colors" />
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>开启属性 <code>recommend</code> 可以显示推荐的颜色预设，或设置属性 <code>colors</code> 来自定义预设颜色。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.colors }}</i-code>
-            </Demo>
-            <Demo title="尺寸">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <ColorPicker v-model="color6" size="large" />
-                        </Col>
-                        <Col span="8">
-                            <ColorPicker v-model="color6" />
-                        </Col>
-                        <Col span="8">
-                            <ColorPicker v-model="color6" size="small" />
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>选择器有三种尺寸：大、默认（中）、小。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="ColorPicker props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>绑定的值，可使用 v-model 双向绑定</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>alpha</td>
-                            <td>是否支持透明度选择</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>hue</td>
-                            <td>是否支持色彩选择</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>recommend</td>
-                            <td>是否显示推荐的颜色预设</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>colors</td>
-                            <td>自定义颜色预设</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>颜色的格式，可选值为 hsl、hsv、hex、rgb</td>
-                            <td>String</td>
-                            <td>开启 alpha 时为 rgb，其它为 hex</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="ColorPicker events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>当绑定值变化时触发</td>
-                            <td>当前值</td>
-                        </tr>
-                        <tr>
-                            <td>on-active-change</td>
-                            <td>面板中当前显示的颜色发生改变时触发</td>
-                            <td>当前显示的颜色值</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>下拉框展开或收起时触发</td>
-                            <td>true / false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/color-picker';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                color1: '#19be6b',
-                color2: '',
-                color3: 'rgba(25, 190,107, .5)',
-                color4: '#19be6b',
-                color5: '#19be6b',
-                colors: ['#311B92', '#512DA8', '#673AB7', '#9575CD', '#D1C4E9'],
-                color6: '#19be6b',
-                color7: '#19be6b'
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/color.vue b/src/views/components/color.vue
deleted file mode 100644
index 02a1ae3..0000000
--- a/src/views/components/color.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<style scoped lang="less">
-    .demo-color-name{
-        color: #fff;
-        font-size: 16px;
-        &.dark{
-            color: #657180;
-        }
-    }
-    .demo-color-desc{
-        color: #fff;
-        opacity: .7;
-        &.dark{
-            color: #657180;
-        }
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Color 色彩</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>iView 推荐使用以下调色板的颜色作为设计和开发规范，以保证页面和组件之间的视觉一致。</p>
-            <Anchor title="主色" h3></Anchor>
-            <p>iView 使用较为安全的蓝色作为主色调，其中 Light Primary 常用于 hover，Dark Primary 常用于 active。</p>
-            <Row :gutter="16">
-                <i-col span="8">
-                    <Card :bordered="false" style="background:#2d8cf0">
-                        <div class="demo-color-name">Primary</div>
-                        <div class="demo-color-desc">#2d8cf0</div>
-                    </Card>
-                </i-col>
-                <i-col span="8">
-                    <Card :bordered="false" style="background:#5cadff">
-                        <div class="demo-color-name">Light Primary</div>
-                        <div class="demo-color-desc">#5cadff</div>
-                    </Card>
-                </i-col>
-                <i-col span="8">
-                    <Card :bordered="false" style="background:#2b85e4">
-                        <div class="demo-color-name">Dark Primary</div>
-                        <div class="demo-color-desc">#2b85e4</div>
-                    </Card>
-                </i-col>
-            </Row>
-            <br>
-            <Anchor title="辅助色" h3></Anchor>
-            <p>辅助色是具有代表性的颜色，常用于信息提示，比如成功、警告和失败。</p>
-            <Row :gutter="16">
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#2d8cf0">
-                        <div class="demo-color-name">Info</div>
-                        <div class="demo-color-desc">#2d8cf0</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#19be6b">
-                        <div class="demo-color-name">Success</div>
-                        <div class="demo-color-desc">#19be6b</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#ff9900">
-                        <div class="demo-color-name">Warning</div>
-                        <div class="demo-color-desc">#ff9900</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#ed3f14">
-                        <div class="demo-color-name">Error</div>
-                        <div class="demo-color-desc">#ed3f14</div>
-                    </Card>
-                </i-col>
-            </Row>
-            <br>
-            <Anchor title="中性色" h3></Anchor>
-            <p>中性色常用于文本、背景、边框、阴影等，可以体现出页面的层次结构。</p>
-            <Row :gutter="16">
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#1c2438">
-                        <div class="demo-color-name">标题 Title</div>
-                        <div class="demo-color-desc">#1c2438</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#495060">
-                        <div class="demo-color-name">正文 Content</div>
-                        <div class="demo-color-desc">#495060</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#80848f">
-                        <div class="demo-color-name">辅助/图标 Sub Color</div>
-                        <div class="demo-color-desc">#80848f</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#bbbec4">
-                        <div class="demo-color-name">失效 Disabled</div>
-                        <div class="demo-color-desc">#bbbec4</div>
-                    </Card>
-                </i-col>
-            </Row>
-            <br>
-            <Row :gutter="16">
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#dddee1">
-                        <div class="demo-color-name dark">边框 Border</div>
-                        <div class="demo-color-desc dark">#dddee1</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#e9eaec">
-                        <div class="demo-color-name dark">分割线 Divider</div>
-                        <div class="demo-color-desc dark">#e9eaec</div>
-                    </Card>
-                </i-col>
-                <i-col span="6">
-                    <Card :bordered="false" style="background:#f8f8f9">
-                        <div class="demo-color-name dark">背景 Background</div>
-                        <div class="demo-color-desc dark">#f8f8f9</div>
-                    </Card>
-                </i-col>
-            </Row>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/date-picker-en.vue b/src/views/components/date-picker-en.vue
deleted file mode 100644
index 08af886..0000000
--- a/src/views/components/date-picker-en.vue
+++ /dev/null
@@ -1,598 +0,0 @@
-<style>
-    .demo-date-type *{
-        font-size: 12px !important;
-    }
-</style>
-<template>
-    <div>
-        <i-article>
-            <article>
-                <h1>DatePicker</h1>
-                <Anchor title="Brief Introduction" h2></Anchor>
-                <p>Pick or input date. Support type: year, month, date etc. Range picking is supported.</p>
-                <Anchor title="Examples" h2></Anchor>
-                <Demo title="Basic Usage">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>type</code> prop to <code>date</code> or <code>daterange</code> to show <strong>Pick Single Date</strong> or <strong>Pick Range</strong> type.</p>
-                        <p>Set <code>placement</code> prop to change the display direction of the DatePicker. Same as Poptip and Tooltip, <code>placement</code> supports 12 directions. Details on API doc below.</p>
-                        <blockquote>Support from right to left choice after <code>2.10.0</code>.</blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.base }}</i-code>
-                </Demo>
-                <Demo title="Shortcut">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>shortcuts</code> in <code>options</code> object prop to set shortcut options. See the demo code to get more info.</p>
-                        <p>Within it, <strong>value</strong> is a function that must return a date. If you use daterange, an array need to be returned.</p>
-                        <p>value accept any correct date format, such as: 2016-12-24, 12/24/16.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.shortcuts }}</i-code>
-                </Demo>
-
-                <Demo title="Split Panels">
-                    <div slot="demo">
-                        <DatePicker type="daterange" split-panels placeholder="Select date" style="width: 200px"></DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>Open property <code>split-panels</code>, the left and right panels are not interconnected during the switching year and month.</p>
-                        <blockquote>Support after <code>2.10.0</code></blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.split_panels }}</i-code>
-                </Demo>
-
-                <Demo title="Multiple">
-                    <div slot="demo">
-                        <DatePicker type="date" multiple placeholder="Select date" style="width: 300px"></DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>Open property <code>multiple</code>, you can select multiple.</p>
-                        <blockquote>Support after <code>2.10.0</code></blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.multiple }}</i-code>
-                </Demo>
-
-                <Demo title="Show Week Numbers">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                                <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                                <DatePicker type="daterange" show-week-numbers placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Open property <code>show-week-numbers</code>, can display the week numbers.</p>
-                        <blockquote>Support after <code>2.10.0</code></blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.weeks }}</i-code>
-                </Demo>
-
-                <Demo title="Start Date">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                                <DatePicker type="date" :start-date="new Date(1991, 4, 14)" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                                <DatePicker type="daterange" :start-date="new Date(1991, 4, 14)" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set property <code>start-date</code> to a custom date, you can change the default display date panel to the specified date.</p>
-                        <blockquote>Support after <code>2.10.0</code></blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.start_date }}</i-code>
-                </Demo>
-
-                <Demo title="Date Format">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>format</code> prop to change the date format. Details in <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>.</p>
-                        <p>Attention, format only changes the date format that displays not value.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.format }}</i-code>
-                </Demo>
-                <Demo title="Date Time Picker">
-                    <div slot="demo">
-                        <DatePicker type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
-                        <br>
-                        <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="Select date and time(Excluding seconds)" style="width: 200px"></DatePicker>
-                        <br>
-                        <DatePicker type="datetimerange" placeholder="Select date and time" style="width: 300px"></DatePicker>
-                        <br>
-                        <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="Select date and time(Excluding seconds)" style="width: 300px"></DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>type</code> prop to <code>datetime</code> or <code>datetimerange</code> to pick time.</p>
-                        <p>Set format and ignore second to reserve only hour and minute.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.datetime }}</i-code>
-                </Demo>
-                <Demo title="Year and Month">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="year" placeholder="Select year" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="month" placeholder="Select month" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>type</code> to <code>year</code> or <code>month</code> can select year and month.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.type }}</i-code>
-                </Demo>
-                <Demo title="Disabled">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" :options="options3" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="date" :options="options4" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>disabledDate</code> in <code>options</code> object prop to set a date that can't be picked.</p>
-                        <p>disabledDate is a function which accepts an argument: current date. A Boolean value needs to be returned to disable the date or not.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-                </Demo>
-                <Demo title="Operation with Confirmation">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" confirm placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="daterange" confirm placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p> DatePicker won't close actively after picking if you set <code>confirm</code> prop. It requires a confirmation.</p>
-                        <p>Ok button won't affect date picking operation.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-                </Demo>
-                <Demo title="Manually Controlled Component">
-                    <div slot="demo">
-                        <DatePicker
-                                :open="open"
-                                :value="value3"
-                                confirm
-                                type="date"
-                                @on-change="handleChange"
-                                @on-clear="handleClear"
-                                @on-ok="handleOk">
-                            <a href="javascript:void(0)" @click="handleClick">
-                                <Icon type="ios-calendar-outline"></Icon>
-                                <template v-if="value3 === ''">Select date</template>
-                                <template v-else>{{ value3 }}</template>
-                            </a>
-                        </DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>In some customized scenes, you can use slot with <code>open</code> prop and events to control the display status of the component. Details on API doc below.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-                </Demo>
-                <Demo title="Size">
-                    <div slot="demo">
-                        <Row :gutter="16">
-                            <Col span="8">
-                            <DatePicker size="small" type="date" placeholder="Select date"></DatePicker>
-                            </Col>
-                            <Col span="8">
-                            <DatePicker type="date" placeholder="Select date"></DatePicker>
-                            </Col>
-                            <Col span="8">
-                            <DatePicker size="large" type="date" placeholder="Select date"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>size</code> prop to <code>large</code> or <code>small</code> to adjust the size of DatePicker to large or small. Default is medium.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.size }}</i-code>
-                </Demo>
-
-                <ad></ad>
-
-                <div class="api">
-                    <Anchor title="API" h2></Anchor>
-                    <Anchor title="DatePicker props" h3></Anchor>
-                    <table>
-                        <colgroup>
-                            <col>
-                            <col>
-                            <col>
-                            <col width="200">
-                        </colgroup>
-                        <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>Display type. Optional value: <code>date</code>, <code>daterange</code>, <code>datetime</code>, <code>datetimerange</code>, <code>year</code>、<code>month</code></td>
-                            <td>String</td>
-                            <td>date</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                Date, can be JavaScript's Date like <strong>new Date()</strong>, or standard date format, <br>
-                                Attention: When using v-model, the type of value is Date. You can use it with @on-change .
-                            </td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>The date format that displays.</td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>
-                                <ul>
-                                    <li><strong>date | daterange</strong>：<br>yyyy-MM-dd</li>
-                                    <li><strong>datetime | datetimerange</strong>：<br>yyyy-MM-dd HH:mm:ss</li>
-                                    <li><strong>year</strong>：yyyy</li>
-                                    <li><strong>month</strong>：yyyy-MM</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>The direction DatePicker displays. Optional value: <code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>, supports automatic recognition after 2.12.0</td>
-                            <td>String</td>
-                            <td>bottom-start</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>Place holder.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>Extra configurations of DatePicker, such as disabling date, or shortcuts. For more details, see the table below.</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>split-panels</td>
-                            <td>When open it, the left and right panels are not interconnected during the switching year and month. Only work in <code>daterange</code> and <code>datetimerange</code> type.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>When open it, you can select multiple dates. Only work in <code>date</code> type.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-week-numbers</td>
-                            <td>When open it, you can display the numbers of week.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>start-date</td>
-                            <td>Set the start date of the default display.</td>
-                            <td>Date</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>confirm</td>
-                            <td>Display the control panel at the bottom of the DatePicker or not. If enabled, DatePicker won't close actively but wait user to confirm.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>open</td>
-                            <td>Control the display status of DatePicker manually. Set true to display, false to hide. DatePicker won't close actively after using this component. We suggest you to use it with slot, confirm and related events.</td>
-                            <td>Boolean</td>
-                            <td>null</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of the component. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave blank.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Disable DatePicker or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>Show the clear button or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>Totally readonly. DatePicker won't be shown if enabled. It only works without setting open prop.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>editable</td>
-                            <td>Enable inputting into textbox. Only works without slot.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>Set the <code>id</code> for the input element, more info can be found in Form.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>time-picker-options</td>
-                            <td>TimePicker attributes can be configured under the type datetime and datetimerange, such as steps: <code>:time-picker-options="{steps: [1, 10, 10]}"</code></td>
-                            <td>Object</td>
-                            <td>{}</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="options" h3></Anchor>
-                    <p>Extra configurations</p>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>shortcuts</td>
-                            <td>
-                                Set shortcuts:
-                                <ul>
-                                    <li><strong>text | String</strong>: Text to be shown.</li>
-                                    <li><strong>value | Function</strong>: Return selected date. You don't need to set it if you want to control the return value yourself by using onClick callback.</li>
-                                    <li><strong>onClick | Function</strong>: Callback after clicking. Accept one argument: current DatePicker Vue instance. Use it when you need to customize complex operations.</li>
-                                </ul>
-                            </td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabledDate</td>
-                            <td>Set the date that can't be picked. Accept one argument: current date, return a Boolean value to disable it or not.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="DatePicker events" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emit when date is changed.</td>
-                            <td>Return two values, formatted date like 2016-01-01, and the current date type, such as date.</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>Emit when open / close the calendar.</td>
-                            <td>true | false</td>
-                        </tr>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>Works on confirm mode. Emit when clicking ok button.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-clear</td>
-                            <td>Works on confirm mode or clearable = true mode. Emit when date is cleared.</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="DatePicker slot" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Customize the content of DatePicker. We suggest you to use it with open props etc. See the demo above to get more info.</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </article>
-        </i-article>
-        <Date-type v-model="showDateModal"></Date-type>
-    </div>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/date-picker';
-    import Anchor from '../../components/anchor.vue';
-    import DateType from '../../components/date-type.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            DateType
-        },
-        data () {
-            return {
-                code: Code,
-                showDateModal: false,
-                value1: '2016-01-01',
-                value2: ['2016-01-01', '2016-02-15'],
-                options1: {
-                    shortcuts: [
-                        {
-                            text: 'Today',
-                            value () {
-                                return new Date();
-                            },
-                            onClick: (picker) => {
-                                this.$Message.info('Click today');
-                            }
-                        },
-                        {
-                            text: 'Yesterday',
-                            value () {
-                                const date = new Date();
-                                date.setTime(date.getTime() - 3600 * 1000 * 24);
-                                return date;
-                            },
-                            onClick: (picker) => {
-                                this.$Message.info('Click yesterday');
-                            }
-                        },
-                        {
-                            text: 'One week',
-                            value () {
-                                const date = new Date();
-                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-                                return date;
-                            },
-                            onClick: (picker) => {
-                                this.$Message.info('Click a week ago');
-                            }
-                        }
-                    ]
-                },
-                options2: {
-                    shortcuts: [
-                        {
-                            text: '1 week',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-                                return [start, end];
-                            }
-                        },
-                        {
-                            text: '1 month',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-                                return [start, end];
-                            }
-                        },
-                        {
-                            text: '3 months',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-                                return [start, end];
-                            }
-                        }
-                    ]
-                },
-                options3: {
-                    disabledDate (date) {
-                        return date && date.valueOf() < Date.now() - 86400000;
-                    }
-                },
-                options4: {
-                    disabledDate (date) {
-                        const disabledDay = date.getDate();
-                        return disabledDay === 15;
-                    }
-                },
-                open: false,
-                value3: ''
-            }
-        },
-        methods: {
-            handleClick () {
-                this.open = !this.open;
-            },
-            handleChange (date) {
-                this.value3 = date;
-            },
-            handleClear () {
-                this.open = false;
-            },
-            handleOk () {
-                this.open = false;
-            },
-            handleShowDate () {
-                this.showDateModal = true;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/date-picker.vue b/src/views/components/date-picker.vue
deleted file mode 100644
index 648a45e..0000000
--- a/src/views/components/date-picker.vue
+++ /dev/null
@@ -1,598 +0,0 @@
-<style>
-    .demo-date-type *{
-        font-size: 12px !important;
-    }
-</style>
-<template>
-    <div>
-        <i-article>
-            <article>
-                <h1>DatePicker 日期选择器</h1>
-                <Anchor title="概述" h2></Anchor>
-                <p>选择或输入日期，支持年、月、日期等类型，支持选择范围。</p>
-                <Anchor title="代码示例" h2></Anchor>
-                <Demo title="基础用法">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>type</code> 为 <code>date</code> 或 <code>daterange</code> 分别显示<strong>选择单日</strong>和<strong>选择范围</strong>类型。</p>
-                        <p>设置属性 <code>placement</code> 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。</p>
-                        <blockquote><code>2.10.0</code> 版本开始支持从右往左选择。</blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.base }}</i-code>
-                </Demo>
-                <Demo title="快捷方式">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>options</code> 对象中的 <code>shortcuts</code> 可以设置快捷选项，详见示例代码。</p>
-                        <p>其中 <strong>value</strong> 为函数，必须返回一个日期，如果是 daterange 类型，需要返回一个数组。</p>
-                        <p>value 接收任何正确的日期格式，比如 2016-12-24 或 12/24/16 都是正确的。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.shortcuts }}</i-code>
-                </Demo>
-
-                <Demo title="面板不联动">
-                    <div slot="demo">
-                        <DatePicker type="daterange" split-panels placeholder="Select date" style="width: 200px"></DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>开启属性 <code>split-panels</code> 后，左右两面板在切换年、月时不联动。</p>
-                        <blockquote><code>2.10.0</code> 版本开始支持。</blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.split_panels }}</i-code>
-                </Demo>
-
-                <Demo title="多选">
-                    <div slot="demo">
-                        <DatePicker type="date" multiple placeholder="Select date" style="width: 300px"></DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>开启属性 <code>multiple</code> 后，可以多选。</p>
-                        <blockquote><code>2.10.0</code> 版本开始支持。</blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.multiple }}</i-code>
-                </Demo>
-
-                <Demo title="显示星期数">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                                <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                                <DatePicker type="daterange" show-week-numbers placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>开启属性 <code>show-week-numbers</code> 后，可以显示星期数。</p>
-                        <blockquote><code>2.10.0</code> 版本开始支持。</blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.weeks }}</i-code>
-                </Demo>
-
-                <Demo title="起始日期">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                                <DatePicker type="date" :start-date="new Date(1991, 4, 14)" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                                <DatePicker type="daterange" :start-date="new Date(1991, 4, 14)" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>start-date</code> 后，可以将默认显示的日期面板设置为指定日期。</p>
-                        <blockquote><code>2.10.0</code> 版本开始支持。</blockquote>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.start_date }}</i-code>
-                </Demo>
-
-                <Demo title="日期格式">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>format</code> 可以改变日期的显示格式，详见 <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>。</p>
-                        <p>注意，format 只是改变显示的格式，并非改变 value 值。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.format }}</i-code>
-                </Demo>
-                <Demo title="日期时间选择">
-                    <div slot="demo">
-                        <DatePicker type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
-                        <br>
-                        <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="Select date and time(Excluding seconds)" style="width: 200px"></DatePicker>
-                        <br>
-                        <DatePicker type="datetimerange" placeholder="Select date and time" style="width: 300px"></DatePicker>
-                        <br>
-                        <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="Select date and time(Excluding seconds)" style="width: 300px"></DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>type</code> 为 <code>datetime</code> 或 <code>datetimerange</code> 可以选择时间。</p>
-                        <p>设置 format 并且忽略秒，可以只设置小时和分钟维度。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.datetime }}</i-code>
-                </Demo>
-                <Demo title="年和月">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="year" placeholder="Select year" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="month" placeholder="Select month" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>type</code> 为 <code>year</code> 或 <code>month</code> 可以使用选择年或月的功能。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.type }}</i-code>
-                </Demo>
-                <Demo title="不可选日期">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" :options="options3" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="date" :options="options4" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>options</code> 对象中的 <code>disabledDate</code> 可以设置不可选择的日期。</p>
-                        <p>disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-                </Demo>
-                <Demo title="带有确认操作">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                            <DatePicker type="date" confirm placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                            <Col span="12">
-                            <DatePicker type="daterange" confirm placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>confirm</code>，选择日期后，选择器不会主动关闭，需用户确认后才可关闭。</p>
-                        <p>确认按钮并没有影响日期的正常选择。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-                </Demo>
-                <Demo title="手动控制组件">
-                    <div slot="demo">
-                        <DatePicker
-                                :open="open"
-                                :value="value3"
-                                confirm
-                                type="date"
-                                @on-change="handleChange"
-                                @on-clear="handleClear"
-                                @on-ok="handleOk">
-                            <a href="javascript:void(0)" @click="handleClick">
-                                <Icon type="ios-calendar-outline"></Icon>
-                                <template v-if="value3 === ''">Select date</template>
-                                <template v-else>{{ value3 }}</template>
-                            </a>
-                        </DatePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>对于一些定制化的场景，可以使用 slot 配合参数 <code>open</code> 及事件来手动控制组件的显示状态，详见示例和 API。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-                </Demo>
-                <Demo title="尺寸">
-                    <div slot="demo">
-                        <Row :gutter="16">
-                            <Col span="8">
-                            <DatePicker size="small" type="date" placeholder="Select date"></DatePicker>
-                            </Col>
-                            <Col span="8">
-                            <DatePicker type="date" placeholder="Select date"></DatePicker>
-                            </Col>
-                            <Col span="8">
-                            <DatePicker size="large" type="date" placeholder="Select date"></DatePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>通过设置属性 <code>size</code> 为 <code>large</code> 或 <code>small</code> 可以调整选择器尺寸为大或小，默认不填为中。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.size }}</i-code>
-                </Demo>
-
-                <ad></ad>
-
-                <div class="api">
-                    <Anchor title="API" h2></Anchor>
-                    <Anchor title="DatePicker props" h3></Anchor>
-                    <table>
-                        <colgroup>
-                            <col>
-                            <col>
-                            <col>
-                            <col width="200">
-                        </colgroup>
-                        <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>显示类型，可选值为 <code>date</code>、<code>daterange</code>、<code>datetime</code>、<code>datetimerange</code>、<code>year</code>、<code>month</code></td>
-                            <td>String</td>
-                            <td>date</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                日期，可以是 JavaScript 的 Date，例如 <strong>new Date()</strong>，也可以是标准的日期格式，点击右边查看<br>
-                                注意：value 使用 v-model 时，值是 Date 类型，可以配合 @on-change 使用
-                            </td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>展示的日期格式</td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>
-                                <ul>
-                                    <li><strong>date | daterange</strong>：<br>yyyy-MM-dd</li>
-                                    <li><strong>datetime | datetimerange</strong>：<br>yyyy-MM-dd HH:mm:ss</li>
-                                    <li><strong>year</strong>：yyyy</li>
-                                    <li><strong>month</strong>：yyyy-MM</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>日期选择器出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>，2.12.0 版本开始支持自动识别</td>
-                            <td>String</td>
-                            <td>bottom-start</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>占位文本</td>
-                            <td>String</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>选择器额外配置，比如不可选日期与快捷选项，具体项详见下表</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>split-panels</td>
-                            <td>开启后，左右面板不联动，仅在 <code>daterange</code> 和 <code>datetimerange</code> 下可用。</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>开启后，可以选择多个日期，仅在 <code>date</code> 下可用。</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-week-numbers</td>
-                            <td>开启后，可以显示星期数。</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>start-date</td>
-                            <td>设置默认显示的起始日期。</td>
-                            <td>Date</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>confirm</td>
-                            <td>是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>open</td>
-                            <td>手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用</td>
-                            <td>Boolean</td>
-                            <td>null</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用选择器</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>是否显示清除按钮</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>editable</td>
-                            <td>文本框是否可以输入，只在没有使用 slot 时有效</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>给表单元素设置 <code>id</code>，详见 Form 用法。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>time-picker-options</td>
-                            <td>可以在 type 为 datetime 和 datetimerange 下，配置 TimePicker 的属性，比如时间间隔 steps：<code>:time-picker-options="{steps: [1, 10, 10]}"</code></td>
-                            <td>Object</td>
-                            <td>{}</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="options" h3></Anchor>
-                    <p>选择器额外配置</p>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>shortcuts</td>
-                            <td>
-                                设置快捷选项，每项内容：
-                                <ul>
-                                    <li><strong>text | String</strong>：显示的文案</li>
-                                    <li><strong>value | Function</strong>：返回指定的日期，如需自己控制逻辑，可不设置，并使用 onClick 回调</li>
-                                    <li><strong>onClick | Function</strong>：点击时的回调，参数为当前日期选择器的 Vue 实例，当需要自定义复杂操作时，可以使用</li>
-                                </ul>
-                            </td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabledDate</td>
-                            <td>设置不可选择的日期，参数为当前的日期，需要返回 Boolean 是否禁用这天</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="DatePicker events" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>日期发生变化时触发</td>
-                            <td>返回两个值，已经格式化后的日期，比如 2016-01-01，和当前的日期类型，比如 date</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>弹出日历和关闭日历时触发</td>
-                            <td>true | false</td>
-                        </tr>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>在 confirm 模式下有效，点击确定按钮时触发</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-clear</td>
-                            <td>在 confirm 模式或 clearable = true 时有效，在清空日期时触发</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="DatePicker slot" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </article>
-        </i-article>
-        <Date-type v-model="showDateModal"></Date-type>
-    </div>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/date-picker';
-    import Anchor from '../../components/anchor.vue';
-    import DateType from '../../components/date-type.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            DateType
-        },
-        data () {
-            return {
-                code: Code,
-                showDateModal: false,
-                value1: '2016-01-01',
-                value2: ['2016-01-01', '2016-02-15'],
-                options1: {
-                    shortcuts: [
-                        {
-                            text: 'Today',
-                            value () {
-                                return new Date();
-                            },
-                            onClick: (picker) => {
-                                this.$Message.info('Click today');
-                            }
-                        },
-                        {
-                            text: 'Yesterday',
-                            value () {
-                                const date = new Date();
-                                date.setTime(date.getTime() - 3600 * 1000 * 24);
-                                return date;
-                            },
-                            onClick: (picker) => {
-                                this.$Message.info('Click yesterday');
-                            }
-                        },
-                        {
-                            text: 'One week',
-                            value () {
-                                const date = new Date();
-                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-                                return date;
-                            },
-                            onClick: (picker) => {
-                                this.$Message.info('Click a week ago');
-                            }
-                        }
-                    ]
-                },
-                options2: {
-                    shortcuts: [
-                        {
-                            text: '1 week',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-                                return [start, end];
-                            }
-                        },
-                        {
-                            text: '1 month',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-                                return [start, end];
-                            }
-                        },
-                        {
-                            text: '3 months',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-                                return [start, end];
-                            }
-                        }
-                    ]
-                },
-                options3: {
-                    disabledDate (date) {
-                        return date && date.valueOf() < Date.now() - 86400000;
-                    }
-                },
-                options4: {
-                    disabledDate (date) {
-                        const disabledDay = date.getDate();
-                        return disabledDay === 15;
-                    }
-                },
-                open: false,
-                value3: ''
-            }
-        },
-        methods: {
-            handleClick () {
-                this.open = !this.open;
-            },
-            handleChange (date) {
-                this.value3 = date;
-            },
-            handleClear () {
-                this.open = false;
-            },
-            handleOk () {
-                this.open = false;
-            },
-            handleShowDate () {
-                this.showDateModal = true;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/dropdown-en.vue b/src/views/components/dropdown-en.vue
deleted file mode 100644
index 818b2ce..0000000
--- a/src/views/components/dropdown-en.vue
+++ /dev/null
@@ -1,326 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Dropdown</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Show a folded-styled dropdown menu.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Dropdown>
-                        <a href="javascript:void(0)">
-                            下拉菜单
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem disabled>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem divided>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown style="margin-left: 20px">
-                        <Button type="primary">
-                            下拉菜单
-                            <Icon type="arrow-down-b"></Icon>
-                        </Button>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem disabled>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem divided>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>Dropdown needs to be used with <code>DropdownMenu</code> and <code>DropdownItem</code> , and slot name needs to be set to <code>list</code>.</p>
-                    <p>Trig object can be link, button or other elements.</p>
-                    <p>The demo also uses disabled item and split line.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Trig Mode">
-                <div slot="demo">
-                    <Dropdown>
-                        <a href="javascript:void(0)">
-                            hover 触发
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown trigger="click" style="margin-left: 20px">
-                        <a href="javascript:void(0)">
-                            click 触发
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown trigger="custom" :visible="visible" style="margin-left: 20px">
-                        <a href="javascript:void(0)" @click="handleOpen">
-                            custom 触发
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <p>常用于各种自定义下拉内容的场景。</p>
-                            <div style="text-align: right;margin:10px;">
-                                <Button type="primary" @click="handleClose">关闭</Button>
-                            </div>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>Change the trigger by setting <code>trigger</code> prop. Optional: click, hover(default) or custom.</p>
-                    <p>When trigger is set to custom, you need to set visible property manually to control the display of Dropdown.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.trigger }}</i-code>
-            </Demo>
-            <Demo title="Align Orientation">
-                <div slot="demo">
-                    <Dropdown placement="bottom-start">
-                        <a href="javascript:void(0)">
-                            菜单(左)
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown style="margin-left: 20px">
-                        <a href="javascript:void(0)">
-                            菜单(居中)
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown style="margin-left: 20px" placement="bottom-end">
-                        <a href="javascript:void(0)">
-                            菜单(右)
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>Change the direction that Dropdown displays by setting <code>placement</code> prop. Same as Tooltip Conf, Poptip supports 12 directions. Details on API Doc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.placement }}</i-code>
-            </Demo>
-            <Demo title="Nested Usage">
-                <div slot="demo">
-                    <Dropdown>
-                        <a href="javascript:void(0)">
-                            北京小吃
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <Dropdown placement="right-start">
-                                <DropdownItem>
-                                    北京烤鸭
-                                    <Icon type="ios-arrow-right"></Icon>
-                                </DropdownItem>
-                                <DropdownMenu slot="list">
-                                    <DropdownItem>挂炉烤鸭</DropdownItem>
-                                    <DropdownItem>焖炉烤鸭</DropdownItem>
-                                </DropdownMenu>
-                            </Dropdown>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>Dropdown can realise Cascade-like style by nesting. Remind to set subset's expanding direction when nesting.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.nest }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Dropdown props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Desciption</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>trigger</td>
-                            <td>Way to activate. Optional Value: <code>hover</code>, <code>click</code>, <code>custom</code>. visible prop is needed when set to custom.</td>
-                            <td>String</td>
-                            <td>hover</td>
-                        </tr>
-                        <tr>
-                            <td>visible</td>
-                            <td>Control the display of Dropdown manually, used when trigger = 'custom'.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>The direction Dropdown displays on.Optional Value: <code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>, supports automatic recognition after 2.12.0</td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Dropdown events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-click</td>
-                            <td>Emit when clicking the dropdown item.</td>
-                            <td>DropdownItem 的 name 值</td>
-                        </tr>
-                        <tr>
-                            <td>on-visible-change</td>
-                            <td>Emit when display status of Dropdown changed.</td>
-                            <td>visible</td>
-                        </tr>
-                        <tr>
-                            <td>on-clickoutside</td>
-                            <td>Triggered when click the outside body.</td>
-                            <td>event</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Dropdown slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Main content.</td>
-                        </tr>
-                        <tr>
-                            <td>list</td>
-                            <td>The content of the list, generally handled by <code>DropdownMenu</code>.</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="DropdownItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>Used to tag the item.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Used to disable the item.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>divided</td>
-                            <td>Show spilt line.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>selected</td>
-                            <td>Tag the item status to selected.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/dropdown';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                visible: false
-            }
-        },
-        methods: {
-            handleOpen () {
-                this.visible = true;
-            },
-            handleClose () {
-                this.visible = false;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/dropdown.vue b/src/views/components/dropdown.vue
deleted file mode 100644
index 8198a23..0000000
--- a/src/views/components/dropdown.vue
+++ /dev/null
@@ -1,326 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Dropdown 下拉菜单</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>展示一组折叠的下拉菜单。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Dropdown>
-                        <a href="javascript:void(0)">
-                            下拉菜单
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem disabled>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem divided>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown style="margin-left: 20px">
-                        <Button type="primary">
-                            下拉菜单
-                            <Icon type="arrow-down-b"></Icon>
-                        </Button>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem disabled>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem divided>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>需要配合 <code>DropdownMenu</code> 和 <code>DropdownItem</code> 两个组件来使用，并且给列表设置具名 slot 为 <code>list</code>。</p>
-                    <p>触发对象可以是链接、按钮等各种元素。</p>
-                    <p>本例还展示了禁用项和分隔线。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="触发方式">
-                <div slot="demo">
-                    <Dropdown>
-                        <a href="javascript:void(0)">
-                            hover 触发
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown trigger="click" style="margin-left: 20px">
-                        <a href="javascript:void(0)">
-                            click 触发
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown trigger="custom" :visible="visible" style="margin-left: 20px">
-                        <a href="javascript:void(0)" @click="handleOpen">
-                            custom 触发
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <p>常用于各种自定义下拉内容的场景。</p>
-                            <div style="text-align: right;margin:10px;">
-                                <Button type="primary" @click="handleClose">关闭</Button>
-                            </div>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>trigger</code> 可以更改触发方式，可选项为 click 、 hover(默认) 或 custom(自定义)。</p>
-                    <p>触发方式设置为 custom 自定义时，需手动设置 visible 属性来控制下拉框的显示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.trigger }}</i-code>
-            </Demo>
-            <Demo title="对齐方向">
-                <div slot="demo">
-                    <Dropdown placement="bottom-start">
-                        <a href="javascript:void(0)">
-                            菜单(左)
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown style="margin-left: 20px">
-                        <a href="javascript:void(0)">
-                            菜单(居中)
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                    <Dropdown style="margin-left: 20px" placement="bottom-end">
-                        <a href="javascript:void(0)">
-                            菜单(右)
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                            <DropdownItem>北京烤鸭</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>placement</code> 可以更改下拉菜单出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.placement }}</i-code>
-            </Demo>
-            <Demo title="嵌套用法">
-                <div slot="demo">
-                    <Dropdown>
-                        <a href="javascript:void(0)">
-                            北京小吃
-                            <Icon type="arrow-down-b"></Icon>
-                        </a>
-                        <DropdownMenu slot="list">
-                            <DropdownItem>驴打滚</DropdownItem>
-                            <DropdownItem>炸酱面</DropdownItem>
-                            <DropdownItem>豆汁儿</DropdownItem>
-                            <Dropdown placement="right-start">
-                                <DropdownItem>
-                                    北京烤鸭
-                                    <Icon type="ios-arrow-right"></Icon>
-                                </DropdownItem>
-                                <DropdownMenu slot="list">
-                                    <DropdownItem>挂炉烤鸭</DropdownItem>
-                                    <DropdownItem>焖炉烤鸭</DropdownItem>
-                                </DropdownMenu>
-                            </Dropdown>
-                            <DropdownItem>冰糖葫芦</DropdownItem>
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-                <div slot="desc">
-                    <p>下拉菜单可以进行嵌套实现级联的效果，嵌套时注意设置子集的展开方向。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.nest }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Dropdown props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>trigger</td>
-                            <td>触发方式，可选值为 <code>hover</code>（悬停）<code>click</code>（点击）<code>custom</code>（自定义），使用 custom 时，需配合 visible 一起使用</td>
-                            <td>String</td>
-                            <td>hover</td>
-                        </tr>
-                        <tr>
-                            <td>visible</td>
-                            <td>手动控制下拉框的显示，在 trigger = 'custom' 时使用</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>下拉菜单出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>, 2.12.0 版本开始支持自动识别</td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Dropdown events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-click</td>
-                            <td>点击菜单项时触发</td>
-                            <td>DropdownItem 的 name 值</td>
-                        </tr>
-                        <tr>
-                            <td>on-visible-change</td>
-                            <td>菜单显示状态改变时调用</td>
-                            <td>visible</td>
-                        </tr>
-                        <tr>
-                            <td>on-clickoutside</td>
-                            <td>点击外部关闭下拉菜单时触发</td>
-                            <td>event</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Dropdown slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>主体内容</td>
-                        </tr>
-                        <tr>
-                            <td>list</td>
-                            <td>列表内容，一般由 <code>DropdownMenu</code> 承担</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="DropdownItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>用来标识这一项</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>禁用该项</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>divided</td>
-                            <td>显示分割线</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>selected</td>
-                            <td>标记该项为选中状态</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/dropdown';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                visible: false
-            }
-        },
-        methods: {
-            handleOpen () {
-                this.visible = true;
-            },
-            handleClose () {
-                this.visible = false;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/font-en.vue b/src/views/components/font-en.vue
deleted file mode 100644
index 86b7098..0000000
--- a/src/views/components/font-en.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<style scoped>
-    .demo-font-img{
-        width: 100%;
-    }
-    .api table{
-        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Font</h1>
-            <Anchor title="Overview" h2></Anchor>
-            <p>iView's stylesheet has already standardized the typography for achieving the most appealing display effects regardless of the OS and browers. The fonts of the <Icon type="social-apple"></Icon> macOS（iOS）are used whenever they're available, the fallback ones are also provided.</p>
-            <Anchor title="Typography Preview" h3></Anchor>
-            <ul>
-                <li>Chinese Characters</li>
-                <img class="demo-font-img" src="../../images/font-zh.png">
-                <li>English Characters</li>
-                <img class="demo-font-img" src="../../images/font-en.png">
-            </ul>
-            <Anchor title="Code" h3></Anchor>
-            <i-code lang="css" bg>font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;</i-code>
-            <Anchor title="Usage Rules" h3></Anchor>
-            <Row class="api" :gutter="16">
-                <i-col span="12">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Chinese</th>
-                                <th>Example</th>
-                                <th>Font Weight</th>
-                                <th>Color</th>
-                                <th>Font Size</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>主标题</td>
-                                <td><span style="font-size:16px;font-weight:bold;color:#464c5b;">我是标题</span></td>
-                                <td>加粗</td>
-                                <td>#464c5b</td>
-                                <td>16px</td>
-                            </tr>
-                            <tr>
-                                <td>次级标题</td>
-                                <td><span style="font-size:14px;font-weight:bold;color:#464c5b;">我是标题</span></td>
-                                <td>加粗</td>
-                                <td>#464c5b</td>
-                                <td>14px</td>
-                            </tr>
-                            <tr>
-                                <td>小标题</td>
-                                <td><span style="font-size:12px;font-weight:bold;color:#464c5b;">我是标题</span></td>
-                                <td>加粗</td>
-                                <td>#464c5b</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>正文</td>
-                                <td><span style="color:#657180;">我是正文</span></td>
-                                <td>默认</td>
-                                <td>#657180</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>辅助文字</td>
-                                <td><span style="color:#9ea7b4;">我是辅助文字</span></td>
-                                <td>默认</td>
-                                <td>#9ea7b4</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>失效文字</td>
-                                <td><span style="color:#c3cbd6;">我是失效文字</span></td>
-                                <td>默认</td>
-                                <td>#c3cbd6</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>链接文字</td>
-                                <td><a href="#">我是链接文字</a></td>
-                                <td>默认</td>
-                                <td>#3399ff</td>
-                                <td>12px</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </i-col>
-                <i-col span="12">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>English</th>
-                                <th>Example</th>
-                                <th>Font Weight</th>
-                                <th>Color</th>
-                                <th>Font Size</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Main Head</td>
-                                <td><span style="font-size:16px;font-weight:bold;color:#464c5b;">This is an example</span></td>
-                                <td>bold</td>
-                                <td>#464c5b</td>
-                                <td>16px</td>
-                            </tr>
-                            <tr>
-                                <td>Sub Head</td>
-                                <td><span style="font-size:14px;font-weight:bold;color:#464c5b;">This is an example</span></td>
-                                <td>bold</td>
-                                <td>#464c5b</td>
-                                <td>14px</td>
-                            </tr>
-                            <tr>
-                                <td>Small Head</td>
-                                <td><span style="font-size:12px;font-weight:bold;color:#464c5b;">This is an example</span></td>
-                                <td>bold</td>
-                                <td>#464c5b</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Text</td>
-                                <td><span style="color:#657180;">This is an example</span></td>
-                                <td>normal</td>
-                                <td>#657180</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Help</td>
-                                <td><span style="color:#9ea7b4;">This is an example</span></td>
-                                <td>normal</td>
-                                <td>#9ea7b4</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Disabled</td>
-                                <td><span style="color:#c3cbd6;">This is an example</span></td>
-                                <td>normal</td>
-                                <td>#c3cbd6</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Link</td>
-                                <td><a href="#">This is an example</a></td>
-                                <td>normal</td>
-                                <td>#3399ff</td>
-                                <td>12px</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </i-col>
-            </Row>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/font.vue b/src/views/components/font.vue
deleted file mode 100644
index ce830c5..0000000
--- a/src/views/components/font.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<style scoped>
-    .demo-font-img{
-        width: 100%;
-    }
-    .api table{
-        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Font 字体</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>iView 的 CSS 对字体进行了统一规范，力求在不同平台、浏览器下能显示出其最佳的效果。我们推荐 <Icon type="social-apple"></Icon> macOS（iOS）优先的策略，在不支持苹方字体的情况，使用备用字体。</p>
-            <Anchor title="字体预览" h3></Anchor>
-            <ul>
-                <li>中文字体</li>
-                <img class="demo-font-img" src="../../images/font-zh.png">
-                <li>英文字体</li>
-                <img class="demo-font-img" src="../../images/font-en.png">
-            </ul>
-            <Anchor title="字体代码" h3></Anchor>
-            <i-code lang="css" bg>font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;</i-code>
-            <Anchor title="字体使用规范" h3></Anchor>
-            <Row class="api" :gutter="16">
-                <i-col span="12">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>中文字体</th>
-                                <th>示例</th>
-                                <th>粗细</th>
-                                <th>颜色</th>
-                                <th>字号</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>主标题</td>
-                                <td><span style="font-size:16px;font-weight:bold;color:#464c5b;">我是标题</span></td>
-                                <td>加粗</td>
-                                <td>#464c5b</td>
-                                <td>16px</td>
-                            </tr>
-                            <tr>
-                                <td>次级标题</td>
-                                <td><span style="font-size:14px;font-weight:bold;color:#464c5b;">我是标题</span></td>
-                                <td>加粗</td>
-                                <td>#464c5b</td>
-                                <td>14px</td>
-                            </tr>
-                            <tr>
-                                <td>小标题</td>
-                                <td><span style="font-size:12px;font-weight:bold;color:#464c5b;">我是标题</span></td>
-                                <td>加粗</td>
-                                <td>#464c5b</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>正文</td>
-                                <td><span style="color:#657180;">我是正文</span></td>
-                                <td>默认</td>
-                                <td>#657180</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>辅助文字</td>
-                                <td><span style="color:#9ea7b4;">我是辅助文字</span></td>
-                                <td>默认</td>
-                                <td>#9ea7b4</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>失效文字</td>
-                                <td><span style="color:#c3cbd6;">我是失效文字</span></td>
-                                <td>默认</td>
-                                <td>#c3cbd6</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>链接文字</td>
-                                <td><a href="#">我是链接文字</a></td>
-                                <td>默认</td>
-                                <td>#3399ff</td>
-                                <td>12px</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </i-col>
-                <i-col span="12">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>英文字体</th>
-                                <th>示例</th>
-                                <th>粗细</th>
-                                <th>颜色</th>
-                                <th>字号</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Main Head</td>
-                                <td><span style="font-size:16px;font-weight:bold;color:#464c5b;">This is an example</span></td>
-                                <td>bold</td>
-                                <td>#464c5b</td>
-                                <td>16px</td>
-                            </tr>
-                            <tr>
-                                <td>Sub Head</td>
-                                <td><span style="font-size:14px;font-weight:bold;color:#464c5b;">This is an example</span></td>
-                                <td>bold</td>
-                                <td>#464c5b</td>
-                                <td>14px</td>
-                            </tr>
-                            <tr>
-                                <td>Small Head</td>
-                                <td><span style="font-size:12px;font-weight:bold;color:#464c5b;">This is an example</span></td>
-                                <td>bold</td>
-                                <td>#464c5b</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Text</td>
-                                <td><span style="color:#657180;">This is an example</span></td>
-                                <td>normal</td>
-                                <td>#657180</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Help</td>
-                                <td><span style="color:#9ea7b4;">This is an example</span></td>
-                                <td>normal</td>
-                                <td>#9ea7b4</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Disabled</td>
-                                <td><span style="color:#c3cbd6;">This is an example</span></td>
-                                <td>normal</td>
-                                <td>#c3cbd6</td>
-                                <td>12px</td>
-                            </tr>
-                            <tr>
-                                <td>Link</td>
-                                <td><a href="#">This is an example</a></td>
-                                <td>normal</td>
-                                <td>#3399ff</td>
-                                <td>12px</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </i-col>
-            </Row>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/form-en.vue b/src/views/components/form-en.vue
deleted file mode 100644
index 179da82..0000000
--- a/src/views/components/form-en.vue
+++ /dev/null
@@ -1,626 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Form</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Forms with abilities of data collecting, validating, and submitting, which includes checkbox, radio, dropdown etc.</p>
-            <Alert show-icon style="margin-top: 16px">Attention: <code>i-form</code> is needed if not under template/render mode.</Alert>
-            <Alert show-icon>
-                <a href="https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2" target="_blank">W3C</a> regulates that
-                    <template slot="desc">
-                    <p>
-                        <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
-                    </p>
-                    <p>To prevent this behavior, you can add <code>@submit.native.prevent</code> on <code>&lt;Form&gt;</code>.</p>
-                </template>
-            </Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Inline Form">
-                <div slot="demo">
-                    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
-                        <FormItem prop="user">
-                            <Input type="text" v-model="formInline.user" placeholder="Username">
-                                <Icon type="ios-person-outline" slot="prepend"></Icon>
-                            </Input>
-                        </FormItem>
-                        <FormItem prop="password">
-                            <Input type="password" v-model="formInline.password" placeholder="Password">
-                                <Icon type="ios-locked-outline" slot="prepend"></Icon>
-                            </Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>Set  <code>inline</code> prop to let Form arrange vertically.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.inline }}</i-code>
-            </Demo>
-            <Demo title="Form Control">
-                <div slot="demo">
-                    <Form :model="formItem" :label-width="80">
-                        <FormItem label="Input">
-                            <Input v-model="formItem.input" placeholder="Enter something..."></Input>
-                        </FormItem>
-                        <FormItem label="Select">
-                            <Select v-model="formItem.select">
-                                <Option value="beijing">New York</Option>
-                                <Option value="shanghai">London</Option>
-                                <Option value="shenzhen">Sydney</Option>
-                            </Select>
-                        </FormItem>
-                        <FormItem label="DatePicker">
-                            <Row>
-                                <Col span="11">
-                                <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
-                                </Col>
-                                <Col span="2" style="text-align: center">-</Col>
-                                <Col span="11">
-                                <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem label="Radio">
-                            <RadioGroup v-model="formItem.radio">
-                                <Radio label="male">Male</Radio>
-                                <Radio label="female">Female</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="Checkbox">
-                            <CheckboxGroup v-model="formItem.checkbox">
-                                <Checkbox label="Eat"></Checkbox>
-                                <Checkbox label="Sleep"></Checkbox>
-                                <Checkbox label="Run"></Checkbox>
-                                <Checkbox label="Movie"></Checkbox>
-                            </CheckboxGroup>
-                        </FormItem>
-                        <FormItem label="Switch">
-                            <i-switch v-model="formItem.switch" size="large">
-                                <span slot="open">On</span>
-                                <span slot="close">Off</span>
-                            </i-switch>
-                        </FormItem>
-                        <FormItem label="Slider">
-                            <Slider v-model="formItem.slider" range></Slider>
-                        </FormItem>
-                        <FormItem label="Text">
-                            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary">Submit</Button>
-                            <Button type="ghost" style="margin-left: 8px">Cancel</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>In <code>Form</code>, each form consists of <code>FormItem</code>s. Available Control: Input, Radio, Checkbox, Switch, Select, Slider, DatePicker, TimePicker, Cascader, Transfer, InputNumber, Rate, Upload, AutoComplete, ColorPicker.</p>
-                    <p>Setting <code>label</code> prop to <code>FormItem</code> can display the label of the form. <code>label-width</code> needs to be set on Form.</p>
-                    <p>Set the property <code>label-for</code> to <code>FormItem</code>, and the <code>element-id</code> property to component, it will be focused when click label.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.item }}</i-code>
-            </Demo>
-            <Demo title="Alignment">
-                <div slot="demo">
-                    <Form :model="formLeft" label-position="left" :label-width="100">
-                        <FormItem label="Title">
-                            <Input v-model="formLeft.input1"></Input>
-                        </FormItem>
-                        <FormItem label="Title name">
-                            <Input v-model="formLeft.input2"></Input>
-                        </FormItem>
-                        <FormItem label="Aligned title">
-                            <Input v-model="formLeft.input3"></Input>
-                        </FormItem>
-                    </Form>
-                    <Form :model="formRight" label-position="right" :label-width="100">
-                        <FormItem label="Title">
-                            <Input v-model="formRight.input1"></Input>
-                        </FormItem>
-                        <FormItem label="Title name">
-                            <Input v-model="formRight.input2"></Input>
-                        </FormItem>
-                        <FormItem label="Aligned title">
-                            <Input v-model="formRight.input3"></Input>
-                        </FormItem>
-                    </Form>
-                    <Form :model="formTop" label-position="top">
-                        <FormItem label="Title">
-                            <Input v-model="formTop.input1"></Input>
-                        </FormItem>
-                        <FormItem label="Title name">
-                            <Input v-model="formTop.input2"></Input>
-                        </FormItem>
-                        <FormItem label="Aligned title">
-                            <Input v-model="formTop.input3"></Input>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>label-position</code> prop to change the position of the label. Optional: left, right, top.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.position }}</i-code>
-            </Demo>
-            <Demo title="Form Validation">
-                <div slot="demo">
-                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
-                        <FormItem label="Name" prop="name">
-                            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
-                        </FormItem>
-                        <FormItem label="E-mail" prop="mail">
-                            <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
-                        </FormItem>
-                        <FormItem label="City" prop="city">
-                            <Select v-model="formValidate.city" placeholder="Select your city">
-                                <Option value="beijing">New York</Option>
-                                <Option value="shanghai">London</Option>
-                                <Option value="shenzhen">Sydney</Option>
-                            </Select>
-                        </FormItem>
-                        <FormItem label="Date">
-                            <Row>
-                                <Col span="11">
-                                <FormItem prop="date">
-                                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
-                                </FormItem>
-                                </Col>
-                                <Col span="2" style="text-align: center">-</Col>
-                                <Col span="11">
-                                <FormItem prop="time">
-                                    <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
-                                </FormItem>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem label="Gender" prop="gender">
-                            <RadioGroup v-model="formValidate.gender">
-                                <Radio label="male">Male</Radio>
-                                <Radio label="female">Female</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="Hobby" prop="interest">
-                            <CheckboxGroup v-model="formValidate.interest">
-                                <Checkbox label="Eat"></Checkbox>
-                                <Checkbox label="Sleep"></Checkbox>
-                                <Checkbox label="Run"></Checkbox>
-                                <Checkbox label="Movie"></Checkbox>
-                            </CheckboxGroup>
-                        </FormItem>
-                        <FormItem label="Desc" prop="desc">
-                            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
-                            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>The validation module of Form is based on <a href="https://github.com/yiminghe/async-validator" target="_blank"><Icon type="social-github"></Icon> async-validator</a>. Set <code>rules</code> to Form and set <code>prop</code> prop to FormItem that needs to be validated.</p>
-                    <p>For complete validation rules, please visit async-validator project site.</p>
-                    <p>Validate method support Promise.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.validate }}</i-code>
-            </Demo>
-            <Demo title="Custom Validation">
-                <div slot="demo">
-                    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
-                        <FormItem label="Password" prop="passwd">
-                            <Input type="password" v-model="formCustom.passwd"></Input>
-                        </FormItem>
-                        <FormItem label="Confirm" prop="passwdCheck">
-                            <Input type="password" v-model="formCustom.passwdCheck"></Input>
-                        </FormItem>
-                        <FormItem label="Age" prop="age">
-                            <Input type="text" v-model="formCustom.age" number></Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
-                            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>You can customize your own rule to complete complex validation like data that needs to be validated on server side. The demo shows a rechecking on password and a simulation of async validation.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="Dynamic Adding / Removing">
-                <div slot="demo">
-                    <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
-                        <FormItem
-                                v-for="(item, index) in formDynamic.items"
-                                v-if="item.status"
-                                :key="index"
-                                :label="'Item ' + item.index"
-                                :prop="'items.' + index + '.value'"
-                                :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
-                            <Row>
-                                <Col span="18">
-                                <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
-                                </Col>
-                                <Col span="4" offset="1">
-                                <Button type="ghost" @click="handleRemove(index)">Delete</Button>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem>
-                            <Row>
-                                <Col span="12">
-                                <Button type="dashed" long @click="handleAdd" icon="plus-round">Add item</Button>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
-                            <Button type="ghost" @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>When you need to maintain FormItem dynamiclly, you can directly set <code>rules</code> prop to FormItem to validate the field individually.</p>
-                    <p>When setting prop prop dynamiclly, FormItem will rely on its parent Form's model to get its content. Details on demo code.</p>
-                    <p>You can set required, error or some other props on FormItem. Details on API Doc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.dynamic }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Form props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>Form's data object.</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>rules</td>
-                            <td>Validation rules of Form. For more details, visit <a href="https://github.com/yiminghe/async-validator" target="_blank"><Icon type="social-github"></Icon> async-validator</a>.</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>inline</td>
-                            <td>Enable inline-form mode or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>label-position</td>
-                            <td>The position of Form's labels. Optional value: <code>left</code>, <code>right</code>, <code>top</code></td>
-                            <td>String</td>
-                            <td>right</td>
-                        </tr>
-                        <tr>
-                            <td>label-width</td>
-                            <td>Width of Form's labels. All Form-items in Form will inherit the value.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>show-message</td>
-                            <td>Show validation failing info or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>autocomplete</td>
-                            <td>Native autocomplete property, which can be selected as off or on.</td>
-                            <td>String</td>
-                            <td>off</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Form methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Method Name</th>
-                            <th>Description</th>
-                            <th>Parameter</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>validate</td>
-                            <td>Validate the whole form. The parameter is the callback function after validating. It'll return a Boolean value to notice success of failure. Support Promise.</td>
-                            <td>callback</td>
-                        </tr>
-                        <tr>
-                            <td>validateField</td>
-                            <td>Validate some field of the form, arg 1 is prop that needs to be validated, arg2 is callback function. It'll return the error message.</td>
-                            <td>callback</td>
-                        </tr>
-                        <tr>
-                            <td>resetFields</td>
-                            <td>Reset the whole form. Remove the content of every field and reset the validation result.</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="FormItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>prop</td>
-                            <td>Target to the field in Form's model.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>Label text.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label-width</td>
-                            <td>Label width.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label-for</td>
-                            <td>Set the property <code>for</code> to the native tag <code>label</code>, which matches the <code>element-id</code> property of the component and can click on the label to focus it.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>Required or not. If not set, it'll be generated accroding to validation rules.</td>
-                            <td>Boolean</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>rules</td>
-                            <td>Validation rules.</td>
-                            <td>Object | Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>Error message of the form. Setting this prop will cause the validation state of the form changing to error, and the error message will be shown.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>show-message</td>
-                            <td>Show validation error data or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="FormItem slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>content</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>Content of the label.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/form';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            const validatePass = (rule, value, callback) => {
-                if (value === '') {
-                    callback(new Error('Please enter your password'));
-                } else {
-                    if (this.formCustom.passwdCheck !== '') {
-                        // 对第二个密码框单独验证
-                        this.$refs.formCustom.validateField('passwdCheck');
-                    }
-                    callback();
-                }
-            };
-            const validatePassCheck = (rule, value, callback) => {
-                if (value === '') {
-                    callback(new Error('Please enter your password again'));
-                } else if (value !== this.formCustom.passwd) {
-                    callback(new Error('The two input passwords do not match!'));
-                } else {
-                    callback();
-                }
-            };
-            const validateAge = (rule, value, callback) => {
-                if (!value) {
-                    return callback(new Error('Age cannot be empty'));
-                }
-                // 模拟异步验证效果
-                setTimeout(() => {
-                    if (!Number.isInteger(value)) {
-                        callback(new Error('Please enter a numeric value'));
-                    } else {
-                        if (value < 18) {
-                            callback(new Error('Must be over 18 years of age'));
-                        } else {
-                            callback();
-                        }
-                    }
-                }, 1000);
-            };
-
-            return {
-                code: Code,
-                formInline: {
-                    user: '',
-                    password: ''
-                },
-                ruleInline: {
-                    user: [
-                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
-                    ],
-                    password: [
-                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
-                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
-                    ]
-                },
-                formItem: {
-                    input: '',
-                    select: '',
-                    radio: 'male',
-                    checkbox: [],
-                    switch: true,
-                    date: '',
-                    time: '',
-                    slider: [20, 50],
-                    textarea: ''
-                },
-                formLeft: {
-                    input1: '',
-                    input2: '',
-                    input3: ''
-                },
-                formRight: {
-                    input1: '',
-                    input2: '',
-                    input3: ''
-                },
-                formTop: {
-                    input1: '',
-                    input2: '',
-                    input3: ''
-                },
-                formValidate: {
-                    name: '',
-                    mail: '',
-                    city: '',
-                    gender: '',
-                    interest: [],
-                    date: '',
-                    time: '',
-                    desc: ''
-                },
-                ruleValidate: {
-                    name: [
-                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
-                    ],
-                    mail: [
-                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
-                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
-                    ],
-                    city: [
-                        { required: true, message: 'Please select the city', trigger: 'change' }
-                    ],
-                    gender: [
-                        { required: true, message: 'Please select gender', trigger: 'change' }
-                    ],
-                    interest: [
-                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
-                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
-                    ],
-                    date: [
-                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
-                    ],
-                    time: [
-                        { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
-                    ],
-                    desc: [
-                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
-                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
-                    ]
-                },
-                formCustom: {
-                    passwd: '',
-                    passwdCheck: '',
-                    age: ''
-                },
-                ruleCustom: {
-                    passwd: [
-                        { validator: validatePass, trigger: 'blur' }
-                    ],
-                    passwdCheck: [
-                        { validator: validatePassCheck, trigger: 'blur' }
-                    ],
-                    age: [
-                        { validator: validateAge, trigger: 'blur' }
-                    ]
-                },
-                index: 1,
-                formDynamic: {
-                    items: [
-                        {
-                            value: '',
-                            index: 1,
-                            status: 1
-                        }
-                    ]
-                }
-            }
-        },
-        methods: {
-            handleSubmit (name) {
-                this.$refs[name].validate((valid) => {
-                    if (valid) {
-                        this.$Message.success('Success!');
-                    } else {
-                        this.$Message.error('Fail!');
-                    }
-                })
-            },
-            handleReset (name) {
-                this.$refs[name].resetFields();
-            },
-            handleAdd () {
-                this.index++;
-                this.formDynamic.items.push({
-                    value: '',
-                    index: this.index,
-                    status: 1
-                });
-            },
-            handleRemove (index) {
-                this.formDynamic.items[index].status = 0;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/form.vue b/src/views/components/form.vue
deleted file mode 100644
index 9bc9aab..0000000
--- a/src/views/components/form.vue
+++ /dev/null
@@ -1,626 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Form 表单</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。</p>
-            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-form</code>。</Alert>
-            <Alert show-icon>
-                W3C 标准中有如下<a href="https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2" target="_blank">规定</a>：
-                <template slot="desc">
-                    <p>
-                        <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
-                    </p>
-                    <p>即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <code>&lt;Form&gt;</code> 标签上添加 <code>@submit.native.prevent</code>。</p>
-                </template>
-            </Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="行内表单">
-                <div slot="demo">
-                    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
-                        <FormItem prop="user">
-                            <Input type="text" v-model="formInline.user" placeholder="Username">
-                                <Icon type="ios-person-outline" slot="prepend"></Icon>
-                            </Input>
-                        </FormItem>
-                        <FormItem prop="password">
-                            <Input type="password" v-model="formInline.password" placeholder="Password">
-                                <Icon type="ios-locked-outline" slot="prepend"></Icon>
-                            </Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>inline</code>，表单元素可以水平排列。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.inline }}</i-code>
-            </Demo>
-            <Demo title="表单控件">
-                <div slot="demo">
-                    <Form :model="formItem" :label-width="80">
-                        <FormItem label="Input">
-                            <Input v-model="formItem.input" placeholder="Enter something..."></Input>
-                        </FormItem>
-                        <FormItem label="Select">
-                            <Select v-model="formItem.select">
-                                <Option value="beijing">New York</Option>
-                                <Option value="shanghai">London</Option>
-                                <Option value="shenzhen">Sydney</Option>
-                            </Select>
-                        </FormItem>
-                        <FormItem label="DatePicker">
-                            <Row>
-                                <Col span="11">
-                                    <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
-                                </Col>
-                                <Col span="2" style="text-align: center">-</Col>
-                                <Col span="11">
-                                    <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem label="Radio">
-                            <RadioGroup v-model="formItem.radio">
-                                <Radio label="male">Male</Radio>
-                                <Radio label="female">Female</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="Checkbox">
-                            <CheckboxGroup v-model="formItem.checkbox">
-                                <Checkbox label="Eat"></Checkbox>
-                                <Checkbox label="Sleep"></Checkbox>
-                                <Checkbox label="Run"></Checkbox>
-                                <Checkbox label="Movie"></Checkbox>
-                            </CheckboxGroup>
-                        </FormItem>
-                        <FormItem label="Switch">
-                            <i-switch v-model="formItem.switch" size="large">
-                                <span slot="open">On</span>
-                                <span slot="close">Off</span>
-                            </i-switch>
-                        </FormItem>
-                        <FormItem label="Slider">
-                            <Slider v-model="formItem.slider" range></Slider>
-                        </FormItem>
-                        <FormItem label="Text">
-                            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary">Submit</Button>
-                            <Button type="ghost" style="margin-left: 8px">Cancel</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>在 <code>Form</code> 内，每个表单域由 <code>FormItem</code> 组成，可包含的控件有：Input、Radio、Checkbox、Switch、Select、Slider、DatePicker、TimePicker、Cascader、Transfer、InputNumber、Rate、Upload、AutoComplete、ColorPicker。</p>
-                    <p>给 <code>FormItem</code> 设置属性 <code>label</code> 可以显示表单域的标签，需要给 Form 设置 <code>label-width</code>。</p>
-                    <p>给 <code>FormItem</code> 设置属性 <code>label-for</code> 可以指定原生的 label 标签的 for 属性，配合设置控件的 <code>element-id</code> 属性，可以点击 label 时聚焦控件。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.item }}</i-code>
-            </Demo>
-            <Demo title="对齐方式">
-                <div slot="demo">
-                    <Form :model="formLeft" label-position="left" :label-width="100">
-                        <FormItem label="Title">
-                            <Input v-model="formLeft.input1"></Input>
-                        </FormItem>
-                        <FormItem label="Title name">
-                            <Input v-model="formLeft.input2"></Input>
-                        </FormItem>
-                        <FormItem label="Aligned title">
-                            <Input v-model="formLeft.input3"></Input>
-                        </FormItem>
-                    </Form>
-                    <Form :model="formRight" label-position="right" :label-width="100">
-                        <FormItem label="Title">
-                            <Input v-model="formRight.input1"></Input>
-                        </FormItem>
-                        <FormItem label="Title name">
-                            <Input v-model="formRight.input2"></Input>
-                        </FormItem>
-                        <FormItem label="Aligned title">
-                            <Input v-model="formRight.input3"></Input>
-                        </FormItem>
-                    </Form>
-                    <Form :model="formTop" label-position="top">
-                        <FormItem label="Title">
-                            <Input v-model="formTop.input1"></Input>
-                        </FormItem>
-                        <FormItem label="Title name">
-                            <Input v-model="formTop.input2"></Input>
-                        </FormItem>
-                        <FormItem label="Aligned title">
-                            <Input v-model="formTop.input3"></Input>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>label-position</code>，可以改变表单域标签的位置，left 为左对齐，right 为右对齐，top 会置于表单域顶部。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.position }}</i-code>
-            </Demo>
-            <Demo title="表单验证">
-                <div slot="demo">
-                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
-                        <FormItem label="Name" prop="name">
-                            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
-                        </FormItem>
-                        <FormItem label="E-mail" prop="mail">
-                            <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
-                        </FormItem>
-                        <FormItem label="City" prop="city">
-                            <Select v-model="formValidate.city" placeholder="Select your city">
-                                <Option value="beijing">New York</Option>
-                                <Option value="shanghai">London</Option>
-                                <Option value="shenzhen">Sydney</Option>
-                            </Select>
-                        </FormItem>
-                        <FormItem label="Date">
-                            <Row>
-                                <Col span="11">
-                                    <FormItem prop="date">
-                                        <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
-                                    </FormItem>
-                                </Col>
-                                <Col span="2" style="text-align: center">-</Col>
-                                <Col span="11">
-                                    <FormItem prop="time">
-                                        <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
-                                    </FormItem>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem label="Gender" prop="gender">
-                            <RadioGroup v-model="formValidate.gender">
-                                <Radio label="male">Male</Radio>
-                                <Radio label="female">Female</Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem label="Hobby" prop="interest">
-                            <CheckboxGroup v-model="formValidate.interest">
-                                <Checkbox label="Eat"></Checkbox>
-                                <Checkbox label="Sleep"></Checkbox>
-                                <Checkbox label="Run"></Checkbox>
-                                <Checkbox label="Movie"></Checkbox>
-                            </CheckboxGroup>
-                        </FormItem>
-                        <FormItem label="Desc" prop="desc">
-                            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
-                            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>Form 组件基于 <a href="https://github.com/yiminghe/async-validator" target="_blank"><Icon type="social-github"></Icon> async-validator</a> 实现的数据验证，给 Form 设置属性 <code>rules</code>，同时给需要验证的 FormItem 设置属性 <code>prop</code> 指向对应字段即可。</p>
-                    <p>完整的验证规则请参照开源项目 async-validator。</p>
-                    <p>验证方法也支持 Promise。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.validate }}</i-code>
-            </Demo>
-            <Demo title="自定义验证">
-                <div slot="demo">
-                    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
-                        <FormItem label="Password" prop="passwd">
-                            <Input type="password" v-model="formCustom.passwd"></Input>
-                        </FormItem>
-                        <FormItem label="Confirm" prop="passwdCheck">
-                            <Input type="password" v-model="formCustom.passwdCheck"></Input>
-                        </FormItem>
-                        <FormItem label="Age" prop="age">
-                            <Input type="text" v-model="formCustom.age" number></Input>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
-                            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>可以完全自定义验证规则来完成更复杂的验证，比如某些数据需要在服务端验证时。示例展示的是密码的二次确认及模拟的一个异步验证。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="动态增减表单项">
-                <div slot="demo">
-                    <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
-                        <FormItem
-                                v-for="(item, index) in formDynamic.items"
-                                v-if="item.status"
-                                :key="index"
-                                :label="'Item ' + item.index"
-                                :prop="'items.' + index + '.value'"
-                                :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
-                            <Row>
-                                <Col span="18">
-                                <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
-                                </Col>
-                                <Col span="4" offset="1">
-                                <Button type="ghost" @click="handleRemove(index)">Delete</Button>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem>
-                            <Row>
-                                <Col span="12">
-                                <Button type="dashed" long @click="handleAdd" icon="plus-round">Add item</Button>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem>
-                            <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
-                            <Button type="ghost" @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div slot="desc">
-                    <p>当需要动态维护 FormItem 时，也可以直接给 FormItem 设置属性 <code>rules</code> 来单独为该域做验证。</p>
-                    <p>动态设置 FormItem 的 prop 属性时，会依据上层的 Form 组件的 model 来获取，查看示例代码。</p>
-                    <p>FormItem 还可以独立设置 required、error 等属性，详见 API。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.dynamic }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Form props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>表单数据对象</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>rules</td>
-                            <td>表单验证规则，具体配置查看 <a href="https://github.com/yiminghe/async-validator" target="_blank"><Icon type="social-github"></Icon> async-validator</a></td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>inline</td>
-                            <td>是否开启行内表单模式</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>label-position</td>
-                            <td>表单域标签的位置，可选值为 <code>left</code>、<code>right</code>、<code>top</code></td>
-                            <td>String</td>
-                            <td>right</td>
-                        </tr>
-                        <tr>
-                            <td>label-width</td>
-                            <td>表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>show-message</td>
-                            <td>是否显示校验错误信息</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>autocomplete</td>
-                            <td>原生的 autocomplete 属性，可选值为 off 或 on</td>
-                            <td>String</td>
-                            <td>off</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Form methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>方法名</th>
-                            <th>说明</th>
-                            <th>参数</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>validate</td>
-                            <td>对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败，支持 Promise</td>
-                            <td>callback</td>
-                        </tr>
-                        <tr>
-                            <td>validateField</td>
-                            <td>对部分表单字段进行校验的方法，参数1为需校验的 prop，参数2为检验完回调，返回错误信息</td>
-                            <td>callback</td>
-                        </tr>
-                        <tr>
-                            <td>resetFields</td>
-                            <td>对整个表单进行重置，将所有字段值重置为空并移除校验结果</td>
-                            <td>无</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="FormItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>prop</td>
-                            <td>对应表单域 model 里的字段</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>标签文本</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label-width</td>
-                            <td>表单域标签的的宽度</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label-for</td>
-                            <td>指定原生的 label 标签的 for 属性，配合控件的 <code>element-id</code> 属性，可以点击 label 时聚焦控件。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>是否必填，如不设置，则会根据校验规则自动生成</td>
-                            <td>Boolean</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>rules</td>
-                            <td>表单验证规则</td>
-                            <td>Object | Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>show-message</td>
-                            <td>是否显示校验错误信息</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="FormItem slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>内容</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>label 内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/form';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            const validatePass = (rule, value, callback) => {
-                if (value === '') {
-                    callback(new Error('Please enter your password'));
-                } else {
-                    if (this.formCustom.passwdCheck !== '') {
-                        // 对第二个密码框单独验证
-                        this.$refs.formCustom.validateField('passwdCheck');
-                    }
-                    callback();
-                }
-            };
-            const validatePassCheck = (rule, value, callback) => {
-                if (value === '') {
-                    callback(new Error('Please enter your password again'));
-                } else if (value !== this.formCustom.passwd) {
-                    callback(new Error('The two input passwords do not match!'));
-                } else {
-                    callback();
-                }
-            };
-            const validateAge = (rule, value, callback) => {
-                if (!value) {
-                    return callback(new Error('Age cannot be empty'));
-                }
-                // 模拟异步验证效果
-                setTimeout(() => {
-                    if (!Number.isInteger(value)) {
-                        callback(new Error('Please enter a numeric value'));
-                    } else {
-                        if (value < 18) {
-                            callback(new Error('Must be over 18 years of age'));
-                        } else {
-                            callback();
-                        }
-                    }
-                }, 1000);
-            };
-
-            return {
-                code: Code,
-                formInline: {
-                    user: '',
-                    password: ''
-                },
-                ruleInline: {
-                    user: [
-                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
-                    ],
-                    password: [
-                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
-                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
-                    ]
-                },
-                formItem: {
-                    input: '',
-                    select: '',
-                    radio: 'male',
-                    checkbox: [],
-                    switch: true,
-                    date: '',
-                    time: '',
-                    slider: [20, 50],
-                    textarea: ''
-                },
-                formLeft: {
-                    input1: '',
-                    input2: '',
-                    input3: ''
-                },
-                formRight: {
-                    input1: '',
-                    input2: '',
-                    input3: ''
-                },
-                formTop: {
-                    input1: '',
-                    input2: '',
-                    input3: ''
-                },
-                formValidate: {
-                    name: '',
-                    mail: '',
-                    city: '',
-                    gender: '',
-                    interest: [],
-                    date: '',
-                    time: '',
-                    desc: ''
-                },
-                ruleValidate: {
-                    name: [
-                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
-                    ],
-                    mail: [
-                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
-                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
-                    ],
-                    city: [
-                        { required: true, message: 'Please select the city', trigger: 'change' }
-                    ],
-                    gender: [
-                        { required: true, message: 'Please select gender', trigger: 'change' }
-                    ],
-                    interest: [
-                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
-                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
-                    ],
-                    date: [
-                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
-                    ],
-                    time: [
-                        { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
-                    ],
-                    desc: [
-                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
-                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
-                    ]
-                },
-                formCustom: {
-                    passwd: '',
-                    passwdCheck: '',
-                    age: ''
-                },
-                ruleCustom: {
-                    passwd: [
-                        { validator: validatePass, trigger: 'blur' }
-                    ],
-                    passwdCheck: [
-                        { validator: validatePassCheck, trigger: 'blur' }
-                    ],
-                    age: [
-                        { validator: validateAge, trigger: 'blur' }
-                    ]
-                },
-                index: 1,
-                formDynamic: {
-                    items: [
-                        {
-                            value: '',
-                            index: 1,
-                            status: 1
-                        }
-                    ]
-                }
-            }
-        },
-        methods: {
-            handleSubmit (name) {
-                this.$refs[name].validate((valid) => {
-                    if (valid) {
-                        this.$Message.success('Success!');
-                    } else {
-                        this.$Message.error('Fail!');
-                    }
-                })
-            },
-            handleReset (name) {
-                this.$refs[name].resetFields();
-            },
-            handleAdd () {
-                this.index++;
-                this.formDynamic.items.push({
-                    value: '',
-                    index: this.index,
-                    status: 1
-                });
-            },
-            handleRemove (index) {
-                this.formDynamic.items[index].status = 0;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/grid-en.vue b/src/views/components/grid-en.vue
deleted file mode 100644
index 9cee8d0..0000000
--- a/src/views/components/grid-en.vue
+++ /dev/null
@@ -1,427 +0,0 @@
-<style scoped>
-    .demo-row{
-        margin-bottom: 5px;
-        background-image: -webkit-linear-gradient(0deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
-        background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
-    }
-    .demo-col{
-        color: #fff;
-        padding: 30px 0;
-        text-align: center;
-        font-size: 18px;
-        background: rgba(0, 153, 229, .7);
-    }
-    .demo-col.light{
-        background: rgba(0, 153, 229, .5);
-    }
-    .demo-row.light .demo-col{
-        background: rgba(0, 153, 229, .5);
-    }
-    .demo-row.light .demo-col.light{
-        background: rgba(0, 153, 229, .3);
-    }
-
-    .example-demo .ivu-col, .example-demo .ivu-col div{
-        color: #fff;
-        padding: 10px 0;
-        text-align: center;
-        background: rgba(0, 153, 229, .9);
-    }
-    .example-demo .gutter .ivu-col{
-        background: transparent !important;
-    }
-    .example-demo  .ivu-col:nth-child(odd), .example-demo  .ivu-col:nth-child(odd) div{
-        background: rgba(0, 153, 229, .7);
-    }
-
-    .code-row-bg{
-        background: rgba(0,0,0,.05);
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Grid</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <Row class-name="demo-row">
-                <Col :span="24" class-name="demo-col">24：100%</Col>
-            </Row>
-            <Row class-name="demo-row light">
-                <Col :span="12" class-name="demo-col">12：50%</Col>
-                <Col :span="12" class-name="demo-col light">12：50%</Col>
-            </Row>
-            <Row class-name="demo-row">
-                <Col :span="8" class-name="demo-col">8：33.33%</Col>
-                <Col :span="8" class-name="demo-col light">8：33.33%</Col>
-                <Col :span="8" class-name="demo-col">8：33.33%</Col>
-            </Row>
-            <Row class-name="demo-row light">
-                <Col :span="6" class-name="demo-col">6：25%</Col>
-                <Col :span="6" class-name="demo-col light">6：25%</Col>
-                <Col :span="6" class-name="demo-col">6：25%</Col>
-                <Col :span="6" class-name="demo-col light">6：25%</Col>
-            </Row>
-            <Row class-name="demo-row">
-                <Col :span="16" class-name="demo-col">16：66.66%</Col>
-                <Col :span="8" class-name="demo-col light">8：33.33%</Col>
-            </Row>
-            <p>We use a 24 aliquot system divided into equal parts.</p>
-            <p>We defined two concepts: rows (<code>row</code>) and columns (<code>col</code>). They can be used in the following ways:</p>
-            <ul>
-                <li>Use <code>row</code> to create a horizontal container</li>
-                <li>Insert a <code>col</code> inside a <code>row</code></li>
-                <li>Insert your own content in each <code>col</code></li>
-                <li>Setting the <code>span</code> parameter for <code>col</code> will define the span range, ranging from 1 to 24</li>
-                <li>The sum of <code>col</code>s in each <code>row</code> should equal to 24</li>
-            </ul>
-            <Alert show-icon style="margin-top: 16px">Note: In a non template/render pattern, it is necessary to use <code>i-col</code>.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">col-12</Col>
-                        <Col span="12">col-12</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="8">col-8</Col>
-                        <Col span="8">col-8</Col>
-                        <Col span="8">col-8</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="6">col-6</Col>
-                        <Col span="6">col-6</Col>
-                        <Col span="6">col-6</Col>
-                        <Col span="6">col-6</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Horizontal arrangement of the layout.</p>
-                    <p><code>col</code> must be placed inside <code>row</code>. </p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-
-            <Demo title="Grid Gutter">
-                <div slot="demo" class="gutter">
-                    <Row :gutter="16">
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Adding <code>gutter</code> property to a <code>row</code> will add spacing to subordinate <code>col</code>s. A gutter of <code>(16+8n)px</code> is recommended for grid spacing.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.gutter }}</i-code>
-            </Demo>
-
-            <Demo title="Flex Order">
-                <div slot="demo">
-                    <Row type="flex">
-                        <Col span="6" order="4">1 | order-4</Col>
-                        <Col span="6" order="3">2 | order-3</Col>
-                        <Col span="6" order="2">3 | order-2</Col>
-                        <Col span="6" order="1">4 | order-1</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Use Flex's <code>order</code> to change the layout order.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.order }}</i-code>
-            </Demo>
-
-            <Demo title="Grid Sort">
-                <div slot="demo">
-                    <Row>
-                        <Col span="18" push="6">col-18 | push-6</Col>
-                        <Col span="6" pull="18">col-6 | pull-18</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Using <code>push</code> and <code>pull</code> will change the column's order.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.push }}</i-code>
-            </Demo>
-
-            <Demo title="Column Offset">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">col-8</Col>
-                        <Col span="8" offset="8">col-8 | offset-8</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="6" offset="8">col-6 | offset-8</Col>
-                        <Col span="6" offset="4">col-6 | offset-4</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="12" offset="8">col-12 | offset-8</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Using the <code>offset</code> property will set the column's left or right offset.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.offset }}</i-code>
-            </Demo>
-
-            <Demo title="Flex Layout">
-                <div slot="demo">
-                    <p>Align child element to the left</p>
-                    <Row type="flex" justify="start" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>Align child element to the right</p>
-                    <Row type="flex" justify="end" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>Align child element to the center</p>
-                    <Row type="flex" justify="center" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>Child element with equal arrangement</p>
-                    <Row type="flex" justify="space-between" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>Scattered child elements</p>
-                    <Row type="flex" justify="space-around" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Passing <code>justify</code> property to <code>row</code> will set the child element's arrangement. Effective when using <code>flex</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.justify }}</i-code>
-            </Demo>
-
-            <Demo title="Flex Alignment">
-                <div slot="demo">
-                    <p>Align Top</p>
-                    <Row type="flex" justify="center" align="top" class="code-row-bg">
-                        <Col span="4"><p style="height: 80px">col-4</p></Col>
-                        <Col span="4"><p style="height: 30px">col-4</p></Col>
-                        <Col span="4"><p style="height: 100px">col-4</p></Col>
-                        <Col span="4"><p style="height: 60px">col-4</p></Col>
-                    </Row>
-                    <p>Align Bottom</p>
-                    <Row type="flex" justify="center" align="bottom" class="code-row-bg">
-                        <Col span="4"><p style="height: 80px">col-4</p></Col>
-                        <Col span="4"><p style="height: 30px">col-4</p></Col>
-                        <Col span="4"><p style="height: 100px">col-4</p></Col>
-                        <Col span="4"><p style="height: 60px">col-4</p></Col>
-                    </Row>
-                    <p>Align Center</p>
-                    <Row type="flex" justify="center" align="middle" class="code-row-bg">
-                        <Col span="4"><p style="height: 80px">col-4</p></Col>
-                        <Col span="4"><p style="height: 30px">col-4</p></Col>
-                        <Col span="4"><p style="height: 100px">col-4</p></Col>
-                        <Col span="4"><p style="height: 60px">col-4</p></Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Passing <code>align</code> to <code>row</code> will align child elements vertically. Effective when using <code>flex</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.align }}</i-code>
-            </Demo>
-
-            <Demo title="Responsive Layout">
-                <div slot="demo">
-                    <Row>
-                        <Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
-                        <Col :xs="20" :sm="16" :md="12" :lg="8">Col</Col>
-                        <Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Refer to Bootstrap's <a href="http://getbootstrap.com/css/#grid-media-queries" target="_blank">responsive design</a> using 4 preset definitions: <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code>. See also API section</p>
-                    <p>Adjust your browser's dimensions to see the effect.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.reponsive }}</i-code>
-            </Demo>
-
-            <Demo title="Other Responsive Properties">
-                <div slot="demo">
-                    <Row>
-                        <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
-                        <Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
-                        <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p><code>span</code> <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> properties can be used with <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code>.</p>
-                    <p><code>:xs="6"</code> would equal to <code>:xs="{ span: 6 }"</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.reponsive2 }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Row props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Decsription</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>gutter</td>
-                            <td>Grid spacing in pixels, split equally left and right</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>Layout mode. Can optionally make use of <code>flex</code> in a modern browser.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>align</td>
-                            <td>Vertical alignment of flex layout. You can choose between <code>top</code>, <code>middle</code>, <code>bottom</code></td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>justify</td>
-                            <td>Horizontal arrangement of flex layout. You can choose between <code>start</code>, <code>end</code>, <code>center</code>, <code>space-around</code>, <code>space-between</code></td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>custom defined class's name</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Col props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>span</td>
-                            <td>Column span. Value can be between 0 and 24. When 0, it equals to <code>display:none</code></td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>order</td>
-                            <td>Grid order when using <code>flex</code> layout.</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>offset</td>
-                            <td>Number of cells to the left of grid spacing. No cells can be inside the grid spacing.</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>push</td>
-                            <td>Number of cells to move to the right</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>pull</td>
-                            <td>Number of cells to move to the left</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>Custom defined class's name</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>xs</td>
-                            <td><code><768px</code> can be a span value or an object containing props</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sm</td>
-                            <td><code>≥768px</code> can be a span value or an object containing props</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>md</td>
-                            <td><code>≥992px</code> can be a span value or an object containing props</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>lg</td>
-                            <td><code>≥1200px</code> can be a span value or an object containing props</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/grid';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/grid.vue b/src/views/components/grid.vue
deleted file mode 100644
index d369d3e..0000000
--- a/src/views/components/grid.vue
+++ /dev/null
@@ -1,427 +0,0 @@
-<style scoped>
-    .demo-row{
-        margin-bottom: 5px;
-        background-image: -webkit-linear-gradient(0deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
-        background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
-    }
-    .demo-col{
-        color: #fff;
-        padding: 30px 0;
-        text-align: center;
-        font-size: 18px;
-        background: rgba(0, 153, 229, .7);
-    }
-    .demo-col.light{
-        background: rgba(0, 153, 229, .5);
-    }
-    .demo-row.light .demo-col{
-        background: rgba(0, 153, 229, .5);
-    }
-    .demo-row.light .demo-col.light{
-        background: rgba(0, 153, 229, .3);
-    }
-
-    .example-demo .ivu-col, .example-demo .ivu-col div{
-        color: #fff;
-        padding: 10px 0;
-        text-align: center;
-        background: rgba(0, 153, 229, .9);
-    }
-    .example-demo .gutter .ivu-col{
-        background: transparent !important;
-    }
-    .example-demo  .ivu-col:nth-child(odd), .example-demo  .ivu-col:nth-child(odd) div{
-        background: rgba(0, 153, 229, .7);
-    }
-
-    .code-row-bg{
-        background: rgba(0,0,0,.05);
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Grid 栅格</h1>
-            <Anchor title="概述" h2></Anchor>
-            <Row class-name="demo-row">
-                <Col :span="24" class-name="demo-col">24：100%</Col>
-            </Row>
-            <Row class-name="demo-row light">
-                <Col :span="12" class-name="demo-col">12：50%</Col>
-                <Col :span="12" class-name="demo-col light">12：50%</Col>
-            </Row>
-            <Row class-name="demo-row">
-                <Col :span="8" class-name="demo-col">8：33.33%</Col>
-                <Col :span="8" class-name="demo-col light">8：33.33%</Col>
-                <Col :span="8" class-name="demo-col">8：33.33%</Col>
-            </Row>
-            <Row class-name="demo-row light">
-                <Col :span="6" class-name="demo-col">6：25%</Col>
-                <Col :span="6" class-name="demo-col light">6：25%</Col>
-                <Col :span="6" class-name="demo-col">6：25%</Col>
-                <Col :span="6" class-name="demo-col light">6：25%</Col>
-            </Row>
-            <Row class-name="demo-row">
-                <Col :span="16" class-name="demo-col">16：66.66%</Col>
-                <Col :span="8" class-name="demo-col light">8：33.33%</Col>
-            </Row>
-            <p>我们采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。</p>
-            <p>我们定义了两个概念，行<code>row</code>和列<code>col</code>，具体使用方法如下：</p>
-            <ul>
-                <li>使用<code>row</code>在水平方向创建一行</li>
-                <li>将一组<code>col</code>插入在<code>row</code>中</li>
-                <li>在每个<code>col</code>中，键入自己的内容</li>
-                <li>通过设置<code>col</code>的<code>span</code>参数，指定跨越的范围，其范围是1到24</li>
-                <li>每个<code>row</code>中的<code>col</code>总和应该为24</li>
-            </ul>
-            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-col</code>。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">col-12</Col>
-                        <Col span="12">col-12</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="8">col-8</Col>
-                        <Col span="8">col-8</Col>
-                        <Col span="8">col-8</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="6">col-6</Col>
-                        <Col span="6">col-6</Col>
-                        <Col span="6">col-6</Col>
-                        <Col span="6">col-6</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>水平排列的布局。</p>
-                    <p><code>col</code>必须放在<code>row</code>里面。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-
-            <Demo title="区块间隔">
-                <div slot="demo" class="gutter">
-                    <Row :gutter="16">
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                        <Col span="6">
-                            <div>col-6</div>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过给 <code>row</code> 添加 <code>gutter</code> 属性，可以给下属的 <code>col</code> 添加间距，推荐使用 <code>(16+8n)px</code> 作为栅格间隔。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.gutter }}</i-code>
-            </Demo>
-
-            <Demo title="栅格顺序(Flex)">
-                <div slot="demo">
-                    <Row type="flex">
-                        <Col span="6" order="4">1 | order-4</Col>
-                        <Col span="6" order="3">2 | order-3</Col>
-                        <Col span="6" order="2">3 | order-2</Col>
-                        <Col span="6" order="1">4 | order-1</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过 Flex 布局的<code>order</code>来改变栅格的顺序。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.order }}</i-code>
-            </Demo>
-
-            <Demo title="栅格排序">
-                <div slot="demo">
-                    <Row>
-                        <Col span="18" push="6">col-18 | push-6</Col>
-                        <Col span="6" pull="18">col-6 | pull-18</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>push</code>和<code>pull</code>来改变栅格的顺序。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.push }}</i-code>
-            </Demo>
-
-            <Demo title="左右偏移">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">col-8</Col>
-                        <Col span="8" offset="8">col-8 | offset-8</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="6" offset="8">col-6 | offset-8</Col>
-                        <Col span="6" offset="4">col-6 | offset-4</Col>
-                    </Row>
-                    <br>
-                    <Row>
-                        <Col span="12" offset="8">col-12 | offset-8</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>offset</code>属性，将列进行左右偏移，偏移栅格数为offset的值。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.offset }}</i-code>
-            </Demo>
-
-            <Demo title="Flex布局">
-                <div slot="demo">
-                    <p>子元素向左排列</p>
-                    <Row type="flex" justify="start" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>子元素向右排列</p>
-                    <Row type="flex" justify="end" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>子元素居中排列</p>
-                    <Row type="flex" justify="center" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>子元素等宽排列</p>
-                    <Row type="flex" justify="space-between" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                    <p>子元素分散排列</p>
-                    <Row type="flex" justify="space-around" class="code-row-bg">
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                        <Col span="4">col-4</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过给<code>row</code>设置参数<code>justify</code>为不同的值，来定义子元素的排布方式。在<code>flex</code>模式下有效。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.justify }}</i-code>
-            </Demo>
-
-            <Demo title="Flex对齐">
-                <div slot="demo">
-                    <p>顶部对齐</p>
-                    <Row type="flex" justify="center" align="top" class="code-row-bg">
-                        <Col span="4"><p style="height: 80px">col-4</p></Col>
-                        <Col span="4"><p style="height: 30px">col-4</p></Col>
-                        <Col span="4"><p style="height: 100px">col-4</p></Col>
-                        <Col span="4"><p style="height: 60px">col-4</p></Col>
-                    </Row>
-                    <p>底部对齐</p>
-                    <Row type="flex" justify="center" align="bottom" class="code-row-bg">
-                        <Col span="4"><p style="height: 80px">col-4</p></Col>
-                        <Col span="4"><p style="height: 30px">col-4</p></Col>
-                        <Col span="4"><p style="height: 100px">col-4</p></Col>
-                        <Col span="4"><p style="height: 60px">col-4</p></Col>
-                    </Row>
-                    <p>居中对齐</p>
-                    <Row type="flex" justify="center" align="middle" class="code-row-bg">
-                        <Col span="4"><p style="height: 80px">col-4</p></Col>
-                        <Col span="4"><p style="height: 30px">col-4</p></Col>
-                        <Col span="4"><p style="height: 100px">col-4</p></Col>
-                        <Col span="4"><p style="height: 60px">col-4</p></Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过给<code>row</code>设置参数<code>align</code>为不同的值，来定义子元素在垂直方向上的排布方式。在<code>flex</code>模式下有效。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.align }}</i-code>
-            </Demo>
-
-            <Demo title="响应式布局">
-                <div slot="demo">
-                    <Row>
-                        <Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
-                        <Col :xs="20" :sm="16" :md="12" :lg="8">Col</Col>
-                        <Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>参照 Bootstrap 的 <a href="http://getbootstrap.com/css/#grid-media-queries" target="_blank">响应式设计</a>，预设四个响应尺寸：xs sm md lg，详见 API。</p>
-                    <p>调整浏览器尺寸来查看效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.reponsive }}</i-code>
-            </Demo>
-
-            <Demo title="其它属性的响应式">
-                <div slot="demo">
-                    <Row>
-                        <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
-                        <Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
-                        <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p><code>span</code> <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> 属性可以通过内嵌到 <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> 属性中来使用。</p>
-                    <p>其中 <code>:xs="6"</code> 相当于 <code>:xs="{ span: 6 }"</code>。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.reponsive2 }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Row props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>gutter</td>
-                            <td>栅格间距，单位 px，左右平分</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>布局模式，可选值为<code>flex</code>或不选，在现代浏览器下有效</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>align</td>
-                            <td>flex 布局下的垂直对齐方式，可选值为<code>top</code>、<code>middle</code>、<code>bottom</code></td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>justify</td>
-                            <td>flex 布局下的水平排列方式，可选值为<code>start</code>、<code>end</code>、<code>center</code>、<code>space-around</code>、<code>space-between</code></td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>自定义的class名称</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Col props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>span</td>
-                            <td>栅格的占位格数，可选值为0~24的整数，为 0 时，相当于<code>display:none</code></td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>order</td>
-                            <td>栅格的顺序，在<code>flex</code>布局模式下有效</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>offset</td>
-                            <td>栅格左侧的间隔格数，间隔内不可以有栅格</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>push</td>
-                            <td>栅格向右移动格数</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>pull</td>
-                            <td>栅格向左移动格数</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>自定义的class名称</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>xs</td>
-                            <td><code><768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sm</td>
-                            <td><code>≥768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>md</td>
-                            <td><code>≥992px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>lg</td>
-                            <td><code>≥1200px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-                            <td>Number | Object</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/grid';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/icon-en.vue b/src/views/components/icon-en.vue
deleted file mode 100644
index 572be4f..0000000
--- a/src/views/components/icon-en.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<style scoped>
-    .icons{
-        overflow: hidden;
-        zoom: 1;
-    }
-    .icons-item{
-        float: left;
-        margin: 6px 6px 6px 0;
-        width: 145px;
-        text-align: center;
-        list-style: none;
-        cursor: pointer;
-        height: 100px;
-        color: #5C6B77;
-        transition: all 0.2s ease;
-        position: relative;
-        padding-top: 10px;
-    }
-    .icons-item p{
-        padding-top: 15px;
-    }
-    .icon-search{
-        position: relative;
-        margin: 20px auto 30px;
-        text-align: center;
-    }
-    .icon-search input{
-        width: 500px;
-        box-sizing: border-box;
-        border: 0;
-        border-radius: 4px;
-        background: #f5f5f5;
-        text-align: center;
-        font-size: 14px;
-        outline: none;
-        margin: 0 auto;
-        padding: 8px 0;
-    }
-    .icon-search p{
-        margin-top: 20px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Icon</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>iView uses open source icon set <a href="http://ionicons.com/" target="_blank"><Icon type="ionic"></Icon> ionicons</a></p>
-            <Anchor title="How to Use" h2></Anchor>
-            <p>Use <code>&lt;Icon /></code> component, Set corresponding <code>type</code> prop of the icon. Sample code:</p>
-            <i-code lang="html" bg>{{ code.demo }}</i-code>
-            <p>After rending:</p>
-            <i-code lang="html" bg>{{ code.render }}</i-code>
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Icon props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>Name of icon.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>Size of icon. Unit: px</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>color</td>
-                            <td>Color of icon.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <Anchor title="Icon Preview" h2></Anchor>
-            <div class="icon-search">
-                <input
-                    type="text"
-                    :placeholder="searchPlaceholder"
-                    @focus="changeHolder('focus')"
-                    @blur="changeHolder('blur')"
-                    v-model="search">
-                <p>Click icon buttons below can copy the component code directly.</p>
-            </div>
-            <div class="icons">
-                <div class="icons-item" v-for="item in filterIcons" @click="clip(item)">
-                    <i class="ivu-icon" :class="[`ivu-icon-${item.name}`]" style="font-size:32px"></i>
-                    <p>
-                        {{ item.name }}
-                    </p>
-                </div>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/icon';
-    import Anchor from '../../components/anchor.vue';
-    import Icons from '../../code/iconname';
-    import Clipboard from 'clipboard';
-
-    const searchPlaceholder = 'Input keyword to search, e.g. success';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                icons: Icons,
-                searchPlaceholder: searchPlaceholder,
-                search: ''
-            }
-        },
-        computed: {
-            filterIcons () {
-                return this.icons.filter(icon => icon.tag.indexOf(this.search) > -1);
-            }
-        },
-        methods: {
-            clip (type) {
-                const icon = `<Icon type="${type.name}"></Icon>`;
-
-                const clipboard = new Clipboard('.icons', {
-                    text () {
-                        return icon
-                    }
-                });
-
-                clipboard.on('success', (e) => {
-                    e.clearSelection();
-                    clipboard.destroy();
-                    this.$Message.success('组件代码已经复制到剪贴板');
-                });
-            },
-            changeHolder (type) {
-                if (type == 'focus') {
-                    this.searchPlaceholder = '';
-                } else if (type == 'blur') {
-                    this.searchPlaceholder = searchPlaceholder;
-                }
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/icon.vue b/src/views/components/icon.vue
deleted file mode 100644
index f9a0977..0000000
--- a/src/views/components/icon.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<style scoped>
-    .icons{
-        overflow: hidden;
-        zoom: 1;
-    }
-    .icons-item{
-        float: left;
-        margin: 6px 6px 6px 0;
-        width: 145px;
-        text-align: center;
-        list-style: none;
-        cursor: pointer;
-        height: 100px;
-        color: #5C6B77;
-        transition: all 0.2s ease;
-        position: relative;
-        padding-top: 10px;
-    }
-    .icons-item p{
-        padding-top: 15px;
-    }
-    .icon-search{
-        position: relative;
-        margin: 20px auto 30px;
-        text-align: center;
-    }
-    .icon-search input{
-        width: 500px;
-        box-sizing: border-box;
-        border: 0;
-        border-radius: 4px;
-        background: #f5f5f5;
-        text-align: center;
-        font-size: 14px;
-        outline: none;
-        margin: 0 auto;
-        padding: 8px 0;
-    }
-    .icon-search p{
-        margin-top: 20px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Icon 图标</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>iView 的图标使用开源项目<a href="http://ionicons.com/" target="_blank"><Icon type="ionic"></Icon> ionicons</a></p>
-            <Anchor title="如何使用" h2></Anchor>
-            <p>使用<code>&lt;Icon /></code>组件，指定图标对应的<code>type</code>属性，示例代码：</p>
-            <i-code lang="html" bg>{{ code.demo }}</i-code>
-            <p>渲染后为：</p>
-            <i-code lang="html" bg>{{ code.render }}</i-code>
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Icon props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>图标的名称</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>图标的大小，单位是 px</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>color</td>
-                            <td>图标的颜色</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <Anchor title="示例" h2></Anchor>
-            <div class="icon-search">
-                <input
-                    type="text"
-                    :placeholder="searchPlaceholder"
-                    @focus="changeHolder('focus')"
-                    @blur="changeHolder('blur')"
-                    v-model="search">
-                <p>点击下面的图标按钮可以直接复制组件代码</p>
-            </div>
-            <div class="icons">
-                <div class="icons-item" v-for="item in filterIcons" @click="clip(item)">
-                    <i class="ivu-icon" :class="[`ivu-icon-${item.name}`]" style="font-size:32px"></i>
-                    <p>
-                        {{ item.name }}
-                    </p>
-                </div>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/icon';
-    import Anchor from '../../components/anchor.vue';
-    import Icons from '../../code/iconname';
-    import Clipboard from 'clipboard';
-
-    const searchPlaceholder = '输入英文关键词搜索，比如 success';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                icons: Icons,
-                searchPlaceholder: searchPlaceholder,
-                search: ''
-            }
-        },
-        computed: {
-            filterIcons () {
-                return this.icons.filter(icon => icon.tag.indexOf(this.search) > -1);
-            }
-        },
-        methods: {
-            clip (type) {
-                const icon = `<Icon type="${type.name}"></Icon>`;
-
-                const clipboard = new Clipboard('.icons', {
-                    text () {
-                        return icon
-                    }
-                });
-
-                clipboard.on('success', (e) => {
-                    e.clearSelection();
-                    clipboard.destroy();
-                    this.$Message.success('组件代码已经复制到剪贴板');
-                });
-            },
-            changeHolder (type) {
-                if (type == 'focus') {
-                    this.searchPlaceholder = '';
-                } else if (type == 'blur') {
-                    this.searchPlaceholder = searchPlaceholder;
-                }
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/input-en.vue b/src/views/components/input-en.vue
deleted file mode 100644
index 3f70740..0000000
--- a/src/views/components/input-en.vue
+++ /dev/null
@@ -1,393 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Input</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Basic form component. It supports input and textarea, and expands some functions on native DOM components. It can combine with native component.</p>
-            <Alert show-icon style="margin-top: 16px">Attention: <code>i-input</code> is needed if not under template/render mode.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
-                </div>
-                <div slot="desc">
-                    <p>Basic usage. You can use <code>v-model</code> to enable a two-way bingding on data.</p>
-                    <p>You can directly set style to change the width of the input box. Default: 100%</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="8">
-                            <Input v-model="value1" size="large" placeholder="large size"></Input>
-                        </Col>
-                        <Col span="8">
-                            <Input v-model="value2" placeholder="default size"></Input>
-                        </Col>
-                        <Col span="8">
-                            <Input v-model="value3" size="small" placeholder="small size"></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>There are three size of input box: large, medium(default), small.</p>
-                    <p>Set <code>size</code> to <code>large</code> or <code>small</code> to change the size.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="Clearable">
-                <div slot="demo">
-                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px"></Input>
-                </div>
-                <div slot="desc">
-                    <p>Set property <code>clearable</code> to display clear button.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.clearable }}</i-code>
-            </Demo>
-            <Demo title="Input with Icon">
-                <div slot="demo">
-                    <Input v-model="value4" icon="ios-clock-outline" placeholder="Enter something..." style="width: 200px"></Input>
-                </div>
-                <div slot="desc">
-                    <p>Add an icon at the left of the input box by setting <code>icon</code> prop.</p>
-                    <p><code>on-click</code> event will be emitted when clicking the icon.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="Textarea">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="12">
-                            <Input v-model="value5" type="textarea" placeholder="Enter something..."></Input>
-                        </Col>
-                        <Col span="12">
-                            <Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>type</code> to <code>textarea</code> to use textarea for multirow input.</p>
-                    <p>Control the display row numbers by setting <code>rows</code> prop.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.textarea }}</i-code>
-            </Demo>
-            <Demo title="Self-adapting Textarea">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="12">
-                            <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
-                        </Col>
-                        <Col span="12">
-                            <Input v-model="value8" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Textarea will adapt the height automaticlly when <code>autosize</code> is set.</p>
-                    <p><code>autosize</code> can be set to an object to asign the maximum and minimum number of the row.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.autosize }}</i-code>
-            </Demo>
-            <Demo title="Disable">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="12">
-                            <Input v-model="value9" disabled placeholder="Enter something..."></Input>
-                        </Col>
-                        <Col span="12">
-                            <Input v-model="value10" disabled type="textarea" placeholder="Enter something..."></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Add <code>disabled</code> prop to disable inputting.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Mixed Input">
-                <div slot="demo">
-                    <Input v-model="value11">
-                        <span slot="prepend">http://</span>
-                        <span slot="append">.com</span>
-                    </Input>
-                    <br>
-                    <Input v-model="value12">
-                        <Select v-model="select1" slot="prepend" style="width: 80px">
-                            <Option value="http">http://</Option>
-                            <Option value="https">https://</Option>
-                        </Select>
-                        <Select v-model="select2" slot="append" style="width: 70px">
-                            <Option value="com">.com</Option>
-                            <Option value="org">.org</Option>
-                            <Option value="io">.io</Option>
-                        </Select>
-                    </Input>
-                    <br>
-                    <Input v-model="value13">
-                        <Select v-model="select3" slot="prepend" style="width: 80px">
-                            <Option value="day">Day</Option>
-                            <Option value="month">Month</Option>
-                        </Select>
-                        <Button slot="append" icon="ios-search"></Button>
-                    </Input>
-                </div>
-                <div slot="desc">
-                    Set preposed or postposed slot to realise a mixin input.
-                </div>
-                <i-code lang="html" slot="code">{{ code.addon }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Input props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>Input type. Optional value: <code>text</code>, <code>password</code>, <code>textarea</code>, <code>url</code>, <code>email</code>, <code>date</code></td>
-                            <td>String</td>
-                            <td>text</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>Bound value. Use v-model to enable a two-way binding.</td>
-                            <td>String | Number</td>
-                            <td>empty</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of Input. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>Placeholder.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>Whether to display the clear button.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Set Input to disabled.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>Set Input to readonly.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>maxlength</td>
-                            <td>Maximum input length.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>Icon at the end of Input. Only works in text type.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>Default row number of textarea. Only works in textarea type.</td>
-                            <td>Number</td>
-                            <td>2</td>
-                        </tr>
-                        <tr>
-                            <td>autosize</td>
-                            <td>Automaticlly adapting the height of the content. Only works in textarea type. Accepts an object. For example, { minRows: 2, maxRows: 6 } .</td>
-                            <td>Boolean | Object</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>number</td>
-                            <td>Change the user input to Number type.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autofocus</td>
-                            <td>Same as autofocus in native input.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autocomplete</td>
-                            <td>Native autocomplete function, Optional value: off and on</td>
-                            <td>String</td>
-                            <td>off</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>Set the <code>id</code> for the input element, more info can be found in Form.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>spellcheck</td>
-                            <td>Native spellcheck property.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>wrap</td>
-                            <td>Native wrap property, optional value: hard and soft, only works in textarea type.</td>
-                            <td>String</td>
-                            <td>soft</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Input events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-enter</td>
-                            <td>Emitted when press enter.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-click</td>
-                            <td>Emitted when clicking the icon if icon prop is set.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emitted when data changing.</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-focus</td>
-                            <td>Emitted when Input gets focus.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-blur</td>
-                            <td>Emitted when Input loses focus.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-keyup</td>
-                            <td>Native keyup event.</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-keydown</td>
-                            <td>Native keydown event.</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-keypress</td>
-                            <td>Native keypress event.</td>
-                            <td>event</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Input slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>prepend</td>
-                            <td>Preposed content. Only works in text type.</td>
-                        </tr>
-                        <tr>
-                            <td>append</td>
-                            <td>Postposed content. Only works in text type.</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Input methods" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Method Name</th>
-                        <th>Description</th>
-                        <th>Arguments</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>focus</td>
-                        <td>Focus Input</td>
-                        <td>None</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/input';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value: '',
-                value1: '',
-                value2: '',
-                value3: '',
-                value4: '',
-                value5: '',
-                value6: '',
-                value7: '',
-                value8: '',
-                value9: '',
-                value10: '',
-                value11: '',
-                value12: '',
-                value13: '',
-                value14: 'Hello World',
-                select1: 'http',
-                select2: 'com',
-                select3: 'day'
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/input-number-en.vue b/src/views/components/input-number-en.vue
deleted file mode 100644
index 50faf4f..0000000
--- a/src/views/components/input-number-en.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>InputNumber</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Input a range of standard number by mouse or keyboard.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <InputNumber :max="10" :min="1" v-model="value1"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>Change the number by inputing, clicking or tapping up / down button.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Decimal">
-                <div slot="demo">
-                    <InputNumber :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>step</code> prop to control the step length of each change.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.step }}</i-code>
-            </Demo>
-            <Demo title="Formatter">
-                <div slot="demo">
-                    <InputNumber
-                            :max="10000"
-                            v-model="value9"
-                            :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-                            :parser="value => value.replace(/\$\s?|(,*)/g, '')"></InputNumber>
-                    <InputNumber
-                            :max="100"
-                            v-model="value10"
-                            :formatter="value => `${value}%`"
-                            :parser="value => value.replace('%', '')"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>Display value within it's situation with <code>formatter</code>, and we usually use <code>parser</code> at the same time.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.formatter }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <InputNumber v-model="value3" size="small"></InputNumber>
-                    <InputNumber v-model="value4"></InputNumber>
-                    <InputNumber v-model="value5" size="large"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>Change the size of the input block to large or small by setting <code>size</code> prop to <code>large</code> or <code>small</code>. Default is medium size.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="Disabled">
-                <div slot="demo">
-                    <InputNumber v-model="value6" :disabled="disabled"></InputNumber>
-                    <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>disabled</code> prop to disable InputNumber. Click the button to change disable status.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Readonly">
-                <div slot="demo">
-                    <InputNumber v-model="value7" readonly></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>readonly</code> prop, it will be ready-only.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.readonly }}</i-code>
-            </Demo>
-            <Demo title="Editable">
-                <div slot="demo">
-                    <InputNumber v-model="value8" :editable="false"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>editable</code>prop to control whether it can be entered.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.editable }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="InputNumber props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>max</td>
-                            <td>Maximum value.</td>
-                            <td>Number</td>
-                            <td>Infinity</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>Minimum value.</td>
-                            <td>Number</td>
-                            <td>-Infinity</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>Current value, use v-model to enable a two-way binding.</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>The step length of each change, can be a decimal number.</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>Size of InputNumber. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave blank.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Set disable status.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>Placeholder.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>formatter</td>
-                            <td>Specifies the format of the value presented.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>parser</td>
-                            <td>Specifies the value extracted from formatter.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>Whether to the read-only.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>editable</td>
-                            <td>Whether it can be edited.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>precision</td>
-                            <td>Precision of input value.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>Set the <code>id</code> for the input element, more info can be found in Form.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="InputNumber events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Callback when number changes. Return the current value.</td>
-                            <td>current value</td>
-                        </tr>
-                        <tr>
-                            <td>on-focus</td>
-                            <td>Trigger on focus.</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-blur</td>
-                            <td>Trigger on blur.</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/input-number';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                disabled: true,
-                value1: 1,
-                value2: 1,
-                value3: 2,
-                value4: 2,
-                value5: 2,
-                value6: 1,
-                value7: 1,
-                value8: 1,
-                value9: 1000,
-                value10: 100
-            }
-        }
-    }
-</script>
diff --git a/src/views/components/input-number.vue b/src/views/components/input-number.vue
deleted file mode 100644
index 41e3db4..0000000
--- a/src/views/components/input-number.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>InputNumber 数字输入框</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>使用鼠标或键盘输入一定范围的标准数值。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <InputNumber :max="10" :min="1" v-model="value1"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>可以通过输入、鼠标点击或键盘的上下键来改变数值大小。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="小数">
-                <div slot="demo">
-                    <InputNumber :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>step</code>属性控制每次改变的精度。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.step }}</i-code>
-            </Demo>
-            <Demo title="格式化展示">
-                <div slot="demo">
-                    <InputNumber
-                        :max="10000"
-                        v-model="value9"
-                        :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-                        :parser="value => value.replace(/\$\s?|(,*)/g, '')"></InputNumber>
-                    <InputNumber
-                        :max="100"
-                        v-model="value10"
-                        :formatter="value => `${value}%`"
-                        :parser="value => value.replace('%', '')"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>通过 <code>formatter</code> 格式化数字，以展示具有具体含义的数据，往往需要配合 <code>parser</code> 一起使用。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.formatter }}</i-code>
-            </Demo>
-            <Demo title="尺寸">
-                <div slot="demo">
-                    <InputNumber v-model="value3" size="small"></InputNumber>
-                    <InputNumber v-model="value4"></InputNumber>
-                    <InputNumber v-model="value5" size="large"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>size</code>属性为<code>large</code>和<code>small</code>将输入框设置为大和小尺寸，不设置为默认（中）尺寸。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="不可用">
-                <div slot="demo">
-                    <InputNumber v-model="value6" :disabled="disabled"></InputNumber>
-                    <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>disabled</code>属性禁用输入框，点击按钮切换状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="只读">
-                <div slot="demo">
-                    <InputNumber v-model="value7" readonly></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>readonly</code>属性开启只读。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.readonly }}</i-code>
-            </Demo>
-            <Demo title="不可编辑">
-                <div slot="demo">
-                    <InputNumber v-model="value8" :editable="false"></InputNumber>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>editable</code>属性控制是否能编辑。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.editable }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="InputNumber props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>max</td>
-                            <td>最大值</td>
-                            <td>Number</td>
-                            <td>Infinity</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>最小值</td>
-                            <td>Number</td>
-                            <td>-Infinity</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>当前值，可以使用 v-model 双向绑定数据</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>每次改变的步伐，可以是小数</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>输入框尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不填</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>设置禁用状态</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>占位文本</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>formatter</td>
-                            <td>指定输入框展示值的格式</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>parser</td>
-                            <td>指定从 formatter 里转换回数字的方式，和 formatter 搭配使用</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>是否设置为只读</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>editable</td>
-                            <td>是否可编辑</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>precision</td>
-                            <td>数值精度</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>给表单元素设置 <code>id</code>，详见 Form 用法。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="InputNumber events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>数值改变时的回调，返回当前值</td>
-                            <td>当前值</td>
-                        </tr>
-                        <tr>
-                            <td>on-focus</td>
-                            <td>聚焦时触发</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-blur</td>
-                            <td>失焦时触发</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/input-number';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                disabled: true,
-                value1: 1,
-                value2: 1,
-                value3: 2,
-                value4: 2,
-                value5: 2,
-                value6: 1,
-                value7: 1,
-                value8: 1,
-                value9: 1000,
-                value10: 100
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/input.vue b/src/views/components/input.vue
deleted file mode 100644
index 98ba327..0000000
--- a/src/views/components/input.vue
+++ /dev/null
@@ -1,393 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Input 输入框</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>基本表单组件，支持 input 和 textarea，并在原生控件基础上进行了功能扩展，可以组合使用。</p>
-            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-input</code>。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
-                </div>
-                <div slot="desc">
-                    <p>基本用法，可以使用 <code>v-model</code> 实现数据的双向绑定。</p>
-                    <p>可以直接设置 style 来改变输入框的宽度，默认 100%。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="尺寸">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="8">
-                            <Input v-model="value1" size="large" placeholder="large size"></Input>
-                        </Col>
-                        <Col span="8">
-                            <Input v-model="value2" placeholder="default size"></Input>
-                        </Col>
-                        <Col span="8">
-                            <Input v-model="value3" size="small" placeholder="small size"></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>输入框有三种尺寸：大、默认（中）、小</p>
-                    <p>通过设置<code>size</code>为<code>large</code>和<code>small</code>设置为大和小尺寸，不设置为默认（中）尺寸。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="可清空">
-                <div slot="demo">
-                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px"></Input>
-                </div>
-                <div slot="desc">
-                    <p>开启属性 <code>clearable</code> 可显示清空按钮。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.clearable }}</i-code>
-            </Demo>
-            <Demo title="带Icon的输入框">
-                <div slot="demo">
-                    <Input v-model="value4" icon="ios-clock-outline" placeholder="Enter something..." style="width: 200px"></Input>
-                </div>
-                <div slot="desc">
-                    <p>通过 <code>icon</code> 属性可以在输入框右边加一个图标。</p>
-                    <p>点击图标，会触发 <code>on-click</code> 事件。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="文本域">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="12">
-                            <Input v-model="value5" type="textarea" placeholder="Enter something..."></Input>
-                        </Col>
-                        <Col span="12">
-                            <Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>type</code> 为 <code>textarea</code> 来使用文本域，用于多行输入。</p>
-                    <p>通过设置属性 <code>rows</code> 控制文本域默认显示的行数。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.textarea }}</i-code>
-            </Demo>
-            <Demo title="适应文本高度的文本域">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="12">
-                            <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
-                        </Col>
-                        <Col span="12">
-                            <Input v-model="value8" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>autosize</code>，文本域会自动适应高度的变化。</p>
-                    <p><code>autosize</code>也可以设定为一个对象，指定最小行数和最大行数。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.autosize }}</i-code>
-            </Demo>
-            <Demo title="禁用状态">
-                <div slot="demo">
-                    <Row :gutter="8">
-                        <Col span="12">
-                            <Input v-model="value9" disabled placeholder="Enter something..."></Input>
-                        </Col>
-                        <Col span="12">
-                            <Input v-model="value10" disabled type="textarea" placeholder="Enter something..."></Input>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过添加<code>disabled</code>属性可设置为不可用状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="复合型输入框">
-                <div slot="demo">
-                    <Input v-model="value11">
-                        <span slot="prepend">http://</span>
-                        <span slot="append">.com</span>
-                    </Input>
-                    <br>
-                    <Input v-model="value12">
-                        <Select v-model="select1" slot="prepend" style="width: 80px">
-                            <Option value="http">http://</Option>
-                            <Option value="https">https://</Option>
-                        </Select>
-                        <Select v-model="select2" slot="append" style="width: 70px">
-                            <Option value="com">.com</Option>
-                            <Option value="org">.org</Option>
-                            <Option value="io">.io</Option>
-                        </Select>
-                    </Input>
-                    <br>
-                    <Input v-model="value13">
-                        <Select v-model="select3" slot="prepend" style="width: 80px">
-                            <Option value="day">Day</Option>
-                            <Option value="month">Month</Option>
-                        </Select>
-                        <Button slot="append" icon="ios-search"></Button>
-                    </Input>
-                </div>
-                <div slot="desc">
-                    通过前置和后置的 slot 可以实现复合型的输入框。
-                </div>
-                <i-code lang="html" slot="code">{{ code.addon }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Input props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>输入框类型，可选值为 <code>text</code>、<code>password</code>、<code>textarea</code>、<code>url</code>、<code>email</code>、<code>date</code></td>
-                            <td>String</td>
-                            <td>text</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>绑定的值，可使用 v-model 双向绑定</td>
-                            <td>String | Number</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>输入框尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>占位文本</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>是否显示清空按钮</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>设置输入框为禁用状态</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>设置输入框为只读</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>maxlength</td>
-                            <td>最大输入长度</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>输入框尾部图标，仅在 text 类型下有效</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>文本域默认行数，仅在 textarea 类型下有效</td>
-                            <td>Number</td>
-                            <td>2</td>
-                        </tr>
-                        <tr>
-                            <td>autosize</td>
-                            <td>自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }</td>
-                            <td>Boolean | Object</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>number</td>
-                            <td>将用户的输入转换为 Number 类型</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autofocus</td>
-                            <td>自动获取焦点</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>autocomplete</td>
-                            <td>原生的自动完成功能，可选值为 off 和 on</td>
-                            <td>String</td>
-                            <td>off</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>给表单元素设置 <code>id</code>，详见 Form 用法。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>spellcheck</td>
-                            <td>原生的 spellcheck 属性</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>wrap</td>
-                            <td>原生的 wrap 属性，可选值为 hard 和 soft，仅在 textarea 下生效</td>
-                            <td>String</td>
-                            <td>soft</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Input events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-enter</td>
-                            <td>按下回车键时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-click</td>
-                            <td>设置 icon 属性后，点击图标时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-change</td>
-                            <td>数据改变时触发</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-focus</td>
-                            <td>输入框聚焦时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-blur</td>
-                            <td>输入框失去焦点时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-keyup</td>
-                            <td>原生的 keyup 事件</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-keydown</td>
-                            <td>原生的 keydown 事件</td>
-                            <td>event</td>
-                        </tr>
-                        <tr>
-                            <td>on-keypress</td>
-                            <td>原生的 keypress 事件</td>
-                            <td>event</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Input slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>prepend</td>
-                            <td>前置内容，仅在 text 类型下有效</td>
-                        </tr>
-                        <tr>
-                            <td>append</td>
-                            <td>后置内容，仅在 text 类型下有效</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Input methods" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>方法名</th>
-                        <th>说明</th>
-                        <th>参数</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>focus</td>
-                        <td>手动聚焦输入框</td>
-                        <td>无</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/input';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value: '',
-                value1: '',
-                value2: '',
-                value3: '',
-                value4: '',
-                value5: '',
-                value6: '',
-                value7: '',
-                value8: '',
-                value9: '',
-                value10: '',
-                value11: '',
-                value12: '',
-                value13: '',
-                value14: 'Hello World',
-                select1: 'http',
-                select2: 'com',
-                select3: 'day'
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/upload.vue b/src/views/components/layout.vue
similarity index 100%
rename from src/views/components/upload.vue
rename to src/views/components/layout.vue
diff --git a/src/views/components/loading-bar-en.vue b/src/views/components/loading-bar-en.vue
deleted file mode 100644
index 479b2e4..0000000
--- a/src/views/components/loading-bar-en.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>LoadingBar</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Create a global loading bar to display page loading, asynchronous request, file uploading etc.</p>
-            <Anchor title="Explanation" h2></Anchor>
-            <p>LoadingBar will be created only once globally, so you'll control the same component no matter where you call the methods. It is mainly used on route changing or Ajax. In those two situations, operation cannot get the accurate progress rate, so LoadingBar will simulate the progress rate. You can also use <code>update()</code> to pass an accurate progress rate. Details on API Doc.</p>
-            <Anchor title="Using in Router" h4></Anchor>
-            <i-code bg>{{ code.router }}</i-code>
-            <Anchor title="Using in Asynchronous Request" h4></Anchor>
-            <i-code bg lang="html">{{ code.ajax }}</i-code>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Button @click="start">Start</Button>
-                    <Button @click="finish">Finish</Button>
-                    <Button @click="error">Error</Button>
-                </div>
-                <div slot="desc">
-                    <p>Click Start to start loading. Click Finish to complete. When calling <code>start()</code> method, the component will automatically simulate the loading bar. When calling <code>finish()</code> or <code>error()</code> methods, the loading bar will be fulfilled and then disappear.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="LoadingBar instance" h3></Anchor>
-                <p>Use the component by calling method below directly.</p>
-                <ul>
-                    <li>
-                        <code>this.$Loading.start()</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.finish()</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.error()</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.update(percent)</code>
-                    </li>
-                </ul>
-                <p>Those methods above create and maintain Vue componenets implicitly. Details on API Doc.</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Method Name</th>
-                            <th>Description</th>
-                            <th>Parameter</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>start</td>
-                            <td>Start the loading bar from 0 and automatically simulate the progress rate.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>finish</td>
-                            <td>Finish loading bar.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>Finish loading bar in an error style.</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>update</td>
-                            <td>Fill the loading bar to an accurate rate.</td>
-                            <td>loading percent</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>Furthermore, we provide global config and global destroy methods.</p>
-                <ul>
-                    <li>
-                        <code>this.$Loading.config(options)</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.destroy()</code>
-                    </li>
-                </ul>
-                <br>
-                <i-code bg>{{ code.config }}</i-code>
-                <br>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>color</td>
-                            <td>Color of the loading bar. Default: iView's main color.</td>
-                            <td>String</td>
-                            <td>primary</td>
-                        </tr>
-                        <tr>
-                            <td>failedColor</td>
-                            <td>Color of the loading bar when finishing with error. Default: iView's main color.</td>
-                            <td>String</td>
-                            <td>error</td>
-                        </tr>
-                        <tr>
-                            <td>height</td>
-                            <td>Height of the loading bar. Unit: px</td>
-                            <td>Number</td>
-                            <td>2</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/loading-bar';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            start () {
-                this.$Loading.start();
-            },
-            finish () {
-                this.$Loading.finish();
-            },
-            error () {
-                this.$Loading.error();
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/loading-bar.vue b/src/views/components/loading-bar.vue
deleted file mode 100644
index ac09028..0000000
--- a/src/views/components/loading-bar.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>LoadingBar 加载进度条</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。</p>
-            <Anchor title="说明" h2></Anchor>
-            <p>LoadingBar 只会在全局创建一个，因此在任何位置调用的方法都会控制这同一个组件。主要使用场景是路由切换和Ajax，因为这两者都不能拿到精确的进度，LoadingBar 会模拟进度，当然也可以通过<code>update()</code>方法来传入一个精确的进度，比如在文件上传时会很有用，具体见API。</p>
-            <Anchor title="在路由中使用" h4></Anchor>
-            <i-code bg>{{ code.router }}</i-code>
-            <Anchor title="在异步请求中使用" h4></Anchor>
-            <i-code bg lang="html">{{ code.ajax }}</i-code>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基本用法">
-                <div slot="demo">
-                    <Button @click="start">Start</Button>
-                    <Button @click="finish">Finish</Button>
-                    <Button @click="error">Error</Button>
-                </div>
-                <div slot="desc">
-                    <p>点击 Start 开始进度，点击 Finish 结束。在调用<code>start()</code>方法后，组件会自动模拟进度，当调用<code>finish()</code>或<code>error()</code>时，补全进度并自动消失。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="LoadingBar instance" h3></Anchor>
-                <p>通过直接调用以下方法来使用组件：</p>
-                <ul>
-                    <li>
-                        <code>this.$Loading.start()</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.finish()</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.error()</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.update(percent)</code>
-                    </li>
-                </ul>
-                <p>以上方法隐式的创建及维护Vue组件。函数及参数说明如下：</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>函数名</th>
-                            <th>说明</th>
-                            <th>参数</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>start</td>
-                            <td>开始从 0 显示进度条，并自动加载进度</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>finish</td>
-                            <td>结束进度条，自动补全剩余进度</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>以错误的类型结束进度条，自动补全剩余进度</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>update</td>
-                            <td>精确加载到指定的进度</td>
-                            <td>percent，指定的进度百分比</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>另外提供了全局配置和全局销毁的方法：</p>
-                <ul>
-                    <li>
-                        <code>this.$Loading.config(options)</code>
-                    </li>
-                    <li>
-                        <code>this.$Loading.destroy()</code>
-                    </li>
-                </ul>
-                <br>
-                <i-code bg>{{ code.config }}</i-code>
-                <br>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>color</td>
-                            <td>进度条的颜色，默认为 iView 主色</td>
-                            <td>String</td>
-                            <td>primary</td>
-                        </tr>
-                        <tr>
-                            <td>failedColor</td>
-                            <td>失败时的进度条颜色，默认为 iView 主色</td>
-                            <td>String</td>
-                            <td>error</td>
-                        </tr>
-                        <tr>
-                            <td>height</td>
-                            <td>进度条高度，单位 px</td>
-                            <td>Number</td>
-                            <td>2</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/loading-bar';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            start () {
-                this.$Loading.start();
-            },
-            finish () {
-                this.$Loading.finish();
-            },
-            error () {
-                this.$Loading.error();
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/menu-en.vue b/src/views/components/menu-en.vue
deleted file mode 100644
index b5fa0bd..0000000
--- a/src/views/components/menu-en.vue
+++ /dev/null
@@ -1,469 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Menu</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Provide navigation menu for web pages. Usually located at the top or the left side of the page.</p>
-            <Alert show-icon style="margin-top: 16px">Attention：Use <code>i-menu</code> if not under template/render mode.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Head Navigator" vertical hide-code>
-                <div slot="demo">
-                    <Menu mode="horizontal" :theme="theme1" active-name="1">
-                        <MenuItem name="1">
-                            <Icon type="ios-paper"></Icon>
-                            内容管理
-                        </MenuItem>
-                        <MenuItem name="2">
-                            <Icon type="ios-people"></Icon>
-                            用户管理
-                        </MenuItem>
-                        <Submenu name="3">
-                            <template slot="title">
-                                <Icon type="stats-bars"></Icon>
-                                统计分析
-                            </template>
-                            <MenuGroup title="使用">
-                                <MenuItem name="3-1">新增和启动</MenuItem>
-                                <MenuItem name="3-2">活跃分析</MenuItem>
-                                <MenuItem name="3-3">时段分析</MenuItem>
-                            </MenuGroup>
-                            <MenuGroup title="留存">
-                                <MenuItem name="3-4">用户留存</MenuItem>
-                                <MenuItem name="3-5">流失用户</MenuItem>
-                            </MenuGroup>
-                        </Submenu>
-                        <MenuItem name="4">
-                            <Icon type="settings"></Icon>
-                            综合设置
-                        </MenuItem>
-                    </Menu>
-                    <br>
-                    <p>Change theme</p>
-                    <RadioGroup v-model="theme1">
-                        <Radio label="light"></Radio>
-                        <Radio label="dark"></Radio>
-                        <Radio label="primary"></Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>Horizontal head navigation menu.</p>
-                    <p>Select a theme by setting <code>theme</code> prop to <code>light</code>, <code>dark</code>, <code>primary</code>.</p>
-                    <p>Set <code>on-select</code> event to get the name of the clicked menu item, then you can control the router or do custom operations.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Side Navigator" vertical hide-code>
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <Menu :theme="theme2">
-                                <Submenu name="1">
-                                    <template slot="title">
-                                        <Icon type="ios-paper"></Icon>
-                                        内容管理
-                                    </template>
-                                    <MenuItem name="1-1">文章管理</MenuItem>
-                                    <MenuItem name="1-2">评论管理</MenuItem>
-                                    <MenuItem name="1-3">举报管理</MenuItem>
-                                </Submenu>
-                                <Submenu name="2">
-                                    <template slot="title">
-                                        <Icon type="ios-people"></Icon>
-                                        用户管理
-                                    </template>
-                                    <MenuItem name="2-1">新增用户</MenuItem>
-                                    <MenuItem name="2-2">活跃用户</MenuItem>
-                                </Submenu>
-                                <Submenu name="3">
-                                    <template slot="title">
-                                        <Icon type="stats-bars"></Icon>
-                                        统计分析
-                                    </template>
-                                    <MenuGroup title="使用">
-                                        <MenuItem name="3-1">新增和启动</MenuItem>
-                                        <MenuItem name="3-2">活跃分析</MenuItem>
-                                        <MenuItem name="3-3">时段分析</MenuItem>
-                                    </MenuGroup>
-                                    <MenuGroup title="留存">
-                                        <MenuItem name="3-4">用户留存</MenuItem>
-                                        <MenuItem name="3-5">流失用户</MenuItem>
-                                    </MenuGroup>
-                                </Submenu>
-                            </Menu>
-                        </Col>
-                        <Col span="8">
-                            <Menu :theme="theme2" active-name="1-2" :open-names="['1']">
-                                <Submenu name="1">
-                                    <template slot="title">
-                                        <Icon type="ios-paper"></Icon>
-                                        内容管理
-                                    </template>
-                                    <MenuItem name="1-1">文章管理</MenuItem>
-                                    <MenuItem name="1-2">评论管理</MenuItem>
-                                    <MenuItem name="1-3">举报管理</MenuItem>
-                                </Submenu>
-                                <Submenu name="2">
-                                    <template slot="title">
-                                        <Icon type="ios-people"></Icon>
-                                        用户管理
-                                    </template>
-                                    <MenuItem name="2-1">新增用户</MenuItem>
-                                    <MenuItem name="2-2">活跃用户</MenuItem>
-                                </Submenu>
-                                <Submenu name="3">
-                                    <template slot="title">
-                                        <Icon type="stats-bars"></Icon>
-                                        统计分析
-                                    </template>
-                                    <MenuGroup title="使用">
-                                        <MenuItem name="3-1">新增和启动</MenuItem>
-                                        <MenuItem name="3-2">活跃分析</MenuItem>
-                                        <MenuItem name="3-3">时段分析</MenuItem>
-                                    </MenuGroup>
-                                    <MenuGroup title="留存">
-                                        <MenuItem name="3-4">用户留存</MenuItem>
-                                        <MenuItem name="3-5">流失用户</MenuItem>
-                                    </MenuGroup>
-                                </Submenu>
-                            </Menu>
-                        </Col>
-                        <Col span="8">
-                            <Menu :theme="theme2" :open-names="['1']" accordion>
-                                <Submenu name="1">
-                                    <template slot="title">
-                                        <Icon type="ios-paper"></Icon>
-                                        内容管理
-                                    </template>
-                                    <MenuItem name="1-1">文章管理</MenuItem>
-                                    <MenuItem name="1-2">评论管理</MenuItem>
-                                    <MenuItem name="1-3">举报管理</MenuItem>
-                                </Submenu>
-                                <Submenu name="2">
-                                    <template slot="title">
-                                        <Icon type="ios-people"></Icon>
-                                        用户管理
-                                    </template>
-                                    <MenuItem name="2-1">新增用户</MenuItem>
-                                    <MenuItem name="2-2">活跃用户</MenuItem>
-                                </Submenu>
-                                <Submenu name="3">
-                                    <template slot="title">
-                                        <Icon type="stats-bars"></Icon>
-                                        统计分析
-                                    </template>
-                                    <MenuGroup title="使用">
-                                        <MenuItem name="3-1">新增和启动</MenuItem>
-                                        <MenuItem name="3-2">活跃分析</MenuItem>
-                                        <MenuItem name="3-3">时段分析</MenuItem>
-                                    </MenuGroup>
-                                    <MenuGroup title="留存">
-                                        <MenuItem name="3-4">用户留存</MenuItem>
-                                        <MenuItem name="3-5">流失用户</MenuItem>
-                                    </MenuGroup>
-                                </Submenu>
-                            </Menu>
-                        </Col>
-                    </Row>
-                    <br>
-                    <p>Change theme</p>
-                    <RadioGroup v-model="theme2">
-                        <Radio label="light"></Radio>
-                        <Radio label="dark"></Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>Vertical navigation menu which can includes sub menus.</p>
-                    <p>Set <code>active-name</code> to set the selected menu item. Set <code>open-names</code> to expand the selected sub menu.</p>
-                    <p>Set <code>accordion</code> prop to open  accordion mode. Which means only one sub menu can be expanded at the same time.</p>
-                    <p>Set <code>theme</code> prop to <code>light</code>, <code>dark</code> to choose a theme, but it doesn't support primary theme.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-            <Demo title="Inline Menu" vertical hide-code>
-                <div slot="demo">
-                    <Menu active-name="1-2" :open-names="['1']">
-                        <Submenu name="1">
-                            <template slot="title">
-                                <Icon type="ios-analytics"></Icon>
-                                Navigation One
-                            </template>
-                            <MenuGroup title="Item 1">
-                                <MenuItem name="1-1">Option 1</MenuItem>
-                                <MenuItem name="1-2">Option 2</MenuItem>
-                            </MenuGroup>
-                            <MenuGroup title="Item 2">
-                                <MenuItem name="1-3">Option 3</MenuItem>
-                                <MenuItem name="1-4">Option 4</MenuItem>
-                            </MenuGroup>
-                        </Submenu>
-                        <Submenu name="2">
-                            <template slot="title">
-                                <Icon type="ios-filing"></Icon>
-                                Navigation Two
-                            </template>
-                            <MenuItem name="2-1">Option 5</MenuItem>
-                            <MenuItem name="2-2">Option 6</MenuItem>
-                            <Submenu name="3">
-                                <template slot="title">Submenu</template>
-                                <MenuItem name="3-1">Option 7</MenuItem>
-                                <MenuItem name="3-2">Option 8</MenuItem>
-                            </Submenu>
-                        </Submenu>
-                        <Submenu name="4">
-                            <template slot="title">
-                                <Icon type="ios-gear"></Icon>
-                                Navigation Three
-                            </template>
-                            <MenuItem name="4-1">Option 9</MenuItem>
-                            <MenuItem name="4-2">Option 10</MenuItem>
-                            <MenuItem name="4-3">Option 11</MenuItem>
-                            <MenuItem name="4-4">Option 12</MenuItem>
-                        </Submenu>
-                    </Menu>
-                </div>
-                <div slot="desc">
-                    <p>Vertical menu with inline submenus.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.inline }}</i-code>
-            </Demo>
-            <Demo title="Menu Group" vertical hide-code>
-                <div slot="demo">
-                    <Menu :theme="theme3" active-name="1">
-                        <MenuGroup title="内容管理">
-                            <MenuItem name="1">
-                                <Icon type="document-text"></Icon>
-                                文章管理
-                            </MenuItem>
-                            <MenuItem name="2">
-                                <Icon type="chatbubbles"></Icon>
-                                评论管理
-                            </MenuItem>
-                        </MenuGroup>
-                        <MenuGroup title="统计分析">
-                            <MenuItem name="3">
-                                <Icon type="heart"></Icon>
-                                用户留存
-                            </MenuItem>
-                            <MenuItem name="4">
-                                <Icon type="heart-broken"></Icon>
-                                流失用户
-                            </MenuItem>
-                        </MenuGroup>
-                    </Menu>
-                    <br>
-                    <p>Change theme</p>
-                    <RadioGroup v-model="theme3">
-                        <Radio label="light"></Radio>
-                        <Radio label="dark"></Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>Use <code>MenuGroup</code> to group the menus.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Menu props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>mode</td>
-                            <td>The mode of the menu. Optional: <code>horizontal</code>, <code>vertical</code></td>
-                            <td>String</td>
-                            <td>vertical</td>
-                        </tr>
-                        <tr>
-                            <td>theme</td>
-                            <td>Theme. Optional: <code>light</code>, <code>dark</code>, <code>primary</code>, primary can only be used when <code>mode="horizontal"</code></td>
-                            <td>String</td>
-                            <td>light</td>
-                        </tr>
-                        <tr>
-                            <td>active-name</td>
-                            <td>The name of the menu item that is active.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>open-names</td>
-                            <td>The array of expanded Submenu's name.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>accordion</td>
-                            <td>Enable accordion mode or not. If true, only one Submenu can be expanded at the same time.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>The width of the navigation menu. It only works when <code>mode="vertical"</code>. We recommend you to set it to <code>auto</code> if you're using layouts like <code>Col</code>.</td>
-                            <td>String</td>
-                            <td>240px</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Menu events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-select</td>
-                            <td>Emit when select(click) the menu-item.</td>
-                            <td>name</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>Emit when expand / fold the Submenu.</td>
-                            <td>An array which includes the name of expanded Submenus</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Menu methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Method Name</th>
-                            <th>Description</th>
-                            <th>Parameter</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>updateOpened</td>
-                            <td>Update expanded Submenus manually.Attention: Call it in $nextTick.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>updateActiveName</td>
-                            <td>Update selected menu-item manually.Attention: Call it in $nextTick.</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="MenuItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>Unique identifier of menu-item. Required.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Submenu props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>Unique identifier of Submenu. Required.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Submenu slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Menu Item</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>Submenu Title</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="MenuGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>Group Title</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/menu';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                theme1: 'light',
-                theme2: 'light',
-                theme3: 'light'
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/menu.vue b/src/views/components/menu.vue
deleted file mode 100644
index 69da0bf..0000000
--- a/src/views/components/menu.vue
+++ /dev/null
@@ -1,469 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Menu 导航菜单</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。</p>
-            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-menu</code>。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="顶部导航" vertical hide-code>
-                <div slot="demo">
-                    <Menu mode="horizontal" :theme="theme1" active-name="1">
-                        <MenuItem name="1">
-                            <Icon type="ios-paper"></Icon>
-                            内容管理
-                        </MenuItem>
-                        <MenuItem name="2">
-                            <Icon type="ios-people"></Icon>
-                            用户管理
-                        </MenuItem>
-                        <Submenu name="3">
-                            <template slot="title">
-                                <Icon type="stats-bars"></Icon>
-                                统计分析
-                            </template>
-                            <MenuGroup title="使用">
-                                <MenuItem name="3-1">新增和启动</MenuItem>
-                                <MenuItem name="3-2">活跃分析</MenuItem>
-                                <MenuItem name="3-3">时段分析</MenuItem>
-                            </MenuGroup>
-                            <MenuGroup title="留存">
-                                <MenuItem name="3-4">用户留存</MenuItem>
-                                <MenuItem name="3-5">流失用户</MenuItem>
-                            </MenuGroup>
-                        </Submenu>
-                        <MenuItem name="4">
-                            <Icon type="settings"></Icon>
-                            综合设置
-                        </MenuItem>
-                    </Menu>
-                    <br>
-                    <p>切换主题</p>
-                    <RadioGroup v-model="theme1">
-                        <Radio label="light"></Radio>
-                        <Radio label="dark"></Radio>
-                        <Radio label="primary"></Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>水平的顶部导航菜单。</p>
-                    <p>通过设置属性 <code>theme</code> 为 <code>light</code>、<code>dark</code>、<code>primary</code> 可以选择主题。</p>
-                    <p>通过事件 <code>on-select</code> 可以得到点击菜单的 name 值，从而控制页面路由或自定义操作。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="侧栏导航" vertical hide-code>
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <Menu :theme="theme2">
-                                <Submenu name="1">
-                                    <template slot="title">
-                                        <Icon type="ios-paper"></Icon>
-                                        内容管理
-                                    </template>
-                                    <MenuItem name="1-1">文章管理</MenuItem>
-                                    <MenuItem name="1-2">评论管理</MenuItem>
-                                    <MenuItem name="1-3">举报管理</MenuItem>
-                                </Submenu>
-                                <Submenu name="2">
-                                    <template slot="title">
-                                        <Icon type="ios-people"></Icon>
-                                        用户管理
-                                    </template>
-                                    <MenuItem name="2-1">新增用户</MenuItem>
-                                    <MenuItem name="2-2">活跃用户</MenuItem>
-                                </Submenu>
-                                <Submenu name="3">
-                                    <template slot="title">
-                                        <Icon type="stats-bars"></Icon>
-                                        统计分析
-                                    </template>
-                                    <MenuGroup title="使用">
-                                        <MenuItem name="3-1">新增和启动</MenuItem>
-                                        <MenuItem name="3-2">活跃分析</MenuItem>
-                                        <MenuItem name="3-3">时段分析</MenuItem>
-                                    </MenuGroup>
-                                    <MenuGroup title="留存">
-                                        <MenuItem name="3-4">用户留存</MenuItem>
-                                        <MenuItem name="3-5">流失用户</MenuItem>
-                                    </MenuGroup>
-                                </Submenu>
-                            </Menu>
-                        </Col>
-                        <Col span="8">
-                            <Menu :theme="theme2" active-name="1-2" :open-names="['1']">
-                                <Submenu name="1">
-                                    <template slot="title">
-                                        <Icon type="ios-paper"></Icon>
-                                        内容管理
-                                    </template>
-                                    <MenuItem name="1-1">文章管理</MenuItem>
-                                    <MenuItem name="1-2">评论管理</MenuItem>
-                                    <MenuItem name="1-3">举报管理</MenuItem>
-                                </Submenu>
-                                <Submenu name="2">
-                                    <template slot="title">
-                                        <Icon type="ios-people"></Icon>
-                                        用户管理
-                                    </template>
-                                    <MenuItem name="2-1">新增用户</MenuItem>
-                                    <MenuItem name="2-2">活跃用户</MenuItem>
-                                </Submenu>
-                                <Submenu name="3">
-                                    <template slot="title">
-                                        <Icon type="stats-bars"></Icon>
-                                        统计分析
-                                    </template>
-                                    <MenuGroup title="使用">
-                                        <MenuItem name="3-1">新增和启动</MenuItem>
-                                        <MenuItem name="3-2">活跃分析</MenuItem>
-                                        <MenuItem name="3-3">时段分析</MenuItem>
-                                    </MenuGroup>
-                                    <MenuGroup title="留存">
-                                        <MenuItem name="3-4">用户留存</MenuItem>
-                                        <MenuItem name="3-5">流失用户</MenuItem>
-                                    </MenuGroup>
-                                </Submenu>
-                            </Menu>
-                        </Col>
-                        <Col span="8">
-                            <Menu :theme="theme2" :open-names="['1']" accordion>
-                                <Submenu name="1">
-                                    <template slot="title">
-                                        <Icon type="ios-paper"></Icon>
-                                        内容管理
-                                    </template>
-                                    <MenuItem name="1-1">文章管理</MenuItem>
-                                    <MenuItem name="1-2">评论管理</MenuItem>
-                                    <MenuItem name="1-3">举报管理</MenuItem>
-                                </Submenu>
-                                <Submenu name="2">
-                                    <template slot="title">
-                                        <Icon type="ios-people"></Icon>
-                                        用户管理
-                                    </template>
-                                    <MenuItem name="2-1">新增用户</MenuItem>
-                                    <MenuItem name="2-2">活跃用户</MenuItem>
-                                </Submenu>
-                                <Submenu name="3">
-                                    <template slot="title">
-                                        <Icon type="stats-bars"></Icon>
-                                        统计分析
-                                    </template>
-                                    <MenuGroup title="使用">
-                                        <MenuItem name="3-1">新增和启动</MenuItem>
-                                        <MenuItem name="3-2">活跃分析</MenuItem>
-                                        <MenuItem name="3-3">时段分析</MenuItem>
-                                    </MenuGroup>
-                                    <MenuGroup title="留存">
-                                        <MenuItem name="3-4">用户留存</MenuItem>
-                                        <MenuItem name="3-5">流失用户</MenuItem>
-                                    </MenuGroup>
-                                </Submenu>
-                            </Menu>
-                        </Col>
-                    </Row>
-                    <br>
-                    <p>切换主题</p>
-                    <RadioGroup v-model="theme2">
-                        <Radio label="light"></Radio>
-                        <Radio label="dark"></Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>垂直导航菜单，可以内嵌子菜单。</p>
-                    <p>设置 <code>active-name</code> 可以选中指定的菜单，设置 <code>open-names</code> 可以展开指定的子菜单。</p>
-                    <p>设置属性 <code>accordion</code> 可以开启手风琴模式，每次只能展开一个子菜单。</p>
-                    <p>通过设置属性 <code>theme</code> 为 <code>light</code>、<code>dark</code> 可以选择主题，侧栏菜单不支持 primary 主题。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-            <Demo title="内嵌菜单" vertical hide-code>
-                <div slot="demo">
-                    <Menu active-name="1-2" :open-names="['1']">
-                        <Submenu name="1">
-                            <template slot="title">
-                                <Icon type="ios-analytics"></Icon>
-                                Navigation One
-                            </template>
-                            <MenuGroup title="Item 1">
-                                <MenuItem name="1-1">Option 1</MenuItem>
-                                <MenuItem name="1-2">Option 2</MenuItem>
-                            </MenuGroup>
-                            <MenuGroup title="Item 2">
-                                <MenuItem name="1-3">Option 3</MenuItem>
-                                <MenuItem name="1-4">Option 4</MenuItem>
-                            </MenuGroup>
-                        </Submenu>
-                        <Submenu name="2">
-                            <template slot="title">
-                                <Icon type="ios-filing"></Icon>
-                                Navigation Two
-                            </template>
-                            <MenuItem name="2-1">Option 5</MenuItem>
-                            <MenuItem name="2-2">Option 6</MenuItem>
-                            <Submenu name="3">
-                                <template slot="title">Submenu</template>
-                                <MenuItem name="3-1">Option 7</MenuItem>
-                                <MenuItem name="3-2">Option 8</MenuItem>
-                            </Submenu>
-                        </Submenu>
-                        <Submenu name="4">
-                            <template slot="title">
-                                <Icon type="ios-gear"></Icon>
-                                Navigation Three
-                            </template>
-                            <MenuItem name="4-1">Option 9</MenuItem>
-                            <MenuItem name="4-2">Option 10</MenuItem>
-                            <MenuItem name="4-3">Option 11</MenuItem>
-                            <MenuItem name="4-4">Option 12</MenuItem>
-                        </Submenu>
-                    </Menu>
-                </div>
-                <div slot="desc">
-                    <p>垂直菜单，子菜单内嵌在菜单区域。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.inline }}</i-code>
-            </Demo>
-            <Demo title="分组" vertical hide-code>
-                <div slot="demo">
-                    <Menu :theme="theme3" active-name="1">
-                        <MenuGroup title="内容管理">
-                            <MenuItem name="1">
-                                <Icon type="document-text"></Icon>
-                                文章管理
-                            </MenuItem>
-                            <MenuItem name="2">
-                                <Icon type="chatbubbles"></Icon>
-                                评论管理
-                            </MenuItem>
-                        </MenuGroup>
-                        <MenuGroup title="统计分析">
-                            <MenuItem name="3">
-                                <Icon type="heart"></Icon>
-                                用户留存
-                            </MenuItem>
-                            <MenuItem name="4">
-                                <Icon type="heart-broken"></Icon>
-                                流失用户
-                            </MenuItem>
-                        </MenuGroup>
-                    </Menu>
-                    <br>
-                    <p>切换主题</p>
-                    <RadioGroup v-model="theme3">
-                        <Radio label="light"></Radio>
-                        <Radio label="dark"></Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>使用 <code>MenuGroup</code> 组件进行分组。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Menu props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>mode</td>
-                            <td>菜单类型，可选值为 <code>horizontal</code>（水平） 和 <code>vertical</code>（垂直）</td>
-                            <td>String</td>
-                            <td>vertical</td>
-                        </tr>
-                        <tr>
-                            <td>theme</td>
-                            <td>主题，可选值为 <code>light</code>、<code>dark</code>、<code>primary</code>，其中 primary 只适用于 <code>mode="horizontal"</code></td>
-                            <td>String</td>
-                            <td>light</td>
-                        </tr>
-                        <tr>
-                            <td>active-name</td>
-                            <td>激活菜单的 name 值</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>open-names</td>
-                            <td>展开的 Submenu 的 name 集合</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>accordion</td>
-                            <td>是否开启手风琴模式，开启后每次至多展开一个子菜单</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>导航菜单的宽度，只在 <code>mode="vertical"</code> 时有效，如果使用 <code>Col</code> 等布局，建议设置为 <code>auto</code></td>
-                            <td>String</td>
-                            <td>240px</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Menu events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-select</td>
-                            <td>选择菜单（MenuItem）时触发</td>
-                            <td>name</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>当 展开/收起 子菜单时触发</td>
-                            <td>当前展开的 Submenu 的 name 值数组</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Menu methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>方法名</th>
-                            <th>说明</th>
-                            <th>参数</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>updateOpened</td>
-                            <td>手动更新展开的子目录，注意要在 $nextTick 里调用</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>updateActiveName</td>
-                            <td>手动更新当前选择项，注意要在 $nextTick 里调用</td>
-                            <td>无</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="MenuItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>菜单项的唯一标识，必填</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Submenu props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>子菜单的唯一标识，必填</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Submenu slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>菜单项</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>子菜单标题</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="MenuGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>分组标题</td>
-                            <td>String</td>
-                            <td>空</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/menu';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                theme1: 'light',
-                theme2: 'light',
-                theme3: 'light'
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/message-en.vue b/src/views/components/message-en.vue
deleted file mode 100644
index 9f0f85e..0000000
--- a/src/views/components/message-en.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Message</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>A lightweight feedback message appearing at the top of the screen, fading automatically. Has many different options for different situations.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Normal Prompt">
-                <div slot="demo">
-                    <Button type="primary" @click="info">Display info prompt</Button>
-                </div>
-                <div slot="desc">
-                    <p>Basic promt, fades after 1.5 seconds by default.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.info }}</i-code>
-            </Demo>
-            <Demo title="Prompt Type">
-                <div slot="demo">
-                    <Button @click="success">Display success prompt</Button>
-                    <Button @click="warning">Display warning prompt</Button>
-                    <Button @click="error">Display error prompt</Button>
-                </div>
-                <div slot="desc">
-                    <p>Different prompt types: success, warning, error.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="Loading Prompt">
-                <div slot="demo">
-                    <Button @click="loading">Display loading...</Button>
-                </div>
-                <div slot="desc">
-                    <p>Loading status, dismissed asynchronously.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.loading }}</i-code>
-            </Demo>
-            <Demo title="Custom Prompt Duration">
-                <div slot="demo">
-                    <Button @click="time">Displays a 10 second prompt</Button>
-                </div>
-                <div slot="desc">
-                    <p>Customize prompt duration. Can also be configured in <code>Message.config()</code>, refer to API section below.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.time }}</i-code>
-            </Demo>
-            <Demo title="Closable">
-                <div slot="demo">
-                    <Button @click="closable">Display a closable message</Button>
-                </div>
-                <div slot="desc">
-                    <p>Set parameter as an object, and set its <code>closable</code> to true to allow manual close. Details on API Doc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.closable }}</i-code>
-            </Demo>
-            <Demo title="render">
-                <div slot="demo">
-                    <Button @click="renderFunc">show message</Button>
-                </div>
-                <div slot="desc">
-                    <p>You can custom content with render</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Message instance" h3></Anchor>
-                <p>This component can be used with the following static methods:</p>
-                <ul>
-                    <li>
-                        <code>this.$Message.info(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.success(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.warning(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.error(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.loading(config)</code>
-                    </li>
-                </ul>
-                <p>The methods above implicitly create and maintain Vue components. Parameter config can be string or object. When string, the content will be directly displayed, when object, the detail usage is explained below:</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>content</td>
-                            <td>Prompt's message content</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>Custom description renderer. It uses Vue's render function.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>Time before prompt dismisses, in seconds. Use 0 to not dismiss</td>
-                            <td>Number</td>
-                            <td>1.5</td>
-                        </tr>
-                        <tr>
-                            <td>onClose</td>
-                            <td>Function to be called after the prompt is closed</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>Whether to show a close button.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>Methods for global configuration and disposal are also provided:</p>
-                <ul>
-                    <li>
-                        <code>this.$Message.config(options)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.destroy()</code>
-                    </li>
-                </ul>
-                <br>
-                <i-code bg>{{ code.config }}</i-code>
-                <br>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>top</td>
-                            <td>Prompt's distance from top, in pixels.</td>
-                            <td>Number</td>
-                            <td>24</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>Default time before prompt dismisses, in seconds.</td>
-                            <td>Number</td>
-                            <td>1.5</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/message';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            info () {
-                this.$Message.info('This is a info tip');
-            },
-            success () {
-                this.$Message.success('This is a success tip');
-            },
-            warning () {
-                this.$Message.warning('This is a warning tip');
-            },
-            error () {
-                this.$Message.error('This is an error tip');
-            },
-            loading () {
-                const msg = this.$Message.loading({
-                    content: 'Loading...',
-                    duration: 0
-                });
-                setTimeout(msg, 3000);
-            },
-            time () {
-                this.$Message.info({
-                    content: 'I\'ll be gone in 10 seconds',
-                    duration: 10
-                });
-            },
-            closable () {
-                this.$Message.info({
-                    content: 'Tips for manual closing',
-                    duration: 10,
-                    closable: true
-                });
-            },
-            renderFunc () {
-                this.$Message.info({
-                    render: h => {
-                        return h('span', [
-                            'This is created by ',
-                            h('a', 'render'),
-                            ' function'
-                        ])
-                    }
-                });
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/message.vue b/src/views/components/message.vue
deleted file mode 100644
index 42b02f9..0000000
--- a/src/views/components/message.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Message 全局提示</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="普通提示">
-                <div slot="demo">
-                    <Button type="primary" @click="info">显示普通提示</Button>
-                </div>
-                <div slot="desc">
-                    <p>最基本的提示，默认在1.5秒后消失。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.info }}</i-code>
-            </Demo>
-            <Demo title="提示类型">
-                <div slot="demo">
-                    <Button @click="success">显示成功提示</Button>
-                    <Button @click="warning">显示警告提示</Button>
-                    <Button @click="error">显示错误提示</Button>
-                </div>
-                <div slot="desc">
-                    <p>不同的提示状态：成功、警告、错误。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="加载中">
-                <div slot="demo">
-                    <Button @click="loading">显示加载中...</Button>
-                </div>
-                <div slot="desc">
-                    <p>Loading 的状态，并异步在某个时机移除。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.loading }}</i-code>
-            </Demo>
-            <Demo title="自定义时长">
-                <div slot="demo">
-                    <Button @click="time">显示一个10秒的提示</Button>
-                </div>
-                <div slot="desc">
-                    <p>自定义时长，也可以在<code>Message.config()</code>中全局配置，详见API。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.time }}</i-code>
-            </Demo>
-            <Demo title="可关闭">
-                <div slot="demo">
-                    <Button @click="closable">显示一个可关闭的提示</Button>
-                </div>
-                <div slot="desc">
-                    <p>将参数设置为一个对象，并指定 <code>closable</code> 为 true 后可以手动关闭提示，完整参数详见API。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.closable }}</i-code>
-            </Demo>
-            <Demo title="自定义 Render 函数">
-                <div slot="demo">
-                    <Button @click="renderFunc">显示render函数创建的内容</Button>
-                </div>
-                <div slot="desc">
-                    <p>使用 Render 函数自定义内容。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Message instance" h3></Anchor>
-                <p>通过直接调用以下方法来使用组件：</p>
-                <ul>
-                    <li>
-                        <code>this.$Message.info(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.success(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.warning(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.error(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.loading(config)</code>
-                    </li>
-                </ul>
-                <p>以上方法隐式的创建及维护 Vue 组件。参数 config 可以是字符串或对象，当为字符串时，直接显示内容，当为对象时，具体说明如下：</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>content</td>
-                            <td>提示内容</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>自定义描述内容，使用 Vue 的 Render 函数</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>自动关闭的延时，单位秒，不关闭可以写 0</td>
-                            <td>Number</td>
-                            <td>1.5</td>
-                        </tr>
-                        <tr>
-                            <td>onClose</td>
-                            <td>关闭时的回调</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>是否显示关闭按钮</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>另外提供了全局配置和全局销毁的方法：</p>
-                <ul>
-                    <li>
-                        <code>this.$Message.config(options)</code>
-                    </li>
-                    <li>
-                        <code>this.$Message.destroy()</code>
-                    </li>
-                </ul>
-                <br>
-                <i-code bg>{{ code.config }}</i-code>
-                <br>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>top</td>
-                            <td>提示组件距离顶端的距离，单位像素</td>
-                            <td>Number</td>
-                            <td>24</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>默认自动关闭的延时，单位秒</td>
-                            <td>Number</td>
-                            <td>1.5</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/message';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            info () {
-                this.$Message.info('这是一条普通的提示');
-            },
-            success () {
-                this.$Message.success('这是一条成功的提示');
-            },
-            warning () {
-                this.$Message.warning('这是一条警告的提示');
-            },
-            error () {
-                this.$Message.error('对方不想说话，并且向你抛出了一个异常');
-            },
-            loading () {
-                const msg = this.$Message.loading({
-                    content: '正在加载中...',
-                    duration: 0
-                });
-                setTimeout(msg, 3000);
-            },
-            time () {
-                this.$Message.info({
-                    content: '我将在10秒后消失',
-                    duration: 10
-                });
-            },
-            closable () {
-                this.$Message.info({
-                    content: '可手动关闭的提示',
-                    duration: 10,
-                    closable: true
-                });
-            },
-            renderFunc () {
-                this.$Message.info({
-                    render: h => {
-                        return h('span', [
-                            '这是',
-                            h('a', 'render'),
-                            '函数渲染的'
-                        ])
-                    }
-                });
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/modal-en.vue b/src/views/components/modal-en.vue
deleted file mode 100644
index f931c14..0000000
--- a/src/views/components/modal-en.vue
+++ /dev/null
@@ -1,592 +0,0 @@
-<style lang="less">
-    .vertical-center-modal{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .ivu-modal{
-            top: 0;
-        }
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Modal</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Modal dialog. It's shown in the floating layer. It's used to guide user do certain operations.</p>
-            <p><code>Modal</code> provides two usages: normal component using & encapsulated instance calling.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Anchor title="Normal Component Usage" h3></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Button type="primary" @click="modal1 = true">Display dialog box</Button>
-                    <Modal
-                        v-model="modal1"
-                        title="Common Modal dialog box title"
-                        @on-ok="ok"
-                        @on-cancel="cancel">
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>The easiest way to display / hide Modal is to control <code>visible</code> prop.</p>
-                    <p>Use v-model to enable two-way binding.</p>
-                    <p>Tap <code>ESC</code> button can close it too.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Custom Style">
-                <div slot="demo">
-                    <Button @click="modal2 = true">Custom header and footer</Button>
-                    <Modal v-model="modal2" width="360">
-                        <p slot="header" style="color:#f60;text-align:center">
-                            <Icon type="information-circled"></Icon>
-                            <span>Delete confirmation</span>
-                        </p>
-                        <div style="text-align:center">
-                            <p>After this task is deleted, the downstream 10 tasks will not be implemented.</p>
-                            <p>Will you delete it?</p>
-                        </div>
-                        <div slot="footer">
-                            <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>
-                        </div>
-                    </Modal>
-                    <Button @click="modal3 = true">No title bar</Button>
-                    <Modal v-model="modal3">
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                    </Modal>
-                    <Button @click="modal4 = true">Internationalization</Button>
-                    <Modal
-                        v-model="modal4"
-                        title="Modal Title"
-                        ok-text="OK"
-                        cancel-text="Cancel">
-                        <p>Something...</p>
-                        <p>Something...</p>
-                        <p>Something...</p>
-                    </Modal>
-                    <Button @click="modal5 = true">Set the width</Button>
-                    <Modal
-                        v-model="modal5"
-                        title="Custom width"
-                        width="300">
-                        <p>Customize width, unit px, default 520px.</p>
-                        <p>The width of the dialog box is responsive, and the width becomes <code>auto</code> when the screen size is less than 768px.</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>Modal component provieds a set of custom style API and Slots which are very flexible. You can control any part of the Modal like header, footer and close button.</p>
-                    <p>You can realise complex functions by interact with other components. It satisfies most business scenarios.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="Asynchronous Close">
-                <div slot="demo">
-                    <Button type="primary" @click="modal6 = true">Display dialog box</Button>
-                    <Modal
-                        v-model="modal6"
-                        title="Title"
-                        :loading="loading"
-                        @on-ok="asyncOK">
-                        <p>After you click ok, the dialog box will close in 2 seconds.</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>After Setting <code>loading</code> prop to <code>Modal</code>, Modal will not disappear automatically and will show loading status. It needs to be closed manually. This is often used on form submission.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.async }}</i-code>
-            </Demo>
-            <Demo title="Disable Close">
-                <div slot="demo">
-                    <Button @click="modal7 = true">Disable upper right corner (including Esc key)</Button>
-                    <Modal
-                        title="Title"
-                        v-model="modal7"
-                        :closable="false">
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                    </Modal>
-                    <Button @click="modal8 = true">Disable mask layer closure</Button>
-                    <Modal
-                        title="Title"
-                        v-model="modal8"
-                        :mask-closable="false">
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>You can disable closing or mask-closing.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.close }}</i-code>
-            </Demo>
-            <Demo title="Custom Position">
-                <div slot="demo">
-                    <Button @click="modal9 = true">20px from the top</Button>
-                    <Modal
-                        title="Title"
-                        v-model="modal9"
-                        :styles="{top: '20px'}">
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                    </Modal>
-                    <Button @click="modal10 = true">Vertical center</Button>
-                    <Modal
-                        title="Title"
-                        v-model="modal10"
-                        class-name="vertical-center-modal">
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                        <p>Content of dialog</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>You can customize Modal's style and its Wrap's class name to realise many custom styles like vertical center.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.position }}</i-code>
-            </Demo>
-            <Anchor title="Instantiation Usage" h3></Anchor>
-            <p>Besides normal component usages mentioned above, iView has encapsulated some instance methods elaborately to create one-off light Modal.</p>
-            <p>The instance create a Modal globally by creating a Vue component implicitly. It will be destroyed after disappeared. So you can only operate one insatnce at the same time.</p>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Button @click="instance('info')">Info</Button>
-                    <Button @click="instance('success')">Success</Button>
-                    <Button @click="instance('warning')">Warning</Button>
-                    <Button @click="instance('error')">Error</Button>
-                </div>
-                <div slot="desc">
-                    <p>Four basic Modals which only provides a confirm button.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.baseInstance }}</i-code>
-            </Demo>
-            <Demo title="Confirm Modal">
-                <div slot="demo">
-                    <Button @click="confirm">Normal</Button>
-                    <Button @click="custom">Custom button text</Button>
-                    <Button @click="async">Asynchronous closing</Button>
-                </div>
-                <div slot="desc">
-                    <p>Popup the confirm Modal rapidly. You can customize the text on the button or close the Modal asynchronously.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-            </Demo>
-            <Demo title="Custom Content">
-                <div slot="demo">
-                    <p>
-                        Name: {{ value }}
-                    </p>
-                    <p>
-                        <Button @click="handleRender">Custom content</Button>
-                    </p>
-                </div>
-                <div slot="desc">
-                    <p>You can use Vue's Render function to customize content by using <code>render</code> field.</p>
-                    <p>No more type limitation after using render, and content will be invalid.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Modal props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Display Modal or not. Use v-model to enable two-way binding.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>The title of Modal. It is invalid if footer slot is set.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>Display the close button at the right top corner or not. ESC clicking-close will also be disabled if closable is set to false.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>mask-closable</td>
-                            <td>Allow mask-closing operation (Click mask layer around the Modal to close it) or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>Show loading status or not when clicking confirm button. If it is set to true, Modal has to be close manually by setting <code>visible</code> to false.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>scrollable</td>
-                            <td>Allow scrolling or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>ok-text</td>
-                            <td>OK button's text.</td>
-                            <td>String</td>
-                            <td>OK</td>
-                        </tr>
-                        <tr>
-                            <td>cancel-text</td>
-                            <td>Cancel button's text.</td>
-                            <td>String</td>
-                            <td>Cancel</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>The width of Modal. The width is responsive: It'll change to <code>auto</code> when the size of the screen is smaller than 768px. It will be displayed as a percentage when the value less than 100, otherwise it is a pixel.</td>
-                            <td>Number | String</td>
-                            <td>520</td>
-                        </tr>
-                        <tr>
-                            <td>styles</td>
-                            <td>Set layer's style or adjust its position. The prop sets <code>.ivu-modal</code>'s style.</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>Set Modal's wrapper - <code>.ivu-modal-wrap</code>'s class name. It can be used to assist to realise custom styles like vertical center.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>transition-names</td>
-                            <td>Custom transition. The first transition is Modal itself, the second is the background.</td>
-                            <td>Array</td>
-                            <td>['ease', 'fade']</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Modal events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>Callback when clicking ok.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-cancel</td>
-                            <td>Callback when clicking cancel.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-visible-change</td>
-                            <td>Triggered when the display status changes.</td>
-                            <td>true / false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Modal slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>Custom header.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>Custom footer.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>Custom right-top closing area.</td>
-                        </tr>
-                        <tr>
-                            <td>-</td>
-                            <td>Custom main content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Modal instance" h3></Anchor>
-                <p>Use insatnce by directly calling methods below:</p>
-                <ul>
-                    <li>
-                        <code>this.$Modal.info(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.success(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.warning(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.error(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.confirm(config)</code>
-                    </li>
-                </ul>
-                <p>Methods above create and maintain Vue Component implicitly. The only parameter is a config object. It's details are mentioned below:</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>Title</td>
-                            <td>String | Element String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>Content</td>
-                            <td>String | Element String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>Custom content. No more type limitation after using it. Content will be invalid too.<study-render></study-render></td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>Width. Unit: px.</td>
-                            <td>Number | String</td>
-                            <td>416</td>
-                        </tr>
-                        <tr>
-                            <td>okText</td>
-                            <td>OK button's text.</td>
-                            <td>String</td>
-                            <td>OK</td>
-                        </tr>
-                        <tr>
-                            <td>cancelText</td>
-                            <td>Cancel button's text. Only works on <code>Modal.confirm()</code>.</td>
-                            <td>String</td>
-                            <td>Cancel</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>Show loading status or not after clicking confirm button. If true, Modal needs to be closed manually by calling <code>Modal.remove()</code>.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>scrollable</td>
-                            <td>Allow scrolling or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>Whether to support press Esc key to close.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>onOk</td>
-                            <td>Callback when clicking confirm button (OK button).</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>onCancel</td>
-                            <td>Callback when clicking cancel button. Only works on <code>Modal.confirm()</code>.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>Global remove method is also provided:</p>
-                <ul>
-                    <li>
-                        <code>this.$Modal.remove()</code>
-                    </li>
-                </ul>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/modal';
-    import Anchor from '../../components/anchor.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                modal1: false,
-                modal2: false,
-                modal_loading: false,
-                modal3: false,
-                modal4: false,
-                modal5: false,
-                modal6: false,
-                loading: true,
-                modal7: false,
-                modal8: false,
-                modal9: false,
-                modal10: false,
-                value: ''
-            }
-        },
-        methods: {
-            ok () {
-                this.$Message.info('Clicked ok');
-            },
-            cancel () {
-                this.$Message.info('Clicked cancel');
-            },
-            del () {
-                this.modal_loading = true;
-                setTimeout(() => {
-                    this.modal_loading = false;
-                    this.modal2 = false;
-                    this.$Message.success('Successfully delete');
-                }, 2000);
-            },
-            asyncOK () {
-                setTimeout(() => {
-                    this.modal6 = false;
-                }, 2000);
-            },
-            instance (type) {
-                const title = 'Title';
-                const content = '<p>Content of dialog</p><p>Content of dialog</p>';
-                switch (type) {
-                    case 'info':
-                        this.$Modal.info({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'success':
-                        this.$Modal.success({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'warning':
-                        this.$Modal.warning({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'error':
-                        this.$Modal.error({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                }
-            },
-            confirm () {
-                this.$Modal.confirm({
-                    title: 'Title',
-                    content: '<p>Content of dialog</p><p>Content of dialog</p>',
-                    onOk: () => {
-                        this.$Message.info('Clicked ok');
-                    },
-                    onCancel: () => {
-                        this.$Message.info('Clicked cancel');
-                    }
-                });
-            },
-            custom () {
-                this.$Modal.confirm({
-                    title: 'Title',
-                    content: '<p>Content of dialog</p><p>Content of dialog</p>',
-                    okText: 'OK',
-                    cancelText: 'Cancel'
-                });
-            },
-            async () {
-                this.$Modal.confirm({
-                    title: 'Title',
-                    content: '<p>The dialog box will be closed after 2 seconds</p>',
-                    loading: true,
-                    onOk: () => {
-                        setTimeout(() => {
-                            this.$Modal.remove();
-                            this.$Message.info('Asynchronously close the dialog box');
-                        }, 2000);
-                    }
-                });
-            },
-            handleRender () {
-                this.$Modal.confirm({
-                    render: (h) => {
-                        return h('Input', {
-                            props: {
-                                value: this.value,
-                                autofocus: true,
-                                placeholder: 'Please enter your name...'
-                            },
-                            on: {
-                                input: (val) => {
-                                    this.value = val;
-                                }
-                            }
-                        })
-                    }
-                })
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/modal.vue b/src/views/components/modal.vue
deleted file mode 100644
index d7d2e0e..0000000
--- a/src/views/components/modal.vue
+++ /dev/null
@@ -1,593 +0,0 @@
-<style lang="less">
-    .vertical-center-modal{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .ivu-modal{
-            top: 0;
-        }
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Modal 对话框</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>模态对话框，在浮层中显示，引导用户进行相关操作。</p>
-            <p><code>Modal</code>提供了两种用法，普通组件使用和封装好的简洁实例调用。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Anchor title="普通组件使用方法" h3></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Button type="primary" @click="modal1 = true">显示对话框</Button>
-                    <Modal
-                        v-model="modal1"
-                        title="普通的Modal对话框标题"
-                        @on-ok="ok"
-                        @on-cancel="cancel">
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>最简单的使用方法，通过控制属性<code>visible</code>来显示 / 隐藏对话框。</p>
-                    <p>可以使用 v-model 实现双向绑定。</p>
-                    <p>默认按键盘<code>ESC</code>键也可以关闭。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="自定义样式">
-                <div slot="demo">
-                    <Button @click="modal2 = true">自定义页头和页脚</Button>
-                    <Modal v-model="modal2" width="360">
-                        <p slot="header" style="color:#f60;text-align:center">
-                            <Icon type="information-circled"></Icon>
-                            <span>删除确认</span>
-                        </p>
-                        <div style="text-align:center">
-                            <p>此任务删除后，下游 10 个任务将无法执行。</p>
-                            <p>是否继续删除？</p>
-                        </div>
-                        <div slot="footer">
-                            <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
-                        </div>
-                    </Modal>
-                    <Button @click="modal3 = true">不带标题栏</Button>
-                    <Modal v-model="modal3">
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                    </Modal>
-                    <Button @click="modal4 = true">国际化</Button>
-                    <Modal
-                        v-model="modal4"
-                        title="Modal Title"
-                        ok-text="OK"
-                        cancel-text="Cancel">
-                        <p>Something...</p>
-                        <p>Something...</p>
-                        <p>Something...</p>
-                    </Modal>
-                    <Button @click="modal5 = true">设置宽度</Button>
-                    <Modal
-                        v-model="modal5"
-                        title="自定义宽度"
-                        width="300">
-                        <p>自定义宽度，单位 px，默认 520px。</p>
-                        <p>对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动<code>auto</code>。</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>Modal 组件提供了灵活的自定义样式 API 和 Slot，可以自由控制整个 Modal 的各个组成部分，比如页头、页脚、关闭按钮。</p>
-                    <p>通过和其它组件的交互，能实现更复杂的功能，满足了大多业务场景。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="异步关闭">
-                <div slot="demo">
-                    <Button type="primary" @click="modal6 = true">显示对话框</Button>
-                    <Modal
-                        v-model="modal6"
-                        title="对话框标题"
-                        :loading="loading"
-                        @on-ok="asyncOK">
-                        <p>点击确定后，对话框将在 2秒 后关闭。</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>给<code>Modal</code>添加属性<code>loading</code>后，点击确定按钮对话框不会自动消失，并显示 loading 状态，需要手动关闭对话框，常用于表单提交。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.async }}</i-code>
-            </Demo>
-            <Demo title="禁用关闭">
-                <div slot="demo">
-                    <Button @click="modal7 = true">禁用右上角关闭（含Esc键）</Button>
-                    <Modal
-                        title="对话框标题"
-                        v-model="modal7"
-                        :closable="false">
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                    </Modal>
-                    <Button @click="modal8 = true">禁用遮罩层关闭</Button>
-                    <Modal
-                        title="对话框标题"
-                        v-model="modal8"
-                        :mask-closable="false">
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>可以禁用关闭和遮罩层关闭。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.close }}</i-code>
-            </Demo>
-            <Demo title="自定义位置">
-                <div slot="demo">
-                    <Button @click="modal9 = true">距离顶部 20px</Button>
-                    <Modal
-                        title="对话框标题"
-                        v-model="modal9"
-                        :styles="{top: '20px'}">
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                    </Modal>
-                    <Button @click="modal10 = true">垂直居中</Button>
-                    <Modal
-                        title="对话框标题"
-                        v-model="modal10"
-                        class-name="vertical-center-modal">
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                        <p>对话框内容</p>
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>可以自定义 Modal 的对话框样式 以及 对话框 Wrap 的 class 名称，从而实现更多自定义的样式，比如垂直居中。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.position }}</i-code>
-            </Demo>
-            <Anchor title="实例化使用方法" h3></Anchor>
-            <p>除了上述通过标准组件的使用方法，iView 还精心封装了一些实例方法，用来创建一次性的轻量级对话框。</p>
-            <p>实例以隐式创建 Vue 组件的方式在全局创建一个对话框，并在消失时移除，所以同时只能操作一个对话框。</p>
-            <Demo title="基本用法">
-                <div slot="demo">
-                    <Button @click="instance('info')">消息</Button>
-                    <Button @click="instance('success')">成功</Button>
-                    <Button @click="instance('warning')">警告</Button>
-                    <Button @click="instance('error')">错误</Button>
-                </div>
-                <div slot="desc">
-                    <p>四种基本的对话框，只提供一个确定按钮。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.baseInstance }}</i-code>
-            </Demo>
-            <Demo title="确认对话框">
-                <div slot="demo">
-                    <Button @click="confirm">标准</Button>
-                    <Button @click="custom">自定义按钮文字</Button>
-                    <Button @click="async">异步关闭</Button>
-                </div>
-                <div slot="desc">
-                    <p>快速弹出确认对话框，并且可以自定义按钮文字及异步关闭。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-            </Demo>
-            <Demo title="自定义内容">
-                <div slot="demo">
-                    <p>
-                        姓名：{{ value }}
-                    </p>
-                    <p>
-                        <Button @click="handleRender">自定义内容</Button>
-                    </p>
-                </div>
-                <div slot="desc">
-                    <p>使用 <code>render</code> 字段可以基于 Render 函数来自定义内容。</p>
-                    <p>使用 render 后，将不再限制类型，content 也将无效。</p>
-                    <p><study-render></study-render></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Modal props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>对话框是否显示，可使用 v-model 双向绑定数据。</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>对话框标题，如果使用 slot 自定义了页头，则 title 无效</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>是否显示右上角的关闭按钮，关闭后 Esc 按键也将关闭</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>mask-closable</td>
-                            <td>是否允许点击遮罩层关闭</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置<code>visible</code>来关闭对话框</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>scrollable</td>
-                            <td>页面是否可以滚动</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>ok-text</td>
-                            <td>确定按钮文字</td>
-                            <td>String</td>
-                            <td>确定</td>
-                        </tr>
-                        <tr>
-                            <td>cancel-text</td>
-                            <td>取消按钮文字</td>
-                            <td>String</td>
-                            <td>取消</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>对话框宽度，对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动<code>auto</code>。当其值不大于 100 时以百分比显示，大于 100 时为像素</td>
-                            <td>Number | String</td>
-                            <td>520</td>
-                        </tr>
-                        <tr>
-                            <td>styles</td>
-                            <td>设置浮层样式，调整浮层位置等，该属性设置的是<code>.ivu-modal</code>的样式</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>设置对话框容器<code>.ivu-modal-wrap</code>的类名，可辅助实现垂直居中等自定义效果</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>transition-names</td>
-                            <td>自定义显示动画，第一项是模态框，第二项是背景</td>
-                            <td>Array</td>
-                            <td>['ease', 'fade']</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Modal events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>点击确定的回调</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-cancel</td>
-                            <td>点击取消的回调</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-visible-change</td>
-                            <td>显示状态发生变化时触发</td>
-                            <td>true / false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Modal slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>自定义页头</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>自定义页脚内容</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>自定义右上角关闭内容</td>
-                        </tr>
-                        <tr>
-                            <td>无</td>
-                            <td>对话框主体内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Modal instance" h3></Anchor>
-                <p>通过直接调用以下方法来使用：</p>
-                <ul>
-                    <li>
-                        <code>this.$Modal.info(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.success(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.warning(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.error(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Modal.confirm(config)</code>
-                    </li>
-                </ul>
-                <p>以上方法隐式地创建及维护Vue组件。参数 config 为对象，具体说明如下：</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>标题</td>
-                            <td>String | Element String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>内容</td>
-                            <td>String | Element String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>自定义内容，使用后不再限制类型， content 也无效。<study-render></study-render></td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>宽度，单位 px</td>
-                            <td>Number | String</td>
-                            <td>416</td>
-                        </tr>
-                        <tr>
-                            <td>okText</td>
-                            <td>确定按钮的文字</td>
-                            <td>String</td>
-                            <td>确定</td>
-                        </tr>
-                        <tr>
-                            <td>cancelText</td>
-                            <td>取消按钮的文字，只在<code>Modal.confirm()</code>下有效</td>
-                            <td>String</td>
-                            <td>取消</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动调用<code>Modal.remove()</code>来关闭对话框</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>scrollable</td>
-                            <td>页面是否可以滚动</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>是否可以按 Esc 键关闭</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>onOk</td>
-                            <td>点击确定的回调</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>onCancel</td>
-                            <td>点击取消的回调，只在<code>Modal.confirm()</code>下有效</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>另外提供了全局关闭对话框的方法：</p>
-                <ul>
-                    <li>
-                        <code>this.$Modal.remove()</code>
-                    </li>
-                </ul>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/modal';
-    import Anchor from '../../components/anchor.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                modal1: false,
-                modal2: false,
-                modal_loading: false,
-                modal3: false,
-                modal4: false,
-                modal5: false,
-                modal6: false,
-                loading: true,
-                modal7: false,
-                modal8: false,
-                modal9: false,
-                modal10: false,
-                value: ''
-            }
-        },
-        methods: {
-            ok () {
-                this.$Message.info('点击了确定');
-            },
-            cancel () {
-                this.$Message.info('点击了取消');
-            },
-            del () {
-                this.modal_loading = true;
-                setTimeout(() => {
-                    this.modal_loading = false;
-                    this.modal2 = false;
-                    this.$Message.success('删除成功');
-                }, 2000);
-            },
-            asyncOK () {
-                setTimeout(() => {
-                    this.modal6 = false;
-                }, 2000);
-            },
-            instance (type) {
-                const title = '对话框的标题';
-                const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
-                switch (type) {
-                    case 'info':
-                        this.$Modal.info({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'success':
-                        this.$Modal.success({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'warning':
-                        this.$Modal.warning({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'error':
-                        this.$Modal.error({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                }
-            },
-            confirm () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    onOk: () => {
-                        this.$Message.info('点击了确定');
-                    },
-                    onCancel: () => {
-                        this.$Message.info('点击了取消');
-                    }
-                });
-            },
-            custom () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    okText: 'OK',
-                    cancelText: 'Cancel'
-                });
-            },
-            async () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>对话框将在 2秒 后关闭</p>',
-                    loading: true,
-                    onOk: () => {
-                        setTimeout(() => {
-                            this.$Modal.remove();
-                            this.$Message.info('异步关闭了对话框');
-                        }, 2000);
-                    }
-                });
-            },
-            handleRender () {
-                this.$Modal.confirm({
-                    render: (h) => {
-                        return h('Input', {
-                            props: {
-                                value: this.value,
-                                autofocus: true,
-                                placeholder: 'Please enter your name...'
-                            },
-                            on: {
-                                input: (val) => {
-                                    this.value = val;
-                                }
-                            }
-                        })
-                    }
-                })
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/notice-en.vue b/src/views/components/notice-en.vue
deleted file mode 100644
index 972f9a7..0000000
--- a/src/views/components/notice-en.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Notice</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Show global notice at the right top of the page. Often used in such scenarios: </p>
-            <ul>
-                <li>The content of the notice includes description info.</li>
-                <li>Active push by system.</li>
-            </ul>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Button type="primary" @click="open(false)">Open notice</Button>
-                    <Button @click="open(true)">Open notice(only title)</Button>
-                </div>
-                <div slot="desc">
-                    <p>Basic usage. It'll be closed after 4.5 sec by default. If <code>desc</code> prop is empty or not set, Title-Only style will be used.</p>
-                    <p>We suggest that the title should be as clear as possiblem like "Delete Sucessfully" etc. Detail content can be placed into description area.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.open }}</i-code>
-            </Demo>
-            <Demo title="Notice Type">
-                <div slot="demo">
-                    <p>With desc</p>
-                    <Button @click="info(false)">Info</Button>
-                    <Button @click="success(false)">Success</Button>
-                    <Button @click="warning(false)">Warning</Button>
-                    <Button @click="error(false)">Error</Button>
-                    <p>Only title</p>
-                    <Button @click="info(true)">Info</Button>
-                    <Button @click="success(true)">Success</Button>
-                    <Button @click="warning(true)">Warning</Button>
-                    <Button @click="error(true)">Error</Button>
-                </div>
-                <div slot="desc">
-                    <p>Notice with status icon.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="Custom Duration">
-                <div slot="demo">
-                    <Button type="primary" @click="time">Open notice</Button>
-                </div>
-                <div slot="desc">
-                    <p>Set duration to 0 to disable auto close. You can also configure Notice globally in <code>Notice.config()</code>. Details on API Doc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.time }}</i-code>
-            </Demo>
-            <Demo title="render">
-                <div slot="demo">
-                    <Button type="primary" @click="renderFunc">Open notice</Button>
-                </div>
-                <div slot="desc">
-                    <p>You can custom the render function instead of desc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Notice instance" h3></Anchor>
-                <p>Use the component by directly calling methods below:</p>
-                <ul>
-                    <li>
-                        <code>this.$Notice.open(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.info(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.success(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.warning(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.error(config)</code>
-                    </li>
-                </ul>
-                <p>The methods above create and maintain Vue component implicitly. The only parameter is a config object. It's details are mentioned below:</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>The title of Notice.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>desc</td>
-                            <td>The content of Notice. If empty or not set, Title-Only style will be used.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>Custom description renderer. It uses Vue's render function. If both set 'render' and 'desc', there just show the content create by render.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>Close Notice automatically after the duration. 0 means never close.</td>
-                            <td>Number</td>
-                            <td>4.5</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>The unique identifier of current Notice.</td>
-                            <td>String</td>
-                            <td>Auto set</td>
-                        </tr>
-                        <tr>
-                            <td>onClose</td>
-                            <td>Callback when closing Notice.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>Some global methods are also provided: (config, close and destroy)</p>
-                <ul>
-                    <li>
-                        <code>this.$Notice.config(options)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.close(name)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.destroy()</code>
-                    </li>
-                </ul>
-                <br>
-                <i-code bg>{{ code.config }}</i-code>
-                <br>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>top</td>
-                            <td>The distance from Notice to page top. Unit: px</td>
-                            <td>Number</td>
-                            <td>24</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>Default auto close duration. Unit: second</td>
-                            <td>Number</td>
-                            <td>4.5</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/notice';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            open (nodesc) {
-                this.$Notice.open({
-                    title: 'Notification title',
-                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                });
-            },
-            info (nodesc) {
-                this.$Notice.info({
-                    title: 'Notification title',
-                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                });
-            },
-            success (nodesc) {
-                this.$Notice.success({
-                    title: 'Notification title',
-                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                });
-            },
-            warning (nodesc) {
-                this.$Notice.warning({
-                    title: 'Notification title',
-                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                });
-            },
-            error (nodesc) {
-                this.$Notice.error({
-                    title: 'Notification title',
-                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                });
-            },
-            time () {
-                this.$Notice.open({
-                    title: 'Notification title',
-                    desc: 'This notification does not automatically close, and you need to click the close button to close.',
-                    duration: 0
-                });
-            },
-            renderFunc () {
-                this.$Notice.success({
-                    title: 'Notification title',
-                    desc: 'The desc will hide when you set render.',
-                    render: h => {
-                        return h('span', [
-                            'This is created by ',
-                            h('a', 'render'),
-                            ' function'
-                        ])
-                    }
-                });
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/notice.vue b/src/views/components/notice.vue
deleted file mode 100644
index 3ded087..0000000
--- a/src/views/components/notice.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Notice 通知提醒</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>在界面右上角显示可关闭的全局通知，常用于以下场景：</p>
-            <ul>
-                <li>通知内容带有描述信息</li>
-                <li>系统主动推送</li>
-            </ul>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Button type="primary" @click="open(false)">打开提醒</Button>
-                    <Button @click="open(true)">打开提醒（仅标题）</Button>
-                </div>
-                <div slot="desc">
-                    <p>基本用法，默认在 4.5秒后关闭。如果 <code>desc</code> 参数为空或不填，则自动应用仅标题模式下的样式。</p>
-                    <p>建议标题言简意赅，例如"删除成功"，更详细的内容可以放在描述信息里。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.open }}</i-code>
-            </Demo>
-            <Demo title="提醒类型">
-                <div slot="demo">
-                    <p>带描述信息</p>
-                    <Button @click="info(false)">消息</Button>
-                    <Button @click="success(false)">成功</Button>
-                    <Button @click="warning(false)">警告</Button>
-                    <Button @click="error(false)">错误</Button>
-                    <p>仅标题</p>
-                    <Button @click="info(true)">消息</Button>
-                    <Button @click="success(true)">成功</Button>
-                    <Button @click="warning(true)">警告</Button>
-                    <Button @click="error(true)">错误</Button>
-                </div>
-                <div slot="desc">
-                    <p>带有状态图标的提醒。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="自定义时长">
-                <div slot="demo">
-                    <Button type="primary" @click="time">打开提醒</Button>
-                </div>
-                <div slot="desc">
-                    <p>自定义时长，为 0 则不自动关闭。也可以在<code>Notice.config()</code>中全局配置，详见API。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.time }}</i-code>
-            </Demo>
-            <Demo title="Render 函数">
-                <div slot="demo">
-                    <Button type="primary" @click="renderFunc">打开提醒</Button>
-                </div>
-                <div slot="desc">
-                    <p>你可以自定义 Render 函数来替代 desc</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Notice instance" h3></Anchor>
-                <p>通过直接调用以下方法来使用组件：</p>
-                <ul>
-                    <li>
-                        <code>this.$Notice.open(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.info(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.success(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.warning(config)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.error(config)</code>
-                    </li>
-                </ul>
-                <p>以上方法隐式地创建及维护Vue组件。参数 config 为对象，具体说明如下：</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>通知提醒的标题</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>desc</td>
-                            <td>通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>自定义描述内容，使用 Vue 的 Render 函数，如果同时设置了 render 和 desc，则只显示 render 的内容</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>自动关闭的延时，单位秒，不关闭可以写 0</td>
-                            <td>Number</td>
-                            <td>4.5</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>当前通知的唯一标识</td>
-                            <td>String</td>
-                            <td>自动</td>
-                        </tr>
-                        <tr>
-                            <td>onClose</td>
-                            <td>关闭时的回调</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>另外提供了全局配置、全局关闭某个通知和全局销毁的方法：</p>
-                <ul>
-                    <li>
-                        <code>this.$Notice.config(options)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.close(name)</code>
-                    </li>
-                    <li>
-                        <code>this.$Notice.destroy()</code>
-                    </li>
-                </ul>
-                <br>
-                <i-code bg>{{ code.config }}</i-code>
-                <br>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>top</td>
-                            <td>通知组件距离顶端的距离，单位像素</td>
-                            <td>Number</td>
-                            <td>24</td>
-                        </tr>
-                        <tr>
-                            <td>duration</td>
-                            <td>默认自动关闭的延时，单位秒</td>
-                            <td>Number</td>
-                            <td>4.5</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/notice';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        },
-        methods: {
-            open (nodesc) {
-                this.$Notice.open({
-                    title: '这是通知标题',
-                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
-                });
-            },
-            info (nodesc) {
-                this.$Notice.info({
-                    title: '这是通知标题',
-                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
-                });
-            },
-            success (nodesc) {
-                this.$Notice.success({
-                    title: '这是通知标题',
-                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
-                });
-            },
-            warning (nodesc) {
-                this.$Notice.warning({
-                    title: '这是通知标题',
-                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
-                });
-            },
-            error (nodesc) {
-                this.$Notice.error({
-                    title: '这是通知标题',
-                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
-                });
-            },
-            time () {
-                this.$Notice.open({
-                    title: '这是通知标题',
-                    desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。',
-                    duration: 0
-                });
-            },
-            renderFunc () {
-                this.$Notice.success({
-                    title: '这是通知标题',
-                    desc: '当你定义了render之后，这个描述会被覆盖',
-                    render: h => {
-                        return h('span', [
-                            '这是',
-                            h('a', 'render'),
-                            '函数渲染的'
-                        ])
-                    }
-                });
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/page-en.vue b/src/views/components/page-en.vue
deleted file mode 100644
index f589fb2..0000000
--- a/src/views/components/page-en.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Page</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Use Page to paging data pieces when amount is too big.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Page :total="100"></Page>
-                </div>
-                <div slot="desc">
-                    <p>Basic paging operation. It will be folded when there are too many pages.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Pieces in Each Page">
-                <div slot="demo">
-                    <Page :total="100" show-sizer></Page>
-                </div>
-                <div slot="desc">
-                    <p>You can set pieces amount shown in each page.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.sizer }}</i-code>
-            </Demo>
-            <Demo title="Elevator">
-                <div slot="demo">
-                    <Page :total="100" show-elevator></Page>
-                </div>
-                <div slot="desc">
-                    <p>Directly jump to certain page.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.elevator }}</i-code>
-            </Demo>
-            <Demo title="Amount">
-                <div slot="demo">
-                    <Page :total="100" show-total></Page>
-                </div>
-                <div slot="desc">
-                    <p>Describe how many pieces of data are shown. It accepts slot to customize content. Default: <code v-pre>Total {{ total }} items</code></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.total }}</i-code>
-            </Demo>
-            <Demo title="Mini Size">
-                <div slot="demo">
-                    <Page :total="40" size="small"></Page>
-                    <br>
-                    <Page :total="40" size="small" show-elevator show-sizer></Page>
-                    <br>
-                    <Page :total="40" size="small" show-total></Page>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>size</code> to <code>small</code> to use mini size. The functions of mini size are same to the normal size.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.mini }}</i-code>
-            </Demo>
-            <Demo title="Conciseness">
-                <div slot="demo">
-                    <Page :current="2" :total="50" simple></Page>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>simple</code> prop to use a more concise Page component. It changes page by entering page number then tapping Enter, or by clicking certain page number, or by tapping Up and Down keys. concise Page CANNOT use amount, elevator and you can't let user change piece amount shown in each page.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.simple }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Page props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>current</td>
-                            <td>Current page number, support .sync modifier.</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>total</td>
-                            <td>Data piece amount</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>page-size</td>
-                            <td>Amount shown in each page.</td>
-                            <td>Number</td>
-                            <td>10</td>
-                        </tr>
-                        <tr>
-                            <td>page-size-opts</td>
-                            <td>The configuration of switching the amount of data pieces shown in each page.</td>
-                            <td>Array</td>
-                            <td>[10, 20, 30, 40]</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>The direction page-size switching dropdown expands. Optional: <code>bottom</code>, <code>top</code></td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>Optional: <code>small</code>(mini size) or leave empty (default).</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>simple</td>
-                            <td>Enable concise Page component.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-total</td>
-                            <td>Piece amount</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-elevator</td>
-                            <td>Show elevator. By using this, user can directly jump to certain page.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-sizer</td>
-                            <td>Show page sizer(page-size switching dropdown). It is used to change <code>page-size</code>'s value.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>Custom class name.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>styles</td>
-                            <td>Custom stylesheet.</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Page events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Callback when page number is changed. It returns the changed page number.</td>
-                            <td>Page number</td>
-                        </tr>
-                        <tr>
-                            <td>on-page-size-change</td>
-                            <td>Callback when page sizer is used (when page-size is changed). It returns the changed page size.</td>
-                            <td>page-size</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Page slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Customize how to show data piece amount.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/page';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/page.vue b/src/views/components/page.vue
deleted file mode 100644
index 4c3a5c7..0000000
--- a/src/views/components/page.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Page 分页</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>当数据量较多时，使用分页可以快速进行数据切换。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基本">
-                <div slot="demo">
-                    <Page :total="100"></Page>
-                </div>
-                <div slot="desc">
-                    <p>基本的分页，页数过多时会自动折叠。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="每页数量">
-                <div slot="demo">
-                    <Page :total="100" show-sizer></Page>
-                </div>
-                <div slot="desc">
-                    <p>可以切换每页显示的数量。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.sizer }}</i-code>
-            </Demo>
-            <Demo title="电梯">
-                <div slot="demo">
-                    <Page :total="100" show-elevator></Page>
-                </div>
-                <div slot="desc">
-                    <p>快速跳转到某一页。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.elevator }}</i-code>
-            </Demo>
-            <Demo title="总数">
-                <div slot="demo">
-                    <Page :total="100" show-total></Page>
-                </div>
-                <div slot="desc">
-                    <p>显示总共多少条数据，接受 slot 来自定义内容，默认显示<code v-pre>共{{ total }}条</code></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.total }}</i-code>
-            </Demo>
-            <Demo title="迷你型">
-                <div slot="demo">
-                    <Page :total="40" size="small"></Page>
-                    <br>
-                    <Page :total="40" size="small" show-elevator show-sizer></Page>
-                    <br>
-                    <Page :total="40" size="small" show-total></Page>
-                </div>
-                <div slot="desc">
-                    <p>设置<code>size</code>为<code>small</code>使用迷你型，迷你型拥有普通的所有功能。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.mini }}</i-code>
-            </Demo>
-            <Demo title="简洁">
-                <div slot="demo">
-                    <Page :current="2" :total="50" simple></Page>
-                </div>
-                <div slot="desc">
-                    <p>设置<code>simple</code>属性即可使用简洁版的分页，通过输入页码回车切换，或使用鼠标点击切换页码，或使用键盘的上下键来切换。简洁分页不能使用总数、电梯和切换数量。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.simple }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Page props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>current</td>
-                            <td>当前页码，支持 .sync 修饰符</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>total</td>
-                            <td>数据总数</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>page-size</td>
-                            <td>每页条数</td>
-                            <td>Number</td>
-                            <td>10</td>
-                        </tr>
-                        <tr>
-                            <td>page-size-opts</td>
-                            <td>每页条数切换的配置</td>
-                            <td>Array</td>
-                            <td>[10, 20, 30, 40]</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>条数切换弹窗的展开方向，可选值为 <code>bottom</code> 和 <code>top</code></td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>可选值为<code>small</code>（迷你版）或不填（默认）</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>simple</td>
-                            <td>简洁版</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-total</td>
-                            <td>显示总数</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-elevator</td>
-                            <td>显示电梯，可以快速切换到某一页</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-sizer</td>
-                            <td>显示分页，用来改变<code>page-size</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>class-name</td>
-                            <td>自定义 class 名称</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>styles</td>
-                            <td>自定义 style 样式</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Page events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>页码改变的回调，返回改变后的页码</td>
-                            <td>页码</td>
-                        </tr>
-                        <tr>
-                            <td>on-page-size-change</td>
-                            <td>切换每页条数时的回调，返回切换后的每页条数</td>
-                            <td>page-size</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Page slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>自定义显示总数的内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/page';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/poptip-en.vue b/src/views/components/poptip-en.vue
deleted file mode 100644
index 7afc753..0000000
--- a/src/views/components/poptip-en.vue
+++ /dev/null
@@ -1,355 +0,0 @@
-<style scoped>
-    .top,.bottom{
-        text-align: center;
-    }
-    .center{
-        width: 300px;
-        margin: 10px auto;
-        overflow: hidden;
-    }
-    .center-left{
-        float: left;
-    }
-    .center-right{
-        float: right;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Poptip</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Poptip is simlar to Tooltip. It has many common configurations. The difference is Poptip contains more content in a card style, such as link, table and button.</p>
-            <p>Poptip can also contain a confirm dialog. Different to Modal. It'll be shown beside the nearest element, so it's relatively lighter.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Poptip trigger="hover" title="Title" content="content">
-                        <Button>Hover</Button>
-                    </Poptip>
-                    <Poptip title="Title" content="content">
-                        <Button>Click</Button>
-                    </Poptip>
-                    <Poptip trigger="focus" title="Title" content="content">
-                        <Button>Focus</Button>
-                    </Poptip>
-                    <Poptip trigger="focus" title="Title" content="content">
-                        <Input placeholder="Input focus" />
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>Poptip supports 3 triggers: hover, click and focus. The default is click.</p>
-                    <p>Attention: Text in Poptip uses <code>white-space: nowrap;</code>, that is, no line wrap. If there are much content to show and line wrap is needed, we suggest you add style <code>white-space: normal;</code> to content slot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Direction">
-                <div slot="demo">
-                    <div class="top">
-                        <Poptip title="Title" content="content" placement="top-start">
-                            <Button>Top Left</Button>
-                        </Poptip>
-                        <Poptip title="Title" content="content" placement="top">
-                            <Button>Top Center</Button>
-                        </Poptip>
-                        <Poptip title="Title" content="content" placement="top-end">
-                            <Button>Top Right</Button>
-                        </Poptip>
-                    </div>
-                    <div class="center">
-                        <div class="center-left">
-                            <Poptip title="Title" content="content" placement="left-start">
-                                <Button>Left Top</Button>
-                            </Poptip><br><br>
-                            <Poptip title="Title" content="content" placement="left">
-                                <Button>Left Center</Button>
-                            </Poptip><br><br>
-                            <Poptip title="Title" content="content" placement="left-end">
-                                <Button>Left Right</Button>
-                            </Poptip>
-                        </div>
-                        <div class="center-right">
-                            <Poptip title="Title" content="content" placement="right-start">
-                                <Button>Right Top</Button>
-                            </Poptip><br><br>
-                            <Poptip title="Title" content="content" placement="right">
-                                <Button>Right Center</Button>
-                            </Poptip><br><br>
-                            <Poptip title="Title" content="content" placement="right-end">
-                                <Button>Right Bottom</Button>
-                            </Poptip>
-                        </div>
-                    </div>
-                    <div class="bottom">
-                        <Poptip title="Title" content="content" placement="bottom-start">
-                            <Button>Bottom Left</Button>
-                        </Poptip>
-                        <Poptip title="Title" content="content" placement="bottom">
-                            <Button>Bottom Center</Button>
-                        </Poptip>
-                        <Poptip title="Title" content="content" placement="bottom-end">
-                            <Button>Bottom Right</Button>
-                        </Poptip>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>We provide 12 different directions to show Poptip. Details on API Doc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.placement }}</i-code>
-            </Demo>
-            <Demo title="Close inside the Floating Layer">
-                <div slot="demo">
-                    <Poptip v-model="visible">
-                        <a>Click</a>
-                        <div slot="title"><i>Custom title</i></div>
-                        <div slot="content">
-                            <a @click="close">close</a>
-                        </div>
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>You can control tooltip's visibility by changing <code>v-model</code> to true or false.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.visible }}</i-code>
-            </Demo>
-            <Demo title="Nest Complex Content">
-                <div slot="demo">
-                    <Poptip placement="right" width="400">
-                        <Button type="ghost">Click</Button>
-                        <div class="api" slot="content">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>Version</th>
-                                        <th>Update Time</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>0.9.5</td>
-                                        <td>2016-10-26</td>
-                                        <td>Add new components <code>Tooltip</code> and <code>Poptip</code></td>
-                                    </tr>
-                                    <tr>
-                                        <td>0.9.4</td>
-                                        <td>2016-10-25</td>
-                                        <td>Add new components <code>Modal</code></td>
-                                    </tr>
-                                    <tr>
-                                        <td>0.9.2</td>
-                                        <td>2016-09-28</td>
-                                        <td>Add new components <code>Select</code></td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>You can add complex content into Poptip by using content slot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-            </Demo>
-            <Demo title="Confirm Dialog">
-                <div slot="demo">
-                    <Poptip
-                        confirm
-                        title="Are you sure you want to delete this item?"
-                        @on-ok="ok"
-                        @on-cancel="cancel">
-                        <Button>Delete</Button>
-                    </Poptip>
-                    <Poptip
-                        confirm
-                        title="Are you sure delete this task?"
-                        @on-ok="ok"
-                        @on-cancel="cancel"
-                        ok-text="yes"
-                        cancel-text="no">
-                        <Button>Internationalization</Button>
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>Open confirm-dialog mode by setting <code>confirm</code> prop. The confirm dialog can only be activated by clicking. It only shows title's text. The content will be ignored.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Poptip props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>trigger</td>
-                            <td>The trigger. Optional value: <code>hover</code>, <code>click</code>, <code>focus</code>. In confirm mode, only <code>click</code> works.</td>
-                            <td>String</td>
-                            <td>click</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>The title of Poptip.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>The content of Poptip. In confirm mode, it'll be ignored.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>The direction tooltip shows. Optional value: <code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>, supports automatic recognition after 2.12.0</td>
-                            <td>String</td>
-                            <td>top</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>The width of the tooltip. The minimal width allowed is 150px. The maximum width by default in confirm mode is 300px.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>confirm</td>
-                            <td>Enable confirm mode or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>ok-text</td>
-                            <td>Text in OK button. It only works in confirm mode.</td>
-                            <td>String</td>
-                            <td>OK</td>
-                        </tr>
-                        <tr>
-                            <td>cancel-text</td>
-                            <td>Text in Cancel button. It only works in confirm mode.</td>
-                            <td>String</td>
-                            <td>Cancel</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>popper-class</td>
-                            <td>Setting class-name for Poptip, it is useful when using transfer.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>Customize popper.js configuration items. For details, see <a href="https://popper.js.org/popper-documentation.html" target="_blank">popper.js document</a>.</td>
-                            <td>Object</td>
-                            <td>
-                                <i-code lang="js">{{ code.options }}</i-code>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Poptip events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-popper-show</td>
-                            <td>Emit when tooltip displays.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-popper-hide</td>
-                            <td>Emit when tooltip disappears.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>Callback when clicking OK button. It only works in confirm mode.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-cancel</td>
-                            <td>Callback when clicking Cancel button. It only works in confirm mode.</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Poptip slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Main content</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>Title. It'll convert <code>title</code> prop.</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>The content of the tooltip. It'll convert <code>content</code> props. It'll be ignored in confirm mode.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/poptip';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                visible: false
-            }
-        },
-        methods: {
-            close () {
-                this.visible = false;
-            },
-            ok () {
-                this.$Message.info('You click ok');
-            },
-            cancel () {
-                this.$Message.info('You click cancel');
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/poptip.vue b/src/views/components/poptip.vue
deleted file mode 100644
index debdb17..0000000
--- a/src/views/components/poptip.vue
+++ /dev/null
@@ -1,355 +0,0 @@
-<style scoped>
-    .top,.bottom{
-        text-align: center;
-    }
-    .center{
-        width: 300px;
-        margin: 10px auto;
-        overflow: hidden;
-    }
-    .center-left{
-        float: left;
-    }
-    .center-right{
-        float: right;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Poptip 气泡提示</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>Poptip 与 Tooltip 类似，具有很多相同配置，不同点是 Poptip 以卡片的形式承载了更多的内容，比如链接、表格、按钮等。</p>
-            <p>Poptip 还 confirm 确认框，与 Modal 不同的是，它会出现在就近元素，相对轻量。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Poptip trigger="hover" title="提示标题" content="提示内容">
-                        <Button>hover 激活</Button>
-                    </Poptip>
-                    <Poptip title="提示标题" content="提示内容">
-                        <Button>click 激活</Button>
-                    </Poptip>
-                    <Poptip trigger="focus" title="提示标题" content="提示内容">
-                        <Button>focus 激活</Button>
-                    </Poptip>
-                    <Poptip trigger="focus" title="提示标题" content="提示内容">
-                        <i-input placeholder="输入框的 focus"></i-input>
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>支持三种触发方式：鼠标悬停、点击、聚焦。默认是点击。</p>
-                    <p>注意 Poptip 内的文本使用了 <code>white-space: nowrap;</code>，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增加样式 <code>white-space: normal;</code>。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="位置">
-                <div slot="demo">
-                    <div class="top">
-                        <Poptip title="提示标题" content="提示内容" placement="top-start">
-                            <Button>上左</Button>
-                        </Poptip>
-                        <Poptip title="提示标题" content="提示内容" placement="top">
-                            <Button>上边</Button>
-                        </Poptip>
-                        <Poptip title="提示标题" content="提示内容" placement="top-end">
-                            <Button>上右</Button>
-                        </Poptip>
-                    </div>
-                    <div class="center">
-                        <div class="center-left">
-                            <Poptip title="提示标题" content="提示内容" placement="left-start">
-                                <Button>左上</Button>
-                            </Poptip><br><br>
-                            <Poptip title="提示标题" content="提示内容" placement="left">
-                                <Button>左边</Button>
-                            </Poptip><br><br>
-                            <Poptip title="提示标题" content="提示内容" placement="left-end">
-                                <Button>左下</Button>
-                            </Poptip>
-                        </div>
-                        <div class="center-right">
-                            <Poptip title="提示标题" content="提示内容" placement="right-start">
-                                <Button>右上</Button>
-                            </Poptip><br><br>
-                            <Poptip title="提示标题" content="提示内容" placement="right">
-                                <Button>右边</Button>
-                            </Poptip><br><br>
-                            <Poptip title="提示标题" content="提示内容" placement="right-end">
-                                <Button>右下</Button>
-                            </Poptip>
-                        </div>
-                    </div>
-                    <div class="bottom">
-                        <Poptip title="提示标题" content="提示内容" placement="bottom-start">
-                            <Button>下左</Button>
-                        </Poptip>
-                        <Poptip title="提示标题" content="提示内容" placement="bottom">
-                            <Button>下边</Button>
-                        </Poptip>
-                        <Poptip title="提示标题" content="提示内容" placement="bottom-end">
-                            <Button>下右</Button>
-                        </Poptip>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>组件提供了12个不同的方向显示Poptip，具体配置可查看API。。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.placement }}</i-code>
-            </Demo>
-            <Demo title="从浮层内关闭">
-                <div slot="demo">
-                    <Poptip v-model="visible">
-                        <a>click 激活</a>
-                        <div slot="title"><i>自定义标题</i></div>
-                        <div slot="content">
-                            <a @click="close">关闭提示框</a>
-                        </div>
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>通过<code>v-model</code>来控制提示框的显示和隐藏。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.visible }}</i-code>
-            </Demo>
-            <Demo title="嵌套复杂内容">
-                <div slot="demo">
-                    <Poptip placement="right" width="400">
-                        <Button type="ghost">click 激活</Button>
-                        <div class="api" slot="content">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>版本号</th>
-                                        <th>更新时间</th>
-                                        <th>说明</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>0.9.5</td>
-                                        <td>2016-10-26</td>
-                                        <td>新增信息提示组件 <code>Tooltip</code>和<code>Poptip</code></td>
-                                    </tr>
-                                    <tr>
-                                        <td>0.9.4</td>
-                                        <td>2016-10-25</td>
-                                        <td>新增对话框组件 <code>Modal</code></td>
-                                    </tr>
-                                    <tr>
-                                        <td>0.9.2</td>
-                                        <td>2016-09-28</td>
-                                        <td>新增选择器组件 <code>Select</code></td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>通过自定义 slot 来实现复杂的内容。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-            </Demo>
-            <Demo title="确认框">
-                <div slot="demo">
-                    <Poptip
-                        confirm
-                        title="您确认删除这条内容吗？"
-                        @on-ok="ok"
-                        @on-cancel="cancel">
-                        <Button>删除</Button>
-                    </Poptip>
-                    <Poptip
-                        confirm
-                        title="Are you sure delete this task?"
-                        @on-ok="ok"
-                        @on-cancel="cancel"
-                        ok-text="yes"
-                        cancel-text="no">
-                        <Button>国际化</Button>
-                    </Poptip>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>confirm</code>开启确认框模式。确认框只会以 click 的形式激活，并且只会显示 title 的内容，忽略 content。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Poptip props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>trigger</td>
-                            <td>触发方式，可选值为<code>hover</code>（悬停）<code>click</code>（点击）<code>focus</code>（聚焦）,在 confirm 模式下，只有 click 有效</td>
-                            <td>String</td>
-                            <td>click</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>显示的标题</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>显示的正文内容，只在非 confirm 模式下有效</td>
-                            <td>String | Number</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>，2.12.0 版本开始支持自动识别</td>
-                            <td>String</td>
-                            <td>top</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>宽度，最小宽度为 150px，在 confirm 模式下，默认最大宽度为 300px</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>confirm</td>
-                            <td>是否开启对话框模式</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>ok-text</td>
-                            <td>确定按钮的文字，只在 confirm 模式下有效</td>
-                            <td>String</td>
-                            <td>确定</td>
-                        </tr>
-                        <tr>
-                            <td>cancel-text</td>
-                            <td>取消按钮的文字，只在 confirm 模式下有效</td>
-                            <td>String</td>
-                            <td>取消</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>popper-class</td>
-                            <td>给 Poptip 设置 class-name，在使用 transfer 时会很有用</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>自定义 popper.js 的配置项，具体配置见 <a href="https://popper.js.org/popper-documentation.html" target="_blank">popper.js 文档</a></td>
-                            <td>Object</td>
-                            <td>
-                                <i-code lang="js">{{ code.options }}</i-code>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Poptip events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-popper-show</td>
-                            <td>在提示框显示时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-popper-hide</td>
-                            <td>在提示框消失时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>点击确定的回调，只在 confirm 模式下有效</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-cancel</td>
-                            <td>点击取消的回调，只在 confirm 模式下有效</td>
-                            <td>无</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Poptip slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>主体内容</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>提示框标题，定义此 slot 时，会覆盖 props <code>title</code></td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>提示框内容，定义此 slot 时，会覆盖 props <code>content</code>，只在非 confirm 模式下有效</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/poptip';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                visible: false
-            }
-        },
-        methods: {
-            close () {
-                this.visible = false;
-            },
-            ok () {
-                this.$Message.info('点击了确定');
-            },
-            cancel () {
-                this.$Message.info('点击了取消');
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/progress-en.vue b/src/views/components/progress-en.vue
deleted file mode 100644
index 22c8769..0000000
--- a/src/views/components/progress-en.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Progress</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Show current progres status of the opreation or task. For example, uploading file.</p>
-            <Alert show-icon style="margin-top: 16px">Attention：Use <code>i-progress</code> if not under template/render mode.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Progress :percent="25"></Progress>
-                    <Progress :percent="45" status="active"></Progress>
-                    <Progress :percent="65" status="wrong"></Progress>
-                    <Progress :percent="100"></Progress>
-                    <Progress :percent="25" hide-info></Progress>
-                </div>
-                <div slot="desc">
-                    <p>Progress in different status. When percent reaches 100, the status will be automatically set to success.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Vertical">
-                <div slot="demo">
-                    <div style="height: 100px;">
-                        <Progress vertical :percent="25"></Progress>
-                        <Progress vertical :percent="45" status="active"></Progress>
-                        <Progress vertical :percent="65" status="wrong"></Progress>
-                        <Progress vertical :percent="100"></Progress>
-                        <Progress vertical :percent="25" hide-info></Progress>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>Set the property <code>vertical</code> will be displayed in the vertical direction.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-            <Demo title="Use with External Component">
-                <div slot="demo">
-                    <Progress :percent="percent"></Progress>
-                    <ButtonGroup size="large">
-                        <Button icon="ios-plus-empty" @click="add"></Button>
-                        <Button icon="ios-minus-empty" @click="minus"></Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>You can realise a dynamic effect by combining data and controlling logic.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.percent }}</i-code>
-            </Demo>
-            <Demo title="Custom Style">
-                <div slot="demo">
-                    <Progress :percent="25" :stroke-width="5"></Progress>
-                    <Progress :percent="100">
-                        <Icon type="checkmark-circled"></Icon>
-                        <span>成功</span>
-                    </Progress>
-                </div>
-                <div slot="desc">
-                    <p>Change Progress's style by customize <code>slot</code> and <code>stroke-width</code> prop.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Progress props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>percent</td>
-                            <td>Percentage.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>status</td>
-                            <td>Progress's status. Optional value: <code>normal</code>, <code>active</code>, <code>wrong</code>, <code>success</code></td>
-                            <td>String</td>
-                            <td>normal</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-width</td>
-                            <td>The width of the progress bar. Unit: px</td>
-                            <td>Number</td>
-                            <td>10</td>
-                        </tr>
-                        <tr>
-                            <td>hide-info</td>
-                            <td>Hide value/status icon.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>vertical</td>
-                            <td>Whether to display in the vertical direction.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Progress slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Customize how to show Progress's status.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/progress';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                percent: 0
-            }
-        },
-        methods: {
-            add () {
-                if (this.percent >= 100) {
-                    return false;
-                }
-                this.percent += 10;
-            },
-            minus () {
-                if (this.percent <= 0) {
-                    return false;
-                }
-                this.percent -= 10;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/progress.vue b/src/views/components/progress.vue
deleted file mode 100644
index 95f5e8c..0000000
--- a/src/views/components/progress.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Progress 进度条</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>展示操作或任务的当前进度，比如上传文件。</p>
-            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-progress</code>。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基本用法">
-                <div slot="demo">
-                    <Progress :percent="25"></Progress>
-                    <Progress :percent="45" status="active"></Progress>
-                    <Progress :percent="65" status="wrong"></Progress>
-                    <Progress :percent="100"></Progress>
-                    <Progress :percent="25" hide-info></Progress>
-                </div>
-                <div slot="desc">
-                    <p>处在不同状态下的进度条，当 percent 为 100 时，自动将状态置为 success。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="垂直方向">
-                <div slot="demo">
-                    <div style="height: 100px;">
-                        <Progress vertical :percent="25"></Progress>
-                        <Progress vertical :percent="45" status="active"></Progress>
-                        <Progress vertical :percent="65" status="wrong"></Progress>
-                        <Progress vertical :percent="100"></Progress>
-                        <Progress vertical :percent="25" hide-info></Progress>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>vertical</code> 将以垂直方向显示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-            <Demo title="配合外部组件使用">
-                <div slot="demo">
-                    <Progress :percent="percent"></Progress>
-                    <ButtonGroup size="large">
-                        <Button icon="ios-plus-empty" @click="add"></Button>
-                        <Button icon="ios-minus-empty" @click="minus"></Button>
-                    </ButtonGroup>
-                </div>
-                <div slot="desc">
-                    <p>通过数据的联动和逻辑控制，实现动态效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.percent }}</i-code>
-            </Demo>
-            <Demo title="自定义更多样式">
-                <div slot="demo">
-                    <Progress :percent="25" :stroke-width="5"></Progress>
-                    <Progress :percent="100">
-                        <Icon type="checkmark-circled"></Icon>
-                        <span>成功</span>
-                    </Progress>
-                </div>
-                <div slot="desc">
-                    <p>通过自定义<code>slot</code>和属性<code>stroke-width</code>改变进度条效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Progress props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>percent</td>
-                            <td>百分比</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>status</td>
-                            <td>状态，可选值为<code>normal</code>、<code>active</code>、<code>wrong</code>、<code>success</code></td>
-                            <td>String</td>
-                            <td>normal</td>
-                        </tr>
-                        <tr>
-                            <td>stroke-width</td>
-                            <td>进度条的线宽，单位 px</td>
-                            <td>Number</td>
-                            <td>10</td>
-                        </tr>
-                        <tr>
-                            <td>hide-info</td>
-                            <td>隐藏数值或状态图标</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>vertical</td>
-                            <td>是否在垂直方向显示</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Progress slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>自定义显示状态内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/progress';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                percent: 0
-            }
-        },
-        methods: {
-            add () {
-                if (this.percent >= 100) {
-                    return false;
-                }
-                this.percent += 10;
-            },
-            minus () {
-                if (this.percent <= 0) {
-                    return false;
-                }
-                this.percent -= 10;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/radio-en.vue b/src/views/components/radio-en.vue
deleted file mode 100644
index 6ef11fb..0000000
--- a/src/views/components/radio-en.vue
+++ /dev/null
@@ -1,312 +0,0 @@
-<style scoped>
-    .ivu-icon{
-        font-size: 14px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Radio</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Basic Component - Radio. It's mainly used to display a set of single choices, or used to display a selection switch.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Standalone Usage">
-                <div slot="demo">
-                    <Radio v-model="single">Radio</Radio>
-                    <p class="demo-data">{{ single }}</p>
-                </div>
-                <div slot="desc">
-                    <p>Use v-model to enable a two-way binding.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.single }}</i-code>
-            </Demo>
-            <Demo title="Combination">
-                <div slot="demo">
-                    <RadioGroup v-model="phone">
-                        <Radio label="apple">
-                            <Icon type="social-apple"></Icon>
-                            <span>Apple</span>
-                        </Radio>
-                        <Radio label="android">
-                            <Icon type="social-android"></Icon>
-                            <span>Android</span>
-                        </Radio>
-                        <Radio label="windows">
-                            <Icon type="social-windows"></Icon>
-                            <span>Windows</span>
-                        </Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ phone }}</p>
-                    <RadioGroup v-model="animal">
-                        <Radio label="金斑蝶"></Radio>
-                        <Radio label="爪哇犀牛"></Radio>
-                        <Radio label="印度黑羚"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ animal }}</p>
-                </div>
-                <div slot="desc">
-                    <p>Use <code>RadioGroup</code> to combine a set of exclusive selection. When using <code>RadioGroup</code>, you shall set <code>label</code> to <code>Radio</code> to enable an auto judgement. The content of each Radio can be customized. If not set, it'll use label's value by default.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="Disabled">
-                <div slot="demo">
-                    <Radio v-model="disabledSingle" disabled>Radio</Radio>
-                    <p class="demo-data">{{ disabledSingle }}</p>
-                    <RadioGroup v-model="disabledGroup">
-                        <Radio label="金斑蝶" disabled></Radio>
-                        <Radio label="爪哇犀牛"></Radio>
-                        <Radio label="印度黑羚"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ disabledGroup }}</p>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>disabled</code> prop to disable a Radio.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Verticality">
-                <div slot="demo">
-                    <RadioGroup v-model="vertical" vertical>
-                        <Radio label="apple">
-                            <Icon type="social-apple"></Icon>
-                            <span>Apple</span>
-                        </Radio>
-                        <Radio label="android">
-                            <Icon type="social-android"></Icon>
-                            <span>Android</span>
-                        </Radio>
-                        <Radio label="windows">
-                            <Icon type="social-windows"></Icon>
-                            <span>Windows</span>
-                        </Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>vertical</code> prop can let Radio-gruop be displayed vertically. It will not work in button type.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-            <Demo title="Button Type">
-                <div slot="demo">
-                    <RadioGroup v-model="button1" type="button">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button1 }}</p>
-                    <RadioGroup v-model="button2" type="button">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海" disabled></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button2 }}</p>
-                    <RadioGroup v-model="button3" type="button">
-                        <Radio label="北京" disabled></Radio>
-                        <Radio label="上海" disabled></Radio>
-                        <Radio label="深圳" disabled></Radio>
-                        <Radio label="杭州" disabled></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button3 }}</p>
-                </div>
-                <div slot="desc">
-                    <p>When using RadioGroup, you can set <code>type</code> to button to apply a button type.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.button }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <RadioGroup v-model="button4" type="button" size="large">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button4 }}</p>
-                    <RadioGroup v-model="button5" type="button">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button5 }}</p>
-                    <RadioGroup v-model="button6" type="button" size="small">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button6 }}</p>
-                </div>
-                <div slot="desc">
-                    <p>You can adjust the size of the button by setting <code>size</code> to <code>large</code> or <code>small</code>. The default is medium.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Radio props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Only works when Radio is used alone. Use <code>v-model</code> to enable a two-way binding.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>label </td>
-                            <td>Only works when Radios are combined by RadioGroup. Assign selected Radio's value, and it'll automatically judge which is selected.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Disable current option or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of Radio. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>true-value</td>
-                            <td>Value of the checkbox if it's checked.</td>
-                            <td>String, Number, Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>false-value</td>
-                            <td>Value of the checkbox if it's not checked.</td>
-                            <td>String, Number, Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Radio events" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Event Name</th>
-                        <th>Description</th>
-                        <th>Return Value</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>on-change</td>
-                        <td>Emit when Radio's status is changed. Current status is returned. It won't be emitted if you change the state by modifying external data.</td>
-                        <td>...</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <Anchor title="RadioGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Assign which is selected. Use <code>v-model</code> to enable a two-way binding.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>Optional value: button or leave empty. If set to button, button type is applied.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of the RadioGroup. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>vertical</td>
-                            <td>Arrange vertically or not. It'll be ignored in button type.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="RadioGroup events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emit when selection's status is changed. Return current selected option. It won't be emitted when you change the status by modifying external data.</td>
-                            <td>...</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/radio';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                single: false,
-                phone: 'apple',
-                animal: '爪哇犀牛',
-                disabledSingle: true,
-                disabledGroup: '爪哇犀牛',
-                vertical: 'apple',
-                button1: '北京',
-                button2: '北京',
-                button3: '北京',
-                button4: '北京',
-                button5: '北京',
-                button6: '北京'
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/radio.vue b/src/views/components/radio.vue
deleted file mode 100644
index 0d15772..0000000
--- a/src/views/components/radio.vue
+++ /dev/null
@@ -1,312 +0,0 @@
-<style scoped>
-    .ivu-icon{
-        font-size: 14px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Radio 单选框</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>基本组件-单选框。主要用于一组可选项单项选择，或者单独用于切换到选中状态。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="单独使用">
-                <div slot="demo">
-                    <Radio v-model="single">Radio</Radio>
-                    <p class="demo-data">{{ single }}</p>
-                </div>
-                <div slot="desc">
-                    <p>使用 v-model 可以双向绑定数据。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.single }}</i-code>
-            </Demo>
-            <Demo title="组合使用">
-                <div slot="demo">
-                    <RadioGroup v-model="phone">
-                        <Radio label="apple">
-                            <Icon type="social-apple"></Icon>
-                            <span>Apple</span>
-                        </Radio>
-                        <Radio label="android">
-                            <Icon type="social-android"></Icon>
-                            <span>Android</span>
-                        </Radio>
-                        <Radio label="windows">
-                            <Icon type="social-windows"></Icon>
-                            <span>Windows</span>
-                        </Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ phone }}</p>
-                    <RadioGroup v-model="animal">
-                        <Radio label="金斑蝶"></Radio>
-                        <Radio label="爪哇犀牛"></Radio>
-                        <Radio label="印度黑羚"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ animal }}</p>
-                </div>
-                <div slot="desc">
-                    <p>使用<code>RadioGroup</code>实现一组互斥的选项组。在组合使用时，<code>Radio</code> 使用 <code>label</code> 来自动判断。每个 Radio 的内容可以自定义，如不填写则默认使用 label 的值。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="不可用">
-                <div slot="demo">
-                    <Radio v-model="disabledSingle" disabled>Radio</Radio>
-                    <p class="demo-data">{{ disabledSingle }}</p>
-                    <RadioGroup v-model="disabledGroup">
-                        <Radio label="金斑蝶" disabled></Radio>
-                        <Radio label="爪哇犀牛"></Radio>
-                        <Radio label="印度黑羚"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ disabledGroup }}</p>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>disabled</code>属性来禁用单选框。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="垂直">
-                <div slot="demo">
-                    <RadioGroup v-model="vertical" vertical>
-                        <Radio label="apple">
-                            <Icon type="social-apple"></Icon>
-                            <span>Apple</span>
-                        </Radio>
-                        <Radio label="android">
-                            <Icon type="social-android"></Icon>
-                            <span>Android</span>
-                        </Radio>
-                        <Radio label="windows">
-                            <Icon type="social-windows"></Icon>
-                            <span>Windows</span>
-                        </Radio>
-                    </RadioGroup>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>vertical</code> 可以垂直显示，按钮样式下无效。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
-            </Demo>
-            <Demo title="按钮样式">
-                <div slot="demo">
-                    <RadioGroup v-model="button1" type="button">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button1 }}</p>
-                    <RadioGroup v-model="button2" type="button">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海" disabled></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button2 }}</p>
-                    <RadioGroup v-model="button3" type="button">
-                        <Radio label="北京" disabled></Radio>
-                        <Radio label="上海" disabled></Radio>
-                        <Radio label="深圳" disabled></Radio>
-                        <Radio label="杭州" disabled></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button3 }}</p>
-                </div>
-                <div slot="desc">
-                    <p>组合使用时可以设置属性<code>type</code>为 button 来应用按钮的样式。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.button }}</i-code>
-            </Demo>
-            <Demo title="尺寸">
-                <div slot="demo">
-                    <RadioGroup v-model="button4" type="button" size="large">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button4 }}</p>
-                    <RadioGroup v-model="button5" type="button">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button5 }}</p>
-                    <RadioGroup v-model="button6" type="button" size="small">
-                        <Radio label="北京"></Radio>
-                        <Radio label="上海"></Radio>
-                        <Radio label="深圳"></Radio>
-                        <Radio label="杭州"></Radio>
-                    </RadioGroup>
-                    <p class="demo-data">{{ button6 }}</p>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>size</code>为<code>large</code>或<code>small</code>将按钮样式设置为大和小尺寸，不设置为默认(中)尺寸。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Radio props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>只在单独使用时有效。可以使用 <code>v-model</code> 双向绑定数据</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>label </td>
-                            <td>只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用当前项</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>单选框的尺寸，可选值为 <code>large</code>、<code>small</code>、<code>default</code> 或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>true-value</td>
-                            <td>选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
-                            <td>String, Number, Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>false-value</td>
-                            <td>没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
-                            <td>String, Number, Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Radio events" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>事件名</th>
-                        <th>说明</th>
-                        <th>返回值</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>on-change</td>
-                        <td>在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发</td>
-                        <td>...</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <Anchor title="RadioGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>指定当前选中的项目数据。可以使用 <code>v-model</code> 双向绑定数据</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>可选值为 button 或不填，为 button 时使用按钮样式</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>vertical</td>
-                            <td>是否垂直排列，按钮样式下无效</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="RadioGroup events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>在选项状态发生改变时触发，返回当前选中的项。通过修改外部的数据改变时不会触发</td>
-                            <td>...</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/radio';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                single: false,
-                phone: 'apple',
-                animal: '爪哇犀牛',
-                disabledSingle: true,
-                disabledGroup: '爪哇犀牛',
-                vertical: 'apple',
-                button1: '北京',
-                button2: '北京',
-                button3: '北京',
-                button4: '北京',
-                button5: '北京',
-                button6: '北京'
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/rate-en.vue b/src/views/components/rate-en.vue
deleted file mode 100644
index b67cf9d..0000000
--- a/src/views/components/rate-en.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Rate</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>A quick rating operation on something or show evaluation.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Rate v-model="value"></Rate>
-                </div>
-                <div slot="desc">
-                    <p>The simplest usage.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Half star">
-                <div slot="demo">
-                    <Rate allow-half v-model="valueHalf"></Rate>
-                </div>
-                <div slot="desc">
-                    <p>Set the attribute <code>allow-half</code> to select the half star.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.half }}</i-code>
-            </Demo>
-            <Demo title="Show copywriting">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            <Rate show-text v-model="valueText"></Rate>
-                        </Col>
-                        <Col span="12">
-                            <Rate show-text allow-half v-model="valueCustomText">
-                                <span style="color: #f5a623">{{ valueCustomText }}</span>
-                            </Rate>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Set the property <code>show-text</code> to display the prompt text.</p>
-                    <p>The prompt can also be customized via the slot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.text }}</i-code>
-            </Demo>
-            <Demo title="Read only">
-                <div slot="demo">
-                    <Rate disabled v-model="valueDisabled"></Rate>
-                </div>
-                <div slot="desc">
-                    <p>Set the property <code>disabled</code> to open read-only mode, unable to interact.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Rate props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>count</td>
-                            <td>Star count.</td>
-                            <td>Number</td>
-                            <td>5</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>Current value. Use v-model to enable a two-way binding.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>allow-half</td>
-                            <td>Whether to allow semi selection.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Read only, unable to interact.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-text</td>
-                            <td>Whether to display a prompt text.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>Whether to cancel the selection.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Rate events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emitted when rate changing.</td>
-                            <td>value</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/rate';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value: 0,
-                valueHalf: 2.5,
-                valueText: 3,
-                valueCustomText: 3.8,
-                valueDisabled: 2
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/components/rate.vue b/src/views/components/rate.vue
deleted file mode 100644
index d9f0883..0000000
--- a/src/views/components/rate.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Rate 评分</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>对事物进行快速的评级操作，或对评价进行展示。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Rate v-model="value"></Rate>
-                </div>
-                <div slot="desc">
-                    <p>基本用法。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="半星">
-                <div slot="demo">
-                    <Rate allow-half v-model="valueHalf"></Rate>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>allow-half</code> 可以选中半星。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.half }}</i-code>
-            </Demo>
-            <Demo title="显示提示">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12">
-                            <Rate show-text v-model="valueText"></Rate>
-                        </Col>
-                        <Col span="12">
-                            <Rate show-text allow-half v-model="valueCustomText">
-                                <span style="color: #f5a623">{{ valueCustomText }}</span>
-                            </Rate>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>show-text</code> 可以显示提示文字。</p>
-                    <p>提示内容也可以通过 slot 自定义。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.text }}</i-code>
-            </Demo>
-            <Demo title="只读">
-                <div slot="demo">
-                    <Rate disabled v-model="valueDisabled"></Rate>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>disabled</code> 开启只读模式，无法交互。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Rate props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>count</td>
-                            <td>star 总数</td>
-                            <td>Number</td>
-                            <td>5</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>当前 star 数，可以使用 v-model 双向绑定数据</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>allow-half</td>
-                            <td>是否允许半选</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否只读，无法进行交互</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-text</td>
-                            <td>是否显示提示文字</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>是否可以取消选择</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Rate events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>评分改变时触发</td>
-                            <td>value</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/rate';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value: 0,
-                valueHalf: 2.5,
-                valueText: 3,
-                valueCustomText: 3.8,
-                valueDisabled: 2
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/components/scroll-en.vue b/src/views/components/scroll-en.vue
deleted file mode 100644
index fb903ff..0000000
--- a/src/views/components/scroll-en.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<style>
-
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Scroll</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Used for load more data when scroll to bottom or top.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Reach Bottom">
-                <div slot="demo">
-                    <Scroll :on-reach-bottom="handleReachBottom">
-                        <Card dis-hover v-for="(item, index) in list1" :key="index" style="margin: 32px 0">
-                            Content {{ item }}
-                        </Card>
-                    </Scroll>
-                </div>
-                <div slot="desc">
-                    <p>Load more data when scroll the bottom.</p>
-                    <p>Need to return a Promise object.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.bottom }}</i-code>
-            </Demo>
-            <Demo title="Reach Top">
-                <div slot="demo">
-                    <Scroll :on-reach-top="handleReachTop">
-                        <Card dis-hover v-for="(item, index) in list2" :key="index" style="margin: 32px 0">
-                            Content {{ item }}
-                        </Card>
-                    </Scroll>
-                </div>
-                <div slot="desc">
-                    <p>Load more data when scroll the top.</p>
-                    <p>Need to return a Promise object.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.top }}</i-code>
-            </Demo>
-
-            <Demo title="Reach Edge">
-                <div slot="demo">
-                    <Scroll :on-reach-edge="handleReachEdge">
-                        <Card dis-hover v-for="(item, index) in list3" :key="index" style="margin: 32px 0">
-                            Content {{ item }}
-                        </Card>
-                    </Scroll>
-                </div>
-                <div slot="desc">
-                    <p>Load more data when scroll the bottom or top.</p>
-                    <p>Need to return a Promise object.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.edge }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Scroll props" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Property</th>
-                        <th>Description</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>height</td>
-                        <td>The height of scroll container.</td>
-                        <td>String | Number</td>
-                        <td>300</td>
-                    </tr>
-                    <tr>
-                        <td>loading-text</td>
-                        <td>The text of loading.</td>
-                        <td>String</td>
-                        <td>Loading</td>
-                    </tr>
-                    <tr>
-                        <td>on-reach-top</td>
-                        <td>Call when scroll to the top, need to return a Promise object.</td>
-                        <td>Function</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>on-reach-bottom</td>
-                        <td>Call when scroll to the bottom, need to return a Promise object.</td>
-                        <td>Function</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>on-reach-edge</td>
-                        <td>Call when scroll to the top or bottom, need to return a Promise object.</td>
-                        <td>Function</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>distance-to-edge</td>
-                        <td>Distance from edge to trigger the callback. If negative, callback will fire before reaching edge. Positive values should be under 24.</td>
-                        <td>Number | Array</td>
-                        <td>[20, 20]</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/scroll';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                list1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-                list2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-                list3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-            }
-        },
-        methods: {
-            handleReachBottom () {
-                return new Promise(resolve => {
-                    setTimeout(() => {
-                        const last = this.list1[this.list1.length - 1];
-                        for (let i = 1; i < 11; i++) {
-                            this.list1.push(last + i);
-                        }
-                        resolve();
-                    }, 2000);
-                });
-            },
-            handleReachTop () {
-                return new Promise(resolve => {
-                    setTimeout(() => {
-                        const first = this.list2[0];
-                        for (let i = 1; i < 11; i++) {
-                            this.list2.unshift(first - i);
-                        }
-                        resolve();
-                    }, 2000);
-                });
-            },
-            handleReachEdge (dir) {
-                return new Promise(resolve => {
-                    setTimeout(() => {
-                        if (dir > 0) {
-                            const first = this.list3[0];
-                            for (let i = 1; i < 11; i++) {
-                                this.list3.unshift(first - i);
-                            }
-                        } else {
-                            const last = this.list3[this.list3.length - 1];
-                            for (let i = 1; i < 11; i++) {
-                                this.list3.push(last + i);
-                            }
-                        }
-                        resolve();
-                    }, 2000);
-                });
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/scroll.vue b/src/views/components/scroll.vue
deleted file mode 100644
index 4141902..0000000
--- a/src/views/components/scroll.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<style>
-
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Scroll 无限滚动</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>常用于滚动至底部时，触发加载更多数据。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="底部触发">
-                <div slot="demo">
-                    <Scroll :on-reach-bottom="handleReachBottom">
-                        <Card dis-hover v-for="(item, index) in list1" :key="index" style="margin: 32px 0">
-                            Content {{ item }}
-                        </Card>
-                    </Scroll>
-                </div>
-                <div slot="desc">
-                    <p>当滚动至底部时，触发加载更多。</p>
-                    <p>需返回 Promise。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.bottom }}</i-code>
-            </Demo>
-            <Demo title="顶部触发">
-                <div slot="demo">
-                    <Scroll :on-reach-top="handleReachTop">
-                        <Card dis-hover v-for="(item, index) in list2" :key="index" style="margin: 32px 0">
-                            Content {{ item }}
-                        </Card>
-                    </Scroll>
-                </div>
-                <div slot="desc">
-                    <p>当滚动至顶部时，触发加载更多。</p>
-                    <p>需返回 Promise。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.top }}</i-code>
-            </Demo>
-
-            <Demo title="边缘触发">
-                <div slot="demo">
-                    <Scroll :on-reach-edge="handleReachEdge">
-                        <Card dis-hover v-for="(item, index) in list3" :key="index" style="margin: 32px 0">
-                            Content {{ item }}
-                        </Card>
-                    </Scroll>
-                </div>
-                <div slot="desc">
-                    <p>当滚动至底部或顶部时，触发加载更多。</p>
-                    <p>需返回 Promise。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.edge }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Scroll props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>height</td>
-                            <td>滚动区域的高度，单位像素</td>
-                            <td>String | Number</td>
-                            <td>300</td>
-                        </tr>
-                        <tr>
-                            <td>loading-text</td>
-                            <td>加载中的文案</td>
-                            <td>String</td>
-                            <td>加载中</td>
-                        </tr>
-                        <tr>
-                            <td>on-reach-top</td>
-                            <td>滚动至顶部时触发，需返回 Promise</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-reach-bottom</td>
-                            <td>滚动至底部时触发，需返回 Promise</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-reach-edge</td>
-                            <td>滚动至顶部或底部时触发，需返回 Promise</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>distance-to-edge</td>
-                            <td>从边缘到触发回调的距离。如果是负的，回调将在到达边缘之前触发。值最好在 24 以下。</td>
-                            <td>Number | Array</td>
-                            <td>[20, 20]</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/scroll';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                list1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-                list2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-                list3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-            }
-        },
-        methods: {
-            handleReachBottom () {
-                return new Promise(resolve => {
-                    setTimeout(() => {
-                        const last = this.list1[this.list1.length - 1];
-                        for (let i = 1; i < 11; i++) {
-                            this.list1.push(last + i);
-                        }
-                        resolve();
-                    }, 2000);
-                });
-            },
-            handleReachTop () {
-                return new Promise(resolve => {
-                    setTimeout(() => {
-                        const first = this.list2[0];
-                        for (let i = 1; i < 11; i++) {
-                            this.list2.unshift(first - i);
-                        }
-                        resolve();
-                    }, 2000);
-                });
-            },
-            handleReachEdge (dir) {
-                return new Promise(resolve => {
-                    setTimeout(() => {
-                        if (dir > 0) {
-                            const first = this.list3[0];
-                            for (let i = 1; i < 11; i++) {
-                                this.list3.unshift(first - i);
-                            }
-                        } else {
-                            const last = this.list3[this.list3.length - 1];
-                            for (let i = 1; i < 11; i++) {
-                                this.list3.push(last + i);
-                            }
-                        }
-                        resolve();
-                    }, 2000);
-                });
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/select-en.vue b/src/views/components/select-en.vue
deleted file mode 100644
index bbb0056..0000000
--- a/src/views/components/select-en.vue
+++ /dev/null
@@ -1,545 +0,0 @@
-<style lang="less">
-    .ivu-article .ivu-select li{
-        margin-bottom: 0;
-    }
-    .ivu-article .ivu-select ul{
-        padding-left: 0 !important;
-        list-style-type: none;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Select</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>A dropdown select , alternative to the native select component.</p>
-            <p>Select supports single, multiple, search and keyboard.</p>
-            <Alert show-icon style="margin-top: 16px">Notice: If not template/render mode, you need to use<code>i-select</code>, <code>i-option</code>.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Select v-model="model1" style="width:200px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <span class="demo-data">{{ model1 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>Basic usage. You can use v-model to enable two-way data bindings.</p>
-                    <p>In the single select, value only accept String and Number type.In the multiple select, value only accept Array type.Select Component will return selected data from <code>Option</code>'s <code>value</code> automately.</p>
-                    <p>You can add style css for <code>Select</code>，such as width.</p>
-                    <p>After expanding select, you can select up and down with the <code>Up</code>and<code>Down</code> key, Press<code>Enter</code>to confirm，press<code>Esc</code>to collapse.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <Select v-model="model2" size="small" style="width:100px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <Select v-model="model3" style="width:100px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <Select v-model="model4" size="large" style="width:100px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                </div>
-                <div slot="desc">
-                    <p>There are three size of select: large, medium(default), small.</p>
-                    <p>Set<code>size</code>property to <code>large</code>or<code>small</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="Disable">
-                <div slot="demo">
-                    <Select v-model="model5" disabled style="width:200px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <Select v-model="model6" style="width:200px">
-                        <Option value="beijing">New York</Option>
-                        <Option value="shanghai" disabled>London</Option>
-                        <Option value="shenzhen">Sydney</Option>
-                    </Select>
-                </div>
-                <div slot="desc">
-                    <p>Add <code>disabled</code> property to <code>Select</code> can disable the select.</p>
-                    <p>Add <code>disabled</code> property to <code>Option</code> can disable that option.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="clearable">
-                <div slot="demo">
-                    <Select v-model="model8" clearable style="width:200px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <span class="demo-data">{{ model8 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>Add <code>clearable</code> property can clear the selected option，which only used for single select.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.clearable }}</i-code>
-            </Demo>
-            <Demo title="Group">
-                <div slot="demo">
-                    <Select v-model="model7" style="width:200px">
-                        <OptionGroup label="Hot Cities">
-                            <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                        </OptionGroup>
-                        <OptionGroup label="Other Cities">
-                            <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                        </OptionGroup>
-                    </Select>
-                    <span class="demo-data">{{ model7 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>Using <code>OptionGroup</code> component can group the options.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="Customize Template">
-                <div slot="demo">
-                    <Select v-model="model9" style="width:200px">
-                        <Option value="New York" label="New York">
-                            <span>New York</span>
-                            <span style="float:right;color:#ccc">America</span>
-                        </Option>
-                        <Option value="London" label="London">
-                            <span>London</span>
-                            <span style="float:right;color:#ccc">U.K.</span>
-                        </Option>
-                        <Option value="Sydney" label="Sydney">
-                            <span>Sydney</span>
-                            <span style="float:right;color:#ccc">Australian</span>
-                        </Option>
-                    </Select>
-                    <span class="demo-data">{{ model9 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>Customize the option content. When using <code>label</code> property in <code>Option</code>, the option will show the label preferentially. Otherwise the selected content will be same with the customise content and that is not what we want.</p>
-                    <p>The logic of showing the option content：show slot content firstly.If there is no slot, it will show the content of <code>label</code>. If there is no label property, it will show the <code>value</code></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.label }}</i-code>
-            </Demo>
-            <Demo title="Multiple">
-                <div slot="demo">
-                    <p class="demo-data">{{ model10 }}</p>
-                    <Select v-model="model10" multiple style="width:260px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                </div>
-                <div slot="desc">
-                    <p>Add <code>multiple</code> property can support multiple select. In the multiple mode model accept an Array and return an Array.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.multiple }}</i-code>
-            </Demo>
-            <Demo title="Searchable">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12" style="padding-right:10px">
-                            <Select v-model="model11" filterable>
-                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                            </Select>
-                        </Col>
-                        <Col span="12">
-                            <Select v-model="model12" filterable multiple>
-                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                            </Select>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Add <code>filterable</code> property can set search mode.Single and Multiple Mode both support search. When using multiple mode to search, using <code>Delete</code> key can delete the last option.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.filterable }}</i-code>
-            </Demo>
-            <Demo title="Remote Search">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12" style="padding-right:10px">
-                            <Select
-                                v-model="model13"
-                                filterable
-                                remote
-                                :remote-method="remoteMethod1"
-                                :loading="loading1">
-                                <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
-                            </Select>
-                        </Col>
-                        <Col span="12">
-                        <Select
-                            v-model="model14"
-                            multiple
-                            filterable
-                            remote
-                            :remote-method="remoteMethod2"
-                            :loading="loading2">
-                            <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
-                        </Select>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Remote search need set <code>filterable</code>, <code>remote</code>, <code>remote-method</code>, <code>loading</code> four props, which loading is to show searching status and remote-method is the methods of searching remotely.</p>
-                    <p>Notice：Option need to set key.</p>
-                    <p>Set the <code>label</code> attribute to set the initial display value.</p>
-                    <p>The example is America state, try to input some.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.remote }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Select props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>The value of the selected item. Use v-model to enable a two-way binding. It only accepts String or Number in single-choice mode. And it only accepts Array in mutli-choices mode.</td>
-                            <td>String | Number | Array</td>
-                            <td>empty</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>set select to support multiple</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>set select to disable</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>set select to clear option where used in single mode</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>filterable</td>
-                            <td>set select to support filter</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>remote</td>
-                            <td>set select to support remote data</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>remote-method</td>
-                            <td>the method of getting remote data</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>set select to remote search data loading state.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>loading-text</td>
-                            <td>the loading text tip for remote searching.</td>
-                            <td>String</td>
-                            <td>loading</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>use for init in the remote mode, you should set it because  it can't get the option label by the value.</td>
-                            <td>String | Number | Array</td>
-                            <td>empty</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of select. The value could be <code>large</code>, <code>small</code>, <code>default</code>or none.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>the text for placeholder</td>
-                            <td>String</td>
-                            <td>select</td>
-                        </tr>
-                        <tr>
-                            <td>not-found-text</td>
-                            <td>The context to show when the select is null.</td>
-                            <td>String</td>
-                            <td>Nothing matched.</td>
-                        </tr>
-                        <tr>
-                            <td>label-in-value</td>
-                            <td>set select return value what include label and value, which default return value.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>The direction of pop-ups. The value could be <code>bottom</code> or <code>top</code>, supports automatic recognition after 2.12.0</td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>Set the <code>id</code> for the input element, more info can be found in Form.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Select events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emitted when selected <code>Option</code>change.It will return value. See the label-in-value property if need return label</td>
-                            <td>The current selected item.</td>
-                        </tr>
-                        <tr>
-                            <td>on-query-change</td>
-                            <td>Emitted when query word is changed.</td>
-                            <td>query</td>
-                        </tr>
-                        <tr>
-                            <td>on-clear</td>
-                            <td>Emitted when click clear button.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>Emitted when dropdown show or hide.</td>
-                            <td>true / false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Select methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Method Name</th>
-                            <th>Description</th>
-                            <th>Arguments</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>setQuery</td>
-                            <td>It will set search key and clear when the key is null, only when <code>filterable="true"</code>.</td>
-                            <td>query</td>
-                        </tr>
-                        <tr>
-                            <td>clearSingleSelect</td>
-                            <td>It will clear single select when <code>clearable="true"</code></td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Option props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>the option value, filter by the property, required</td>
-                            <td>String | Number</td>
-                            <td>empty</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>The content of the option, read slot default. If not have slot, it will show the label. If not have label, show the value.Mostly just write slot, but for cumtomized option, this is useful.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>set to disable the option.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="OptionGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>Group Name</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/select';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                cityList: [
-                    {
-                        value: 'New York',
-                        label: 'New York'
-                    },
-                    {
-                        value: 'London',
-                        label: 'London'
-                    },
-                    {
-                        value: 'Sydney',
-                        label: 'Sydney'
-                    },
-                    {
-                        value: 'Ottawa',
-                        label: 'Ottawa'
-                    },
-                    {
-                        value: 'Paris',
-                        label: 'Paris'
-                    },
-                    {
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                cityList1: [
-                    {
-                        value: 'New York',
-                        label: 'New York'
-                    },
-                    {
-                        value: 'London',
-                        label: 'London'
-                    },
-                    {
-                        value: 'Sydney',
-                        label: 'Sydney'
-                    }
-                ],
-                cityList2: [
-                    {
-                        value: 'Ottawa',
-                        label: 'Ottawa'
-                    },
-                    {
-                        value: 'Paris',
-                        label: 'Paris'
-                    },
-                    {
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                model1: '',
-                model2: '',
-                model3: '',
-                model4: '',
-                model5: '',
-                model6: '',
-                model7: '',
-                model8: '',
-                model9: '',
-                model10: [],
-                model11: '',
-                model12: [],
-                list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'],
-                model13: '',
-                loading1: false,
-                options1: [],
-                model14: [],
-                loading2: false,
-                options2: []
-            }
-        },
-        methods: {
-            remoteMethod1 (query) {
-                if (query !== '') {
-                    this.loading1 = true;
-                    setTimeout(() => {
-                        this.loading1 = false;
-                        const list = this.list.map(item => {
-                            return {
-                                value: item,
-                                label: item
-                            };
-                        });
-                        this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-                    }, 200);
-                } else {
-                    this.options1 = [];
-                }
-            },
-            remoteMethod2 (query) {
-                if (query !== '') {
-                    this.loading2 = true;
-                    setTimeout(() => {
-                        this.loading2 = false;
-                        const list = this.list.map(item => {
-                            return {
-                                value: item,
-                                label: item
-                            };
-                        });
-                        this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-                    }, 200);
-                } else {
-                    this.options2 = [];
-                }
-            }
-        }
-    }
-</script>
diff --git a/src/views/components/select.vue b/src/views/components/select.vue
deleted file mode 100644
index 223b352..0000000
--- a/src/views/components/select.vue
+++ /dev/null
@@ -1,544 +0,0 @@
-<style lang="less">
-    .ivu-article .ivu-select li{
-        margin-bottom: 0;
-    }
-    .ivu-article .ivu-select ul{
-        padding-left: 0 !important;
-        list-style-type: none;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Select 选择器</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>使用模拟的增强下拉选择器来代替浏览器原生的选择器。</p>
-            <p>选择器支持单选、多选、搜索，以及键盘快捷操作。</p>
-            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-select</code>、<code>i-option</code>。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Select v-model="model1" style="width:200px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <span class="demo-data">{{ model1 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>基本用法。可以使用 v-model 双向绑定数据。</p>
-                    <p>单选时，value 只接受字符串和数字类型，多选时，只接受数组类型，组件会自动根据<code>Option</code>的<code>value</code>来返回选中的数据。</p>
-                    <p>可以给<code>Select</code>添加 style 样式，比如宽度。</p>
-                    <p>在展开选择器后，可以使用键盘的<code>up</code>和<code>down</code>快速上下选择，按下<code>Enter</code>选择，按下<code>Esc</code>收起选择器。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="尺寸">
-                <div slot="demo">
-                    <Select v-model="model2" size="small" style="width:100px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <Select v-model="model3" style="width:100px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <Select v-model="model4" size="large" style="width:100px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>size</code>属性为<code>large</code>和<code>small</code>将输入框设置为大和小尺寸，不设置为默认（中）尺寸。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="禁用">
-                <div slot="demo">
-                    <Select v-model="model5" disabled style="width:200px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <Select v-model="model6" style="width:200px">
-                        <Option value="beijing">New York</Option>
-                        <Option value="shanghai" disabled>London</Option>
-                        <Option value="shenzhen">Sydney</Option>
-                    </Select>
-                </div>
-                <div slot="desc">
-                    <p>通过给<code>Select</code>设置属性<code>disabled</code>禁用整个选择器。</p>
-                    <p>通过给<code>Option</code>设置属性<code>disabled</code>可以禁用当前项。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="可清空">
-                <div slot="demo">
-                    <Select v-model="model8" clearable style="width:200px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                    <span class="demo-data">{{ model8 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>clearable</code>可以清空已选项，仅适用于单选模式。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.clearable }}</i-code>
-            </Demo>
-            <Demo title="分组">
-                <div slot="demo">
-                    <Select v-model="model7" style="width:200px">
-                        <OptionGroup label="Hot Cities">
-                            <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                        </OptionGroup>
-                        <OptionGroup label="Other Cities">
-                            <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                        </OptionGroup>
-                    </Select>
-                    <span class="demo-data">{{ model7 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>使用<code>OptionGroup</code>可将选项进行分组。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.group }}</i-code>
-            </Demo>
-            <Demo title="自定义模板">
-                <div slot="demo">
-                    <Select v-model="model9" style="width:200px">
-                        <Option value="New York" label="New York">
-                            <span>New York</span>
-                            <span style="float:right;color:#ccc">America</span>
-                        </Option>
-                        <Option value="London" label="London">
-                            <span>London</span>
-                            <span style="float:right;color:#ccc">U.K.</span>
-                        </Option>
-                        <Option value="Sydney" label="Sydney">
-                            <span>Sydney</span>
-                            <span style="float:right;color:#ccc">Australian</span>
-                        </Option>
-                    </Select>
-                    <span class="demo-data">{{ model9 }}</span>
-                </div>
-                <div slot="desc">
-                    <p>对选项内容可以进行自定义。注意在<code>Option</code>中使用<code>label</code>属性，可以让选择器优先读取该属性的值以显示，否则选中时显示的内容会和自定义的一样，这往往不是我们想要的。</p>
-                    <p>对于选项显示内容的逻辑：优先显示 slot 内容，如果没有定义 slot，则显示<code>label</code>的值，如果没有设置 label，则显示<code>value</code>的值。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.label }}</i-code>
-            </Demo>
-            <Demo title="多选">
-                <div slot="demo">
-                    <p class="demo-data">{{ model10 }}</p>
-                    <Select v-model="model10" multiple style="width:260px">
-                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                    </Select>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>multiple</code>可以开启多选模式。多选模式下，model 接受数组类型的数据，所返回的也是数组。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.multiple }}</i-code>
-            </Demo>
-            <Demo title="可搜索">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12" style="padding-right:10px">
-                            <Select v-model="model11" filterable>
-                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                            </Select>
-                        </Col>
-                        <Col span="12">
-                            <Select v-model="model12" filterable multiple>
-                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                            </Select>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>filterable</code>可以开启搜索模式。单选和多选都支持搜索模式。多选搜索时，可以使用键盘<code>Delete</code>快捷删除最后一个已选项。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.filterable }}</i-code>
-            </Demo>
-            <Demo title="远程搜索">
-                <div slot="demo">
-                    <Row>
-                        <Col span="12" style="padding-right:10px">
-                            <Select
-                                v-model="model13"
-                                filterable
-                                remote
-                                :remote-method="remoteMethod1"
-                                :loading="loading1">
-                                <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
-                            </Select>
-                        </Col>
-                        <Col span="12">
-                        <Select
-                            v-model="model14"
-                            multiple
-                            filterable
-                            remote
-                            :remote-method="remoteMethod2"
-                            :loading="loading2">
-                            <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
-                        </Select>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>远程搜索需同时设置 <code>filterable</code>、<code>remote</code>、<code>remote-method</code>、<code>loading</code> 四个 props，其中 loading 用于控制是否正在搜索中，remote-method 是远程搜索的方法。</p>
-                    <p>注意：需要给 Option 设置 key。</p>
-                    <p>设置初始显示值，需设置 <code>label</code> 属性。</p>
-                    <p>本例为美国州名，尝试输入一些字母。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.remote }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Select props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>指定选中项目的 value 值，可以使用 v-model 双向绑定数据。单选时只接受 String 或 Number，多选时只接受 Array</td>
-                            <td>String | Number | Array</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>是否支持多选</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>是否可以清空选项，只在单选时有效</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>filterable</td>
-                            <td>是否支持搜索</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>remote</td>
-                            <td>是否使用远程搜索</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>remote-method</td>
-                            <td>远程搜索的方法</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>当前是否正在远程搜索</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>loading-text</td>
-                            <td>远程搜索中的文字提示</td>
-                            <td>String</td>
-                            <td>加载中</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>仅在 remote 模式下，初始化时使用。因为仅通过 value 无法得知选项的 label，需手动设置。</td>
-                            <td>String | Number | Array</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>选择框大小，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不填</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>选择框默认文字</td>
-                            <td>String</td>
-                            <td>请选择</td>
-                        </tr>
-                        <tr>
-                            <td>not-found-text</td>
-                            <td>当下拉列表为空时显示的内容</td>
-                            <td>String</td>
-                            <td>无匹配数据</td>
-                        </tr>
-                        <tr>
-                            <td>label-in-value</td>
-                            <td>在返回选项时，是否将 label 和 value 一并返回，默认只返回 value</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>弹窗的展开方向，可选值为 <code>bottom</code> 和 <code>top</code>，2.12.0 版本开始支持自动识别</td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>给表单元素设置 <code>id</code>，详见 Form 用法。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Select events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>选中的<code>Option</code>变化时触发，默认返回 value，如需返回 label，详见 label-in-value 属性</td>
-                            <td>当前选中项</td>
-                        </tr>
-                        <tr>
-                            <td>on-query-change</td>
-                            <td>搜索词改变时触发</td>
-                            <td>query</td>
-                        </tr>
-                        <tr>
-                            <td>on-clear</td>
-                            <td>点击清空按钮时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>下拉框展开或收起时触发</td>
-                            <td>true / false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Select methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>方法名</th>
-                            <th>说明</th>
-                            <th>参数</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>setQuery</td>
-                            <td>设置搜索词，为空时清空，仅在 <code>filterable="true"</code> 时有效</td>
-                            <td>query</td>
-                        </tr>
-                        <tr>
-                            <td>clearSingleSelect</td>
-                            <td>清空单选项，仅在 <code>clearable="true"</code> 时有效</td>
-                            <td>无</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Option props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>选项值，默认根据此属性值进行筛选，必填</td>
-                            <td>String | Number</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>选项显示的内容，默认会读取 slot，无 slot 时，优先读取该 label 值，无 label 时，读取 value。当选中时，选择器会显示 label 为已选文案。大部分情况不需要配置此项，直接写入 slot 即可，在自定义选项时，该属性非常有用。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用当前项</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="OptionGroup props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>分组的组名</td>
-                            <td>String</td>
-                            <td>空</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/select';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                cityList: [
-                    {
-                        value: 'New York',
-                        label: 'New York'
-                    },
-                    {
-                        value: 'London',
-                        label: 'London'
-                    },
-                    {
-                        value: 'Sydney',
-                        label: 'Sydney'
-                    },
-                    {
-                        value: 'Ottawa',
-                        label: 'Ottawa'
-                    },
-                    {
-                        value: 'Paris',
-                        label: 'Paris'
-                    },
-                    {
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                cityList1: [
-                    {
-                        value: 'New York',
-                        label: 'New York'
-                    },
-                    {
-                        value: 'London',
-                        label: 'London'
-                    },
-                    {
-                        value: 'Sydney',
-                        label: 'Sydney'
-                    }
-                ],
-                cityList2: [
-                    {
-                        value: 'Ottawa',
-                        label: 'Ottawa'
-                    },
-                    {
-                        value: 'Paris',
-                        label: 'Paris'
-                    },
-                    {
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                model1: '',
-                model2: '',
-                model3: '',
-                model4: '',
-                model5: '',
-                model6: '',
-                model7: '',
-                model8: '',
-                model9: '',
-                model10: [],
-                model11: '',
-                model12: [],
-                list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'],
-                model13: '',
-                loading1: false,
-                options1: [],
-                model14: [],
-                loading2: false,
-                options2: []
-            }
-        },
-        methods: {
-            remoteMethod1 (query) {
-                if (query !== '') {
-                    this.loading1 = true;
-                    setTimeout(() => {
-                        this.loading1 = false;
-                        const list = this.list.map(item => {
-                            return {
-                                value: item,
-                                label: item
-                            };
-                        });
-                        this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-                    }, 200);
-                } else {
-                    this.options1 = [];
-                }
-            },
-            remoteMethod2 (query) {
-                if (query !== '') {
-                    this.loading2 = true;
-                    setTimeout(() => {
-                        this.loading2 = false;
-                        const list = this.list.map(item => {
-                            return {
-                                value: item,
-                                label: item
-                            };
-                        });
-                        this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-                    }, 200);
-                } else {
-                    this.options2 = [];
-                }
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/slider-en.vue b/src/views/components/slider-en.vue
deleted file mode 100644
index e919d4e..0000000
--- a/src/views/components/slider-en.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<style scoped>
-    .ivu-slider{
-        position: relative;
-        z-index: 1;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Slider</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>A Slider component for displaying current value and intervals in range.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Slider v-model="value1"></Slider>
-                    <Slider v-model="value2" range></Slider>
-                    <Slider v-model="value3" range disabled></Slider>
-                </div>
-                <div slot="desc">
-                    <p>Basic slider. You can use <code>v-model</code> to enable a two-way bingding on data.</p>
-                    <p>When <code>range</code> is true, display as dual thumb mode. Disable the slider by setting the property <code>disabled</code>.</p>
-                    <p></p>
-                    <p>Note that when using a single slider, the <code>value</code> format is a number. When using as dual thumb mode, the <code>value</code> is an array of two, and each item is a number.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Discrete values">
-                <div slot="demo">
-                    <Slider v-model="value4" :step="10"></Slider>
-                    <Slider v-model="value5" :step="10" range></Slider>
-                </div>
-                <div slot="desc">
-                    <p>You can control the interval of each slide by setting the property <code>step</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.step }}</i-code>
-            </Demo>
-            <Demo title="Breakpoints">
-                <div slot="demo">
-                    <Slider v-model="value6" :step="10" show-stops></Slider>
-                    <Slider v-model="value7" :step="10" show-stops range></Slider>
-                </div>
-                <div slot="desc">
-                    <p>You can display breakpoints by setting the property <code>show-stops</code>, which are recommended when the <code>step</code> interval is not intensive.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.stops }}</i-code>
-            </Demo>
-            <Demo title="With input">
-                <div slot="demo">
-                    <Slider v-model="value8" show-input></Slider>
-                </div>
-                <div slot="desc">
-                    <p>Synchronize with <code>InptNumber</code> component by setting the property <code>show-input</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.input }}</i-code>
-            </Demo>
-            <Demo title="Customerize tooltip">
-                <div slot="demo">
-                    <Slider v-model="value9" :tip-format="format"></Slider>
-                    <Slider v-model="value10" :tip-format="hideFormat"></Slider>
-                </div>
-                <div slot="desc">
-                    <p>Slider will pass the current value to <code>tip-format</code> and display the returned value in Tooltip. If null, the Tooltip will be hidden.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.format }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Slider props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>The value of slider. Use v-model to enable a two-way binding. When using a single slider, the value format is a number. When using as dual thumb mode, the value is an array of two, and each item is a number.</td>
-                            <td>Number | Array</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>The minimum value the slider can slide to.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>The maximum value the slider can slide to.</td>
-                            <td>Number</td>
-                            <td>100</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) .</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>If true, the slider will not be interactable.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>range</td>
-                            <td>Whether to use the dual thumb mode.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-input</td>
-                            <td>Whether to synchronize with InptNumber component, works when range is false.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-stops</td>
-                            <td>Whether to display breakpoints.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-tip</td>
-                            <td>Tooltip display control, Optional value: <code>hover</code>（Hover, default）,<code>always</code>（Always visible）,<code>never</code>（Invisible）.</td>
-                            <td>String</td>
-                            <td>hover</td>
-                        </tr>
-                        <tr>
-                            <td>tip-format</td>
-                            <td>Slider will pass the current value to tip-format and display the returned value in Tooltip. If null, the Tooltip will be hidden.</td>
-                            <td>Function</td>
-                            <td>value</td>
-                        </tr>
-                        <tr>
-                            <td>input-size</td>
-                            <td>The size of InputNumber. The value could be <code>large</code>, <code>small</code>, <code>default</code>or none. Only works when show-input is open.</td>
-                            <td>String</td>
-                            <td>default</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Slider events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emitted when slide button is released. It'll return current selected value.</td>
-                            <td>value</td>
-                        </tr>
-                        <tr>
-                            <td>on-input</td>
-                            <td>Emitted when value changes. It'll be emitted in real time during sliding.</td>
-                            <td>value</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/slider';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: 25,
-                value2: [20, 50],
-                value3: [20, 50],
-                value4: 30,
-                value5: [20, 50],
-                value6: 30,
-                value7: [20, 50],
-                value8: 25,
-                value9: 25,
-                value10: 25
-            }
-        },
-        methods: {
-            format (val) {
-                return `Progress: ${val}%`
-            },
-            hideFormat () {
-                return null;
-            }
-        }
-    }
-</script>
diff --git a/src/views/components/slider.vue b/src/views/components/slider.vue
deleted file mode 100644
index 26a08a8..0000000
--- a/src/views/components/slider.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<style scoped>
-    .ivu-slider{
-        position: relative;
-        z-index: 1;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Slider 滑块</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>滑动输入器，用于在数值区间/自定义区间内进行选择，支持连续或离散值。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Slider v-model="value1"></Slider>
-                    <Slider v-model="value2" range></Slider>
-                    <Slider v-model="value3" range disabled></Slider>
-                </div>
-                <div slot="desc">
-                    <p>滑块的基本用法，可以使用 v-model 双向绑定数据。</p>
-                    <p>通过设置属性 <code>range</code> 开启双滑块，通过设置属性 <code>disabled</code> 禁用滑块。</p>
-                    <p>注意，单滑块时，<code>value</code> 格式为数字，当开启双滑块时，<code>value</code> 为长度是2的数组，且每项为数字。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="离散值">
-                <div slot="demo">
-                    <Slider v-model="value4" :step="10"></Slider>
-                    <Slider v-model="value5" :step="10" range></Slider>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>step</code> 可以控制每次滑动的间隔。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.step }}</i-code>
-            </Demo>
-            <Demo title="显示间断点">
-                <div slot="demo">
-                    <Slider v-model="value6" :step="10" show-stops></Slider>
-                    <Slider v-model="value7" :step="10" show-stops range></Slider>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>show-stops</code> 可以显示间断点，建议在 <code>step</code> 间隔不密集时使用。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.stops }}</i-code>
-            </Demo>
-            <Demo title="带有输入框">
-                <div slot="demo">
-                    <Slider v-model="value8" show-input></Slider>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>show-input</code> 可以显示数字输入框，配合使用，仅在单滑块模式下有效。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.input }}</i-code>
-            </Demo>
-            <Demo title="自定义提示">
-                <div slot="demo">
-                    <Slider v-model="value9" :tip-format="format"></Slider>
-                    <Slider v-model="value10" :tip-format="hideFormat"></Slider>
-                </div>
-                <div slot="desc">
-                    <p>Slider 会把当前值传给 <code>tip-format</code>，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.format }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Slider props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>滑块选定的值，可以使用 v-model 双向绑定数据。普通模式下，数据格式为数字，在双滑块模式下，数据格式为长度是2的数组，且每项都为数字</td>
-                            <td>Number | Array</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>最小值</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>最大值</td>
-                            <td>Number</td>
-                            <td>100</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>步长，取值建议能被（max - min）整除</td>
-                            <td>Number</td>
-                            <td>1</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用滑块</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>range</td>
-                            <td>是否开启双滑块模式</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-input</td>
-                            <td>是否显示数字输入框，仅在单滑块模式下有效</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-stops</td>
-                            <td>是否显示间断点，建议在 step 不密集时使用</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-tip</td>
-                            <td>提示的显示控制，可选值为 <code>hover</code>（悬停，默认）、<code>always</code>（总是可见）、<code>never</code>（不可见）</td>
-                            <td>String</td>
-                            <td>hover</td>
-                        </tr>
-                        <tr>
-                            <td>tip-format</td>
-                            <td>Slider 会把当前值传给 <code>tip-format</code>，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip</td>
-                            <td>Function</td>
-                            <td>value</td>
-                        </tr>
-                        <tr>
-                            <td>input-size</td>
-                            <td>数字输入框的尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不填，仅在开启 show-input 时有效</td>
-                            <td>String</td>
-                            <td>default</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Slider events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>在松开滑动时触发，返回当前的选值，在滑动过程中不会触发</td>
-                            <td>value</td>
-                        </tr>
-                        <tr>
-                            <td>on-input</td>
-                            <td>滑动条数据变化时触发，返回当前的选值，在滑动过程中实时触发</td>
-                            <td>value</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/slider';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                value1: 25,
-                value2: [20, 50],
-                value3: [20, 50],
-                value4: 30,
-                value5: [20, 50],
-                value6: 30,
-                value7: [20, 50],
-                value8: 25,
-                value9: 25,
-                value10: 25
-            }
-        },
-        methods: {
-            format (val) {
-                return `Progress: ${val}%`
-            },
-            hideFormat () {
-                return null;
-            }
-        }
-    }
-</script>
diff --git a/src/views/components/spin-en.vue b/src/views/components/spin-en.vue
deleted file mode 100644
index 27190e8..0000000
--- a/src/views/components/spin-en.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<style>
-    .demo-spin-container{
-        display: inline-block;
-        width: 200px;
-        height: 100px;
-        position: relative;
-        border: 1px solid #eee;
-    }
-    .demo-spin-icon-load{
-        animation: ani-demo-spin 1s linear infinite;
-    }
-    @keyframes ani-demo-spin {
-        from { transform: rotate(0deg);}
-        50%  { transform: rotate(180deg);}
-        to   { transform: rotate(360deg);}
-    }
-    .demo-spin-col{
-        height: 100px;
-        position: relative;
-        border: 1px solid #eee;
-    }
-    .demo-spin-article{
-        width: 400px;
-        height: 200px;
-        padding: 10px;
-        position: relative;
-        border: 1px solid #eee;
-        text-align: center;
-    }
-    .demo-spin-article h3{
-        font-size: 22px;
-    }
-    .demo-spin-article address{
-        color: #999;
-        font-style: normal;
-        font-size: 14px;
-    }
-    .demo-spin-article p{
-        font-size: 16px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Spin</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Spin></Spin>
-                </div>
-                <div slot="desc">
-                    <p>A simple loading status.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <Spin size="small"></Spin>
-                        </Col>
-                        <Col span="8">
-                            <Spin></Spin>
-                        </Col>
-                        <Col span="8">
-                            <Spin size="large"></Spin>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Set the <code>size</code> to <code>large</code> or <code>small</code> to use large/small size of spin, by default the spin's size is medium.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="Centered fixed">
-                <div slot="demo">
-                    <div class="demo-spin-container">
-                        <Spin fix></Spin>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>Vertical center fixed inside the container, you need to set a <code>relative</code> or <code>absolute</code> style in parent.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.fix }}</i-code>
-            </Demo>
-            <Demo title="Customized description">
-                <div slot="demo">
-                    <Row>
-                        <Col class="demo-spin-col" span="8">
-                            <Spin fix>加载中...</Spin>
-                        </Col>
-                        <Col class="demo-spin-col" span="8">
-                            <Spin fix>
-                                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
-                                <div>Loading</div>
-                            </Spin>
-                        </Col>
-                        <Col class="demo-spin-col" span="8">
-                            <Spin fix>
-                                <div class="loader">
-                                    <svg class="circular" viewBox="25 25 50 50">
-                                        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
-                                    </svg>
-                                </div>
-                            </Spin>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Customized description content. You can set it as a simple text, or a very complicated animation.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="State switch">
-                <div slot="demo">
-                    <div class="demo-spin-article">
-                        <h3>登金陵凤凰台</h3>
-                        <address>李白</address>
-                        <article>
-                            <p>凤凰台上凤凰游，凤去台空江自流。</p>
-                            <p>吴宫花草埋幽径，晋代衣冠成古丘。</p>
-                            <p>三山半落青天外，二水中分白鹭洲。</p>
-                            <p>总为浮云能蔽日，长安不见使人愁。</p>
-                        </article>
-                        <Spin size="large" fix v-if="spinShow"></Spin>
-                    </div>
-                    <br>
-                    Switch status：<i-switch @on-change="spinShow = !spinShow"></i-switch>
-                </div>
-                <div slot="desc">
-                    <p>Controls the display and disappearance of the spin.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.status }}</i-code>
-            </Demo>
-            <Demo title="Full screen loading">
-                <div slot="demo">
-                    <Button type="primary" @click="handleSpinShow">Full screen loading for 3 seconds</Button>
-                    <Button type="primary" @click="handleSpinCustom">Customize display content</Button>
-                </div>
-                <div slot="desc">
-                    <p>Use the <code>$Spin</code> method to load globally.</p>
-                    <p>You can use the Render function to customize the display content.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.$spin }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Spin props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Attribute</th>
-                            <th>Explanation</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>size</td>
-                            <td>Spin size，options include <code></code> and <code>small</code>, optional</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>fix</td>
-                            <td>Whether it is fixed, you need to set a <code>relative</code> or <code>absolute</code> style in parent.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Spin slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>default</td>
-                            <td>Customized description content. When the slot is set, the default style does not take effect.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/spin';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                spinShow: true
-            }
-        },
-        methods: {
-            handleSpinShow () {
-                this.$Spin.show();
-                setTimeout(() => {
-                    this.$Spin.hide();
-                }, 3000);
-            },
-            handleSpinCustom () {
-                this.$Spin.show({
-                    render: (h) => {
-                        return h('div', [
-                            h('Icon', {
-                                'class': 'demo-spin-icon-load',
-                                props: {
-                                    type: 'load-c',
-                                    size: 18
-                                }
-                            }),
-                            h('div', 'Loading')
-                        ])
-                    }
-                });
-                setTimeout(() => {
-                    this.$Spin.hide();
-                }, 3000);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/spin.vue b/src/views/components/spin.vue
deleted file mode 100644
index 08d1841..0000000
--- a/src/views/components/spin.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<style>
-    .demo-spin-container{
-        display: inline-block;
-        width: 200px;
-        height: 100px;
-        position: relative;
-        border: 1px solid #eee;
-    }
-    .demo-spin-icon-load{
-        animation: ani-demo-spin 1s linear infinite;
-    }
-    @keyframes ani-demo-spin {
-        from { transform: rotate(0deg);}
-        50%  { transform: rotate(180deg);}
-        to   { transform: rotate(360deg);}
-    }
-    .demo-spin-col{
-        height: 100px;
-        position: relative;
-        border: 1px solid #eee;
-    }
-    .demo-spin-article{
-        width: 400px;
-        height: 200px;
-        padding: 10px;
-        position: relative;
-        border: 1px solid #eee;
-        text-align: center;
-    }
-    .demo-spin-article h3{
-        font-size: 22px;
-    }
-    .demo-spin-article address{
-        color: #999;
-        font-style: normal;
-        font-size: 14px;
-    }
-    .demo-spin-article p{
-        font-size: 16px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Spin 加载中</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>当区块正在获取数据中时可使用，适当的等待动画可以提升用户体验。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Spin></Spin>
-                </div>
-                <div slot="desc">
-                    <p>最简单使用 Spin 的方法。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="各种尺寸">
-                <div slot="demo">
-                    <Row>
-                        <Col span="8">
-                            <Spin size="small"></Spin>
-                        </Col>
-                        <Col span="8">
-                            <Spin></Spin>
-                        </Col>
-                        <Col span="8">
-                            <Spin size="large"></Spin>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>size</code>属性为<code>large</code>和<code>small</code>将 Spin 设置为大和小尺寸，不设置为默认（中）尺寸。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="居中固定">
-                <div slot="demo">
-                    <div class="demo-spin-container">
-                        <Spin fix></Spin>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>在容器内部垂直居中固定，需要父级有<code>relative</code>或<code>absolute</code>。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.fix }}</i-code>
-            </Demo>
-            <Demo title="自定义内容">
-                <div slot="demo">
-                    <Row>
-                        <Col class="demo-spin-col" span="8">
-                            <Spin fix>加载中...</Spin>
-                        </Col>
-                        <Col class="demo-spin-col" span="8">
-                            <Spin fix>
-                                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
-                                <div>Loading</div>
-                            </Spin>
-                        </Col>
-                        <Col class="demo-spin-col" span="8">
-                            <Spin fix>
-                                <div class="loader">
-                                    <svg class="circular" viewBox="25 25 50 50">
-                                        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
-                                    </svg>
-                                </div>
-                            </Spin>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>自定义 Spin 的内容，可以是简单的文字，也可以是很复杂的动画。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="状态切换">
-                <div slot="demo">
-                    <div class="demo-spin-article">
-                        <h3>登金陵凤凰台</h3>
-                        <address>李白</address>
-                        <article>
-                            <p>凤凰台上凤凰游，凤去台空江自流。</p>
-                            <p>吴宫花草埋幽径，晋代衣冠成古丘。</p>
-                            <p>三山半落青天外，二水中分白鹭洲。</p>
-                            <p>总为浮云能蔽日，长安不见使人愁。</p>
-                        </article>
-                        <Spin size="large" fix v-if="spinShow"></Spin>
-                    </div>
-                    <br>
-                    切换显示状态：<i-switch @on-change="spinShow = !spinShow"></i-switch>
-                </div>
-                <div slot="desc">
-                    <p>控制 Spin 组件的显示和消失。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.status }}</i-code>
-            </Demo>
-            <Demo title="整页加载">
-                <div slot="demo">
-                    <Button type="primary" @click="handleSpinShow">整页加载，3秒后关闭</Button>
-                    <Button type="primary" @click="handleSpinCustom">自定义显示内容</Button>
-                </div>
-                <div slot="desc">
-                    <p>使用内置的 <code>$Spin</code> 方法可以全局加载。</p>
-                    <p>可以使用 Render 函数自定义显示内容。<studyRender></studyRender></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.$spin }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Spin props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>size</td>
-                            <td>Spin尺寸，可选值为<code>large</code>和<code>small</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>fix</td>
-                            <td>是否固定，需要父级有<code>relative</code>或<code>absolute</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Spin slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>自定义 Spin 的内容，设置slot后，默认的样式不生效</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/spin';
-    import Anchor from '../../components/anchor.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                spinShow: true
-            }
-        },
-        methods: {
-            handleSpinShow () {
-                this.$Spin.show();
-                setTimeout(() => {
-                    this.$Spin.hide();
-                }, 3000);
-            },
-            handleSpinCustom () {
-                this.$Spin.show({
-                    render: (h) => {
-                        return h('div', [
-                            h('Icon', {
-                                'class': 'demo-spin-icon-load',
-                                props: {
-                                    type: 'load-c',
-                                    size: 18
-                                }
-                            }),
-                            h('div', 'Loading')
-                        ])
-                    }
-                });
-                setTimeout(() => {
-                    this.$Spin.hide();
-                }, 3000);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/steps-en.vue b/src/views/components/steps-en.vue
deleted file mode 100644
index 9c8e3c4..0000000
--- a/src/views/components/steps-en.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Steps</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Steps is a navigation bar that guides users through the steps of a task.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage" vertical>
-                <div slot="demo">
-                    <Steps :current="1">
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>The most basic step bar，The component automatically determines the status of each step based on <code>current</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Mini version" vertical>
-                <div slot="demo">
-                    <Steps :current="2" size="small">
-                        <Step title="已完成"></Step>
-                        <Step title="已完成"></Step>
-                        <Step title="进行中"></Step>
-                        <Step title="待进行"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>size</code> to <code>small</code> to use mini version. </p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="With icon" vertical>
-                <div slot="demo">
-                    <Steps :current="1">
-                        <Step title="注册" icon="person-add"></Step>
-                        <Step title="上传头像" icon="camera"></Step>
-                        <Step title="验证邮箱" icon="email"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>You can use icons by setting the property <code>icon</code> for Step.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="Switch Step" vertical>
-                <div slot="demo">
-                    <p>当前正在进行第 {{ current + 1 }} 步</p>
-                    <br>
-                    <Steps :current="current">
-                        <Step title="步骤1"></Step>
-                        <Step title="步骤2"></Step>
-                        <Step title="步骤3"></Step>
-                        <Step title="步骤4"></Step>
-                    </Steps>
-                    <br>
-                    <Button type="primary" @click="next">Next step</Button>
-                </div>
-                <div slot="desc">
-                    <p>Cooperate with the content and buttons, to represent the progress of a process.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.change }}</i-code>
-            </Demo>
-            <Demo title="Vertical">
-                <div slot="demo">
-                    <Steps :current="2" direction="vertical">
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>A simple step bar in the vertical direction by setting attribute <code>direction</code> to <code>vertical</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.direction }}</i-code>
-            </Demo>
-            <Demo title="Error status" vertical>
-                <div slot="demo">
-                    <Steps :current="1" status="error">
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>By using <code>status</code> of <code>Steps</code>, you can specify the state for current step.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.error }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Steps props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>current</td>
-                            <td>To set the current step, counting from 0.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>status</td>
-                            <td>To specify the status of current step, can be set to one of the following values: <code>wait</code>, <code>process</code>, <code>finish</code>, <code>error</code>.</td>
-                            <td>String</td>
-                            <td>process</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>To specify the size of the step bar, the optional value is small or not written.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>direction</td>
-                            <td>To specify the direction of the step bar, <code>horizontal</code> and <code>vertical</code> are currently supported.</td>
-                            <td>String</td>
-                            <td>horizontal</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Step props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>status</td>
-                            <td>To specify the status. It will be automatically set by current of Steps if not configured. Optional values are: wait process finish error.</td>
-                            <td>String</td>
-                            <td>process</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>Title</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>Detail of the step, optional property.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>Icon of the step, optional property.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/steps';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                current: 0
-            }
-        },
-        methods: {
-            next () {
-                if (this.current == 3) {
-                    this.current = 0;
-                } else {
-                    this.current += 1;
-                }
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/steps.vue b/src/views/components/steps.vue
deleted file mode 100644
index a0a1dc0..0000000
--- a/src/views/components/steps.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Steps 步骤条</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>拆分某项流程的步骤，引导用户按流程完成任务。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法" vertical>
-                <div slot="demo">
-                    <Steps :current="1">
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>基本用法，组件会根据<code>current</code>自动判断各步骤状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="迷你版" vertical>
-                <div slot="demo">
-                    <Steps :current="2" size="small">
-                        <Step title="已完成"></Step>
-                        <Step title="已完成"></Step>
-                        <Step title="进行中"></Step>
-                        <Step title="待进行"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>设置属性<code>size</code>为<code>small</code>启用迷你版。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="带图标的步骤条" vertical>
-                <div slot="demo">
-                    <Steps :current="1">
-                        <Step title="注册" icon="person-add"></Step>
-                        <Step title="上传头像" icon="camera"></Step>
-                        <Step title="验证邮箱" icon="email"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>通过设置<code>Step</code>的<code>icon</code>属性可以自定义图标。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="切换步骤" vertical>
-                <div slot="demo">
-                    <p>当前正在进行第 {{ current + 1 }} 步</p>
-                    <br>
-                    <Steps :current="current">
-                        <Step title="步骤1"></Step>
-                        <Step title="步骤2"></Step>
-                        <Step title="步骤3"></Step>
-                        <Step title="步骤4"></Step>
-                    </Steps>
-                    <br>
-                    <Button type="primary" @click="next">下一步</Button>
-                </div>
-                <div slot="desc">
-                    <p>点击下一步按钮可以切换当前进度状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.change }}</i-code>
-            </Demo>
-            <Demo title="垂直方向">
-                <div slot="demo">
-                    <Steps :current="2" direction="vertical">
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>设置属性<code>direction</code>为<code>vertical</code>在垂直方向展示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.direction }}</i-code>
-            </Demo>
-            <Demo title="步骤运行错误" vertical>
-                <div slot="demo">
-                    <Steps :current="1" status="error">
-                        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-                        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-                    </Steps>
-                </div>
-                <div slot="desc">
-                    <p>设置<code>Steps</code>的属性<code>status</code>为<code>error</code>指定当前步骤状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.error }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Steps props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>current</td>
-                            <td>当前步骤，从 0 开始计数</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>status</td>
-                            <td>当前步骤的状态，可选值为<code>wait</code>、<code>process</code>、<code>finish</code>、<code>error</code></td>
-                            <td>String</td>
-                            <td>process</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>步骤条的尺寸，可选值为<code>small</code>或者不写</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>direction</td>
-                            <td>步骤条的方向，可选值为<code>horizontal</code>（水平）或<code>vertical</code>（垂直）</td>
-                            <td>String</td>
-                            <td>horizontal</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Step props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>status</td>
-                            <td>步骤的状态，可选值为<code>wait</code>、<code>process</code>、<code>finish</code>、<code>error</code>，不设置时自动判断</td>
-                            <td>String</td>
-                            <td>process</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>标题</td>
-                            <td>String</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>步骤的详细描述，可选</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>步骤的图标，可选</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/steps';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                current: 0
-            }
-        },
-        methods: {
-            next () {
-                if (this.current == 3) {
-                    this.current = 0;
-                } else {
-                    this.current += 1;
-                }
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/switch-en.vue b/src/views/components/switch-en.vue
deleted file mode 100644
index 6205b23..0000000
--- a/src/views/components/switch-en.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Switch</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>When To Use?</p>
-            <ul>
-                <li>If you need to represent the switching between two states or on-off state.</li>
-                <li>The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.</li>
-            </ul>
-            <Alert show-icon style="margin-top: 16px" type="warning">Warning: If you don't use <router-link to="/docs/guide/iview-loader-en">iview-loader</router-link>, you have to use <code>i-switch</code> tag.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Switch v-model="switch1" @on-change="change"></Switch>
-                </div>
-                <div slot="desc">
-                    <p>The most basic usage.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Size">
-                <div slot="demo">
-                    <Switch size="large"></Switch>
-                    <Switch></Switch>
-                    <Switch size="small"></Switch>
-                </div>
-                <div slot="desc">
-                    <p>Set the size to <code>large</code> or <code>small</code> to use large/small size of switch, by default the switch's size is medium.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="Text & icon">
-                <div slot="demo">
-                    <Switch>
-                        <span slot="open">开</span>
-                        <span slot="close">关</span>
-                    </Switch>
-                    <Switch>
-                        <Icon type="android-done" slot="open"></Icon>
-                        <Icon type="android-close" slot="close"></Icon>
-                    </Switch>
-                    <br><br>
-                    <Switch size="large">
-                        <span slot="open">开启</span>
-                        <span slot="close">关闭</span>
-                    </Switch>
-                    <Switch size="large">
-                        <span slot="open">ON</span>
-                        <span slot="close">OFF</span>
-                    </Switch>
-                </div>
-                <div slot="desc">
-                    <p>With text and icon.</p>
-                    <p>Customize content, it is recommended that if you use 2 characters, set the switch size to large.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="Disabled">
-                <div slot="demo">
-                    <Switch :disabled="disabled"></Switch>
-                    <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
-                </div>
-                <div slot="desc">
-                    <p>Disabled state of Switch.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Switch props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Determine whether the Switch is checked. Use <code>v-model</code> to enable two-way binding.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>Set the size to <code>large</code>, <code>small</code> or <code>default</code> to use large/small size of switch, by default the switch's size is medium. It is recommended that if you use 2 characters, set the switch size to large.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Disabled state of Switch.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>true-value</td>
-                            <td>Value of the switch if it's checked.</td>
-                            <td>String, Number, Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>false-value</td>
-                            <td>Value of the switch if it's not checked.</td>
-                            <td>String, Number, Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Switch events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emitted when the state of the switch changed.</td>
-                            <td>true | false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Switch slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>open</td>
-                            <td>Customize content when state is opening.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>Customize content when state is closed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/switch';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                disabled: true,
-                switch1: false
-            }
-        },
-        methods: {
-            change (status) {
-                this.$Message.info(`开关状态：${status}`);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/switch.vue b/src/views/components/switch.vue
deleted file mode 100644
index bb8c91d..0000000
--- a/src/views/components/switch.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Switch 开关</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>在两种状态间切换时用到的开关选择器。</p>
-            <Alert show-icon style="margin-top: 16px" type="warning">注意：没有使用 <router-link to="/docs/guide/iview-loader">iview-loader</router-link> 时，必须使用 <code>i-switch</code> 标签。</Alert>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基本">
-                <div slot="demo">
-                    <Switch v-model="switch1" @on-change="change"></Switch>
-                </div>
-                <div slot="desc">
-                    <p>基本用法，状态切换时会触发事件。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="尺寸">
-                <div slot="demo">
-                    <Switch size="large"></Switch>
-                    <Switch></Switch>
-                    <Switch size="small"></Switch>
-                </div>
-                <div slot="desc">
-                    <p>设置<code>size</code>为 <code>large</code> 或 <code>small</code> 使用大号和小号的开关。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.size }}</i-code>
-            </Demo>
-            <Demo title="文字和图标">
-                <div slot="demo">
-                    <Switch>
-                        <span slot="open">开</span>
-                        <span slot="close">关</span>
-                    </Switch>
-                    <Switch>
-                        <Icon type="android-done" slot="open"></Icon>
-                        <Icon type="android-close" slot="close"></Icon>
-                    </Switch>
-                    <br><br>
-                    <Switch size="large">
-                        <span slot="open">开启</span>
-                        <span slot="close">关闭</span>
-                    </Switch>
-                    <Switch size="large">
-                        <span slot="open">ON</span>
-                        <span slot="close">OFF</span>
-                    </Switch>
-                </div>
-                <div slot="desc">
-                    <p>自定义内容，建议如果使用2个汉字，将开关尺寸设置为 large。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
-            </Demo>
-            <Demo title="不可用">
-                <div slot="demo">
-                    <Switch :disabled="disabled"></Switch>
-                    <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
-                </div>
-                <div slot="desc">
-                    <p>禁用开关。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Switch props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>指定当前是否选中，可以使用 v-model 双向绑定数据</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>开关的尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不写。建议开关如果使用了2个汉字的文字，使用 large。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>禁用开关</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>true-value</td>
-                            <td>选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
-                            <td>String, Number, Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>false-value</td>
-                            <td>没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
-                            <td>String, Number, Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Switch events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>开关变化时触发，返回当前的状态</td>
-                            <td>true | false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Switch slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>open</td>
-                            <td>自定义显示打开时的内容</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>自定义显示关闭时的内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/switch';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                disabled: true,
-                switch1: false
-            }
-        },
-        methods: {
-            change (status) {
-                this.$Message.info(`开关状态：${status}`);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/table-en.vue b/src/views/components/table-en.vue
deleted file mode 100644
index 0bc8c1a..0000000
--- a/src/views/components/table-en.vue
+++ /dev/null
@@ -1,2177 +0,0 @@
-<style>
-    .ivu-table .demo-table-info-row td{
-        background-color: #2db7f5;
-        color: #fff;
-    }
-    .ivu-table .demo-table-error-row td{
-        background-color: #ff6600;
-        color: #fff;
-    }
-    .ivu-table td.demo-table-info-column{
-        background-color: #2db7f5;
-        color: #fff;
-    }
-    .ivu-table .demo-table-info-cell-name {
-        background-color: #2db7f5;
-        color: #fff;
-    }
-    .ivu-table .demo-table-info-cell-age {
-        background-color: #ff6600;
-        color: #fff;
-    }
-    .ivu-table .demo-table-info-cell-address {
-        background-color: #187;
-        color: #fff;
-    }
-</style>
-<template>
-    <div>
-        <i-article>
-            <article>
-                <h1>Table</h1>
-                <Anchor title="Brief Introduction" h2></Anchor>
-                <p>Table is used to display a mass of structured data.</p>
-                <p>It supports sorting, filtering, paging, custom operation, exporting to csv and many other complex functions.</p>
-                <Alert show-icon style="margin-top: 16px">Attention：Use <code>i-table</code> if not under template/render mode.</Alert>
-                <Anchor title="Examples" h2></Anchor>
-                <Demo title="Basic Usage" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>The simplest usage.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.base }}</i-code>
-                </Demo>
-                <Demo title="Stripe" vertical hide-code>
-                    <div slot="demo">
-                        <Table stripe :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>stripe</code> prop to apply stripe style. It's used to differentiate adjacent rows.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.stripe }}</i-code>
-                </Demo>
-                <Demo title="Bordered" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>Add border to Table.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.border }}</i-code>
-                </Demo>
-                <Demo title="Custom Style" vertical hide-code>
-                    <div slot="demo">
-                        <p>Custom row styles:</p>
-                        <Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
-                        <p>Custom column styles:</p>
-                        <Table :columns="columns9" :data="data1"></Table>
-                        <p>Custom arbitrary cell styles:</p>
-                        <Table :columns="columns1" :data="data8"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p><strong>Row</strong>: Set <code>row-class-name</code> prop with a function to assign a class name to certain rows.</p>
-                        <p><strong>Column</strong>: Set <code>className</code> key to columns prop's object to assign a class name to a certain column.</p>
-                        <p><strong>Cell</strong>: Set <code>cellClassName</code> key to data prop's object to assign a class name to a certain cell.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.class }}</i-code>
-                </Demo>
-                <Demo title="Fixed Header" vertical hide-code>
-                    <div slot="demo">
-                        <Table height="200" :columns="columns1" :data="data2"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>height</code> prop to fix the height of the header. It'll make the header fixed on the top of Table.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.height }}</i-code>
-                </Demo>
-                <Demo title="Fixed Column" vertical hide-code>
-                    <div slot="demo">
-                        <Table width="550" border :columns="columns2" :data="data3"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>fixed</code> key to <code>left</code> or <code>right</code> in <code>columns</code> prop to fix the column to the left or right.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.fixed }}</i-code>
-                </Demo>
-                <Demo title="Fixed Header &amp; Column" vertical hide-code>
-                    <div slot="demo">
-                        <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>You can fix header and certain columns simultaneously by setting both props above.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.fixedAll }}</i-code>
-                </Demo>
-                <Demo title="Single Choice" vertical hide-code>
-                    <div slot="demo">
-                        <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
-                        <Button @click="handleClearCurrentRow">Clear</Button>
-                    </div>
-                    <div slot="desc">
-                        <p>Enable row selecting by setting <code>highlight-row</code> prop.</p>
-                        <p>When a row is selected, <code>@on-current-change</code> is emitted. The event return two values: <code>currentRow</code>, <code>oldCurrentRow</code> (current selected row data, previous selected row data). You can customize operation by controlling the callback function.</p>
-                        <p>Add an object with <code>type: 'index'</code> in <code>columns</code> can apply a index column starts with 1.</p>
-                        <p>Set <code>_highlight: true</code> key to data can make the item selected by default.</p>
-                        <p>Call the <code>clearCurrentRow</code> method to clear the highlighted item.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.highlight }}</i-code>
-                </Demo>
-                <Demo title="Multiple Choices" vertical hide-code>
-                    <div slot="demo">
-                        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
-                        <br>
-                        <Button @click="handleSelectAll(true)">Set all selected</Button>
-                        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
-                    </div>
-                    <div slot="desc">
-                        <p>Add an object with <code>type: 'selection'</code> in <code>columns</code> can apply multi-choices function.</p>
-                        <p>Set <code>_checked: true</code> key to data can make the item selected by default.</p>
-                        <p>Set <code>_disabled: true</code> key to data can disable the item.</p>
-                        <p>You can realise many needed effects by using events below properly:</p>
-                        <ul>
-                            <li><code>@on-select</code>: Emitted when a row is selected. Return value: <code>selection</code> and <code>row</code>. (selected items array and latest selected item) </li>
-                            <li><code>@on-select-all</code>: Emitted when click select-all checkbox. Return value: <code>selection</code> (selected items array) </li>
-                            <li><code>@on-selection-change</code>: Emitted when select state is changed. Return value: <code>selection</code> (selected items array) </li>
-                        </ul>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.selection }}</i-code>
-                </Demo>
-                <Demo title="Sort" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns5" :data="data5"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>You can sort the data by setting <code>sortable: true</code> to a certain <code>columns</code> prop's item. </p>
-                        <p>The sorting uses ascending order or descending order by default. You can customize sort method by setting <code>sortMethod</code> props with a function accepting 3 arguments: a, b and type.</p>
-                        <p>You can set <code>sortType</code> to column to sort when initialization.</p>
-                        <p>If remote sorting is needed, you can set <code>sortable： 'custom'</code>, and do the remote sorting after <code>@on-sort-change</code> is emitted. After sorting, you have to set the new data manually. Details on API Doc.</p>
-                        <p>Attention: Sorting won't affect source data.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.sort }}</i-code>
-                </Demo>
-                <Demo title="Filter" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns6" :data="data5"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>You can filter the data by setting <code>filters</code> to certain <code>columns</code> prop's items. It accepts an array. Details on Demo &amp; API Doc.</p>
-                        <p>You must assign a filter function to <code>filterMethod</code> to enable the filter. filterMethod accepts two arguments: value and row. Details on Demo &amp; API Doc.</p>
-                        <p>If <code>filterMultiple: false</code> is set, single choice is used. Default is multiple choices.</p>
-                        <p>Attention: filter won't affect source data.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.filter }}</i-code>
-                </Demo>
-                <Demo title="Custom Column Template" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns7" :data="data6"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>You can render the column yourself by setting <code>render</code> to certain <code>columns</code> prop's items. It is based on Vue's Render function.</p>
-                        <p><code>render</code> accepts two arguments: the first is h, the second is an object including <code>row</code>, <code>column</code> and <code>index</code> (current row's data, current column's data, current index).</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.render }}</i-code>
-                </Demo>
-                <Demo title="Expandable" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns10" :data="data9"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>You can use it when content is too much to completely displayed at one time.</p>
-                        <p>Add an object with <code>type: 'expand'</code> in <code>columns</code> can apply expand function.</p>
-                        <p>Set <code>_expanded</code> to true for certain data item can let the row be expanded by default. Set <code>_disableExpand</code> to disable expanding on the row.</p>                        
-                        <p>Simular to custom column template, we use render function to render expand area. If the content is complex, you can split it into components or use JSX.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.expand }}</i-code>
-                </Demo>
-
-                <Demo title="Grouping table head" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns11" :data="data10" border height="500"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>Set children to column to render the group header.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.head }}</i-code>
-                </Demo>
-
-                <Demo title="Loading" vertical hide-code>
-                    <div slot="demo">
-                        <Table :loading="loading" :columns="columns1" :data="data1"></Table>
-                        <br>
-                        Change status <Switch v-model="loading"></Switch>
-                    </div>
-                    <div slot="desc">
-                        <p>Set property <code>loading</code> can make the table in the load state, and it is recommended for asynchronous request data, paging.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.loading }}</i-code>
-                </Demo>
-                <Demo title="Size" vertical hide-code>
-                    <div slot="demo">
-                        <Table size="large" :columns="columns1" :data="data1"></Table>
-                        <br>
-                        <Table size="small" :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>size</code> prop to <code>large</code> or <code>small</code> or <code>default</code> to adjust the size of the table to large or small or default size. Default is medium.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.size }}</i-code>
-                </Demo>
-                <Demo title="Export csv" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
-                        <br>
-                        <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
-                        <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
-                        <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button>
-                    </div>
-                    <div slot="desc">
-                        <p>You can export the data to <code>.csv</code> document file by calling <code>exportCsv()</code> method. Details on API Doc.</p>
-                        <p>Description:</p>
-                        <ul>
-                            <li>It supports IE9 ~ IE 11, Edge, Chrome, Safari, Firefox.</li>
-                            <li>You need to add <code>.csv</code> extension manually after downloading the file.</li>
-                            <li>Temporarily, IE9 only supports English data. Chinese will be messy code.</li>
-                        </ul>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.csv }}</i-code>
-                </Demo>
-                <Anchor title="Advanced Examples" h2></Anchor>
-                <p>Examples above basically cover all the functions of Table. We provides some complex examples on the basis of real business scenarios:</p>
-                <Button type="primary" size="large" @click="table1 = true">Complex Table with Paging</Button>
-                <Button type="primary" size="large" @click="table2 = true">Table with Multi-cols Filter</Button>
-                <Button type="primary" size="large" @click="table3 = true">Table with Many Styles</Button>
-
-                <ad></ad>
-
-                <div class="api">
-                    <Anchor title="API" h2></Anchor>
-                    <Anchor title="Table props" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>data</td>
-                            <td>Structured data displayed. Key cellClassName is used to set any cell's class name, so your data cannot use the key with such name. For more details, see <strong>Custom Style</strong>.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>columns</td>
-                            <td>Column configuration. Details are mentioned below.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>stripe</td>
-                            <td>Show stripe or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>border</td>
-                            <td>Show vertical border or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-header</td>
-                            <td>Show header or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>The width of the table. Unit: px</td>
-                            <td>Number | String</td>
-                            <td>auto</td>
-                        </tr>
-                        <tr>
-                            <td>height</td>
-                            <td>The height of the table. Unit: px / When this prop is set, if the content height is larger then the set value, the header will be fixed at the top.</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>Whether the table is loading.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled-hover</td>
-                            <td>Disable highlight effect when mouse hovering.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>highlight-row</td>
-                            <td>Highlight selected row or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>row-class-name</td>
-                            <td>
-                                Callback function for row's class name. Accept two arguments:
-                                <ul>
-                                    <li><code>row</code>: current row's data.</li>
-                                    <li><code>index</code>: current row's index</li>
-                                </ul>
-                            </td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of the table. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <!--<tr>-->
-                            <!--<td><del>context</del></td>-->
-                            <!--<td><span style="color: #f50; font-weight: bold;">Deprecated</span> Set context for custom component rendered in the cell. For example, if parent component is $parent, root component is $root. When <code>Table</code> is encapsulated in other components as a slot, the prop will be useful. You must set context if you are still using old-styled render function.</td>-->
-                            <!--<td>Object</td>-->
-                            <!--<td>Table's context.</td>-->
-                        <!--</tr>-->
-                        <tr>
-                            <td>no-data-text</td>
-                            <td>Tip text when data is empty.</td>
-                            <td>String</td>
-                            <td>No Data</td>
-                        </tr>
-                        <tr>
-                            <td>no-filtered-data-text</td>
-                            <td>Tip text when filtered data is empty.</td>
-                            <td>String</td>
-                            <td>No filter data</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="Table events" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-current-change</td>
-                            <td>It works when <code>highlight-row</code> is enabled. Emitted when current row is changed.</td>
-                            <td>
-                                <ul>
-                                    <li><code>currentRow</code>: Current highlighted row's data.</li>
-                                    <li><code>oldCurrentRow</code>: Last highlighted row's data.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-select</td>
-                            <td>It works in multi-choices mode. Emitted when a certain row is selected.</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>: Selected rows' data array</li>
-                                    <li><code>row</code>: Latest selected row's data.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-select-cancel</td>
-                            <td>It works in multi-choices mode. Emitted when a certain row is deselected.</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>：Selected rows' data array</li>
-                                    <li><code>row</code>：Latest deselected row's data.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-select-all</td>
-                            <td>It works in multi-choices mode. Emitted when clicking select-all checkbox.</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>: selected rows' data array.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-selection-change</td>
-                            <td>It works in multi-choices mode. Emitted when selected item's state changes.</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>: selected rows' data array.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-sort-change</td>
-                            <td>It works during sorting. Emitted when clicking sorting button.</td>
-                            <td>
-                                <ul>
-                                    <li><code>column</code>: current column's data.</li>
-                                    <li><code>key</code>: sort-by key.</li>
-                                    <li><code>order</code>: Sorting order. Value: <code>asc</code>, <code>desc</code></li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-filter-change</td>
-                            <td>It works during filtering. Emitted when the filter conditions change.</td>
-                            <td>Current column.</td>
-                        </tr>
-                        <tr>
-                            <td>on-row-click</td>
-                            <td>Emitted when clicking a certain row.</td>
-                            <td>
-                                <ul>
-                                    <li>Current row's data.</li>
-                                    <li>Current index.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-row-dblclick</td>
-                            <td>Emitted when double clicking a certain row.</td>
-                            <td>
-                                <ul>
-                                    <li>Current row's data.</li>
-                                    <li>Current index.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-expand</td>
-                            <td>Emitted when expand or fold a certain row.</td>
-                            <td>
-                                <ul>
-                                    <li><code>row</code>: Current row's data.</li>
-                                    <li><code>status</code>: Current row's state.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="Table slot" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>Table header</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>Table footer</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>Table loading</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="Table methods" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Method Name</th>
-                            <th>Description</th>
-                            <th>Parameter</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>exportCsv</td>
-                            <td>
-                                Export the data as <code>.csv</code> file. Description:
-                                <ul>
-                                    <li>It supports IE9 ~ IE 11, Edge, Chrome, Safari, Firefox.</li>
-                                    <li>You need to add <code>.csv</code> extension manually after downloading the file.</li>
-                                    <li>Temporarily, IE9 only supports English data. Chinese will be messy code.</li>
-                                </ul>
-                            </td>
-                            <td>
-                                params(Object):
-                                <ul>
-                                    <li>
-                                        <strong>filename</strong>
-                                        Filename. Default: table.csv
-                                    </li>
-                                    <li>
-                                        <strong>original</strong>
-                                        Exported as original data. Default: true
-                                    </li>
-                                    <li>
-                                        <strong>noHeader</strong>
-                                        No header. Default: false
-                                    </li>
-                                    <li>
-                                        <strong>columns</strong>
-                                        Customize columns to be exported.
-                                    </li>
-                                    <li>
-                                        <strong>data</strong>
-                                        Customize rows to be exported.
-                                    </li>
-                                    <li>
-                                        <strong>callback</strong>
-                                        After you add this function, you will not download, but return the data.
-                                    </li>
-                                    <li>
-                                        <strong>separator</strong>
-                                        Data delimiters, by default, are commas (,).
-                                    </li>
-                                    <li>
-                                        <strong>quoted</strong>
-                                        If each data is quoted, the default is false.
-                                    </li>
-                                </ul>
-                                Notice: columns and data should be declared simultaneously. If are declared, only selected data will be exported.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>clearCurrentRow</td>
-                            <td>Clear the highlighted item, it is available only when the <code>highlight-row</code> is open.</td>
-                            <td>None</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="column" h3></Anchor>
-                    <p>One of the item in columns. It describes the column data.</p>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Return Value</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>Type of column, Optional value: <code>index</code>, <code>selection</code>, <code>expand</code>, <code>html</code></td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>Column title.</td>
-                            <td>String</td>
-                            <td>#</td>
-                        </tr>
-                        <tr>
-                            <td>key</td>
-                            <td>Data key.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>Column width.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>minWidth</td>
-                            <td>Minimum column width.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>maxWidth</td>
-                            <td>Maximum column width.</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>align</td>
-                            <td>Alignment way. Optional value: <code>left</code>, <code>right</code> or <code>center</code>.</td>
-                            <td>String</td>
-                            <td>left</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>Column's class name.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>fixed</td>
-                            <td>Fix the column at the left / right or not. Optional value: <code>left</code> or <code>right</code></td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>ellipsis</td>
-                            <td>If this prop is set, line wrap will be disabled. The overflowing content will be displayed as ellipsis.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>Custom column renderer. It uses Vue's render function. It accepts two arguments:  the first is h, the second is an object including <code>row</code>, <code>column</code> and <code>index</code> (current row's data, current column's data, current index). Details on the demo above.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>renderHeader</td>
-                            <td>Custom column header renderer. It uses Vue's render function. It accepts two arguments: the first is h, the second is an object including <code>column</code> and <code>index</code> (current col's data &amp; current index).</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sortable</td>
-                            <td>The column is sortable or not. If set to <code>custom</code>, it means user wants a remote sorting. So you shall listen on-sort-change event on Table.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>sortMethod</td>
-                            <td>Custom sort function. It accepts 3 arguments: a, b, type. It works when <code>sortable: true</code> is set. The value of <code>type</code> argument can be asc or desc.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sortType</td>
-                            <td>Set the initialization sort. Optional value: asc or desc.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filters</td>
-                            <td>Options for filter. It accepts an array. Each item of the array contains <code>label</code> and <code>value</code> props. You should config filterMethod simultaneously to enable filter.</td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterMethod</td>
-                            <td>The way to use filter options. If it is a multi-choices filter, for each piece of data, the filter will be executed more than once. The data will be displayed as long as one true value is returned.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterMultiple</td>
-                            <td>Enable multiple filters or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>filteredValue</td>
-                            <td>Enable filtering during initialization. It accepts an array of the values need to be filtered.</td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterRemote</td>
-                            <td>Enable remote flitering.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>Grouping table head.</td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </article>
-        </i-article>
-        <Modal v-model="table1" title="Complex Table with Paging" width="1000" :styles="{top: '20px'}">
-            <div v-if="table1">
-                <div class="ivu-article">
-                    <blockquote>
-                        <p>The table comes from TalkingData's <a href="https://www.talkingdata.com/product-MarketingCloud.jsp" target="_blank">MarketingCloud</a> product. It shows the list of the crowd portrait. The data is fake. The paging effect is simulated in the front end, not got from the server side.</p>
-                    </blockquote>
-                </div>
-                <Table :data="tableData1" :columns="tableColumns1" stripe></Table>
-                <div style="margin: 10px;overflow: hidden">
-                    <div style="float: right;">
-                        <Page :total="100" :current="1" @on-change="changePage"></Page>
-                    </div>
-                </div>
-                <i-code lang="html" bg>{{ code.table1 }}</i-code>
-            </div>
-        </Modal>
-        <Modal v-model="table2" title="Table with Multi-cols Filter" width="1000" :styles="{top: '20px'}">
-            <div v-if="table2">
-                <div class="ivu-article">
-                    <blockquote>
-                        <p>The table comes from TalkingData's <a href="https://www.talkingdata.com/product-AdTracking.jsp">Ad Tracking</a> product. It shows different metrics of different kinds of promotion activities. The data is fake.</p>
-                        <p>The demo mainly shows fixed columns, custom column count and sorting.</p>
-                    </blockquote>
-                </div>
-                <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
-                    <Checkbox label="show">Show</Checkbox>
-                    <Checkbox label="weak">Weak</Checkbox>
-                    <Checkbox label="signin">Signin</Checkbox>
-                    <Checkbox label="click">Click</Checkbox>
-                    <Checkbox label="active">Active</Checkbox>
-                    <Checkbox label="day7">7, retained</Checkbox>
-                    <Checkbox label="day30">30, retained</Checkbox>
-                    <Checkbox label="tomorrow">The next day left</Checkbox>
-                    <Checkbox label="day">Day Active</Checkbox>
-                    <Checkbox label="week">Week Active</Checkbox>
-                    <Checkbox label="month">Month Active</Checkbox>
-                </Checkbox-group>
-                <Table :data="tableData2" :columns="tableColumns2" border></Table>
-                <br>
-                <i-code lang="html" bg>{{ code.table2 }}</i-code>
-            </div>
-        </Modal>
-        <Modal v-model="table3" title="Table with Many Styles" width="1000" :styles="{top: '20px'}">
-            <div v-if="table3">
-                <div class="ivu-article">
-                    <blockquote>
-                        <p>The demo shows many different styles on Table.</p>
-                    </blockquote>
-                </div>
-                <div style="margin: 10px">
-                    Display border <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
-                    Display stripe <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
-                    Display index <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
-                    Display multi choice <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
-                    Display header <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
-                    Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
-                    <br>
-                    <br>
-                    Table size
-                    <Radio-group v-model="tableSize" type="button">
-                        <Radio label="large">large</Radio>
-                        <Radio label="default">medium(default)</Radio>
-                        <Radio label="small">small</Radio>
-                    </Radio-group>
-                </div>
-                <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
-                <br>
-                <i-code lang="html" bg>{{ code.table3 }}</i-code>
-            </div>
-        </Modal>
-    </div>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/table';
-    import Anchor from '../../components/anchor.vue';
-
-    import expandRow from './table-expand.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            expandRow,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                table1: false,
-                table2: false,
-                table3: false,
-                tableData1: this.mockTableData1(),
-                tableData2: this.mockTableData2(),
-                tableData3: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    },
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                tableColumns1: [
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Status',
-                        key: 'status',
-                        render: (h, params) => {
-                            const row = params.row;
-                            const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
-                            const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';
-
-                            return h('Tag', {
-                                props: {
-                                    type: 'dot',
-                                    color: color
-                                }
-                            }, text);
-                        }
-                    },
-                    {
-                        title: 'Portrayal',
-                        key: 'portrayal',
-                        render: (h, params) => {
-                            return h('Poptip', {
-                                props: {
-                                    trigger: 'hover',
-                                    title: params.row.portrayal.length + 'portrayals',
-                                    placement: 'bottom'
-                                }
-                            }, [
-                                h('Tag', params.row.portrayal.length),
-                                h('div', {
-                                    slot: 'content'
-                                }, [
-                                    h('ul', this.tableData1[params.index].portrayal.map(item => {
-                                        return h('li', {
-                                            style: {
-                                                textAlign: 'center',
-                                                padding: '4px'
-                                            }
-                                        }, item)
-                                    }))
-                                ])
-                            ]);
-                        }
-                    },
-                    {
-                        title: 'People',
-                        key: 'people',
-                        render: (h, params) => {
-                            return h('Poptip', {
-                                props: {
-                                    trigger: 'hover',
-                                    title: params.row.people.length + 'customers',
-                                    placement: 'bottom'
-                                }
-                            }, [
-                                h('Tag', params.row.people.length),
-                                h('div', {
-                                    slot: 'content'
-                                }, [
-                                    h('ul', this.tableData1[params.index].people.map(item => {
-                                        return h('li', {
-                                            style: {
-                                                textAlign: 'center',
-                                                padding: '4px'
-                                            }
-                                        }, item.n + '：' + item.c + 'People')
-                                    }))
-                                ])
-                            ]);
-                        }
-                    },
-                    {
-                        title: 'Sampling Time',
-                        key: 'time',
-                        render: (h, params) => {
-                            return h('div', 'Almost' + params.row.time + 'days');
-                        }
-                    },
-                    {
-                        title: 'Updated Time',
-                        key: 'update',
-                        render: (h, params) => {
-                            return h('div', this.formatDate(this.tableData1[params.index].update));
-                        }
-                    }
-                ],
-                tableColumns2: [],
-                tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month'],
-                showBorder: false,
-                showStripe: false,
-                showHeader: true,
-                showIndex: true,
-                showCheckbox: false,
-                fixedHeader: false,
-                tableSize: 'default',
-                columns1: [
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns2: [
-                    {
-                        title: 'Name',
-                        key: 'name',
-                        width: 100,
-                        fixed: 'left'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        width: 100
-                    },
-                    {
-                        title: 'Province',
-                        key: 'province',
-                        width: 100
-                    },
-                    {
-                        title: 'City',
-                        key: 'city',
-                        width: 100
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address',
-                        width: 200
-                    },
-                    {
-                        title: 'Postcode',
-                        key: 'zip',
-                        width: 100
-                    },
-                    {
-                        title: 'Action',
-                        key: 'action',
-                        fixed: 'right',
-                        width: 120,
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Button', {
-                                    props: {
-                                        type: 'text',
-                                        size: 'small'
-                                    }
-                                }, 'View'),
-                                h('Button', {
-                                    props: {
-                                        type: 'text',
-                                        size: 'small'
-                                    }
-                                }, 'Edit')
-                            ]);
-                        }
-                    }
-                ],
-                columns3: [
-                    {
-                        type: 'index',
-                        width: 60,
-                        align: 'center'
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns4: [
-                    {
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns5: [
-                    {
-                        title: 'Date',
-                        key: 'date',
-                        sortable: true
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        sortable: true
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns6: [
-                    {
-                        title: 'Date',
-                        key: 'date'
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        filters: [
-                            {
-                                label: 'Greater than 25',
-                                value: 1
-                            },
-                            {
-                                label: 'Less than 25',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.age > 25;
-                            } else if (value === 2) {
-                                return row.age < 25;
-                            }
-                        }
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address',
-                        filters: [
-                            {
-                                label: 'New York',
-                                value: 'New York'
-                            },
-                            {
-                                label: 'London',
-                                value: 'London'
-                            },
-                            {
-                                label: 'Sydney',
-                                value: 'Sydney'
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.address.indexOf(value) > -1;
-                        }
-                    }
-                ],
-                columns7: [
-                    {
-                        title: 'Name',
-                        key: 'name',
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Icon', {
-                                    props: {
-                                        type: 'person'
-                                    }
-                                }),
-                                h('strong', params.row.name)
-                            ]);
-                        }
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    },
-                    {
-                        title: 'Action',
-                        key: 'action',
-                        width: 150,
-                        align: 'center',
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Button', {
-                                    props: {
-                                        type: 'primary',
-                                        size: 'small'
-                                    },
-                                    style: {
-                                        marginRight: '5px'
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.show(params.index)
-                                        }
-                                    }
-                                }, 'View'),
-                                h('Button', {
-                                    props: {
-                                        type: 'error',
-                                        size: 'small'
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.remove(params.index)
-                                        }
-                                    }
-                                }, 'Delete')
-                            ]);
-                        }
-                    }
-                ],
-                columns8: [
-                    {
-                        "title": "Name",
-                        "key": "name",
-                        "fixed": "left",
-                        "width": 200
-                    },
-                    {
-                        "title": "Show",
-                        "key": "show",
-                        "width": 150,
-                        "sortable": true,
-                        filters: [
-                            {
-                                label: 'Greater than 4000',
-                                value: 1
-                            },
-                            {
-                                label: 'Less than 4000',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.show > 4000;
-                            } else if (value === 2) {
-                                return row.show < 4000;
-                            }
-                        }
-                    },
-                    {
-                        "title": "Weak",
-                        "key": "weak",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Signin",
-                        "key": "signin",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Click",
-                        "key": "click",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Active",
-                        "key": "active",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "7, retained",
-                        "key": "day7",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "30, retained",
-                        "key": "day30",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "The next day left",
-                        "key": "tomorrow",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Day Active",
-                        "key": "day",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Week Active",
-                        "key": "week",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Month Active",
-                        "key": "month",
-                        "width": 150,
-                        "sortable": true
-                    }
-                ],
-                columns9: [
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        className: 'demo-table-info-column'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns10: [
-                    {
-                        type: 'expand',
-                        width: 50,
-                        render: (h, params) => {
-                            return h(expandRow, {
-                                props: {
-                                    row: params.row
-                                }
-                            })
-                        }
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns11: [
-                    {
-                        title: 'Name',
-                        key: 'name',
-                        align: 'center',
-                        width: 200,
-                        fixed: 'left',
-                        filters: [
-                            {
-                                label: 'Joe',
-                                value: 1
-                            },
-                            {
-                                label: 'John',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.name === 'Joe';
-                            } else if (value === 2) {
-                                return row.name === 'John Brown';
-                            }
-                        }
-                    },
-                    {
-                        title: 'Other',
-                        align: 'center',
-                        children: [
-                            {
-                                title: 'Age',
-                                key: 'age',
-                                align: 'center',
-                                width: 200,
-                                sortable: true
-                            },
-                            {
-                                title: 'Address',
-                                align: 'center',
-                                children: [
-                                    {
-                                        title: 'Street',
-                                        key: 'street',
-                                        align: 'center',
-                                        width: 200
-                                    },
-                                    {
-                                        title: 'Block',
-                                        align: 'center',
-                                        children: [
-                                            {
-                                                title: 'Building',
-                                                key: 'building',
-                                                align: 'center',
-                                                width: 200,
-                                                sortable: true
-                                            },
-                                            {
-                                                title: 'Door No.',
-                                                key: 'door',
-                                                align: 'center',
-                                                width: 200
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    },
-                    {
-                        title: 'Company',
-                        align: 'center',
-                        children: [
-                            {
-                                title: 'Company Address',
-                                key: 'caddress',
-                                align: 'center',
-                                width: 200
-                            },
-                            {
-                                title: 'Company Name',
-                                key: 'cname',
-                                align: 'center',
-                                width: 200
-                            }
-                        ]
-                    },
-                    {
-                        title: 'Gender',
-                        key: 'gender',
-                        align: 'center',
-                        width: 200,
-                        fixed: 'right'
-                    }
-                ],
-                data1: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                data2: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    },
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                data3: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        province: 'America',
-                        city: 'New York',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'Washington, D.C. No. 1 Lake Park',
-                        province: 'America',
-                        city: 'Washington, D.C.',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        province: 'Australian',
-                        city: 'Sydney',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        province: 'Canada',
-                        city: 'Ottawa',
-                        zip: 100000
-                    }
-                ],
-                data4: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        province: 'America',
-                        city: 'New York',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'Washington, D.C. No. 1 Lake Park',
-                        province: 'America',
-                        city: 'Washington, D.C.',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        province: 'Australian',
-                        city: 'Sydney',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        province: 'Canada',
-                        city: 'Ottawa',
-                        zip: 100000
-                    },
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        province: 'America',
-                        city: 'New York',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'Washington, D.C. No. 1 Lake Park',
-                        province: 'America',
-                        city: 'Washington, D.C.',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        province: 'Australian',
-                        city: 'Sydney',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        province: 'Canada',
-                        city: 'Ottawa',
-                        zip: 100000
-                    }
-                ],
-                data5: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                data6: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park'
-                    }
-                ],
-                data7: [
-                    {
-                        "name": "Name1",
-                        "fav": 0,
-                        "show": 7302,
-                        "weak": 5627,
-                        "signin": 1563,
-                        "click": 4254,
-                        "active": 1438,
-                        "day7": 274,
-                        "day30": 285,
-                        "tomorrow": 1727,
-                        "day": 558,
-                        "week": 4440,
-                        "month": 5610
-                    },
-                    {
-                        "name": "Name2",
-                        "fav": 0,
-                        "show": 4720,
-                        "weak": 4086,
-                        "signin": 3792,
-                        "click": 8690,
-                        "active": 8470,
-                        "day7": 8172,
-                        "day30": 5197,
-                        "tomorrow": 1684,
-                        "day": 2593,
-                        "week": 2507,
-                        "month": 1537
-                    },
-                    {
-                        "name": "Name3",
-                        "fav": 0,
-                        "show": 7181,
-                        "weak": 8007,
-                        "signin": 8477,
-                        "click": 1879,
-                        "active": 16,
-                        "day7": 2249,
-                        "day30": 3450,
-                        "tomorrow": 377,
-                        "day": 1561,
-                        "week": 3219,
-                        "month": 1588
-                    },
-                    {
-                        "name": "Name4",
-                        "fav": 0,
-                        "show": 9911,
-                        "weak": 8976,
-                        "signin": 8807,
-                        "click": 8050,
-                        "active": 7668,
-                        "day7": 1547,
-                        "day30": 2357,
-                        "tomorrow": 7278,
-                        "day": 5309,
-                        "week": 1655,
-                        "month": 9043
-                    },
-                    {
-                        "name": "Name5",
-                        "fav": 0,
-                        "show": 934,
-                        "weak": 1394,
-                        "signin": 6463,
-                        "click": 5278,
-                        "active": 9256,
-                        "day7": 209,
-                        "day30": 3563,
-                        "tomorrow": 8285,
-                        "day": 1230,
-                        "week": 4840,
-                        "month": 9908
-                    },
-                    {
-                        "name": "Name6",
-                        "fav": 0,
-                        "show": 6856,
-                        "weak": 1608,
-                        "signin": 457,
-                        "click": 4949,
-                        "active": 2909,
-                        "day7": 4525,
-                        "day30": 6171,
-                        "tomorrow": 1920,
-                        "day": 1966,
-                        "week": 904,
-                        "month": 6851
-                    },
-                    {
-                        "name": "Name7",
-                        "fav": 0,
-                        "show": 5107,
-                        "weak": 6407,
-                        "signin": 4166,
-                        "click": 7970,
-                        "active": 1002,
-                        "day7": 8701,
-                        "day30": 9040,
-                        "tomorrow": 7632,
-                        "day": 4061,
-                        "week": 4359,
-                        "month": 3676
-                    },
-                    {
-                        "name": "Name8",
-                        "fav": 0,
-                        "show": 862,
-                        "weak": 6520,
-                        "signin": 6696,
-                        "click": 3209,
-                        "active": 6801,
-                        "day7": 6364,
-                        "day30": 6850,
-                        "tomorrow": 9408,
-                        "day": 2481,
-                        "week": 1479,
-                        "month": 2346
-                    },
-                    {
-                        "name": "Name9",
-                        "fav": 0,
-                        "show": 567,
-                        "weak": 5859,
-                        "signin": 128,
-                        "click": 6593,
-                        "active": 1971,
-                        "day7": 7596,
-                        "day30": 3546,
-                        "tomorrow": 6641,
-                        "day": 1611,
-                        "week": 5534,
-                        "month": 3190
-                    },
-                    {
-                        "name": "Name10",
-                        "fav": 0,
-                        "show": 3651,
-                        "weak": 1819,
-                        "signin": 4595,
-                        "click": 7499,
-                        "active": 7405,
-                        "day7": 8710,
-                        "day30": 5518,
-                        "tomorrow": 428,
-                        "day": 9768,
-                        "week": 2864,
-                        "month": 5811
-                    }
-                ],
-                data8: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 25,
-                        address: 'London No. 1 Lake Park',
-                        cellClassName: {
-                            age: 'demo-table-info-cell-age',
-                            address: 'demo-table-info-cell-address'
-                        }
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        cellClassName: {
-                            name: 'demo-table-info-cell-name'
-                        }
-                    }
-                ],
-                data9: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        job: 'Data engineer',
-                        interest: 'badminton',
-                        birthday: '1991-05-14',
-                        book: 'Steve Jobs',
-                        movie: 'The Prestige',
-                        music: 'I Cry'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 25,
-                        address: 'London No. 1 Lake Park',
-                        job: 'Data Scientist',
-                        interest: 'volleyball',
-                        birthday: '1989-03-18',
-                        book: 'My Struggle',
-                        movie: 'Roman Holiday',
-                        music: 'My Heart Will Go On'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        job: 'Data Product Manager',
-                        interest: 'tennis',
-                        birthday: '1992-01-31',
-                        book: 'Win',
-                        movie: 'Jobs',
-                        music: 'Don’t Cry'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        job: 'Data Analyst',
-                        interest: 'snooker',
-                        birthday: '1988-7-25',
-                        book: 'A Dream in Red Mansions',
-                        movie: 'A Chinese Ghost Story',
-                        music: 'actor'
-                    }
-                ],
-                loading: true,
-                data10: []
-            }
-        },
-        computed: {
-            tableColumns3 () {
-                let columns = [];
-                if (this.showCheckbox) {
-                    columns.push({
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    })
-                }
-                if (this.showIndex) {
-                    columns.push({
-                        type: 'index',
-                        width: 60,
-                        align: 'center'
-                    })
-                }
-                columns.push({
-                    title: 'Date',
-                    key: 'date',
-                    sortable: true
-                });
-                columns.push({
-                    title: 'Name',
-                    key: 'name'
-                });
-                columns.push({
-                    title: 'Age',
-                    key: 'age',
-                    sortable: true,
-                    filters: [
-                        {
-                            label: 'Greater than 25',
-                            value: 1
-                        },
-                        {
-                            label: 'Less than 25',
-                            value: 2
-                        }
-                    ],
-                    filterMultiple: false,
-                    filterMethod (value, row) {
-                        if (value === 1) {
-                            return row.age > 25;
-                        } else if (value === 2) {
-                            return row.age < 25;
-                        }
-                    }
-                });
-                columns.push({
-                    title: 'Address',
-                    key: 'address',
-                    filters: [
-                        {
-                            label: 'New York',
-                            value: 'New York'
-                        },
-                        {
-                            label: 'London',
-                            value: 'London'
-                        },
-                        {
-                            label: 'Sydney',
-                            value: 'Sydney'
-                        }
-                    ],
-                    filterMethod (value, row) {
-                        return row.address.indexOf(value) > -1;
-                    }
-                });
-                return columns;
-            }
-        },
-        methods: {
-            rowClassName (row, index) {
-                if (index === 1) {
-                    return 'demo-table-info-row';
-                } else if (index === 3) {
-                    return 'demo-table-error-row';
-                }
-                return '';
-            },
-            show (index) {
-                this.$Modal.info({
-                    title: 'User Info',
-                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
-                })
-            },
-            remove (index) {
-                this.data6.splice(index, 1);
-            },
-            mockTableData1 () {
-                let data = [];
-                for (let i = 0; i < 10; i++) {
-                    data.push({
-                        name: 'Business' + Math.floor(Math.random () * 100 + 1),
-                        status: Math.floor(Math.random () * 3 + 1),
-                        portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
-                        people: [
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            },
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            },
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            }
-                        ],
-                        time: Math.floor(Math.random () * 7 + 1),
-                        update: new Date()
-                    })
-                }
-                return data;
-            },
-            formatDate (date) {
-                const y = date.getFullYear();
-                let m = date.getMonth() + 1;
-                m = m < 10 ? '0' + m : m;
-                let d = date.getDate();
-                d = d < 10 ? ('0' + d) : d;
-                return y + '-' + m + '-' + d;
-            },
-            changePage () {
-                this.tableData1 = this.mockTableData1();
-            },
-            mockTableData2 () {
-                let data = [];
-                function getNum() {
-                    return Math.floor(Math.random () * 10000 + 1);
-                }
-                for (let i = 0; i < 10; i++) {
-                    data.push({
-                        name: 'Name' + (i+1),
-                        fav: 0,
-                        show: getNum(),
-                        weak: getNum(),
-                        signin: getNum(),
-                        click: getNum(),
-                        active: getNum(),
-                        day7: getNum(),
-                        day30: getNum(),
-                        tomorrow: getNum(),
-                        day: getNum(),
-                        week: getNum(),
-                        month: getNum()
-                    })
-                }
-                return data;
-            },
-            getTable2Columns () {
-                const table2ColumnList = {
-                    name: {
-                        title: 'Name',
-                        key: 'name',
-                        fixed: 'left',
-                        width: 200,
-                        render: (h, params) => {
-                            const fav = this.tableData2[params.index].fav;
-                            const style = fav === 0 ? {
-                                cursor: 'pointer'
-                            } : {
-                                cursor: 'pointer',
-                                color: '#f50'
-                            };
-
-                            return h('div', [
-                                h('Icon', {
-                                    style: style,
-                                    props: {
-                                        type: fav === 0 ? 'ios-star-outline' : 'ios-star'
-                                    },
-                                    nativeOn: {
-                                        click: () => {
-                                            this.toggleFav(params.index);
-                                        }
-                                    }
-                                }),
-                                h('span', ' ' + params.row.name)
-                            ]);
-                        }
-                    },
-                    show: {
-                        title: 'Show',
-                        key: 'show',
-                        width: 150,
-                        sortable: true
-                    },
-                    weak: {
-                        title: 'Weak',
-                        key: 'weak',
-                        width: 150,
-                        sortable: true
-                    },
-                    signin: {
-                        title: 'Signin',
-                        key: 'signin',
-                        width: 150,
-                        sortable: true
-                    },
-                    click: {
-                        title: 'Click',
-                        key: 'click',
-                        width: 150,
-                        sortable: true
-                    },
-                    active: {
-                        title: 'Active',
-                        key: 'active',
-                        width: 150,
-                        sortable: true
-                    },
-                    day7: {
-                        title: '7, retained',
-                        key: 'day7',
-                        width: 150,
-                        sortable: true
-                    },
-                    day30: {
-                        title: '30, retained',
-                        key: 'day30',
-                        width: 150,
-                        sortable: true
-                    },
-                    tomorrow: {
-                        title: 'The next day left',
-                        key: 'tomorrow',
-                        width: 150,
-                        sortable: true
-                    },
-                    day: {
-                        title: 'Day Active',
-                        key: 'day',
-                        width: 150,
-                        sortable: true
-                    },
-                    week: {
-                        title: 'Week Active',
-                        key: 'week',
-                        width: 150,
-                        sortable: true
-                    },
-                    month: {
-                        title: 'Month Active',
-                        key: 'month',
-                        width: 150,
-                        sortable: true
-                    }
-                };
-
-                let data = [table2ColumnList.name];
-
-                this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
-
-                return data;
-            },
-            changeTableColumns () {
-                this.tableColumns2 = this.getTable2Columns();
-            },
-            toggleFav (index) {
-                this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
-            },
-            exportData (type) {
-                if (type === 1) {
-                    this.$refs.table.exportCsv({
-                        filename: 'The original data'
-                    });
-                } else if (type === 2) {
-                    this.$refs.table.exportCsv({
-                        filename: 'Sorting and filtering data',
-                        original: false
-                    });
-                } else if (type === 3) {
-                    this.$refs.table.exportCsv({
-                        filename: 'Custom data',
-                        columns: this.columns8.filter((col, index) => index < 4),
-                        data: this.data7.filter((data, index) => index < 4)
-                    });
-                }
-            },
-            handleClearCurrentRow () {
-                this.$refs.currentRowTable.clearCurrentRow();
-            },
-            handleSelectAll (status) {
-                this.$refs.selection.selectAll(status);
-            }
-        },
-        mounted () {
-            this.changeTableColumns();
-
-            const data = [];
-            for (let i = 0; i < 20; i++) {
-                data.push({
-                    key: i,
-                    name: 'John Brown',
-                    age: i + 1,
-                    street: 'Lake Park',
-                    building: 'C',
-                    door: 2035,
-                    caddress: 'Lake Street 42',
-                    cname: 'SoftLake Co',
-                    gender: 'M',
-                });
-            }
-            this.data10 = data;
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/table-expand.vue b/src/views/components/table-expand.vue
deleted file mode 100644
index cb12452..0000000
--- a/src/views/components/table-expand.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<style scoped>
-    .expand-row{
-        margin-bottom: 16px;
-    }
-</style>
-<template>
-    <div>
-        <Row class="expand-row">
-            <Col span="8">
-                <span class="expand-key">Job: </span>
-                <span class="expand-value">{{ row.job }}</span>
-            </Col>
-            <Col span="8">
-                <span class="expand-key">Interest: </span>
-                <span class="expand-value">{{ row.interest }}</span>
-            </Col>
-            <Col span="8">
-                <span class="expand-key">Birthday: </span>
-                <span class="expand-value">{{ row.birthday }}</span>
-            </Col>
-        </Row>
-        <Row>
-            <Col span="8">
-                <span class="expand-key">Favorite book: </span>
-                <span class="expand-value">《{{ row.book }}》</span>
-            </Col>
-            <Col span="8">
-                <span class="expand-key">Favorite movie: </span>
-                <span class="expand-value">{{ row.movie }}</span>
-            </Col>
-            <Col span="8">
-                <span class="expand-key">Favorite music: </span>
-                <span class="expand-value">{{ row.music }}</span>
-            </Col>
-        </Row>
-    </div>
-</template>
-<script>
-    export default {
-        props: {
-            row: Object
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/components/table.vue b/src/views/components/table.vue
deleted file mode 100644
index 34193b5..0000000
--- a/src/views/components/table.vue
+++ /dev/null
@@ -1,2181 +0,0 @@
-<style>
-    .ivu-table .demo-table-info-row td{
-        background-color: #2db7f5;
-        color: #fff;
-    }
-    .ivu-table .demo-table-error-row td{
-        background-color: #ff6600;
-        color: #fff;
-    }
-    .ivu-table td.demo-table-info-column{
-        background-color: #2db7f5;
-        color: #fff;
-    }
-    .ivu-table .demo-table-info-cell-name {
-        background-color: #2db7f5;
-        color: #fff;
-    }
-    .ivu-table .demo-table-info-cell-age {
-        background-color: #ff6600;
-        color: #fff;
-    }
-    .ivu-table .demo-table-info-cell-address {
-        background-color: #187;
-        color: #fff;
-    }
-</style>
-<template>
-    <div>
-        <i-article>
-            <article>
-                <h1>Table 表格</h1>
-                <Anchor title="概述" h2></Anchor>
-                <p>主要用于展示大量结构化数据。</p>
-                <p>支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。</p>
-                <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-table</code>。</Alert>
-                <Anchor title="代码示例" h2></Anchor>
-                <Demo title="基础用法" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>表格的最简单用法。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.base }}</i-code>
-                </Demo>
-                <Demo title="斑马纹" vertical hide-code>
-                    <div slot="demo">
-                        <Table stripe :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>stripe</code> ，表格会间隔显示不同颜色，用于区分不同行数据。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.stripe }}</i-code>
-                </Demo>
-                <Demo title="带边框" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>添加表格的边框线。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.border }}</i-code>
-                </Demo>
-                <Demo title="特定样式" vertical hide-code>
-                    <div slot="demo">
-                        <p>Custom row styles:</p>
-                        <Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
-                        <p>Custom column styles:</p>
-                        <Table :columns="columns9" :data="data1"></Table>
-                        <p>Custom arbitrary cell styles:</p>
-                        <Table :columns="columns1" :data="data8"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p><strong>行</strong>：通过属性 <code>row-class-name</code> 可以给某一行指定一个样式名称。</p>
-                        <p><strong>列</strong>：通过给列 columns 设置字段 <code>className</code> 可以给某一列指定一个样式。</p>
-                        <p><strong>单元格</strong>：通过给数据 data 设置字段 <code>cellClassName</code> 可以给任意一个单元格指定样式。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.class }}</i-code>
-                </Demo>
-                <Demo title="固定表头" vertical hide-code>
-                    <div slot="demo">
-                        <Table height="200" :columns="columns1" :data="data2"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>通过设置属性 <code>height</code> 给表格指定高度后，会自动固定表头。当纵向内容过多时可以使用。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.height }}</i-code>
-                </Demo>
-                <Demo title="固定列" vertical hide-code>
-                    <div slot="demo">
-                        <Table width="550" border :columns="columns2" :data="data3"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>通过给数据 <code>columns</code> 的项设置 <code>fixed</code> 为 <code>left</code> 或 <code>right</code>，可以左右固定需要的列。当横向内容过多时可以使用。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.fixed }}</i-code>
-                </Demo>
-                <Demo title="固定表头和列" vertical hide-code>
-                    <div slot="demo">
-                        <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>同时应用上述两个属性，可以同时固定表头和列。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.fixedAll }}</i-code>
-                </Demo>
-                <Demo title="单选" vertical hide-code>
-                    <div slot="demo">
-                        <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
-                        <br>
-                        <Button @click="handleClearCurrentRow">清除单选</Button>
-                    </div>
-                    <div slot="desc">
-                        <p>通过设置属性 <code>highlight-row</code>，可以选中某一行。</p>
-                        <p>当选择时，触发事件 <code>@on-current-change</code>，可以自定义操作，事件返回两个值 <code>currentRow</code> 和 <code>oldCurrentRow</code>，分别为当前行的数据和上一次选择的数据。</p>
-                        <p>通过给 <code>columns</code> 数据设置一项，指定 <code>type: 'index'</code>，可以自动显示一个从 1 开始的索引列。</p>
-                        <p>给 data 项设置特殊 key <code>_highlight: true</code> 可以默认选中当前项。</p>
-                        <p>调用 <code>clearCurrentRow</code> 方法可以手动清除选中项。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.highlight }}</i-code>
-                </Demo>
-                <Demo title="多选" vertical hide-code>
-                    <div slot="demo">
-                        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
-                        <br>
-                        <Button @click="handleSelectAll(true)">设置全选</Button>
-                        <Button @click="handleSelectAll(false)">取消全选</Button>
-                    </div>
-                    <div slot="desc">
-                        <p>通过给 <code>columns</code> 数据设置一项，指定 <code>type: 'selection'</code>，即可自动开启多选功能。</p>
-                        <p>给 data 项设置特殊 key <code>_checked: true</code> 可以默认选中当前项。</p>
-                        <p>给 data 项设置特殊 key <code>_disabled: true</code> 可以禁止选择当前项。</p>
-                        <p>正确使用好以下事件，可以达到需要的效果：</p>
-                        <ul>
-                            <li><code>@on-select</code>，选中某一项触发，返回值为 <code>selection</code> 和 <code>row</code>，分别为已选项和刚选择的项。</li>
-                            <li><code>@on-select-all</code>，点击全选时触发，返回值为 <code>selection</code>，已选项。</li>
-                            <li><code>@on-selection-change</code>，只要选中项发生变化时就会触发，返回值为 <code>selection</code>，已选项。</li>
-                        </ul>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.selection }}</i-code>
-                </Demo>
-                <Demo title="排序" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns5" :data="data5"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>通过给 <code>columns</code> 数据的项，设置 <code>sortable: true</code>，即可对该列数据进行排序。</p>
-                        <p>排序默认使用升序和降序，也可以通过设置属性 <code>sortMethod</code> 指定一个自定义排序函数，接收三个参数 a 、 b 和 type。</p>
-                        <p>通过给某一列设置 <code>sortType</code> 可以在初始化时使用排序。</p>
-                        <p>如果使用远程排序，可以设置 <code>sortable： 'custom'</code>，然后在触发排序事件 <code>@on-sort-change</code>后，进行远程排序，并手动设置新的 data，详见 API。</p>
-                        <p>注意，排序并不会影响到源数据 data。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.sort }}</i-code>
-                </Demo>
-                <Demo title="筛选" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns6" :data="data5"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>通过给 <code>columns</code> 数据的项，设置 <code>filters</code>，可进行筛选，filters 接收一个数组，详见 Demo 和 API。</p>
-                        <p>必须指定一个筛选函数 <code>filterMethod</code> 才可以进行筛选，filterMethod 传入两个参数 value 和 row，详见 Demo 和 API。</p>
-                        <p>如果指定 <code>filterMultiple: false</code>，则使用单选，默认为多选。</p>
-                        <p>注意，筛选并不会影响到源数据 data。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.filter }}</i-code>
-                </Demo>
-                <Demo title="自定义列模板" vertical hide-code>
-                    <div slot="demo">
-                        <Table border :columns="columns7" :data="data6"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>通过给 <code>columns</code> 数据的项，设置一个函数 <code>render</code>，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。</p>
-                        <p><code>render</code> 函数传入两个参数，第一个是 h，第二个是对象，包含 <code>row</code>、<code>column</code> 和 <code>index</code>，分别指当前单元格数据，当前列数据，当前是第几行。</p>
-                        <p><study-render></study-render></p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.render }}</i-code>
-                </Demo>
-                <Demo title="可展开" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns10" :data="data9"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>当表格内容较多不能一次性完全展示时使用。</p>
-                        <p>通过给 <code>columns</code> 数据设置一项，指定 <code>type: 'expand'</code>，即可开启扩展功能。</p>
-                        <p>给行数据 data 的某项设置 <code>_expanded</code> 为 true，可以默认展开当前行，设置 <code>_disableExpand</code> 可以禁用当前行的展开功能。</p>
-                        <p>渲染展开区域与自定义列模板方法类似，使用 render 函数。当内容较复杂时，可拆分为组件或使用 JSX。</p>
-                        <p><study-render></study-render></p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.expand }}</i-code>
-                </Demo>
-
-                <Demo title="表头分组" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns11" :data="data10" border height="500"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>给 column 设置 children，可以渲染出分组表头。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.head }}</i-code>
-                </Demo>
-
-                <Demo title="加载中" vertical hide-code>
-                    <div slot="demo">
-                        <Table :loading="loading" :columns="columns1" :data="data1"></Table>
-                        <br>
-                        切换 Loading 状态 <Switch v-model="loading"></Switch>
-                    </div>
-                    <div slot="desc">
-                        <p>通过设置属性 <code>loading</code> 可以让表格处于加载中状态，在异步请求数据、分页时建议使用。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.loading }}</i-code>
-                </Demo>
-                <Demo title="尺寸" vertical hide-code>
-                    <div slot="demo">
-                        <Table size="large" :columns="columns1" :data="data1"></Table>
-                        <br>
-                        <Table size="small" :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <div slot="desc">
-                        <p>通过设置属性 <code>size</code> 为 <code>large</code> 或 <code>small</code> 可以调整表格尺寸为大或小，默认不填或填写 <code>default</code> 为中。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.size }}</i-code>
-                </Demo>
-                <Demo title="导出csv" vertical hide-code>
-                    <div slot="demo">
-                        <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
-                        <br>
-                        <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
-                        <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
-                        <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>
-                    </div>
-                    <div slot="desc">
-                        <p>通过调用 <code>exportCsv()</code> 方法，可以将数据导出为 <code>.csv</code> 的表格文件，详见 API。</p>
-                        <p>说明：</p>
-                        <ul>
-                            <li>支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。</li>
-                            <li>IE9、Safari 需要手动修改后缀名为 <code>.csv</code>。</li>
-                            <li>IE9暂时只支持英文，中文会显示为乱码。</li>
-                        </ul>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.csv }}</i-code>
-                </Demo>
-                <Anchor title="高级示例" h2></Anchor>
-                <p>以上示例已经基本涵盖了表格组件的所有功能，我们根据实际业务场景，增加了一些较为复杂的示例，可以结合来看，更深入了解表格组件的使用。</p>
-                <Button type="primary" size="large" @click="table1 = true">带有分页的复杂表格</Button>
-                <Button type="primary" size="large" @click="table2 = true">多列指标筛选的表格</Button>
-                <Button type="primary" size="large" @click="table3 = true">多种效果组合的表格</Button>
-
-                <ad></ad>
-
-                <div class="api">
-                    <Anchor title="API" h2></Anchor>
-                    <Anchor title="Table props" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>data</td>
-                            <td>显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例<strong>特定样式</strong>。</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>columns</td>
-                            <td>表格列的配置描述，具体项见后文</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>stripe</td>
-                            <td>是否显示间隔斑马纹</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>border</td>
-                            <td>是否显示纵向边框</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-header</td>
-                            <td>是否显示表头</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>表格宽度，单位 px</td>
-                            <td>Number | String</td>
-                            <td>自动</td>
-                        </tr>
-                        <tr>
-                            <td>height</td>
-                            <td>表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头</td>
-                            <td>Number | String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>表格是否加载中</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled-hover</td>
-                            <td>禁用鼠标悬停时的高亮</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>highlight-row</td>
-                            <td>是否支持高亮选中的行，即单选</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>row-class-name</td>
-                            <td>
-                                行的 className 的回调方法，传入参数：
-                                <ul>
-                                    <li><code>row</code>：当前行数据</li>
-                                    <li><code>index</code>：当前行的索引</li>
-                                </ul>
-                            </td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>表格尺寸，可选值为 <code>large</code>、<code>small</code>、<code>default</code> 或者不填</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <!--<tr>-->
-                            <!--<td><del>context</del></td>-->
-                            <!--<td><span style="color: #f50; font-weight: bold;">旧用法，已废弃。</span>设置单元格内渲染自定义组件时的上下文。比如父级是 $parent，根组件是 $root，当 <code>Table</code> 作为一个 slot 封装在其它组件里时，会很有用。使用旧用法时必须设置。</td>-->
-                            <!--<td>Object</td>-->
-                            <!--<td>Table 所在的上下文</td>-->
-                        <!--</tr>-->
-                        <tr>
-                            <td>no-data-text</td>
-                            <td>数据为空时显示的提示内容</td>
-                            <td>String</td>
-                            <td>暂无数据</td>
-                        </tr>
-                        <tr>
-                            <td>no-filtered-data-text</td>
-                            <td>筛选数据为空时显示的提示内容</td>
-                            <td>String</td>
-                            <td>暂无筛选结果</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="Table events" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-current-change</td>
-                            <td>开启 <code>highlight-row</code> 后有效，当表格的当前行发生变化的时候会触发</td>
-                            <td>
-                                <ul>
-                                    <li><code>currentRow</code>：当前高亮行的数据</li>
-                                    <li><code>oldCurrentRow</code>：上一次高亮的数据</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-select</td>
-                            <td>在多选模式下有效，选中某一项时触发</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>：已选项数据</li>
-                                    <li><code>row</code>：刚选择的项数据</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-select-cancel</td>
-                            <td>在多选模式下有效，取消选中某一项时触发</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>：已选项数据</li>
-                                    <li><code>row</code>：取消选择的项数据</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-select-all</td>
-                            <td>在多选模式下有效，点击全选时触发</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>：已选项数据</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-selection-change</td>
-                            <td>在多选模式下有效，只要选中项发生变化时就会触发</td>
-                            <td>
-                                <ul>
-                                    <li><code>selection</code>：已选项数据</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-sort-change</td>
-                            <td>排序时有效，当点击排序时触发</td>
-                            <td>
-                                <ul>
-                                    <li><code>column</code>：当前列数据</li>
-                                    <li><code>key</code>：排序依据的指标</li>
-                                    <li><code>order</code>：排序的顺序，值为 <code>asc</code> 或 <code>desc</code></li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-filter-change</td>
-                            <td>筛选时有效，筛选条件发生变化时触发</td>
-                            <td>当前列数据</td>
-                        </tr>
-                        <tr>
-                            <td>on-row-click</td>
-                            <td>单击某一行时触发</td>
-                            <td>
-                                <ul>
-                                    <li>当前行的数据</li>
-                                    <li>index</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-row-dblclick</td>
-                            <td>双击某一行时触发</td>
-                            <td>
-                                <ul>
-                                    <li>当前行的数据</li>
-                                    <li>index</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>on-expand</td>
-                            <td>展开或收起某一行时触发</td>
-                            <td>
-                                <ul>
-                                    <li><code>row</code>：当前行的数据</li>
-                                    <li><code>status</code>：当前的状态</li>
-                                </ul>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="Table slot" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>表头</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>页脚</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>加载中</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="Table methods" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>方法名</th>
-                            <th>说明</th>
-                            <th>参数</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>exportCsv</td>
-                            <td>
-                                将数据导出为 <code>.csv</code> 文件，说明：
-                                <ul>
-                                    <li>支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。</li>
-                                    <li>IE9、Safari 需要手动修改后缀名为 <code>.csv</code>。</li>
-                                    <li>IE9暂时只支持英文，中文会显示为乱码。</li>
-                                </ul>
-                            </td>
-                            <td>
-                                params(Object):
-                                <ul>
-                                    <li>
-                                        <strong>filename</strong>
-                                        文件名，默认为 table.csv
-                                    </li>
-                                    <li>
-                                        <strong>original</strong>
-                                        是否导出为原始数据，默认为 true
-                                    </li>
-                                    <li>
-                                        <strong>noHeader</strong>
-                                        不显示表头，默认为 false
-                                    </li>
-                                    <li>
-                                        <strong>columns</strong>
-                                        自定义导出的列数据
-                                    </li>
-                                    <li>
-                                        <strong>data</strong>
-                                        自定义导出的行数据
-                                    </li>
-                                    <li>
-                                        <strong>callback</strong>
-                                        添加此函数后，不会下载，而是返回数据
-                                    </li>
-                                    <li>
-                                        <strong>separator</strong>
-                                        数据分隔符，默认是逗号(,)
-                                    </li>
-                                    <li>
-                                        <strong>quoted</strong>
-                                        每项数据是否加引号，默认为 false
-                                    </li>
-                                </ul>
-                                说明：columns 和 data 需同时声明，声明后将导出指定的数据，建议列数据有自定义render时，可以根据需求自定义导出内容
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>clearCurrentRow</td>
-                            <td>清除高亮项，仅在开启 <code>highlight-row</code> 时可用</td>
-                            <td>无</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="column" h3></Anchor>
-                    <p>列描述数据对象，是 columns 中的一项</p>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>列类型，可选值为 index、selection、expand、html</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>列头显示文字</td>
-                            <td>String</td>
-                            <td>#</td>
-                        </tr>
-                        <tr>
-                            <td>key</td>
-                            <td>对应列内容的字段名</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>列宽</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>minWidth</td>
-                            <td>最小列宽</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>maxWidth</td>
-                            <td>最大列宽</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>align</td>
-                            <td>对齐方式，可选值为 <code>left</code> 左对齐、<code>right</code> 右对齐和 <code>center</code> 居中对齐</td>
-                            <td>String</td>
-                            <td>left</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>列的样式名称</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>fixed</td>
-                            <td>列是否固定在左侧或者右侧，可选值为 <code>left</code> 左侧和 <code>right</code> 右侧</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>ellipsis</td>
-                            <td>开启后，文本将不换行，超出部分显示为省略号</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <!--<td>自定义渲染列，传入三个参数 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例</td>-->
-                            <td>自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。<study-render></study-render></td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>renderHeader</td>
-                            <td>自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 <code>column</code> 和 <code>index</code>，分别为当前列数据和当前列索引。</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sortable</td>
-                            <td>对应列是否可以排序，如果设置为 <code>custom</code>，则代表用户希望远程排序，需要监听 Table 的 on-sort-change 事件</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>sortMethod</td>
-                            <td>自定义排序使用的方法，接收三个参数 a 、 b 和 type，当设置 <code>sortable: true</code> 时有效。type 值为 asc 和 desc</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sortType</td>
-                            <td>设置初始化排序。值为 asc 和 desc</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filters</td>
-                            <td>过滤数据的选项，格式为数组，数组中每项包含 <code>label</code> 和 <code>value</code> 属性，使用过滤，必须同时配置 filterMethod</td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterMethod</td>
-                            <td>数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterMultiple</td>
-                            <td>数据过滤的选项是否多选</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>filteredValue</td>
-                            <td>在初始化时使用过滤，数组，值为需要过滤的 value 集合</td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>filterRemote</td>
-                            <td>使用远程过滤</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>表头分组</td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </article>
-        </i-article>
-        <Modal v-model="table1" title="带有分页的复杂表格" width="1000" :styles="{top: '20px'}">
-            <div v-if="table1">
-                <div class="ivu-article">
-                    <blockquote>
-                        <p>该表格来自于 TalkingData <a href="https://www.talkingdata.com/product-MarketingCloud.jsp" target="_blank">MarketingCloud</a> 产品，展示的是人群画像列表，数据为模拟数据，分页只是提供效果展示，并非真实拉取服务端数据。</p>
-                    </blockquote>
-                </div>
-                <Table :data="tableData1" :columns="tableColumns1" stripe></Table>
-                <div style="margin: 10px;overflow: hidden">
-                    <div style="float: right;">
-                        <Page :total="100" :current="1" @on-change="changePage"></Page>
-                    </div>
-                </div>
-                <i-code lang="html" bg>{{ code.table1 }}</i-code>
-            </div>
-        </Modal>
-        <Modal v-model="table2" title="多列指标筛选的表格" width="1000" :styles="{top: '20px'}">
-            <div v-if="table2">
-                <div class="ivu-article">
-                    <blockquote>
-                        <p>该表格来自于 TalkingData <a href="https://www.talkingdata.com/product-AdTracking.jsp">Ad Tracking</a> 产品，展示各种推广活动不同指标的数据，数据为模拟数据。</p>
-                        <p>该示例主要展示固定列、自定义列数量以及排序的功能。</p>
-                    </blockquote>
-                </div>
-                <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
-                    <Checkbox label="show">展示</Checkbox>
-                    <Checkbox label="weak">唤醒</Checkbox>
-                    <Checkbox label="signin">登录</Checkbox>
-                    <Checkbox label="click">点击</Checkbox>
-                    <Checkbox label="active">激活</Checkbox>
-                    <Checkbox label="day7">7日留存</Checkbox>
-                    <Checkbox label="day30">30日留存</Checkbox>
-                    <Checkbox label="tomorrow">次日留存</Checkbox>
-                    <Checkbox label="day">日活跃</Checkbox>
-                    <Checkbox label="week">周活跃</Checkbox>
-                    <Checkbox label="month">月活跃</Checkbox>
-                </Checkbox-group>
-                <Table :data="tableData2" :columns="tableColumns2" border></Table>
-                <br>
-                <i-code lang="html" bg>{{ code.table2 }}</i-code>
-            </div>
-        </Modal>
-        <Modal v-model="table3" title="多种效果组合的表格" width="1000" :styles="{top: '20px'}">
-            <div v-if="table3">
-                <div class="ivu-article">
-                    <blockquote>
-                        <p>该示例主要展示了表格丰富的显示效果。</p>
-                    </blockquote>
-                </div>
-                <div style="margin: 10px">
-                    显示边框 <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
-                    显示斑马纹 <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
-                    显示索引 <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
-                    显示多选框 <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
-                    显示表头 <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
-                    表格滚动 <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
-                    <br>
-                    <br>
-                    表格尺寸
-                    <Radio-group v-model="tableSize" type="button">
-                        <Radio label="large">大</Radio>
-                        <Radio label="default">中</Radio>
-                        <Radio label="small">小</Radio>
-                    </Radio-group>
-                </div>
-                <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
-                <br>
-                <i-code lang="html" bg>{{ code.table3 }}</i-code>
-            </div>
-        </Modal>
-    </div>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/table';
-    import Anchor from '../../components/anchor.vue';
-
-    import expandRow from './table-expand.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            expandRow,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                table1: false,
-                table2: false,
-                table3: false,
-                tableData1: this.mockTableData1(),
-                tableData2: this.mockTableData2(),
-                tableData3: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    },
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                tableColumns1: [
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Status',
-                        key: 'status',
-                        render: (h, params) => {
-                            const row = params.row;
-                            const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
-                            const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';
-
-                            return h('Tag', {
-                                props: {
-                                    type: 'dot',
-                                    color: color
-                                }
-                            }, text);
-                        }
-                    },
-                    {
-                        title: 'Portrayal',
-                        key: 'portrayal',
-                        render: (h, params) => {
-                            return h('Poptip', {
-                                props: {
-                                    trigger: 'hover',
-                                    title: params.row.portrayal.length + 'portrayals',
-                                    placement: 'bottom'
-                                }
-                            }, [
-                                h('Tag', params.row.portrayal.length),
-                                h('div', {
-                                    slot: 'content'
-                                }, [
-                                    h('ul', this.tableData1[params.index].portrayal.map(item => {
-                                        return h('li', {
-                                            style: {
-                                                textAlign: 'center',
-                                                padding: '4px'
-                                            }
-                                        }, item)
-                                    }))
-                                ])
-                            ]);
-                        }
-                    },
-                    {
-                        title: 'People',
-                        key: 'people',
-                        render: (h, params) => {
-                            return h('Poptip', {
-                                props: {
-                                    trigger: 'hover',
-                                    title: params.row.people.length + 'customers',
-                                    placement: 'bottom'
-                                }
-                            }, [
-                                h('Tag', params.row.people.length),
-                                h('div', {
-                                    slot: 'content'
-                                }, [
-                                    h('ul', this.tableData1[params.index].people.map(item => {
-                                        return h('li', {
-                                            style: {
-                                                textAlign: 'center',
-                                                padding: '4px'
-                                            }
-                                        }, item.n + '：' + item.c + 'People')
-                                    }))
-                                ])
-                            ]);
-                        }
-                    },
-                    {
-                        title: 'Sampling Time',
-                        key: 'time',
-                        render: (h, params) => {
-                            return h('div', 'Almost' + params.row.time + 'days');
-                        }
-                    },
-                    {
-                        title: 'Updated Time',
-                        key: 'update',
-                        render: (h, params) => {
-                            return h('div', this.formatDate(this.tableData1[params.index].update));
-                        }
-                    }
-                ],
-                tableColumns2: [],
-                tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month'],
-                showBorder: false,
-                showStripe: false,
-                showHeader: true,
-                showIndex: true,
-                showCheckbox: false,
-                fixedHeader: false,
-                tableSize: 'default',
-                columns1: [
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns2: [
-                    {
-                        title: 'Name',
-                        key: 'name',
-                        width: 100,
-                        fixed: 'left'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        width: 100
-                    },
-                    {
-                        title: 'Province',
-                        key: 'province',
-                        width: 100
-                    },
-                    {
-                        title: 'City',
-                        key: 'city',
-                        width: 100
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address',
-                        width: 200
-                    },
-                    {
-                        title: 'Postcode',
-                        key: 'zip',
-                        width: 100
-                    },
-                    {
-                        title: 'Action',
-                        key: 'action',
-                        fixed: 'right',
-                        width: 120,
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Button', {
-                                    props: {
-                                        type: 'text',
-                                        size: 'small'
-                                    }
-                                }, 'View'),
-                                h('Button', {
-                                    props: {
-                                        type: 'text',
-                                        size: 'small'
-                                    }
-                                }, 'Edit')
-                            ]);
-                        }
-                    }
-                ],
-                columns3: [
-                    {
-                        type: 'index',
-                        width: 60,
-                        align: 'center'
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns4: [
-                    {
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns5: [
-                    {
-                        title: 'Date',
-                        key: 'date',
-                        sortable: true
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        sortable: true
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns6: [
-                    {
-                        title: 'Date',
-                        key: 'date'
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        filters: [
-                            {
-                                label: 'Greater than 25',
-                                value: 1
-                            },
-                            {
-                                label: 'Less than 25',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.age > 25;
-                            } else if (value === 2) {
-                                return row.age < 25;
-                            }
-                        }
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address',
-                        filters: [
-                            {
-                                label: 'New York',
-                                value: 'New York'
-                            },
-                            {
-                                label: 'London',
-                                value: 'London'
-                            },
-                            {
-                                label: 'Sydney',
-                                value: 'Sydney'
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.address.indexOf(value) > -1;
-                        }
-                    }
-                ],
-                columns7: [
-                    {
-                        title: 'Name',
-                        key: 'name',
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Icon', {
-                                    props: {
-                                        type: 'person'
-                                    }
-                                }),
-                                h('strong', params.row.name)
-                            ]);
-                        }
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    },
-                    {
-                        title: 'Action',
-                        key: 'action',
-                        width: 150,
-                        align: 'center',
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Button', {
-                                    props: {
-                                        type: 'primary',
-                                        size: 'small'
-                                    },
-                                    style: {
-                                        marginRight: '5px'
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.show(params.index)
-                                        }
-                                    }
-                                }, 'View'),
-                                h('Button', {
-                                    props: {
-                                        type: 'error',
-                                        size: 'small'
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.remove(params.index)
-                                        }
-                                    }
-                                }, 'Delete')
-                            ]);
-                        }
-                    }
-                ],
-                columns8: [
-                    {
-                        "title": "Name",
-                        "key": "name",
-                        "fixed": "left",
-                        "width": 200
-                    },
-                    {
-                        "title": "Show",
-                        "key": "show",
-                        "width": 150,
-                        "sortable": true,
-                        filters: [
-                            {
-                                label: 'Greater than 4000',
-                                value: 1
-                            },
-                            {
-                                label: 'Less than 4000',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.show > 4000;
-                            } else if (value === 2) {
-                                return row.show < 4000;
-                            }
-                        }
-                    },
-                    {
-                        "title": "Weak",
-                        "key": "weak",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Signin",
-                        "key": "signin",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Click",
-                        "key": "click",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Active",
-                        "key": "active",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "7, retained",
-                        "key": "day7",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "30, retained",
-                        "key": "day30",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "The next day left",
-                        "key": "tomorrow",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Day Active",
-                        "key": "day",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Week Active",
-                        "key": "week",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Month Active",
-                        "key": "month",
-                        "width": 150,
-                        "sortable": true
-                    }
-                ],
-                columns9: [
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age',
-                        className: 'demo-table-info-column'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns10: [
-                    {
-                        type: 'expand',
-                        width: 50,
-                        render: (h, params) => {
-                            return h(expandRow, {
-                                props: {
-                                    row: params.row
-                                }
-                            })
-                        }
-                    },
-                    {
-                        title: 'Name',
-                        key: 'name'
-                    },
-                    {
-                        title: 'Age',
-                        key: 'age'
-                    },
-                    {
-                        title: 'Address',
-                        key: 'address'
-                    }
-                ],
-                columns11: [
-                    {
-                        title: 'Name',
-                        key: 'name',
-                        align: 'center',
-                        width: 200,
-                        fixed: 'left',
-                        filters: [
-                            {
-                                label: 'Joe',
-                                value: 1
-                            },
-                            {
-                                label: 'John',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.name === 'Joe';
-                            } else if (value === 2) {
-                                return row.name === 'John Brown';
-                            }
-                        }
-                    },
-                    {
-                        title: 'Other',
-                        align: 'center',
-                        children: [
-                            {
-                                title: 'Age',
-                                key: 'age',
-                                align: 'center',
-                                width: 200,
-                                sortable: true
-                            },
-                            {
-                                title: 'Address',
-                                align: 'center',
-                                children: [
-                                    {
-                                        title: 'Street',
-                                        key: 'street',
-                                        align: 'center',
-                                        width: 200
-                                    },
-                                    {
-                                        title: 'Block',
-                                        align: 'center',
-                                        children: [
-                                            {
-                                                title: 'Building',
-                                                key: 'building',
-                                                align: 'center',
-                                                width: 200,
-                                                sortable: true
-                                            },
-                                            {
-                                                title: 'Door No.',
-                                                key: 'door',
-                                                align: 'center',
-                                                width: 200
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    },
-                    {
-                        title: 'Company',
-                        align: 'center',
-                        children: [
-                            {
-                                title: 'Company Address',
-                                key: 'caddress',
-                                align: 'center',
-                                width: 200
-                            },
-                            {
-                                title: 'Company Name',
-                                key: 'cname',
-                                align: 'center',
-                                width: 200
-                            }
-                        ]
-                    },
-                    {
-                        title: 'Gender',
-                        key: 'gender',
-                        align: 'center',
-                        width: 200,
-                        fixed: 'right'
-                    }
-                ],
-                data1: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                data2: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    },
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                data3: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        province: 'America',
-                        city: 'New York',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'Washington, D.C. No. 1 Lake Park',
-                        province: 'America',
-                        city: 'Washington, D.C.',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        province: 'Australian',
-                        city: 'Sydney',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        province: 'Canada',
-                        city: 'Ottawa',
-                        zip: 100000
-                    }
-                ],
-                data4: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        province: 'America',
-                        city: 'New York',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'Washington, D.C. No. 1 Lake Park',
-                        province: 'America',
-                        city: 'Washington, D.C.',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        province: 'Australian',
-                        city: 'Sydney',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        province: 'Canada',
-                        city: 'Ottawa',
-                        zip: 100000
-                    },
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        province: 'America',
-                        city: 'New York',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'Washington, D.C. No. 1 Lake Park',
-                        province: 'America',
-                        city: 'Washington, D.C.',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        province: 'Australian',
-                        city: 'Sydney',
-                        zip: 100000
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        province: 'Canada',
-                        city: 'Ottawa',
-                        zip: 100000
-                    }
-                ],
-                data5: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        date: '2016-10-03'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04'
-                    }
-                ],
-                data6: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park'
-                    }
-                ],
-                data7: [
-                    {
-                        "name": "Name1",
-                        "fav": 0,
-                        "show": 7302,
-                        "weak": 5627,
-                        "signin": 1563,
-                        "click": 4254,
-                        "active": 1438,
-                        "day7": 274,
-                        "day30": 285,
-                        "tomorrow": 1727,
-                        "day": 558,
-                        "week": 4440,
-                        "month": 5610
-                    },
-                    {
-                        "name": "Name2",
-                        "fav": 0,
-                        "show": 4720,
-                        "weak": 4086,
-                        "signin": 3792,
-                        "click": 8690,
-                        "active": 8470,
-                        "day7": 8172,
-                        "day30": 5197,
-                        "tomorrow": 1684,
-                        "day": 2593,
-                        "week": 2507,
-                        "month": 1537
-                    },
-                    {
-                        "name": "Name3",
-                        "fav": 0,
-                        "show": 7181,
-                        "weak": 8007,
-                        "signin": 8477,
-                        "click": 1879,
-                        "active": 16,
-                        "day7": 2249,
-                        "day30": 3450,
-                        "tomorrow": 377,
-                        "day": 1561,
-                        "week": 3219,
-                        "month": 1588
-                    },
-                    {
-                        "name": "Name4",
-                        "fav": 0,
-                        "show": 9911,
-                        "weak": 8976,
-                        "signin": 8807,
-                        "click": 8050,
-                        "active": 7668,
-                        "day7": 1547,
-                        "day30": 2357,
-                        "tomorrow": 7278,
-                        "day": 5309,
-                        "week": 1655,
-                        "month": 9043
-                    },
-                    {
-                        "name": "Name5",
-                        "fav": 0,
-                        "show": 934,
-                        "weak": 1394,
-                        "signin": 6463,
-                        "click": 5278,
-                        "active": 9256,
-                        "day7": 209,
-                        "day30": 3563,
-                        "tomorrow": 8285,
-                        "day": 1230,
-                        "week": 4840,
-                        "month": 9908
-                    },
-                    {
-                        "name": "Name6",
-                        "fav": 0,
-                        "show": 6856,
-                        "weak": 1608,
-                        "signin": 457,
-                        "click": 4949,
-                        "active": 2909,
-                        "day7": 4525,
-                        "day30": 6171,
-                        "tomorrow": 1920,
-                        "day": 1966,
-                        "week": 904,
-                        "month": 6851
-                    },
-                    {
-                        "name": "Name7",
-                        "fav": 0,
-                        "show": 5107,
-                        "weak": 6407,
-                        "signin": 4166,
-                        "click": 7970,
-                        "active": 1002,
-                        "day7": 8701,
-                        "day30": 9040,
-                        "tomorrow": 7632,
-                        "day": 4061,
-                        "week": 4359,
-                        "month": 3676
-                    },
-                    {
-                        "name": "Name8",
-                        "fav": 0,
-                        "show": 862,
-                        "weak": 6520,
-                        "signin": 6696,
-                        "click": 3209,
-                        "active": 6801,
-                        "day7": 6364,
-                        "day30": 6850,
-                        "tomorrow": 9408,
-                        "day": 2481,
-                        "week": 1479,
-                        "month": 2346
-                    },
-                    {
-                        "name": "Name9",
-                        "fav": 0,
-                        "show": 567,
-                        "weak": 5859,
-                        "signin": 128,
-                        "click": 6593,
-                        "active": 1971,
-                        "day7": 7596,
-                        "day30": 3546,
-                        "tomorrow": 6641,
-                        "day": 1611,
-                        "week": 5534,
-                        "month": 3190
-                    },
-                    {
-                        "name": "Name10",
-                        "fav": 0,
-                        "show": 3651,
-                        "weak": 1819,
-                        "signin": 4595,
-                        "click": 7499,
-                        "active": 7405,
-                        "day7": 8710,
-                        "day30": 5518,
-                        "tomorrow": 428,
-                        "day": 9768,
-                        "week": 2864,
-                        "month": 5811
-                    }
-                ],
-                data8: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 25,
-                        address: 'London No. 1 Lake Park',
-                        cellClassName: {
-                            age: 'demo-table-info-cell-age',
-                            address: 'demo-table-info-cell-address'
-                        }
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        cellClassName: {
-                            name: 'demo-table-info-cell-name'
-                        }
-                    }
-                ],
-                data9: [
-                    {
-                        name: 'John Brown',
-                        age: 18,
-                        address: 'New York No. 1 Lake Park',
-                        job: 'Data engineer',
-                        interest: 'badminton',
-                        birthday: '1991-05-14',
-                        book: 'Steve Jobs',
-                        movie: 'The Prestige',
-                        music: 'I Cry'
-                    },
-                    {
-                        name: 'Jim Green',
-                        age: 25,
-                        address: 'London No. 1 Lake Park',
-                        job: 'Data Scientist',
-                        interest: 'volleyball',
-                        birthday: '1989-03-18',
-                        book: 'My Struggle',
-                        movie: 'Roman Holiday',
-                        music: 'My Heart Will Go On'
-                    },
-                    {
-                        name: 'Joe Black',
-                        age: 30,
-                        address: 'Sydney No. 1 Lake Park',
-                        job: 'Data Product Manager',
-                        interest: 'tennis',
-                        birthday: '1992-01-31',
-                        book: 'Win',
-                        movie: 'Jobs',
-                        music: 'Don’t Cry'
-                    },
-                    {
-                        name: 'Jon Snow',
-                        age: 26,
-                        address: 'Ottawa No. 2 Lake Park',
-                        job: 'Data Analyst',
-                        interest: 'snooker',
-                        birthday: '1988-7-25',
-                        book: 'A Dream in Red Mansions',
-                        movie: 'A Chinese Ghost Story',
-                        music: 'actor'
-                    }
-                ],
-                loading: true,
-                data10: []
-            }
-        },
-        computed: {
-            tableColumns3 () {
-                let columns = [];
-                if (this.showCheckbox) {
-                    columns.push({
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    })
-                }
-                if (this.showIndex) {
-                    columns.push({
-                        type: 'index',
-                        width: 60,
-                        align: 'center'
-                    })
-                }
-                columns.push({
-                    title: 'Date',
-                    key: 'date',
-                    sortable: true
-                });
-                columns.push({
-                    title: 'Name',
-                    key: 'name'
-                });
-                columns.push({
-                    title: 'Age',
-                    key: 'age',
-                    sortable: true,
-                    filters: [
-                        {
-                            label: 'Greater than 25',
-                            value: 1
-                        },
-                        {
-                            label: 'Less than 25',
-                            value: 2
-                        }
-                    ],
-                    filterMultiple: false,
-                    filterMethod (value, row) {
-                        if (value === 1) {
-                            return row.age > 25;
-                        } else if (value === 2) {
-                            return row.age < 25;
-                        }
-                    }
-                });
-                columns.push({
-                    title: 'Address',
-                    key: 'address',
-                    filters: [
-                        {
-                            label: 'New York',
-                            value: 'New York'
-                        },
-                        {
-                            label: 'London',
-                            value: 'London'
-                        },
-                        {
-                            label: 'Sydney',
-                            value: 'Sydney'
-                        }
-                    ],
-                    filterMethod (value, row) {
-                        return row.address.indexOf(value) > -1;
-                    }
-                });
-                return columns;
-            }
-        },
-        methods: {
-            rowClassName (row, index) {
-                if (index === 1) {
-                    return 'demo-table-info-row';
-                } else if (index === 3) {
-                    return 'demo-table-error-row';
-                }
-                return '';
-            },
-            show (index) {
-                this.$Modal.info({
-                    title: 'User Info',
-                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
-                })
-            },
-            remove (index) {
-                this.data6.splice(index, 1);
-            },
-            mockTableData1 () {
-                let data = [];
-                for (let i = 0; i < 10; i++) {
-                    data.push({
-                        name: 'Business' + Math.floor(Math.random () * 100 + 1),
-                        status: Math.floor(Math.random () * 3 + 1),
-                        portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
-                        people: [
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            },
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            },
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            }
-                        ],
-                        time: Math.floor(Math.random () * 7 + 1),
-                        update: new Date()
-                    })
-                }
-                return data;
-            },
-            formatDate (date) {
-                const y = date.getFullYear();
-                let m = date.getMonth() + 1;
-                m = m < 10 ? '0' + m : m;
-                let d = date.getDate();
-                d = d < 10 ? ('0' + d) : d;
-                return y + '-' + m + '-' + d;
-            },
-            changePage () {
-                this.tableData1 = this.mockTableData1();
-            },
-            mockTableData2 () {
-                let data = [];
-                function getNum() {
-                    return Math.floor(Math.random () * 10000 + 1);
-                }
-                for (let i = 0; i < 10; i++) {
-                    data.push({
-                        name: 'Name' + (i+1),
-                        fav: 0,
-                        show: getNum(),
-                        weak: getNum(),
-                        signin: getNum(),
-                        click: getNum(),
-                        active: getNum(),
-                        day7: getNum(),
-                        day30: getNum(),
-                        tomorrow: getNum(),
-                        day: getNum(),
-                        week: getNum(),
-                        month: getNum()
-                    })
-                }
-                return data;
-            },
-            getTable2Columns () {
-                const table2ColumnList = {
-                    name: {
-                        title: 'Name',
-                        key: 'name',
-                        fixed: 'left',
-                        width: 200,
-                        render: (h, params) => {
-                            const fav = this.tableData2[params.index].fav;
-                            const style = fav === 0 ? {
-                                cursor: 'pointer'
-                            } : {
-                                cursor: 'pointer',
-                                color: '#f50'
-                            };
-
-                            return h('div', [
-                                h('Icon', {
-                                    style: style,
-                                    props: {
-                                        type: fav === 0 ? 'ios-star-outline' : 'ios-star'
-                                    },
-                                    nativeOn: {
-                                        click: () => {
-                                            this.toggleFav(params.index);
-                                        }
-                                    }
-                                }),
-                                h('span', ' ' + params.row.name)
-                            ]);
-                        }
-                    },
-                    show: {
-                        title: 'Show',
-                        key: 'show',
-                        width: 150,
-                        sortable: true
-                    },
-                    weak: {
-                        title: 'Weak',
-                        key: 'weak',
-                        width: 150,
-                        sortable: true
-                    },
-                    signin: {
-                        title: 'Signin',
-                        key: 'signin',
-                        width: 150,
-                        sortable: true
-                    },
-                    click: {
-                        title: 'Click',
-                        key: 'click',
-                        width: 150,
-                        sortable: true
-                    },
-                    active: {
-                        title: 'Active',
-                        key: 'active',
-                        width: 150,
-                        sortable: true
-                    },
-                    day7: {
-                        title: '7, retained',
-                        key: 'day7',
-                        width: 150,
-                        sortable: true
-                    },
-                    day30: {
-                        title: '30, retained',
-                        key: 'day30',
-                        width: 150,
-                        sortable: true
-                    },
-                    tomorrow: {
-                        title: 'The next day left',
-                        key: 'tomorrow',
-                        width: 150,
-                        sortable: true
-                    },
-                    day: {
-                        title: 'Day Active',
-                        key: 'day',
-                        width: 150,
-                        sortable: true
-                    },
-                    week: {
-                        title: 'Week Active',
-                        key: 'week',
-                        width: 150,
-                        sortable: true
-                    },
-                    month: {
-                        title: 'Month Active',
-                        key: 'month',
-                        width: 150,
-                        sortable: true
-                    }
-                };
-
-                let data = [table2ColumnList.name];
-
-                this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
-
-                return data;
-            },
-            changeTableColumns () {
-                this.tableColumns2 = this.getTable2Columns();
-            },
-            toggleFav (index) {
-                this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
-            },
-            exportData (type) {
-                if (type === 1) {
-                    this.$refs.table.exportCsv({
-                        filename: 'The original data'
-                    });
-                } else if (type === 2) {
-                    this.$refs.table.exportCsv({
-                        filename: 'Sorting and filtering data',
-                        original: false
-                    });
-                } else if (type === 3) {
-                    this.$refs.table.exportCsv({
-                        filename: 'Custom data',
-                        columns: this.columns8.filter((col, index) => index < 4),
-                        data: this.data7.filter((data, index) => index < 4)
-                    });
-                }
-            },
-            handleClearCurrentRow () {
-                this.$refs.currentRowTable.clearCurrentRow();
-            },
-            handleSelectAll (status) {
-                this.$refs.selection.selectAll(status);
-            }
-        },
-        mounted () {
-            this.changeTableColumns();
-
-            const data = [];
-            for (let i = 0; i < 20; i++) {
-                data.push({
-                    key: i,
-                    name: 'John Brown',
-                    age: i + 1,
-                    street: 'Lake Park',
-                    building: 'C',
-                    door: 2035,
-                    caddress: 'Lake Street 42',
-                    cname: 'SoftLake Co',
-                    gender: 'M',
-                });
-            }
-            this.data10 = data;
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/tabs-en.vue b/src/views/components/tabs-en.vue
deleted file mode 100644
index c9de75c..0000000
--- a/src/views/components/tabs-en.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<style>
-    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
-        height: 120px;
-        margin-top: -16px;
-    }
-
-    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
-        background: #fff;
-        padding: 16px;
-    }
-
-    .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
-        border-color: transparent;
-    }
-
-    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
-        border-color: #fff;
-    }
-    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
-        border-radius: 0;
-        background: #fff;
-    }
-    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
-        border-top: 1px solid #3399ff;
-    }
-    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background: #3399ff;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Tabs</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Tabs make it easy to switch between different views.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Tabs value="name1">
-                        <TabPane label="标签一" name="name1">标签一的内容</TabPane>
-                        <TabPane label="标签二" name="name2">标签二的内容</TabPane>
-                        <TabPane label="标签三" name="name3">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p><code>Value</code> corresponds to the name of the <code>TabPane</code>, it is used to identify which item is currently active. The name defaults from 0 and activates the first item by default. You can use <code>v-model</code> to enable a two-way bingding on data.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Disabled">
-                <div slot="demo">
-                    <Tabs>
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二" disabled>标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>Disabled a tab.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Icon">
-                <div slot="demo">
-                    <Tabs>
-                        <TabPane label="macOS" icon="social-apple">标签一的内容</TabPane>
-                        <TabPane label="Windows" icon="social-windows">标签二的内容</TabPane>
-                        <TabPane label="Linux" icon="social-tux">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>The Tab with Icon.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="Mini tab">
-                <div slot="demo">
-                    <Tabs size="small">
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二">标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>Set the property <code></code> to <code>small</code> can be displayed as a mini-type, only effective when the <code>type</code> is <code>line</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.mini }}</i-code>
-            </Demo>
-            <Demo title="Card type tab">
-                <div slot="demo">
-                    <Tabs type="card">
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二">标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>Set the property <code>type</code> to <code>card</code> can display the card style, commonly used at the top of the container.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.card }}</i-code>
-            </Demo>
-            <Demo title="Closable">
-                <div slot="demo">
-                    <Tabs type="card" closable @on-tab-remove="handleTabRemove">
-                        <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
-                        <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
-                        <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>You can close an tab by setting the property <code>closable</code>, only if the <code>type</code> is <code>card</code>.</p>
-                    <p>The tab should be closed manually in conjunction with the <code>on-tab-remove</code> event.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.closable }}</i-code>
-            </Demo>
-            <Demo title="Custom tab">
-                <div slot="demo">
-                    <Tabs value="name1">
-                        <TabPane :label="label" name="name1">标签一的内容</TabPane>
-                        <TabPane label="标签二" name="name2">标签二的内容</TabPane>
-                        <TabPane label="标签三" name="name3">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>You can customize the contents of the tab by setting label as Render function.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-            <Demo title="Extra content">
-                <div slot="demo">
-                    <Tabs type="card">
-                        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
-                        <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>You can add extra actions to the right of Tabs by adding the slot <code>extra</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.extra }}</i-code>
-            </Demo>
-            <Demo title="Do not use animation">
-                <div slot="demo">
-                    <Tabs :animated="false">
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二">标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>Animating can be disabled by setting the property <code>animated</code> to <code>false</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.animated }}</i-code>
-            </Demo>
-            <Demo title="Other styles" vertical hide-code>
-                <div slot="demo">
-                    <Row :gutter="32">
-                        <Col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
-                            <Tabs type="card">
-                                <TabPane label="标签一">标签一的内容</TabPane>
-                                <TabPane label="标签二">标签二的内容</TabPane>
-                                <TabPane label="标签三">标签三的内容</TabPane>
-                            </Tabs>
-                        </Col>
-                        <Col span="12" class="demo-tabs-style2">
-                            <Tabs type="card">
-                                <TabPane label="标签一">标签一的内容</TabPane>
-                                <TabPane label="标签二">标签二的内容</TabPane>
-                                <TabPane label="标签三">标签三的内容</TabPane>
-                            </Tabs>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>Custom UI, needs to override styles.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.style }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tabs props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>Activates the name of the tab panel. Use v-model to enable a two-way binding.</td>
-                            <td>String</td>
-                            <td>Defaults to the first name</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>The basic style of the tab，Optional value: <code>line</code> and <code>card</code>.</td>
-                            <td>String</td>
-                            <td>line</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>Size, Optional value:  <code>default</code> and <code>small</code>, only effective when the <code>type</code> is <code>line</code>.</td>
-                            <td>String</td>
-                            <td>default</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>Whether to close the tab, only effective when the <code>type</code> is <code>card</code>.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>animated</td>
-                            <td>Whether to use the CSS3 animation.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>capture-focus</td>
-                            <td>Whether form components in Tabs automatically get focus.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tabs events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-click</td>
-                            <td>Emitted when tab is clicked.</td>
-                            <td>name</td>
-                        </tr>
-                        <tr>
-                            <td>on-tab-remove</td>
-                            <td>Emitted when tab is closed.</td>
-                            <td>name</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tabs slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>extra</td>
-                            <td>Extra content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="TabPane props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>Used to identify the current panel, corresponding to the value, the default for its index.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>The display text of the tab, supports the Render function.</td>
-                            <td>String | Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>Icon of tab.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Whether to disable the tab.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>Whether to close the tab，only effective when <code>type="card"</code>.</td>
-                            <td>Boolean</td>
-                            <td>null</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tabs';
-    import Anchor from '../../components/anchor.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                tab0: true,
-                tab1: true,
-                tab2: true,
-                tabs: 2,
-                label: (h) => {
-                    return h('div', [
-                        h('span', '标签一'),
-                        h('Badge', {
-                            props: {
-                                count: 3
-                            }
-                        })
-                    ])
-                }
-            }
-        },
-        methods: {
-            handleTabRemove (name) {
-                this['tab' + name] = false;
-            },
-            handleTabsAdd () {
-                this.tabs ++;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/tabs.vue b/src/views/components/tabs.vue
deleted file mode 100644
index 177208b..0000000
--- a/src/views/components/tabs.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<style>
-    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
-        height: 120px;
-        margin-top: -16px;
-    }
-
-    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
-        background: #fff;
-        padding: 16px;
-    }
-
-    .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
-        border-color: transparent;
-    }
-
-    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
-        border-color: #fff;
-    }
-    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
-        border-radius: 0;
-        background: #fff;
-    }
-    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
-        border-top: 1px solid #3399ff;
-    }
-    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background: #3399ff;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Tabs 标签页</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>选项卡切换组件，常用于平级区域大块内容的的收纳和展现。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Tabs value="name1">
-                        <TabPane label="标签一" name="name1">标签一的内容</TabPane>
-                        <TabPane label="标签二" name="name2">标签二的内容</TabPane>
-                        <TabPane label="标签三" name="name3">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p><code>value</code> 与 <code>TabPane</code> 的 <code>name</code> 对应，用于标识当前激活的是哪一项，name 值默认从 0 开始，默认激活第一项。可以使用 v-model 双向绑定数据。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="禁用">
-                <div slot="demo">
-                    <Tabs>
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二" disabled>标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>禁用某一项。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="图标">
-                <div slot="demo">
-                    <Tabs>
-                        <TabPane label="macOS" icon="social-apple">标签一的内容</TabPane>
-                        <TabPane label="Windows" icon="social-windows">标签二的内容</TabPane>
-                        <TabPane label="Linux" icon="social-tux">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>icon</code>，可以显示一个图标。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
-            </Demo>
-            <Demo title="迷你型">
-                <div slot="demo">
-                    <Tabs size="small">
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二">标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>size</code> 为 <code>small</code> 可以显示为迷你型，只在 <code>type</code> 为 <code>line</code> 时有效。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.mini }}</i-code>
-            </Demo>
-            <Demo title="卡片样式">
-                <div slot="demo">
-                    <Tabs type="card">
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二">标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>type</code> 为 <code>card</code> 可以显示卡片样式，常用于容器顶部。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.card }}</i-code>
-            </Demo>
-            <Demo title="可关闭">
-                <div slot="demo">
-                    <Tabs type="card" closable @on-tab-remove="handleTabRemove">
-                        <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
-                        <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
-                        <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>closable</code> 可以关闭某一项，仅在 <code>type</code> 为 <code>card</code> 时有效。</p>
-                    <p>需结合 @on-tab-remove 事件手动关闭标签页。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.closable }}</i-code>
-            </Demo>
-            <Demo title="自定义标签页">
-                <div slot="demo">
-                    <Tabs value="name1">
-                        <TabPane :label="label" name="name1">标签一的内容</TabPane>
-                        <TabPane label="标签二" name="name2">标签二的内容</TabPane>
-                        <TabPane label="标签三" name="name3">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>设置 label 为 Render 函数后，可以自定义标签页的内容。</p>
-                    <p><study-render></study-render></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-            <Demo title="附加内容">
-                <div slot="demo">
-                    <Tabs type="card">
-                        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
-                        <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>设置 slot <code>extra</code> 可以在页签右边添加附加操作。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.extra }}</i-code>
-            </Demo>
-            <Demo title="不使用动画">
-                <div slot="demo">
-                    <Tabs :animated="false">
-                        <TabPane label="标签一">标签一的内容</TabPane>
-                        <TabPane label="标签二">标签二的内容</TabPane>
-                        <TabPane label="标签三">标签三的内容</TabPane>
-                    </Tabs>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>animated</code> 为 <code>false</code> 可以禁用动画。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.animated }}</i-code>
-            </Demo>
-            <Demo title="其它样式" vertical hide-code>
-                <div slot="demo">
-                    <Row :gutter="32">
-                        <Col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
-                            <Tabs type="card">
-                                <TabPane label="标签一">标签一的内容</TabPane>
-                                <TabPane label="标签二">标签二的内容</TabPane>
-                                <TabPane label="标签三">标签三的内容</TabPane>
-                            </Tabs>
-                        </Col>
-                        <Col span="12" class="demo-tabs-style2">
-                            <Tabs type="card">
-                                <TabPane label="标签一">标签一的内容</TabPane>
-                                <TabPane label="标签二">标签二的内容</TabPane>
-                                <TabPane label="标签三">标签三的内容</TabPane>
-                            </Tabs>
-                        </Col>
-                    </Row>
-                </div>
-                <div slot="desc">
-                    <p>可以根据业务自定义 UI，需要一点额外的样式覆盖。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.style }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tabs props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>当前激活 tab 面板的 name，可以使用 v-model 双向绑定数据</td>
-                            <td>String</td>
-                            <td>默认为第一项的 name</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>页签的基本样式，可选值为 <code>line</code> 和 <code>card</code></td>
-                            <td>String</td>
-                            <td>line</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>尺寸，可选值为 <code>default</code> 和 <code>small</code>，仅在 <code>type="line"</code> 时有效</td>
-                            <td>String</td>
-                            <td>default</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>是否可以关闭页签，仅在 <code>type="card"</code> 时有效</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>animated</td>
-                            <td>是否使用 CSS3 动画</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>capture-focus</td>
-                            <td>Tabs 内的表单类组件是否自动获得焦点</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tabs events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-click</td>
-                            <td>tab 被点击时触发</td>
-                            <td>name</td>
-                        </tr>
-                        <tr>
-                            <td>on-tab-remove</td>
-                            <td>tab 被关闭时触发</td>
-                            <td>name</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tabs slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>extra</td>
-                            <td>附加内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="TabPane props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>用于标识当前面板，对应 value，默认为其索引值</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>选项卡头显示文字，支持 Render 函数。<study-render></study-render></td>
-                            <td>String | Function</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>选项卡图标</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用该选项卡</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>是否可以关闭页签，仅在 <code>type="card"</code> 时有效</td>
-                            <td>Boolean</td>
-                            <td>null</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tabs';
-    import Anchor from '../../components/anchor.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                tab0: true,
-                tab1: true,
-                tab2: true,
-                tabs: 2,
-                label: (h) => {
-                    return h('div', [
-                        h('span', '标签一'),
-                        h('Badge', {
-                            props: {
-                                count: 3
-                            }
-                        })
-                    ])
-                }
-            }
-        },
-        methods: {
-            handleTabRemove (name) {
-                this['tab' + name] = false;
-            },
-            handleTabsAdd () {
-                this.tabs ++;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/tag-en.vue b/src/views/components/tag-en.vue
deleted file mode 100644
index 0bad5d3..0000000
--- a/src/views/components/tag-en.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Tag</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Tag for categorizing or markuping.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Tag>标签一</Tag>
-                    <Tag>标签二</Tag>
-                    <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
-                </div>
-                <div slot="desc">
-                    <p>Usage of basic Tag, and it could be closable by set <code>closable</code> property. </p>
-                    <p>Click to close the tag, it will trigger <code>on-close</code> event, you need to implement the logic of your own closure.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Type">
-                <div slot="demo">
-                    <Tag type="border">标签三</Tag>
-                    <Tag type="border" closable>标签四</Tag>
-                    <Tag type="dot">标签一</Tag>
-                    <Tag type="dot" closable>标签二</Tag>
-                </div>
-                <div slot="desc">
-                    <p>You can select a different style type by setting the <code>type</code> property to <code>border</code> or <code>dot</code>. It is recommended to use the border when you want to close, in the legend of the scene using dot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="Colors">
-                <div slot="demo">
-                    <Tag closable color="blue">标签一</Tag>
-                    <Tag closable color="green">标签二</Tag>
-                    <Tag closable color="red">标签三</Tag>
-                    <Tag closable color="yellow">标签四</Tag>
-                    <br><br>
-                    <Tag type="border" closable color="blue">标签一</Tag>
-                    <Tag type="border" closable color="green">标签二</Tag>
-                    <Tag type="border" closable color="red">标签三</Tag>
-                    <Tag type="border" closable color="yellow">标签四</Tag>
-                    <br><br>
-                    <Tag type="dot" closable color="blue">标签一</Tag>
-                    <Tag type="dot" closable color="green">标签二</Tag>
-                    <Tag type="dot" closable color="red">标签三</Tag>
-                    <Tag type="dot" closable color="yellow">标签四</Tag>
-                    <br><br>
-                    <Tag closable color="#FFA2D3">标签一</Tag>
-                    <Tag type="border" closable color="#FFA2D3">标签一</Tag>
-                    <Tag type="dot" closable color="#FFA2D3">标签一</Tag>
-                </div>
-                <div slot="desc">
-                    <p>Four default color, you can also use custom color.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.color }}</i-code>
-            </Demo>
-            <Demo title="Checkable">
-                <div slot="demo">
-                    <Tag checkable color="blue">标签一</Tag>
-                    <Tag checkable color="green">标签二</Tag>
-                    <Tag checkable color="red">标签三</Tag>
-                    <Tag checkable color="yellow">标签四</Tag>
-                </div>
-                <div slot="desc">
-                    <p>Set the property <code>checkable</code> to select the tag, and the property <code>checked</code> to control the current selection state.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.checkable }}</i-code>
-            </Demo>
-            <Demo title="Add & Remove Dynamically">
-                <div slot="demo">
-                    <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
-                    <Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>
-                </div>
-                <div slot="desc">
-                    <p>Generating a set of Tags by array, you can add and remove dynamically.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.add }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tag props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>closable</td>
-                            <td>Tag can be closed.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>checkable</td>
-                            <td>Tag can be selected.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>checked</td>
-                            <td>The selected state of the tag.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>Tag style type, the optional value for the <code>border</code>, <code>dot</code> or not fill.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>color</td>
-                            <td>Tag color, default values for <code>blue</code>, <code>green</code>, <code>red</code>, <code>yellow</code>, <code>default</code>, you can set custom color.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>The name of the current tag, it will be useful when using v-for, and supporting close.</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>fade</td>
-                            <td>Whether to use a gradient animation when appearing and disappearing, animation duration may cause flashing of the placeholder.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tag events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-close</td>
-                            <td>Emitted when closed.</td>
-                            <td>event, name</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tag';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                count: [0, 1, 2],
-                show: true
-            }
-        },
-        methods: {
-            handleClose () {
-                this.show = false;
-            },
-            handleAdd () {
-                if (this.count.length) {
-                    this.count.push(this.count[this.count.length - 1] + 1);
-                } else {
-                    this.count.push(0);
-                }
-            },
-            handleClose2 (event, name) {
-                const index = this.count.indexOf(name);
-                this.count.splice(index, 1);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/tag.vue b/src/views/components/tag.vue
deleted file mode 100644
index 84bf97b..0000000
--- a/src/views/components/tag.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Tag 标签</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>对不同维度进行简单的标记和分类。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基本用法">
-                <div slot="demo">
-                    <Tag>标签一</Tag>
-                    <Tag>标签二</Tag>
-                    <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
-                </div>
-                <div slot="desc">
-                    <p>简单的展示，添加属性<code>closable</code>可以关闭标签。</p>
-                    <p>点击关闭标签时，会触发 on-close 事件，需自己实现关闭逻辑。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="样式类型">
-                <div slot="demo">
-                    <Tag type="border">标签三</Tag>
-                    <Tag type="border" closable>标签四</Tag>
-                    <Tag type="dot">标签一</Tag>
-                    <Tag type="dot" closable>标签二</Tag>
-                </div>
-                <div slot="desc">
-                    <p>通过设置 <code>type</code> 属性为 <code>border</code> 或 <code>dot</code> 来选择不同的样式类型。建议有关闭的某些场景下使用 border，图例的场景下使用 dot。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.type }}</i-code>
-            </Demo>
-            <Demo title="各种颜色">
-                <div slot="demo">
-                    <Tag closable color="blue">标签一</Tag>
-                    <Tag closable color="green">标签二</Tag>
-                    <Tag closable color="red">标签三</Tag>
-                    <Tag closable color="yellow">标签四</Tag>
-                    <br><br>
-                    <Tag type="border" closable color="blue">标签一</Tag>
-                    <Tag type="border" closable color="green">标签二</Tag>
-                    <Tag type="border" closable color="red">标签三</Tag>
-                    <Tag type="border" closable color="yellow">标签四</Tag>
-                    <br><br>
-                    <Tag type="dot" closable color="blue">标签一</Tag>
-                    <Tag type="dot" closable color="green">标签二</Tag>
-                    <Tag type="dot" closable color="red">标签三</Tag>
-                    <Tag type="dot" closable color="yellow">标签四</Tag>
-                    <br><br>
-                    <Tag closable color="#EF6AFF" checkable>标签一</Tag>
-                    <Tag type="border" closable color="#EF6AFF" checkable>标签二</Tag>
-                    <Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag>
-                    <Tag closable color="default" checkable>标签四</Tag>
-                </div>
-                <div slot="desc">
-                    <p>四种预设颜色，可自定义颜色</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.color }}</i-code>
-            </Demo>
-            <Demo title="可选择">
-                <div slot="demo">
-                    <Tag checkable color="blue">标签一</Tag>
-                    <Tag checkable color="green">标签二</Tag>
-                    <Tag checkable color="red">标签三</Tag>
-                    <Tag checkable color="yellow">标签四</Tag>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>checkable</code>，可以对标签进行选择，属性 <code>checked</code> 控制当前选择状态。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.checkable }}</i-code>
-            </Demo>
-            <Demo title="动态添加和删除">
-                <div slot="demo">
-                    <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
-                    <Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>
-                </div>
-                <div slot="desc">
-                    <p>用数组生成一组标签，可以动态添加和删除。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.add }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tag props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>closable</td>
-                            <td>标签是否可以关闭</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>checkable</td>
-                            <td>标签是否可以选择</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>checked</td>
-                            <td>标签的选中状态</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>标签的样式类型，可选值为 <code>border</code>、<code>dot</code>或不填</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>color</td>
-                            <td>标签颜色，预设颜色值为<code>blue</code>、<code>green</code>、<code>red</code>、<code>yellow</code>、<code>default</code>，你也可以自定义颜色值。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>当前标签的名称，使用 v-for，并支持关闭时，会比较有用</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>fade</td>
-                            <td>是否在出现和消失时使用渐变的动画，动画时长可能会引起占位的闪烁</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tag events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-close</td>
-                            <td>关闭时触发</td>
-                            <td>event, name</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tag';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                count: [0, 1, 2],
-                show: true
-            }
-        },
-        methods: {
-            handleClose () {
-                this.show = false;
-            },
-            handleAdd () {
-                if (this.count.length) {
-                    this.count.push(this.count[this.count.length - 1] + 1);
-                } else {
-                    this.count.push(0);
-                }
-            },
-            handleClose2 (event, name) {
-                const index = this.count.indexOf(name);
-                this.count.splice(index, 1);
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/time-picker-en.vue b/src/views/components/time-picker-en.vue
deleted file mode 100644
index c832f8a..0000000
--- a/src/views/components/time-picker-en.vue
+++ /dev/null
@@ -1,369 +0,0 @@
-<template>
-    <div>
-        <i-article>
-            <article>
-                <h1>TimePicker</h1>
-                <Anchor title="Brief Introduction" h2></Anchor>
-                <p>Select or input standard time. It supports range selection.</p>
-                <Anchor title="Examples" h2></Anchor>
-                <Demo title="Basic Usage">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                                <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>type</code> prop to <code>time</code> or <code>timerange</code> to display <strong>Select Time</strong> or <strong>Select Time Range</strong> type.</p>
-                        <p>Set <code>placement</code> prop to change the direction time picker displays. The configuration is same to Poptip and Tooltip. Details on API Doc.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.base }}</i-code>
-                </Demo>
-                <Demo title="Time Format">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker :value="value1" format="HH点mm分ss秒" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker :value="value2" format="HH’mm’ss" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>format</code> prop can change the time format. See <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a> for more details.</p>
-                        <p>Attention: format only controls how TimePicker displays the date, it won't change value.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.format }}</i-code>
-                </Demo>
-                <Demo title="Select Hour & Minute">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker format="HH:mm" placeholder="Select time" style="width: 112px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>The columns in the picker will change with <code>format</code>. When second in <code>format</code> is removed, the second column will be removed too.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.hours }}</i-code>
-                </Demo>
-                <Demo title="Steps">
-                    <div slot="demo">
-                        <TimePicker :steps="[1, 15, 15]" placeholder="Select time" style="width: 112px"></TimePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>You can set the interval of hours, minutes, and seconds by <code>steps</code> property. The value corresponds to hours, minutes and seconds.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.steps }}</i-code>
-                </Demo>
-                <Demo title="Disabled Time">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker
-                                        :disabled-hours="[1,5,10]"
-                                        :disabled-minutes="[0,10,20]"
-                                        placeholder="Select time"
-                                        style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker
-                                        hide-disabled-options
-                                        :disabled-hours="[1,5,10]"
-                                        :disabled-minutes="[0,10,20]"
-                                        placeholder="Select time"
-                                        style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>You can use <code>disabled-hours</code> <code>disabled-minutes</code> <code>disabled-seconds</code> as a combination to disallow user select a certain time.</p>
-                        <p>Use <code>hide-disabled-options</code> can hide disabled options.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-                </Demo>
-                <Demo title="Operation with Confirmation">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker confirm placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker type="timerange" confirm placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>The picker will get a clear and an OK button if you set <code>confirm</code> prop.</p>
-                        <p>OK button won't affect time picking operation.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-                </Demo>
-                <Demo title="Manually Controlled Component">
-                    <div slot="demo">
-                        <TimePicker
-                                :open="open"
-                                :value="value3"
-                                confirm
-                                @on-change="handleChange"
-                                @on-clear="handleClear"
-                                @on-ok="handleOk">
-                            <a href="javascript:void(0)" @click="handleClick">
-                                <Icon type="ios-clock-outline"></Icon>
-                                <template v-if="value3 === ''">Select time</template>
-                                <template v-else>{{ value3 }}</template>
-                            </a>
-                        </TimePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>In some custom scenarios, you can use slots with <code>open</code> <code>confirm</code> params and events to handle the component. Details on API Doc.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-                </Demo>
-                <Demo title="Size">
-                    <div slot="demo">
-                        <row :gutter="16">
-                            <Col span="8">
-                                <TimePicker size="small" placeholder="Select time"></TimePicker>
-                            </Col>
-                            <Col span="8">
-                                <TimePicker placeholder="Select time"></TimePicker>
-                            </Col>
-                            <Col span="8">
-                                <TimePicker size="large" placeholder="Select time"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>Set <code>size</code> prop to <code>large</code> or <code>small</code> to adjust TimePicker's size. Default is medium.</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.size }}</i-code>
-                </Demo>
-
-                <ad></ad>
-
-                <div class="api">
-                    <Anchor title="API" h2></Anchor>
-                    <Anchor title="TimePicker props" h3></Anchor>
-                    <table>
-                        <colgroup>
-                            <col>
-                            <col>
-                            <col>
-                            <col width="200">
-                        </colgroup>
-                        <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>The type of the picker. Optional value: <code>time</code>, <code>timerange</code></td>
-                            <td>String</td>
-                            <td>time</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                Time. It can be JavaScript's Date, like <strong>new Date()</strong>, or standard time string. Click the link to see more info.<br>
-                                Attention: when binding value on v-model, if the type is Date, you can use it with @on-change event.
-                            </td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>Time format that is displayed.</td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>HH:mm:ss</td>
-                        </tr>
-                        <tr>
-                            <td>steps</td>
-                            <td>Interval of hours, minutes, and seconds. For example, set [1, 15], the minutes will be displayed as 00, 15, 30, 45. </td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>The direction time picker displays. Optional value: <code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>, supports automatic recognition after 2.12.0</td>
-                            <td>String</td>
-                            <td>bottom-start</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>Placeholder</td>
-                            <td>String</td>
-                            <td></td>
-                        </tr>
-                        <tr>
-                            <td>confirm</td>
-                            <td>Show confirm panel on the bottom or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>open</td>
-                            <td>Use this prop to control TimePicker's display manually. true: display, false: hide. TimePicker won't close automatically if you use this prop. We suggest you using it with slot, confirm and related events.</td>
-                            <td>Boolean</td>
-                            <td>null</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>The size of TimePicker. Optional value: <code>large</code>, <code>small</code>, <code>default</code> or leave empty.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Disable the picker or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>Show clear button or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>Readonly. If is set to true, the picker won't display. It only works when open prop is not set.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>editable</td>
-                            <td>Text box is editable or not. It only works when slot is not set.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>Set the <code>id</code> for the input element, more info can be found in Form.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="TimePicker events" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emitted when selected time changes.</td>
-                            <td>Formatted time string like 09:41:00</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>Emitted when picker is open or close.</td>
-                            <td>true | false</td>
-                        </tr>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>Emitted when OK button is clicked.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-clear</td>
-                            <td>Emitted when date is cleared.</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="TimePicker slot" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Customize the content picker displays. We suggest you using it with open and other params. For more details, please see the demo above.</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </article>
-        </i-article>
-        <Date-type v-model="showDateModal"></Date-type>
-    </div>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/time-picker';
-    import Anchor from '../../components/anchor.vue';
-    import DateType from '../../components/date-type.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            DateType
-        },
-        data () {
-            return {
-                code: Code,
-                showDateModal: false,
-                value1: '09:41:00',
-                value2: ['09:41:00', '12:00:00'],
-                open: false,
-                value3: ''
-            }
-        },
-        methods: {
-            handleClick () {
-                this.open = !this.open;
-            },
-            handleChange (time) {
-                this.value3 = time;
-            },
-            handleClear () {
-                this.open = false;
-            },
-            handleOk () {
-                this.open = false;
-            },
-            handleShowDate () {
-                this.showDateModal = true;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/time-picker.vue b/src/views/components/time-picker.vue
deleted file mode 100644
index 41fdca0..0000000
--- a/src/views/components/time-picker.vue
+++ /dev/null
@@ -1,369 +0,0 @@
-<template>
-    <div>
-        <i-article>
-            <article>
-                <h1>TimePicker 时间选择器</h1>
-                <Anchor title="概述" h2></Anchor>
-                <p>选择或输入标准时间，支持选择范围。</p>
-                <Anchor title="代码示例" h2></Anchor>
-                <Demo title="基础用法">
-                    <div slot="demo">
-                        <Row>
-                            <Col span="12">
-                                <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>type</code> 为 <code>time</code> 或 <code>timerange</code> 分别显示<strong>选择单个时间</strong>和<strong>选择范围时间</strong>类型。</p>
-                        <p>设置属性 <code>placement</code> 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.base }}</i-code>
-                </Demo>
-                <Demo title="时间格式">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker :value="value1" format="HH点mm分ss秒" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker :value="value2" format="HH’mm’ss" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>format</code> 可以改变时间的显示格式，详见 <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>。</p>
-                        <p>注意，format 只是改变显示的格式，并非改变 value 值。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.format }}</i-code>
-                </Demo>
-                <Demo title="选择时分">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker format="HH:mm" placeholder="Select time" style="width: 112px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>组件浮层中的列会随着 <code>format</code> 变化，当略去 <code>format</code> 中的秒时，浮层中对应的列也会消失。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.hours }}</i-code>
-                </Demo>
-                <Demo title="时间间隔">
-                    <div slot="demo">
-                        <TimePicker :steps="[1, 15, 15]" placeholder="Select time" style="width: 112px"></TimePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>通过属性 <code>steps</code> 可以设置时间间隔。数组的三项分别对应小时、分钟、秒。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.steps }}</i-code>
-                </Demo>
-                <Demo title="不可选时间">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker
-                                        :disabled-hours="[1,5,10]"
-                                        :disabled-minutes="[0,10,20]"
-                                        placeholder="Select time"
-                                        style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker
-                                        hide-disabled-options
-                                        :disabled-hours="[1,5,10]"
-                                        :disabled-minutes="[0,10,20]"
-                                        placeholder="Select time"
-                                        style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>可以使用 <code>disabled-hours</code> <code>disabled-minutes</code> <code>disabled-seconds</code> 组合禁止用户选择某个时间。</p>
-                        <p>使用 <code>hide-disabled-options</code> 可以直接把不可选择的项隐藏。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-                </Demo>
-                <Demo title="带有确认操作">
-                    <div slot="demo">
-                        <row>
-                            <Col span="12">
-                                <TimePicker confirm placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                            <Col span="12">
-                                <TimePicker type="timerange" confirm placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>设置属性 <code>confirm</code>，选择器会有清空和确定按钮。</p>
-                        <p>确认按钮并没有影响时间的正常选择。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.confirm }}</i-code>
-                </Demo>
-                <Demo title="手动控制组件">
-                    <div slot="demo">
-                        <TimePicker
-                                :open="open"
-                                :value="value3"
-                                confirm
-                                @on-change="handleChange"
-                                @on-clear="handleClear"
-                                @on-ok="handleOk">
-                            <a href="javascript:void(0)" @click="handleClick">
-                                <Icon type="ios-clock-outline"></Icon>
-                                <template v-if="value3 === ''">Select time</template>
-                                <template v-else>{{ value3 }}</template>
-                            </a>
-                        </TimePicker>
-                    </div>
-                    <div slot="desc">
-                        <p>对于一些定制化的场景，可以使用 slot 配合参数 <code>open</code> <code>confirm</code> 及事件来手动控制组件的显示状态，详见示例和 API。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.slot }}</i-code>
-                </Demo>
-                <Demo title="尺寸">
-                    <div slot="demo">
-                        <row :gutter="16">
-                            <Col span="8">
-                                <TimePicker size="small" placeholder="Select time"></TimePicker>
-                            </Col>
-                            <Col span="8">
-                                <TimePicker placeholder="Select time"></TimePicker>
-                            </Col>
-                            <Col span="8">
-                                <TimePicker size="large" placeholder="Select time"></TimePicker>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div slot="desc">
-                        <p>通过设置属性 <code>size</code> 为 <code>large</code> 或 <code>small</code> 可以调整选择器尺寸为大或小，默认不填为中。</p>
-                    </div>
-                    <i-code lang="html" slot="code">{{ code.size }}</i-code>
-                </Demo>
-
-                <ad></ad>
-
-                <div class="api">
-                    <Anchor title="API" h2></Anchor>
-                    <Anchor title="TimePicker props" h3></Anchor>
-                    <table>
-                        <colgroup>
-                            <col>
-                            <col>
-                            <col>
-                            <col width="200">
-                        </colgroup>
-                        <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>type</td>
-                            <td>显示类型，可选值为 <code>time</code>、<code>timerange</code></td>
-                            <td>String</td>
-                            <td>time</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                时间，可以是 JavaScript 的 Date，例如 <strong>new Date()</strong>，也可以是标准的时间格式，点击右边查看<br>
-                                注意：value 使用 v-model 时，值是 Date 类型，可以配合 @on-change 使用
-                            </td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>展示的时间格式</td>
-                            <td>
-                                <a href="javascript:void(0)" @click="handleShowDate"><Icon type="information-circled"></Icon> Date</a>
-                            </td>
-                            <td>HH:mm:ss</td>
-                        </tr>
-                        <tr>
-                            <td>steps</td>
-                            <td>下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>时间选择器出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>，2.12.0 版本开始支持自动识别</td>
-                            <td>String</td>
-                            <td>bottom-start</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>占位文本</td>
-                            <td>String</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>confirm</td>
-                            <td>是否显示底部控制栏</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>open</td>
-                            <td>手动控制时间选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用</td>
-                            <td>Boolean</td>
-                            <td>null</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用选择器</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>clearable</td>
-                            <td>是否显示清除按钮</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>editable</td>
-                            <td>文本框是否可以输入，只在没有使用 slot 时有效</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>element-id</td>
-                            <td>给表单元素设置 <code>id</code>，详见 Form 用法。</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="TimePicker events" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>时间发生变化时触发</td>
-                            <td>已经格式化后的时间，比如 09:41:00</td>
-                        </tr>
-                        <tr>
-                            <td>on-open-change</td>
-                            <td>弹出浮层和关闭浮层时触发</td>
-                            <td>true | false</td>
-                        </tr>
-                        <tr>
-                            <td>on-ok</td>
-                            <td>点击确定按钮时触发</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-clear</td>
-                            <td>在清空日期时触发</td>
-                            <td>-</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <Anchor title="TimePicker slot" h3></Anchor>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </article>
-        </i-article>
-        <Date-type v-model="showDateModal"></Date-type>
-    </div>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/time-picker';
-    import Anchor from '../../components/anchor.vue';
-    import DateType from '../../components/date-type.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            DateType
-        },
-        data () {
-            return {
-                code: Code,
-                showDateModal: false,
-                value1: '09:41:00',
-                value2: ['09:41:00', '12:00:00'],
-                open: false,
-                value3: ''
-            }
-        },
-        methods: {
-            handleClick () {
-                this.open = !this.open;
-            },
-            handleChange (time) {
-                this.value3 = time;
-            },
-            handleClear () {
-                this.open = false;
-            },
-            handleOk () {
-                this.open = false;
-            },
-            handleShowDate () {
-                this.showDateModal = true;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/timeline-en.vue b/src/views/components/timeline-en.vue
deleted file mode 100644
index 2484373..0000000
--- a/src/views/components/timeline-en.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<style scoped>
-    .time{
-        font-size: 14px;
-        font-weight: bold;
-        margin: 0;
-    }
-    .content{
-        padding-left: 5px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Timeline</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Used to vertically display a series of information ordered by time.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Timeline>
-                        <TimelineItem>
-                            <p class="time">1976年</p>
-                            <p class="content">Apple I 问世</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">1984年</p>
-                            <p class="content">发布 Macintosh</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">2007年</p>
-                            <p class="content">发布 iPhone</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">2010年</p>
-                            <p class="content">发布 iPad</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">2011年10月5日</p>
-                            <p class="content">史蒂夫·乔布斯去世</p>
-                        </TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>Basic timeline.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Circle Colors">
-                <div slot="demo">
-                    <Timeline>
-                        <TimelineItem color="green">发布1.0版本</TimelineItem>
-                        <TimelineItem color="green">发布2.0版本</TimelineItem>
-                        <TimelineItem color="red">严重故障</TimelineItem>
-                        <TimelineItem color="blue">发布3.0版本</TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>Use various colors to indicate different situations. You can use <code>green</code>, <code>red</code>, <code>blue</code> or custom defined colors. Default color is blue.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.color }}</i-code>
-            </Demo>
-            <Demo title="Last Item">
-                <div slot="demo">
-                    <Timeline pending>
-                        <TimelineItem>发布1.0版本</TimelineItem>
-                        <TimelineItem>发布2.0版本</TimelineItem>
-                        <TimelineItem>发布3.0版本</TimelineItem>
-                        <TimelineItem><a href="#">查看更多</a></TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>Passing a <code>pending</code> property marks the last item as a ghost node, indicating incompleteness.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.pending }}</i-code>
-            </Demo>
-            <Demo title="Custom Timeline Items">
-                <div slot="demo">
-                    <Timeline>
-                        <TimelineItem color="green">
-                            <Icon type="trophy" slot="dot"></Icon>
-                            <span>发布里程碑版本</span>
-                        </TimelineItem>
-                        <TimelineItem>发布1.0版本</TimelineItem>
-                        <TimelineItem>发布2.0版本</TimelineItem>
-                        <TimelineItem>发布3.0版本</TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>Accepts a slot to customize the timeline item's content, such as the icon.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.dot }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Timeline props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>pending</td>
-                            <td>Indicates if the last item is a ghost node</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="TimelineItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>color</td>
-                            <td>Circle color. Can choose between <code>blue</code>, <code>red</code>, <code>green</code>, or custom defined.</td>
-                            <td>String</td>
-                            <td>blue</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="TimelineItem slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>dot</td>
-                            <td>Custom defined timeline item content</td>
-                        </tr>
-                        <tr>
-                            <td>None</td>
-                            <td>Basic content</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/timeline';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/timeline.vue b/src/views/components/timeline.vue
deleted file mode 100644
index 1d564b1..0000000
--- a/src/views/components/timeline.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<style scoped>
-    .time{
-        font-size: 14px;
-        font-weight: bold;
-        margin: 0;
-    }
-    .content{
-        padding-left: 5px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Timeline 时间轴</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>对一系列信息进行时间排序时，垂直地展示。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Timeline>
-                        <TimelineItem>
-                            <p class="time">1976年</p>
-                            <p class="content">Apple I 问世</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">1984年</p>
-                            <p class="content">发布 Macintosh</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">2007年</p>
-                            <p class="content">发布 iPhone</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">2010年</p>
-                            <p class="content">发布 iPad</p>
-                        </TimelineItem>
-                        <TimelineItem>
-                            <p class="time">2011年10月5日</p>
-                            <p class="content">史蒂夫·乔布斯去世</p>
-                        </TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>最简单定义一个时间轴的用法。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="圆圈颜色">
-                <div slot="demo">
-                    <Timeline>
-                        <TimelineItem color="green">发布1.0版本</TimelineItem>
-                        <TimelineItem color="green">发布2.0版本</TimelineItem>
-                        <TimelineItem color="red">严重故障</TimelineItem>
-                        <TimelineItem color="blue">发布3.0版本</TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>用各种颜色来标识不同状态，可以使用<code>green</code>、<code>red</code>、<code>blue</code>或自定义的颜色，默认是 blue 。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.color }}</i-code>
-            </Demo>
-            <Demo title="最后一个">
-                <div slot="demo">
-                    <Timeline pending>
-                        <TimelineItem>发布1.0版本</TimelineItem>
-                        <TimelineItem>发布2.0版本</TimelineItem>
-                        <TimelineItem>发布3.0版本</TimelineItem>
-                        <TimelineItem><a href="#">查看更多</a></TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>通过添加<code>pending</code>属性来标记最后一个为幽灵节点，标识还未完成。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.pending }}</i-code>
-            </Demo>
-            <Demo title="自定义时间轴点">
-                <div slot="demo">
-                    <Timeline>
-                        <TimelineItem color="green">
-                            <Icon type="trophy" slot="dot"></Icon>
-                            <span>发布里程碑版本</span>
-                        </TimelineItem>
-                        <TimelineItem>发布1.0版本</TimelineItem>
-                        <TimelineItem>发布2.0版本</TimelineItem>
-                        <TimelineItem>发布3.0版本</TimelineItem>
-                    </Timeline>
-                </div>
-                <div slot="desc">
-                    <p>接受一个 slot 来自定义轴点的内容，比如一个图标。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.dot }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Timeline props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>pending</td>
-                            <td>指定是否最后一个节点为幽灵节点</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="TimelineItem props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>color</td>
-                            <td>圆圈颜色，可选值为<code>blue</code>、<code>red</code>、<code>green</code>，或自定义色值</td>
-                            <td>String</td>
-                            <td>blue</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="TimelineItem slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>dot</td>
-                            <td>自定义时间轴点内容</td>
-                        </tr>
-                        <tr>
-                            <td>无</td>
-                            <td>基本内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/timeline';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/tooltip-en.vue b/src/views/components/tooltip-en.vue
deleted file mode 100644
index 6d03a93..0000000
--- a/src/views/components/tooltip-en.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<style scoped>
-    .top,.bottom{
-        text-align: center;
-    }
-    .center{
-        width: 300px;
-        margin: 10px auto;
-        overflow: hidden;
-    }
-    .center-left{
-        float: left;
-    }
-    .center-right{
-        float: right;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Tooltip</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>A simple text popup tip.</p>
-            <p>The tip shows while mouse enter, and hides while mouse leave. The Tooltip doesn't support complex text and operation.</p>
-            <p>It can provide an explanation of button/text/operation that can cover the usage of the default system <code>title</code>.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Tooltip content="Here is the prompt text">
-                        A balloon appears when the mouse passes over this text
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>The simplest usage.</p>
-                    <p>Tip: Tooltip use <code>white-space: nowrap;</code> in text that is not automatically wrap. You can add style <code>white-space: normal;</code> in slot if you want to show a lot of content and automatically wrap.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Placement">
-                <div slot="demo">
-                    <div class="top">
-                        <Tooltip content="Top Left text" placement="top-start">
-                            <Button>Top Left</Button>
-                        </Tooltip>
-                        <Tooltip content="Top Center text" placement="top">
-                            <Button>Top Center</Button>
-                        </Tooltip>
-                        <Tooltip content="Top Right text" placement="top-end">
-                            <Button>Top Right</Button>
-                        </Tooltip>
-                    </div>
-                    <div class="center">
-                        <div class="center-left">
-                            <Tooltip content="Left Top text" placement="left-start">
-                                <Button>Left Top</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Left Center text" placement="left">
-                                <Button>Left Center</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Left Bottom text" placement="left-end">
-                                <Button>Left Bottom</Button>
-                            </Tooltip>
-                        </div>
-                        <div class="center-right">
-                            <Tooltip content="Right Top text" placement="right-start">
-                                <Button>Right Top</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Right Center text" placement="right">
-                                <Button>Right Center</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Right Bottom text" placement="right-end">
-                                <Button>Right Bottom</Button>
-                            </Tooltip>
-                        </div>
-                    </div>
-                    <div class="bottom">
-                        <Tooltip content="Bottom Left text" placement="bottom-start">
-                            <Button>Bottom Left</Button>
-                        </Tooltip>
-                        <Tooltip content="Bottom Center text" placement="bottom">
-                            <Button>Bottom Center</Button>
-                        </Tooltip>
-                        <Tooltip content="Bottom Right text" placement="bottom-end">
-                            <Button>Bottom Right</Button>
-                        </Tooltip>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>The ToolTip has 12 placements choice. Details on API Doc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.placement }}</i-code>
-            </Demo>
-            <Demo title="Custom">
-                <div slot="demo">
-                    <Tooltip placement="top">
-                        <Button>Multiple lines</Button>
-                        <div slot="content">
-                            <p>Display multiple lines of information</p>
-                            <p><i>Can customize the style</i></p>
-                        </div>
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>Display multiple lines of text or more complex styles by customizing the slot.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.content }}</i-code>
-            </Demo>
-            <Demo title="Disabled">
-                <div slot="demo">
-                    <Tooltip placement="top" content="Can disable text prompts" :disabled="disabled">
-                        <Button @click="disabled = true">Click to close</Button>
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>You can disable text prompts by setting the property <code>disabled</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="Delay">
-                <div slot="demo">
-                    <Tooltip placement="top" content="Tooltip text" :delay="1000">
-                        <Button @click="disabled = true">Delay 1 second to show</Button>
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>By setting the property <code>delay</code>, you can delay the text prompt, in milliseconds.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.delay }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tooltip props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>content</td>
-                            <td>prompt text</td>
-                            <td>String | Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>To set the position, which can be one of <code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>, supports automatic recognition after 2.12.0</td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>Whether to disable the Tooltip.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>delay</td>
-                            <td>Delay display in milliseconds.</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>always</td>
-                            <td>Whether it is always visible.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>Whether to append the layer in body. When used in Tabs or a fixed Table column, suggests adding this property, it will not be affected by the parent style, resulting in better results.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>Customize popper.js configuration items. For details, see <a href="https://popper.js.org/popper-documentation.html" target="_blank">popper.js document</a>.</td>
-                            <td>Object</td>
-                            <td>
-                                <i-code lang="js">{{ code.options }}</i-code>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tooltip events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-popper-show</td>
-                            <td>Emit when tooltip displays.</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-popper-hide</td>
-                            <td>Emit when Tooltip disappear.</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tooltip slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>default</td>
-                            <td>Main content.</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>The contents of the Tooltip, when this slot is defined, overwrites the props content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tooltip';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                disabled: false
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/tooltip.vue b/src/views/components/tooltip.vue
deleted file mode 100644
index fa10106..0000000
--- a/src/views/components/tooltip.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<style scoped>
-    .top,.bottom{
-        text-align: center;
-    }
-    .center{
-        width: 300px;
-        margin: 10px auto;
-        overflow: hidden;
-    }
-    .center-left{
-        float: left;
-    }
-    .center-right{
-        float: right;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Tooltip 文字提示</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>文字提示气泡框，在鼠标悬停时显示，代替了系统的<code>title</code>提示。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Tooltip content="这里是提示文字">
-                        当鼠标经过这段文字时，会显示一个气泡框
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>最简单的用法。</p>
-                    <p>注意 Tooltip 内的文本使用了 <code>white-space: nowrap;</code>，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增加样式 <code>white-space: normal;</code>。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="位置">
-                <div slot="demo">
-                    <div class="top">
-                        <Tooltip content="Top Left 文字提示" placement="top-start">
-                            <Button>上左</Button>
-                        </Tooltip>
-                        <Tooltip content="Top Center 文字提示" placement="top">
-                            <Button>上边</Button>
-                        </Tooltip>
-                        <Tooltip content="Top Right 文字提示" placement="top-end">
-                            <Button>上右</Button>
-                        </Tooltip>
-                    </div>
-                    <div class="center">
-                        <div class="center-left">
-                            <Tooltip content="Left Top 文字提示" placement="left-start">
-                                <Button>左上</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Left Center 文字提示" placement="left">
-                                <Button>左边</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Left Bottom 文字提示" placement="left-end">
-                                <Button>左下</Button>
-                            </Tooltip>
-                        </div>
-                        <div class="center-right">
-                            <Tooltip content="Right Top 文字提示" placement="right-start">
-                                <Button>右上</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Right Center 文字提示" placement="right">
-                                <Button>右边</Button>
-                            </Tooltip><br><br>
-                            <Tooltip content="Right Bottom 文字提示" placement="right-end">
-                                <Button>右下</Button>
-                            </Tooltip>
-                        </div>
-                    </div>
-                    <div class="bottom">
-                        <Tooltip content="Bottom Left 文字提示" placement="bottom-start">
-                            <Button>下左</Button>
-                        </Tooltip>
-                        <Tooltip content="Bottom Center 文字提示" placement="bottom">
-                            <Button>下边</Button>
-                        </Tooltip>
-                        <Tooltip content="Bottom Right 文字提示" placement="bottom-end">
-                            <Button>下右</Button>
-                        </Tooltip>
-                    </div>
-                </div>
-                <div slot="desc">
-                    <p>组件提供了12个不同的方向显示Tooltip，具体配置可查看API。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.placement }}</i-code>
-            </Demo>
-            <Demo title="自定义内容">
-                <div slot="demo">
-                    <Tooltip placement="top">
-                        <Button>多行</Button>
-                        <div slot="content">
-                            <p>显示多行信息</p>
-                            <p><i>可以自定义样式</i></p>
-                        </div>
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>通过自定义 slot 显示多行文本或更复杂的样式。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.content }}</i-code>
-            </Demo>
-            <Demo title="禁用">
-                <div slot="demo">
-                    <Tooltip placement="top" content="可以禁用文字提示" :disabled="disabled">
-                        <Button @click="disabled = true">点击关闭提示</Button>
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>disabled</code>可以禁用文字提示。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
-            </Demo>
-            <Demo title="延时">
-                <div slot="demo">
-                    <Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
-                        <Button @click="disabled = true">延时1秒显示</Button>
-                    </Tooltip>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性<code>delay</code>可以延时显示文字提示，单位毫秒。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.delay }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tooltip props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>content</td>
-                            <td>显示的内容</td>
-                            <td>String | Number</td>
-                            <td>空</td>
-                        </tr>
-                        <tr>
-                            <td>placement</td>
-                            <td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code>，2.12.0 版本开始支持自动识别</td>
-                            <td>String</td>
-                            <td>bottom</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>是否禁用提示框</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>delay</td>
-                            <td>延迟显示，单位毫秒</td>
-                            <td>Number</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>always</td>
-                            <td>是否总是可见</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>transfer</td>
-                            <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>自定义 popper.js 的配置项，具体配置见 <a href="https://popper.js.org/popper-documentation.html" target="_blank">popper.js 文档</a></td>
-                            <td>Object</td>
-                            <td>
-                                <i-code lang="js">{{ code.options }}</i-code>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tooltip events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-popper-show</td>
-                            <td>在提示框显示时触发</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>on-popper-hide</td>
-                            <td>在提示框消失时触发</td>
-                            <td>无</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tooltip slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>主体内容</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>提示框的内容，定义此 slot 时，会覆盖 props <code>content</code>。</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tooltip';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                disabled: false
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/transfer-en.vue b/src/views/components/transfer-en.vue
deleted file mode 100644
index 177c345..0000000
--- a/src/views/components/transfer-en.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Transfer</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>Two-Column Transfer select dialog. It's mainly used to transfer items from one side to the other.</p>
-            <Anchor title="Explanation" h2></Anchor>
-            <p>Transfer has 4 core APIs:</p>
-            <ul>
-                <li>
-                    <code>:data</code>: Overall data / Array / Each item is an object which must contain a <code>key</code> prop. The component does the query operation based on this prop.
-                </li>
-                <li>
-                    <code>:target-keys</code>: Target index / Array / Each item is the key of the data item. Transfer will filter data with these keys and move them to the right.
-                </li>
-                <li>
-                    <code>:render-format</code>: The format function controlling how to display each row of data. label's value will be displayed by default. If there is no label, key's value will be displayed. You can customize your own data format.
-                </li>
-                <li>
-                    <code>@on-change</code>: Emitted when clicking transfer button. Transfer won't transfer data itself. You should handle it by yourself.
-                </li>
-                <p>Demo:</p>
-                <i-code bg>{{ code.demo }}</i-code>
-            </ul>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Transfer
-                        :data="data1"
-                        :target-keys="targetKeys1"
-                        :render-format="render1"
-                        @on-change="handleChange1"></Transfer>
-                </div>
-                <div slot="desc">
-                    <p>Basic usage. It shows the usage of <code>data</code>, <code>target-keys</code>, render function for each row - <code>render-format</code> and callback function for <code>on-change</code> event.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Search">
-                <div slot="demo">
-                    <Transfer
-                        :data="data2"
-                        :target-keys="targetKeys2"
-                        filterable
-                        @on-change="handleChange2"></Transfer>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>filterable</code> prop to enable filter. You can customize filter function.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.search }}</i-code>
-            </Demo>
-            <Demo title="Advanced Usage" vertical>
-                <div slot="demo">
-                    <Transfer
-                        :data="data3"
-                        :target-keys="targetKeys3"
-                        :list-style="listStyle"
-                        :render-format="render3"
-                        :operations="['To left','To right']"
-                        filterable
-                        @on-change="handleChange3">
-                        <div :style="{float: 'right', margin: '5px'}">
-                            <Button type="ghost" size="small" @click="reloadMockData">Refresh</Button>
-                        </div>
-                    </Transfer>
-                </div>
-                <div slot="desc">
-                    <p>Advanced usage of Transfer. You can customize the width and the height of the column, change transfer button's text, or add custom operations at the bottom. Details on API Doc.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.high }}</i-code>
-            </Demo>
-            <Demo title="Custom Row Data Rendering">
-                <div slot="demo">
-                    <Transfer
-                        :data="data4"
-                        :target-keys="targetKeys4"
-                        :render-format="render4"
-                        @on-change="handleChange4"></Transfer>
-                </div>
-                <div slot="desc">
-                    <p>You can render complex data by setting <code>render-format</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Transfer props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Description</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>data</td>
-                            <td>Source data. Except for those in <code>targetKeys</code>, data will be rendered into the left column.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>targetKeys</td>
-                            <td>The keys of data displayed in the right column.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>render-format</td>
-                            <td>Render function for each row. It accepts items in <code>data</code>.</td>
-                            <td>Function</td>
-                            <td>Default is label. If no label, key will be displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>selected-keys</td>
-                            <td>Which items should be selected.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>list-style</td>
-                            <td>Custom style for columns.</td>
-                            <td>Object</td>
-                            <td>{}</td>
-                        </tr>
-                        <tr>
-                            <td>titles</td>
-                            <td>Title text. Order: left-right</td>
-                            <td>Array</td>
-                            <td>['', '']</td>
-                        </tr>
-                        <tr>
-                            <td>operations</td>
-                            <td>Transfer button's text. Order: top-down</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>filterable</td>
-                            <td>Show the filter or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>filter-placeholder</td>
-                            <td>Placeholder of the filter.</td>
-                            <td>String</td>
-                            <td>Search here</td>
-                        </tr>
-                        <tr>
-                            <td>filter-method</td>
-                            <td>Custom filter function. It accepts 3 arguments: data - raw data, query - keyword.</td>
-                            <td>Function</td>
-                            <td>It searches label by default.</td>
-                        </tr>
-                        <tr>
-                            <td>not-found-text</td>
-                            <td>Tip text when list is empty.</td>
-                            <td>String</td>
-                            <td>Not found</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Transfer events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Event Name</th>
-                            <th>Description</th>
-                            <th>Return Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>Emitted when selection is transfered.</td>
-                            <td>targetKeys, direction, moveKeys</td>
-                        </tr>
-                        <tr>
-                            <td>on-selected-change</td>
-                            <td>Triggered when the selected item changes.</td>
-                            <td>sourceSelectedKeys, targetSelectedKeys</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Transfer slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Custom footer.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/transfer';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                data1: this.getMockData(),
-                targetKeys1: this.getTargetKeys(),
-                data2: this.getMockData(),
-                targetKeys2: this.getTargetKeys(),
-                data3: this.getMockData(),
-                targetKeys3: this.getTargetKeys(),
-                listStyle: {
-                    width: '250px',
-                    height: '300px'
-                },
-                data4: this.getMockData(),
-                targetKeys4: this.getTargetKeys()
-            }
-        },
-        methods: {
-            getMockData () {
-                let mockData = [];
-                for (let i = 1; i <= 20; i++) {
-                    mockData.push({
-                        key: i.toString(),
-                        label: 'Content ' + i,
-                        description: 'The desc of content  ' + i,
-                        disabled: Math.random() * 3 < 1
-                    });
-                }
-                return mockData;
-            },
-            getTargetKeys () {
-                return this.getMockData()
-                        .filter(() => Math.random() * 2 > 1)
-                        .map(item => item.key);
-            },
-            render1 (item) {
-                return item.label;
-            },
-            handleChange1 (newTargetKeys, direction, moveKeys) {
-                console.log(newTargetKeys);
-                console.log(direction);
-                console.log(moveKeys);
-                this.targetKeys1 = newTargetKeys;
-            },
-            handleChange2 (newTargetKeys) {
-                this.targetKeys2 = newTargetKeys;
-            },
-            filterMethod (data, query) {
-                return data.label.indexOf(query) > -1;
-            },
-            handleChange3 (newTargetKeys) {
-                this.targetKeys3 = newTargetKeys;
-            },
-            render3 (item) {
-                return item.label + ' - ' + item.description;
-            },
-            reloadMockData () {
-                this.data3 = this.getMockData();
-                this.targetKeys3 = this.getTargetKeys();
-            },
-            render4 (item) {
-                return item.label + ' - ' + item.description;
-            },
-            handleChange4 (newTargetKeys) {
-                this.targetKeys4 = newTargetKeys;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/transfer.vue b/src/views/components/transfer.vue
deleted file mode 100644
index 77027e2..0000000
--- a/src/views/components/transfer.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Transfer 穿梭框</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>双栏穿梭选择框，常用于将多个项目从一边移动到另一边。</p>
-            <Anchor title="说明" h2></Anchor>
-            <p>Transfer 组件主要基于以下四个 API 来使用：</p>
-            <ul>
-                <li>
-                    <code>:data</code>：总体数据，数组，每项为一个对象，且必须含有 <code>key</code> 值，组件基于此做索引。
-                </li>
-                <li>
-                    <code>:target-keys</code>：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。
-                </li>
-                <li>
-                    <code>:render-format</code>：每行数据显示的格式函数，默认优先显示 label 值，没有时显示 key 值，可以自己组合出需要的数据格式。
-                </li>
-                <li>
-                    <code>@on-change</code>：当点击转移按钮时，组件本身并不会转移数据，而是触发事件，由用户来操作数据。
-                </li>
-                <p>示例：</p>
-                <i-code bg>{{ code.demo }}</i-code>
-            </ul>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Transfer
-                        :data="data1"
-                        :target-keys="targetKeys1"
-                        :render-format="render1"
-                        @on-change="handleChange1"></Transfer>
-                </div>
-                <div slot="desc">
-                    <p>基本用法，展示了 <code>data</code>、<code>target-keys</code>、每行的渲染函数 <code>render-format</code> 以及回调函数 <code>on-change</code> 的用法。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="搜索">
-                <div slot="demo">
-                    <Transfer
-                        :data="data2"
-                        :target-keys="targetKeys2"
-                        filterable
-                        @on-change="handleChange2"></Transfer>
-                </div>
-                <div slot="desc">
-                    <p>通过设置属性 <code>filterable</code> 可以进行搜索，可以自定义搜索函数。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.search }}</i-code>
-            </Demo>
-            <Demo title="高级用法" vertical>
-                <div slot="demo">
-                    <Transfer
-                        :data="data3"
-                        :target-keys="targetKeys3"
-                        :list-style="listStyle"
-                        :render-format="render3"
-                        :operations="['To left','To right']"
-                        filterable
-                        @on-change="handleChange3">
-                        <div :style="{float: 'right', margin: '5px'}">
-                            <Button type="ghost" size="small" @click="reloadMockData">Refresh</Button>
-                        </div>
-                    </Transfer>
-                </div>
-                <div slot="desc">
-                    <p>穿梭框高级用法，可以自定义两列的宽高、操作文案，以及底部自定义操作，更多配置见 API。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.high }}</i-code>
-            </Demo>
-            <Demo title="自定义渲染行数据">
-                <div slot="demo">
-                    <Transfer
-                        :data="data4"
-                        :target-keys="targetKeys4"
-                        :render-format="render4"
-                        @on-change="handleChange4"></Transfer>
-                </div>
-                <div slot="desc">
-                    <p>可以通过 <code>render-format</code> 来渲染复杂的数据。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Transfer props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>data</td>
-                            <td>数据源，其中的数据将会被渲染到左边一栏中，<code>targetKeys</code> 中指定的除外。</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>targetKeys</td>
-                            <td>显示在右侧框数据的key集合</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>render-format</td>
-                            <td>每行数据渲染函数，该函数的入参为 <code>data</code> 中的项</td>
-                            <td>Function</td>
-                            <td>默认显示label，没有时显示key</td>
-                        </tr>
-                        <tr>
-                            <td>selected-keys</td>
-                            <td>设置哪些项应该被选中</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>list-style</td>
-                            <td>两个穿梭框的自定义样式</td>
-                            <td>Object</td>
-                            <td>{}</td>
-                        </tr>
-                        <tr>
-                            <td>titles</td>
-                            <td>标题集合，顺序从左至右</td>
-                            <td>Array</td>
-                            <td>['源列表', '目的列表']</td>
-                        </tr>
-                        <tr>
-                            <td>operations</td>
-                            <td>操作文案集合，顺序从上至下</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>filterable</td>
-                            <td>是否显示搜索框</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>filter-placeholder</td>
-                            <td>搜索框的占位</td>
-                            <td>String</td>
-                            <td>请输入搜索内容</td>
-                        </tr>
-                        <tr>
-                            <td>filter-method</td>
-                            <td>自定义搜索函数，入参为 data 和 query，data 为项，query 为当前输入的搜索词</td>
-                            <td>Function</td>
-                            <td>默认搜索label</td>
-                        </tr>
-                        <tr>
-                            <td>not-found-text</td>
-                            <td>当列表为空时显示的内容</td>
-                            <td>String</td>
-                            <td>列表为空</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Transfer events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-change</td>
-                            <td>选项在两栏之间转移时的回调函数</td>
-                            <td>targetKeys, direction, moveKeys</td>
-                        </tr>
-                        <tr>
-                            <td>on-selected-change</td>
-                            <td>选中项发生变化时触发</td>
-                            <td>sourceSelectedKeys, targetSelectedKeys</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Transfer slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>名称</th>
-                            <th>说明</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>无</td>
-                            <td>自定义底部内容</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/transfer';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                data1: this.getMockData(),
-                targetKeys1: this.getTargetKeys(),
-                data2: this.getMockData(),
-                targetKeys2: this.getTargetKeys(),
-                data3: this.getMockData(),
-                targetKeys3: this.getTargetKeys(),
-                listStyle: {
-                    width: '250px',
-                    height: '300px'
-                },
-                data4: this.getMockData(),
-                targetKeys4: this.getTargetKeys()
-            }
-        },
-        methods: {
-            getMockData () {
-                let mockData = [];
-                for (let i = 1; i <= 20; i++) {
-                    mockData.push({
-                        key: i.toString(),
-                        label: 'Content ' + i,
-                        description: 'The desc of content  ' + i,
-                        disabled: Math.random() * 3 < 1
-                    });
-                }
-                return mockData;
-            },
-            getTargetKeys () {
-                return this.getMockData()
-                        .filter(() => Math.random() * 2 > 1)
-                        .map(item => item.key);
-            },
-            render1 (item) {
-                return item.label;
-            },
-            handleChange1 (newTargetKeys, direction, moveKeys) {
-                console.log(newTargetKeys);
-                console.log(direction);
-                console.log(moveKeys);
-                this.targetKeys1 = newTargetKeys;
-            },
-            handleChange2 (newTargetKeys) {
-                this.targetKeys2 = newTargetKeys;
-            },
-            filterMethod (data, query) {
-                return data.label.indexOf(query) > -1;
-            },
-            handleChange3 (newTargetKeys) {
-                this.targetKeys3 = newTargetKeys;
-            },
-            render3 (item) {
-                return item.label + ' - ' + item.description;
-            },
-            reloadMockData () {
-                this.data3 = this.getMockData();
-                this.targetKeys3 = this.getTargetKeys();
-            },
-            render4 (item) {
-                return item.label + ' - ' + item.description;
-            },
-            handleChange4 (newTargetKeys) {
-                this.targetKeys4 = newTargetKeys;
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/views/components/tree-en.vue b/src/views/components/tree-en.vue
deleted file mode 100644
index 1bb4b68..0000000
--- a/src/views/components/tree-en.vue
+++ /dev/null
@@ -1,525 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Tree</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>When To Use?</p>
-            <p>Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.</p>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Basic Usage">
-                <div slot="demo">
-                    <Tree :data="data1"></Tree>
-                </div>
-                <div slot="desc">
-                    <p>The most basic usage, tell you how to use selected and expanded.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="Checkbox">
-                <div slot="demo">
-                    <Tree :data="data2" show-checkbox></Tree>
-                </div>
-                <div slot="desc">
-                    <p>Set the property <code>show-checkbox</code> to check the nodes.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.checkbox }}</i-code>
-            </Demo>
-            <Demo title="Lazy mode">
-                <div slot="demo">
-                    <Tree :data="data3" :load-data="loadData" show-checkbox></Tree>
-                </div>
-                <div slot="desc">
-                    <p>Using the <code>load-data</code> property to load the child nodes lazily, you need to add <code>loading</code> to the data.</p>
-                    <p>The first param of load-data is current node data. Call the second param and transfer the data obtained.</p>
-                    <p>If a node does not contain <code>loading</code> and <code>children</code> fields, the asynchronous loading effect will not be applied.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.lazy }}</i-code>
-            </Demo>
-            <Demo title="Expand, Selected, Checked and Disabled">
-                <div slot="demo">
-                    <Tree :data="data4" show-checkbox multiple></Tree>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>expand</code>, <code>selected</code>, <code>checked</code> and <code>disabled</code> to nodes can set the node to expand, select, check, and disable.</p>
-                    <p>Multiple choices can be made for setting property <code>multiple</code>.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.more }}</i-code>
-            </Demo>
-            <Demo title="Custom node content">
-                <div slot="demo">
-                    <Tree :data="data5" :render="renderContent"></Tree>
-                </div>
-                <div slot="desc">
-                    <p>Using a powerful Render function allows you to customize the nodes to display content and interactions, such as adding icons, buttons, and so on.</p>
-                    <p>The second parameter of the Render function consists of three fields:</p>
-                    <ul>
-                        <li><strong>root</strong> &lt;Array&gt;：root node of tree</li>
-                        <li><strong>node</strong> &lt;Object&gt;：current node</li>
-                        <li><strong>data</strong> &lt;Object&gt;：current node data</li>
-                    </ul>
-                    <p>By reasonably using root, node, and data to achieve various effects, the iView sets a <code>nodeKey</code> field for each node to identify the node's id.</p>
-                    <p>The Render function is divided into two types. One is to set the same rendering content to each node of the current Tree, which is passed through the property <code>render</code> of the Tree component. The other is to set up a single node, set in the <code>render</code> field of the node; At the same time, the Render function of the current node is preferred.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tree props" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Property</th>
-                        <th>Description</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>data</td>
-                        <td>An array of nestable node properties that generates tree data.</td>
-                        <td>Array</td>
-                        <td>[]</td>
-                    </tr>
-                    <tr>
-                        <td>multiple</td>
-                        <td>Allows selecting multiple treeNodes.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>show-checkbox</td>
-                        <td>Adds a Checkbox before the treeNodes.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>empty-text</td>
-                        <td>A tip without data.</td>
-                        <td>String</td>
-                        <td>No Data</td>
-                    </tr>
-                    <tr>
-                        <td>load-data</td>
-                        <td>Methods to load data lazily, see examples.</td>
-                        <td>Function</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>render</td>
-                        <td>Custom node content, see examples.</td>
-                        <td>Function</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>children-key</td>
-                        <td>Define child node key</td>
-                        <td>String</td>
-                        <td>children</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tree events" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Event Name</th>
-                        <th>Description</th>
-                        <th>Return Value</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>on-select-change</td>
-                        <td>Emitted when the tree node is clicked.</td>
-                        <td>The currently selected node array.</td>
-                    </tr>
-                    <tr>
-                        <td>on-check-change</td>
-                        <td>Emitted when the checkbox is clicked.</td>
-                        <td>An array of nodes is currently checked.</td>
-                    </tr>
-                    <tr>
-                        <td>on-toggle-expand</td>
-                        <td>Emitted when when the list is expanded or dropped.</td>
-                        <td>Current nodes.</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tree methods" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Method Name</th>
-                        <th>Description</th>
-                        <th>Arguments</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>getCheckedNodes</td>
-                        <td>Gets the checked node.</td>
-                        <td>None</td>
-                    </tr>
-                    <tr>
-                        <td>getSelectedNodes</td>
-                        <td>Gets the selected node.</td>
-                        <td>None</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <Anchor title="children" h3></Anchor>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Property</th>
-                        <th>Description</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>title</td>
-                        <td>Title</td>
-                        <td>String | Element String</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>expand</td>
-                        <td>Whether to expand the child node.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>disabled</td>
-                        <td>Disables the treeNode</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>disableCheckbox</td>
-                        <td>Disables the checkbox of the treeNode.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>selected</td>
-                        <td>Whether to select a child node.</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>checked</td>
-                        <td>Whether to check node (if checked, the child node will check all).</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>children</td>
-                        <td>An array of child nodes</td>
-                        <td>Array</td>
-                        <td>-</td>
-                    </tr>
-                    <tr>
-                        <td>render</td>
-                        <td>Custom node content, see examples.</td>
-                        <td>Function</td>
-                        <td>-</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tree';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                data1: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        children: [
-                            {
-                                title: 'parent 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2'
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'parent 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                data2: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        children: [
-                            {
-                                title: 'parent 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2'
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'parent 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                data3: [
-                    {
-                        title: 'parent',
-                        loading: false,
-                        children: []
-                    }
-                ],
-                data4: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        selected: true,
-                        children: [
-                            {
-                                title: 'parent 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1',
-                                        disabled: true
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2'
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'parent 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1',
-                                        checked: true
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                data5: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        render: (h, { root, node, data }) => {
-                            return h('span', {
-                                style: {
-                                    display: 'inline-block',
-                                    width: '100%'
-                                }
-                            }, [
-                                h('span', [
-                                    h('Icon', {
-                                        props: {
-                                            type: 'ios-folder-outline'
-                                        },
-                                        style: {
-                                            marginRight: '8px'
-                                        }
-                                    }),
-                                    h('span', data.title)
-                                ]),
-                                h('span', {
-                                    style: {
-                                        display: 'inline-block',
-                                        float: 'right',
-                                        marginRight: '32px'
-                                    }
-                                }, [
-                                    h('Button', {
-                                        props: Object.assign({}, this.buttonProps, {
-                                            icon: 'ios-plus-empty',
-                                            type: 'primary'
-                                        }),
-                                        style: {
-                                            width: '52px'
-                                        },
-                                        on: {
-                                            click: () => { this.append(data) }
-                                        }
-                                    })
-                                ])
-                            ]);
-                        },
-                        children: [
-                            {
-                                title: 'child 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1',
-                                        expand: true
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2',
-                                        expand: true
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'child 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1',
-                                        expand: true
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1',
-                                        expand: true
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                buttonProps: {
-                    type: 'ghost',
-                    size: 'small',
-                }
-            }
-        },
-        methods: {
-            loadData (item, callback) {
-                setTimeout(() => {
-                    const data = [
-                        {
-                            title: 'children',
-                            loading: false,
-                            children: []
-                        },
-                        {
-                            title: 'children',
-                            loading: false,
-                            children: []
-                        }
-                    ];
-                    callback(data);
-                }, 1000);
-            },
-            renderContent (h, { root, node, data }) {
-                return h('span', {
-                    style: {
-                        display: 'inline-block',
-                        width: '100%'
-                    }
-                }, [
-                    h('span', [
-                        h('Icon', {
-                            props: {
-                                type: 'ios-paper-outline'
-                            },
-                            style: {
-                                marginRight: '8px'
-                            }
-                        }),
-                        h('span', data.title)
-                    ]),
-                    h('span', {
-                        style: {
-                            display: 'inline-block',
-                            float: 'right',
-                            marginRight: '32px'
-                        }
-                    }, [
-                        h('Button', {
-                            props: Object.assign({}, this.buttonProps, {
-                                icon: 'ios-plus-empty'
-                            }),
-                            style: {
-                                marginRight: '8px'
-                            },
-                            on: {
-                                click: () => { this.append(data) }
-                            }
-                        }),
-                        h('Button', {
-                            props: Object.assign({}, this.buttonProps, {
-                                icon: 'ios-minus-empty'
-                            }),
-                            on: {
-                                click: () => { this.remove(root, node, data) }
-                            }
-                        })
-                    ])
-                ]);
-            },
-            append (data) {
-                const children = data.children || [];
-                children.push({
-                    title: 'appended node',
-                    expand: true
-                });
-                this.$set(data, 'children', children);
-            },
-            remove (root, node, data) {
-                const parentKey = root.find(el => el === node).parent;
-                const parent = root.find(el => el.nodeKey === parentKey).node;
-                const index = parent.children.indexOf(data);
-                parent.children.splice(index, 1);
-            }
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/components/tree.vue b/src/views/components/tree.vue
deleted file mode 100644
index b72b1bd..0000000
--- a/src/views/components/tree.vue
+++ /dev/null
@@ -1,527 +0,0 @@
-<template>
-    <i-article>
-        <article>
-            <h1>Tree 树形控件</h1>
-            <Anchor title="概述" h2></Anchor>
-            <p>文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。</p>
-            <Anchor title="代码示例" h2></Anchor>
-            <Demo title="基础用法">
-                <div slot="demo">
-                    <Tree :data="data1"></Tree>
-                </div>
-                <div slot="desc">
-                    <p>最简单的用法，展示可选中，默认展开功能。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.base }}</i-code>
-            </Demo>
-            <Demo title="可勾选">
-                <div slot="demo">
-                    <Tree :data="data2" show-checkbox></Tree>
-                </div>
-                <div slot="desc">
-                    <p>设置属性 <code>show-checkbox</code> 可以对节点进行勾选。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.checkbox }}</i-code>
-            </Demo>
-            <Demo title="异步加载子节点">
-                <div slot="demo">
-                    <Tree :data="data3" :load-data="loadData" show-checkbox></Tree>
-                </div>
-                <div slot="desc">
-                    <p>使用 <code>load-data</code> 属性可以异步加载子节点，需要给数据增加 <code>loading</code> 来标识当前是否在加载中。</p>
-                    <p>load-data 第一个参数为当前节点信息；执行 load-data 的第二个参数，将需要添加的数据传入。</p>
-                    <p>如果某节点不包含 <code>loading</code> 和 <code>children</code> 字段，则不会应用异步加载效果。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.lazy }}</i-code>
-            </Demo>
-            <Demo title="默认展开、选中、勾选和禁用">
-                <div slot="demo">
-                    <Tree :data="data4" show-checkbox multiple></Tree>
-                </div>
-                <div slot="desc">
-                    <p>给节点设置 <code>expand</code>、<code>selected</code>、<code>checked</code> 和 <code>disabled</code> 可以将节点设置为展开、选中、勾选和禁用。</p>
-                    <p>设置属性 <code>multiple</code> 可进行多选。</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.more }}</i-code>
-            </Demo>
-            <Demo title="自定义节点内容">
-                <div slot="demo">
-                    <Tree :data="data5" :render="renderContent"></Tree>
-                </div>
-                <div slot="desc">
-                    <p>使用强大的 Render 函数可以自定义节点显示内容和交互，比如添加图标，按钮等。</p>
-                    <p>Render 函数的第二个参数，包含三个字段：</p>
-                    <ul>
-                        <li><strong>root</strong> &lt;Array&gt;：树的根节点</li>
-                        <li><strong>node</strong> &lt;Object&gt;：当前节点</li>
-                        <li><strong>data</strong> &lt;Object&gt;：当前节点的数据</li>
-                    </ul>
-                    <p>通过合理地使用 root、node 和 data 可以实现各种效果，其中，iView 给每个节点都设置了一个 <code>nodeKey</code> 字段，用来标识节点的 id。</p>
-                    <p>Render 函数分两种，一种是给当前树的每个节点都设置同样的渲染内容，此 render 通过 Tree 组件的属性 <code>render</code> 传递；另一种是单独给某个节点设置，在该节点的 <code>render</code> 字段内设置；同时设置时，会优先使用当前节点的 Render 函数。</p>
-                    <p><study-render></study-render></p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.render }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Tree props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>data</td>
-                            <td>可嵌套的节点属性的数组，生成 tree 的数据</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>是否支持多选</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-checkbox</td>
-                            <td>是否显示多选框</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>empty-text</td>
-                            <td>没有数据时的提示</td>
-                            <td>String</td>
-                            <td>暂无数据</td>
-                        </tr>
-                        <tr>
-                            <td>load-data</td>
-                            <td>异步加载数据的方法，见示例</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>自定义渲染内容，见示例</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>children-key</td>
-                            <td>定义子节点键</td>
-                            <td>String</td>
-                            <td>children</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tree events" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>事件名</th>
-                            <th>说明</th>
-                            <th>返回值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>on-select-change</td>
-                            <td>点击树节点时触发</td>
-                            <td>当前已选中的节点数组</td>
-                        </tr>
-                        <tr>
-                            <td>on-check-change</td>
-                            <td>点击复选框时触发</td>
-                            <td>当前已勾选节点的数组</td>
-                        </tr>
-                        <tr>
-                            <td>on-toggle-expand</td>
-                            <td>展开和收起子列表时触发</td>
-                            <td>当前节点的数据</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Tree methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>方法名</th>
-                            <th>说明</th>
-                            <th>参数</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>getCheckedNodes</td>
-                            <td>获取被勾选的节点</td>
-                            <td>无</td>
-                        </tr>
-                        <tr>
-                            <td>getSelectedNodes</td>
-                            <td>获取被选中的节点</td>
-                            <td>无</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="children" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>属性</th>
-                            <th>说明</th>
-                            <th>类型</th>
-                            <th>默认值</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>title</td>
-                            <td>标题</td>
-                            <td>String | Element String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>expand</td>
-                            <td>是否展开直子节点</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>禁掉响应</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>disableCheckbox</td>
-                            <td>禁掉 checkbox</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>selected</td>
-                            <td>是否选中子节点</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>checked</td>
-                            <td>是否勾选(如果勾选，子节点也会全部勾选)</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>子节点属性数组</td>
-                            <td>Array</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>render</td>
-                            <td>自定义当前节点渲染内容，见示例</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/tree';
-    import Anchor from '../../components/anchor.vue';
-    import studyRender from '../../components/study.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor,
-            studyRender
-        },
-        data () {
-            return {
-                code: Code,
-                data1: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        children: [
-                            {
-                                title: 'parent 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2'
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'parent 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                data2: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        children: [
-                            {
-                                title: 'parent 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2'
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'parent 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                data3: [
-                    {
-                        title: 'parent',
-                        loading: false,
-                        children: []
-                    }
-                ],
-                data4: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        selected: true,
-                        children: [
-                            {
-                                title: 'parent 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1',
-                                        disabled: true
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2'
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'parent 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1',
-                                        checked: true
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                data5: [
-                    {
-                        title: 'parent 1',
-                        expand: true,
-                        render: (h, { root, node, data }) => {
-                            return h('span', {
-                                style: {
-                                    display: 'inline-block',
-                                    width: '100%'
-                                }
-                            }, [
-                                h('span', [
-                                    h('Icon', {
-                                        props: {
-                                            type: 'ios-folder-outline'
-                                        },
-                                        style: {
-                                            marginRight: '8px'
-                                        }
-                                    }),
-                                    h('span', data.title)
-                                ]),
-                                h('span', {
-                                    style: {
-                                        display: 'inline-block',
-                                        float: 'right',
-                                        marginRight: '32px'
-                                    }
-                                }, [
-                                    h('Button', {
-                                        props: Object.assign({}, this.buttonProps, {
-                                            icon: 'ios-plus-empty',
-                                            type: 'primary'
-                                        }),
-                                        style: {
-                                            width: '52px'
-                                        },
-                                        on: {
-                                            click: () => { this.append(data) }
-                                        }
-                                    })
-                                ])
-                            ]);
-                        },
-                        children: [
-                            {
-                                title: 'child 1-1',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-1-1',
-                                        expand: true
-                                    },
-                                    {
-                                        title: 'leaf 1-1-2',
-                                        expand: true
-                                    }
-                                ]
-                            },
-                            {
-                                title: 'child 1-2',
-                                expand: true,
-                                children: [
-                                    {
-                                        title: 'leaf 1-2-1',
-                                        expand: true
-                                    },
-                                    {
-                                        title: 'leaf 1-2-1',
-                                        expand: true
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                buttonProps: {
-                    type: 'ghost',
-                    size: 'small',
-                }
-            }
-        },
-        methods: {
-            loadData (item, callback) {
-                setTimeout(() => {
-                    const data = [
-                        {
-                            title: 'children',
-                            loading: false,
-                            children: []
-                        },
-                        {
-                            title: 'children',
-                            loading: false,
-                            children: []
-                        }
-                    ];
-                    callback(data);
-                }, 1000);
-            },
-            renderContent (h, { root, node, data }) {
-                return h('span', {
-                    style: {
-                        display: 'inline-block',
-                        width: '100%'
-                    }
-                }, [
-                    h('span', [
-                        h('Icon', {
-                            props: {
-                                type: 'ios-paper-outline'
-                            },
-                            style: {
-                                marginRight: '8px'
-                            }
-                        }),
-                        h('span', data.title)
-                    ]),
-                    h('span', {
-                        style: {
-                            display: 'inline-block',
-                            float: 'right',
-                            marginRight: '32px'
-                        }
-                    }, [
-                        h('Button', {
-                            props: Object.assign({}, this.buttonProps, {
-                                icon: 'ios-plus-empty'
-                            }),
-                            style: {
-                                marginRight: '8px'
-                            },
-                            on: {
-                                click: () => { this.append(data) }
-                            }
-                        }),
-                        h('Button', {
-                            props: Object.assign({}, this.buttonProps, {
-                                icon: 'ios-minus-empty'
-                            }),
-                            on: {
-                                click: () => { this.remove(root, node, data) }
-                            }
-                        })
-                    ])
-                ]);
-            },
-            append (data) {
-                const children = data.children || [];
-                children.push({
-                    title: 'appended node',
-                    expand: true
-                });
-                this.$set(data, 'children', children);
-            },
-            remove (root, node, data) {
-                const parentKey = root.find(el => el === node).parent;
-                const parent = root.find(el => el.nodeKey === parentKey).node;
-                const index = parent.children.indexOf(data);
-                parent.children.splice(index, 1);
-            }
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/components/upload-en.vue b/src/views/components/upload-en.vue
deleted file mode 100644
index 24910e0..0000000
--- a/src/views/components/upload-en.vue
+++ /dev/null
@@ -1,435 +0,0 @@
-<style>
-    .demo-upload-list{
-        display: inline-block;
-        width: 60px;
-        height: 60px;
-        text-align: center;
-        line-height: 60px;
-        border: 1px solid transparent;
-        border-radius: 4px;
-        overflow: hidden;
-        background: #fff;
-        position: relative;
-        box-shadow: 0 1px 1px rgba(0,0,0,.2);
-        margin-right: 4px;
-    }
-    .demo-upload-list img{
-        width: 100%;
-        height: 100%;
-    }
-    .demo-upload-list-cover{
-        display: none;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: rgba(0,0,0,.6);
-    }
-    .demo-upload-list:hover .demo-upload-list-cover{
-        display: block;
-    }
-    .demo-upload-list-cover i{
-        color: #fff;
-        font-size: 20px;
-        cursor: pointer;
-        margin: 0 2px;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>Upload</h1>
-            <Anchor title="Brief Introduction" h2></Anchor>
-            <p>File select upload and drag upload component.</p>
-            <Alert show-icon style="margin-top: 16px">IE 9 is not supported.</Alert>
-            <Anchor title="Examples" h2></Anchor>
-            <Demo title="Click to Upload">
-                <div slot="demo">
-                    <Upload action="//jsonplaceholder.typicode.com/posts/">
-                        <Button type="ghost" icon="ios-cloud-upload-outline">Upload files</Button>
-                    </Upload>
-                </div>
-                <div slot="desc">
-                    <p>Basic usage. Clikc to upload, each at one time.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.select }}</i-code>
-            </Demo>
-            <Demo title="Multi Choices">
-                <div slot="demo">
-                    <Upload
-                        multiple
-                        action="//jsonplaceholder.typicode.com/posts/">
-                        <Button type="ghost" icon="ios-cloud-upload-outline">Upload files</Button>
-                    </Upload>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>multiple</code> prop to enable multi choices.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.multiple }}</i-code>
-            </Demo>
-            <Demo title="Manual Upload">
-                <div slot="demo">
-                    <Upload
-                        :before-upload="handleUpload"
-                        action="//jsonplaceholder.typicode.com/posts/">
-                        <Button type="ghost" icon="ios-cloud-upload-outline">Select the file to upload</Button>
-                    </Upload>
-                    <div v-if="file !== null">Upload file: {{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? '上传中' : '点击上传' }}</Button></div>
-                </div>
-                <div slot="desc">
-                    <p>Bind a function which returns <code>false</code> to <code>before-upload</code>. It will prevent default upload process and allow you control it manually.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.manual }}</i-code>
-            </Demo>
-            <Demo title="Drag to Upload">
-                <div slot="demo">
-                    <Upload
-                        multiple
-                        type="drag"
-                        action="//jsonplaceholder.typicode.com/posts/">
-                        <div style="padding: 20px 0">
-                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
-                            <p>Click or drag files here to upload</p>
-                        </div>
-                    </Upload>
-                </div>
-                <div slot="desc">
-                    <p>Set <code>type</code> prop to <code>drag</code> to enable drag-to-upload.</p>
-                </div>
-                <i-code lang="html" slot="code">{{ code.drag }}</i-code>
-            </Demo>
-            <Demo title="Custom Upload List">
-                <div slot="demo">
-                    <div class="demo-upload-list" v-for="item in uploadList">
-                        <template v-if="item.status === 'finished'">
-                            <img :src="item.url" style="vertical-align:top">
-                            <div class="demo-upload-list-cover">
-                                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
-                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
-                            </div>
-                        </template>
-                        <template v-else>
-                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
-                        </template>
-                    </div>
-                    <Upload
-                        ref="upload"
-                        :show-upload-list="false"
-                        :default-file-list="defaultList"
-                        :on-success="handleSuccess"
-                        :format="['jpg','jpeg','png']"
-                        :max-size="2048"
-                        :on-format-error="handleFormatError"
-                        :on-exceeded-size="handleMaxSize"
-                        :before-upload="handleBeforeUpload"
-                        multiple
-                        type="drag"
-                        action="//jsonplaceholder.typicode.com/posts/"
-                        style="display: inline-block;width:58px;">
-                        <div style="width: 58px;height:58px;line-height: 58px;">
-                            <Icon type="camera" size="20"></Icon>
-                        </div>
-                    </Upload>
-                    <Modal title="View Image" v-model="visible">
-                        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
-                    </Modal>
-                </div>
-                <div slot="desc">
-                    <p>You can control the upload list freely. The demo is a photo wall. You an view the big picture or delete the photo.</p>
-                    <ul>
-                        <li>Set <code>show-upload-list</code> prop to false to hide the default upload list.</li>
-                        <li>Set <code>default-file-list</code> prop to set uploaded file list.</li>
-                        <li>Set <code>on-success</code> prop and some other props to control the upload procedure. Details on API Doc.</li>
-                    </ul>
-                    <p>By the way, you can meet your need by using our APIs creatively. The demo below includes: </p>
-                    <ul>
-                        <li>The file format must be jpg or png image.</li>
-                        <li>Upload up to 5 images.</li>
-                        <li>The size of each image does not exceed 2M.</li>
-                    </ul>
-                </div>
-                <i-code lang="html" slot="code">{{ code.list }}</i-code>
-            </Demo>
-
-            <ad></ad>
-
-            <div class="api">
-                <Anchor title="API" h2></Anchor>
-                <Anchor title="Upload props" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Property</th>
-                            <th>Decription</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>action</td>
-                            <td>Upload request URL, required.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>headers</td>
-                            <td>Upload request header.</td>
-                            <td>Object</td>
-                            <td>{}</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>Enable multi choices or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>Extra data with upload request.</td>
-                            <td>Object</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>The key in upload request targeting to the file.</td>
-                            <td>String</td>
-                            <td>file</td>
-                        </tr>
-                        <tr>
-                            <td>with-credentials</td>
-                            <td>Enable certification info in Cookie or not.</td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                        </tr>
-                        <tr>
-                            <td>show-upload-list</td>
-                            <td>Show upload file list or not.</td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>The type of Upload. Optional value: <code>select</code>, <code>drag</code></td>
-                            <td>String</td>
-                            <td>select</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>Accepted <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept" target="_blank">file formats</a>.</td>
-                            <td>String</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>Accepted file formats. Different to accept prop, format recognizes the appendix of the file. Accept is same to HTML's input accept prop, it'll filter the file list during file selecting. You can use them together.</td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                        <tr>
-                            <td>max-size</td>
-                            <td>File size limitation. Unit: kb</td>
-                            <td>Number</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>before-upload</td>
-                            <td>Hook before file starts to upload. The only parameter is the file. If the function return false, or a Promise, default upload procedure will be stopped.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-progress</td>
-                            <td>Hook when file is uploading. It has three params: event, file, fileList</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-success</td>
-                            <td>Hook when file is successfully uploaded. It has three params: response, file, fileList</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-error</td>
-                            <td>Hook when file is failed to upload. It has three params: error, file, fileList</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-preview</td>
-                            <td>Hook when clicking uploaded file link. The only parameter is file. You can get server-side response data in file.response.</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-remove</td>
-                            <td>Hook when a certain file is removed from the file list. It has two params: file, fileList</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-format-error</td>
-                            <td>Hook when file format verification is failed. It has two params: file, fileList</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>on-exceeded-size</td>
-                            <td>Hook when file size exceeds the limitation. It has two params: file, fileList</td>
-                            <td>Function</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>default-file-list</td>
-                            <td>
-                                Default uploaded file list. For example:
-                                <pre>
-                                    <code>
-[
-    {
-        name: 'img1.jpg',
-        url: 'http://www.xxx.com/img1.jpg'
-    },
-    {
-        name: 'img2.jpg',
-        url: 'http://www.xxx.com/img2.jpg'
-    }
-]
-                                    </code>
-                                </pre>
-                            </td>
-                            <td>Array</td>
-                            <td>[]</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Upload methods" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Method Name</th>
-                            <th>Description</th>
-                            <th>Arguments</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>clearFiles</td>
-                            <td>Clear uploaded file list.</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <Anchor title="Upload slot" h3></Anchor>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>-</td>
-                            <td>Component that activates the upload component.</td>
-                        </tr>
-                        <tr>
-                            <td>tip</td>
-                            <td>Tip content</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Demo from '../../components/demo.vue';
-    import Code from '../../code/upload';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Demo,
-            Anchor
-        },
-        data () {
-            return {
-                code: Code,
-                file: null,
-                loadingStatus: false,
-                defaultList: [
-                    {
-                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
-                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
-                    },
-                    {
-                        'name': 'bc7521e033abdd1e92222d733590f104',
-                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
-                    }
-                ],
-                imgName: '',
-                visible: false,
-                uploadList: []
-            }
-        },
-        methods: {
-            handleUpload (file) {
-                this.file = file;
-                return false;
-            },
-            upload () {
-                this.loadingStatus = true;
-                setTimeout(() => {
-                    this.file = null;
-                    this.loadingStatus = false;
-                    this.$Message.success('Success')
-                }, 1500);
-            },
-            handleView (name) {
-                this.imgName = name;
-                this.visible = true;
-            },
-            handleRemove (file) {
-                // 从 upload 实例删除数据
-                const fileList = this.$refs.upload.fileList;
-                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
-            },
-            handleSuccess (res, file) {
-                // 因为上传过程为实例，这里模拟添加 url
-                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
-                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
-            },
-            handleFormatError (file) {
-                this.$Notice.warning({
-                    title: 'The file format is incorrect',
-                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
-                });
-            },
-            handleMaxSize (file) {
-                this.$Notice.warning({
-                    title: 'Exceeding file size limit',
-                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
-                });
-            },
-            handleBeforeUpload () {
-                const check = this.uploadList.length < 5;
-                if (!check) {
-                    this.$Notice.warning({
-                        title: 'Up to five pictures can be uploaded.'
-                    });
-                }
-                return check;
-            }
-        },
-        mounted () {
-            this.uploadList = this.$refs.upload.fileList;
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/guide/update.vue b/src/views/guide/update.vue
index 99743a2..da90957 100644
--- a/src/views/guide/update.vue
+++ b/src/views/guide/update.vue
@@ -24,819 +24,25 @@
         <h1>更新日志</h1>
         <article class="doc-update">
             <Timeline pending>
-                <Timeline-item>
-                    <Anchor title="2.14.1" h2></Anchor>
-                    <p>
-                        <code>2018-06-01</code>
-                    </p>
-                    <ul>
-                        <li>修复 2.14.0 版本中，在 SSR 中无法使用的 bug。<issue id="3740"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 无法绑定数字 0 的 bug。<issue id="3696"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 有时会显示 undefined 的 bug。<issue id="3705"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 初次渲染会触发 @on-change 事件的 bug。<issue id="3725"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 显示 label 不正确的 bug。<issue id="3728"></issue> <issue id="3742"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 在 filterable 且 clearable 模式下，清空列表未还原的 bug。<issue id="3746"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 在开启 transfer 时无法使用的 bug。<issue id="3695"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 无法在移动设备使用的 bug。<issue id="3741"></issue></li>
-                        <li>修复 2.14.0 版本中，Select 无法绑定值为对象的 bug。<issue id="3737"></issue></li>
-                        <li>修复 2.14.0 版本中，AutoComplete 有时无法正常收起的 bug。<issue id="3709"></issue></li>
-                        <li>修复 2.14.0 版本中，Tabs 内的表单控件不会自动获得焦点，除非开启属性 <code>capture-focus</code>。<issue id="3732"></issue></li>
-                        <li>修复 2.14.0 版本中，横向 Menu 有时展开子菜单错位的 bug。<issue id="3733"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.14.0 KAMI" h2></Anchor>
-                    <p>
-                        <code>2018-05-24</code>
-                    </p>
-                    <ul>
-                        <li>重构 Select 组件，完全支持键盘可访问性，并修复若干问题。<issue id="3157"></issue> <issue id="1647"></issue> <issue id="3574"></issue></li>
-                        <li>DatePicker 组件增强键盘的可访问性。<issue id="3643"></issue> <issue id="1647"></issue></li>
-                        <li>ColorPicker 组件增强键盘的可访问性。<issue id="3662"></issue> <issue id="1647"></issue></li>
-                        <li>Tabs 组件增强键盘的可访问性。<issue id="3642"></issue> <issue id="1647"></issue></li>
-                        <li>TabPane 将 <code>display: none</code> 改为了 <code>visibility: hidden</code>。<issue id="3652"></issue></li>
-                        <li>ColorPicker 新增属性 <code>disabled</code>。<issue id="3662"></issue></li>
-                        <li>Select 新增事件 <code>@on-clear</code> 和 <code>@on-open-change</code>。<issue id="3579"></issue></li>
-                        <li>Rate 新增属性 <code>clearable</code>。<issue id="3487"></issue></li>
-                        <li>ColorPicker 新增事件 <code>@on-open-change</code>。<issue id="3540"></issue></li>
-                        <li>AutoComplete 新增事件 <code>@on-focus</code> 和 <code>@on-blur</code>。<issue id="3565"></issue></li>
-                        <li>Icon 新增事件 <code>@click</code>。<issue id="3621"></issue></li>
-                        <li>Menu 在手风琴模式下，关闭父菜单，其子菜单也会关闭。<issue id="3617"></issue></li>
-                        <li>优化 popper.js 的配置。</li>
-                        <li>修复 Slider 有时无法拖拽的 bug。<issue id="3468"></issue></li>
-                        <li>修复 Grid 嵌套多层 Row 时，gutter 受父级影响的问题。<issue id="3596"></issue></li>
-                        <li>修复 DatePicker 在 <code>type="datetimerange"</code> 且开启 show-week-numbers 时，错位的 bug。<issue id="3629"></issue></li>
-                        <li>修复 DatePicker 在 multiple 模式下，使用 v-model 报错的 bug。<issue id="3675"></issue></li>
-                        <li>修复 RadioGroup 无法直接使用 value 的 bug。<issue id="3498"></issue></li>
-                        <li>修复 RadioGroup 有时内容不居中的问题。<issue id="3586"></issue></li>
-                        <li>修复 $Spin 直接调用 .hide() 方法，有时报错的 bug。<issue id="3535"></issue></li>
-                        <li>修复 AutoComplete 事件 <code>@on-change</code> 只触发一次的 bug。<issue id="3486"></issue></li>
-                        <li>修复 AutoComplete 内容溢出，点击横向滚动条时，关闭弹层的 bug。<issue id="3590"></issue></li>
-                        <li>修复 Notice 类名错误的 bug。<issue id="3551"></issue></li>
-                        <li>修复 Menu 事件 @on-open-change 返回值不正确的 bug。<issue id="3575"></issue></li>
-                        <li>修复 InputNumber 设置 precision 时，清空数据报错的 bug。<issue id="3676"></issue></li>
-                        <li>新增捷克语。<mention id="ajkl2533"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.13.1" h2></Anchor>
-                    <p>
-                        <code>2018-04-23</code>
-                    </p>
-                    <ul>
-                        <li>Tag 新增属性 <code>fade</code>。</li>
-                        <li>InputNumber 新增属性 <code>placeholder</code>。<issue id="3424"></issue></li>
-                        <li>InputNumber 的事件 <code>on-focus</code> 增加返回值 event。<issue id="3395"></issue></li>
-                        <li>DatePicker 的事件 <code>on-change</code> 增加返回值 type。<issue id="3353"></issue></li>
-                        <li>优化 popper.js 的配置及 dropdown 的展开动画。<issue id="3354"></issue></li>
-                        <li>修复 Table 在动态调整页面宽度，有时滚动条显示错误的 bug。<issue id="3358"></issue></li>
-                        <li>修复 Poptip / Tooltip 动态修改内容后，位置计算不准确的 bug。<issue id="3412"></issue></li>
-                        <li>修复在 Form 内使用 Carousel 时，点击按钮会跳转的问题。<issue id="3426"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.13.0 King of Opera" h2></Anchor>
-                    <p>
-                        <code>2018-04-11</code>
-                    </p>
-                    <ul>
-                        <li>Table 列新增属性 <code>minWidth</code> 和 <code>maxWidth</code>。<issue id="3284"></issue></li>
-                        <li>DatePicker 的 <code>disabledDate</code> 功能，现在也能限制时、分、秒了。<issue id="3246"></issue></li>
-                        <li>优化 Table 筛选样式。<issue id="3206"></issue></li>
-                        <li>修复 Table 在多级表头里使用过滤和排序的 bug。<issue id="3339"></issue></li>
-                        <li>修复 Table 在 2.12.0 版本，设置 <code>show-header="false"</code> 报错的 bug。</li>
-                        <li>修复 Poptip 和 Tooltip 有时方向识别错误的 bug，并支持自定义 popper.js 的 options 选项。</li>
-                        <li>修复 DatePicker 在 daterange 模式下，选择年、月后显示值不正确的 bug。<issue id="3345"></issue></li>
-                        <li>修复 DatePicker 在 Safari 浏览器下 <code>on-change</code> 事件返回值有时不正确的 bug。<issue id="3232"></issue></li>
-                        <li>修复 DatePicker 的 <code>show-week-numbers</code> 无法动态设置的 bug。<issue id="3277"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.12.0 Human Resource Machine" h2></Anchor>
-                    <p>
-                        <code>2018-04-04</code>
-                    </p>
-                    <ul>
-                        <li>Select、AutoComplete、DatePicker、TimePicker、ColorPicker、Cascader、Dropdown 等组件支持自动识别浮层展开方向。<issue id="3156"></issue></li>
-                        <li>Table 支持表头分组。</li>
-                        <li>InputNumber 的值可以删除或设置为 null。<issue id="3174"></issue></li>
-                        <li>Card 新增属性 <code>title</code> 和 <code>icon</code>，可以更简单地设置头部。</li>
-                        <li>Tree 新增属性 <code>children-key</code>。</li>
-                        <li>Slider 新增属性 <code>input-size</code>。<issue id="3301"></issue></li>
-                        <li>Poptip 新增属性 <code>popper-class</code>。</li>
-                        <li>优化 Input 在 clearable 模式下，无数据时不显示清空按钮。</li>
-                        <li>优化 Table 筛选、排序样式。</li>
-                        <li>修复 Table 在同时固定表头和列时，不显示垂直滚动条的 bug。<issue id="3178"></issue></li>
-                        <li>修复 Table 固定列无法滚动的 bug。<issue id="2871"></issue></li>
-                        <li>修复 Table 有时表头溢出的 bug。<issue id="3178"></issue></li>
-                        <li>修复 Table 表头过长，有时导致滚动条溢出的 bug。<issue id="3178"></issue></li>
-                        <li>修复 TimePicker 设置初始输入为空数组时，报错的 bug。<issue id="3161"></issue></li>
-                        <li>修复 DatePicker 在选范围时，点击切换下一年按钮时，逻辑不正确的 bug。<issue id="3158"></issue></li>
-                        <li>修复 Sider 无法正确使用 <code>v-model</code> 的 bug。<issue id="3186"></issue></li>
-                        <li>修复 Slider 设置 step 为小数，有时无法拖动到最大值的 bug。<issue id="3195"></issue></li>
-                        <li>修复 Slider 首次点击滑条，无法触发 on-change 事件的 bug。<issue id="3291"></issue></li>
-                        <li>修复 Menu 在 accordion 模式下，事件 on-open-change 返回错误值的 bug。<issue id="3298"></issue></li>
-                        <li>修复 Select 中 Option 过长，样式不正确的 bug。<issue id="2931"></issue></li>
-                        <li>修复 Select 点击过快，错位的 bug。</li>
-                        <li>修复 FormItem 在 slot 内时，有时无法正确获取到 Form 的 bug。</li>
-                        <blockquote>特别感谢 <mention id="huanghong1125">@huanghong1125</mention> 的贡献！</blockquote>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Icon type="planet" size="18" slot="dot"></Icon>
-                    <Anchor title="2.11.0 Alto's Odyssey" h2>
-                        <span class="doc-update-important">悼念史蒂芬·霍金</span>
-                    </Anchor>
-                    <p>
-                        <code>2018-03-14</code>
-                    </p>
-                    <ul>
-                        <li>InputNumber 新增格式化展示属性 <code>formatter</code> 和 <code>parser</code>。<issue id="3081"></issue></li>
-                        <li>Input 增加 <code>wrap</code> 属性。<issue id="3086"></issue></li>
-                        <li>Page 增加 <code>transfer</code> 属性。<issue id="3112"></issue></li>
-                        <li>优化了 Select 样式与交互，增强键盘的可访问性，更接近原生。<issue id="1647"></issue></li>
-                        <li>修复 Menu 多层嵌套在 Vue.js 2.5.14 版本之后报错的 bug。<a href="https://github.com/iview/iview/commit/b71a171d36e1327ee8fe1cc4f35fe97887f0786c" target="_blank">b71a171</a></li>
-                        <li>修复 Select 在不同尺寸，多选样式和单选不一致的 bug。<issue id="2451"></issue></li>
-                        <li>修复 Cascader 在搜索时，样式不正确的 bug。</li>
-                        <li>修复 Input 在 <code>size="small"</code> 且使用 <code>append</code> 或 <code>prepend</code> 时，样式错误的 bug。</li>
-                        <li>优化 Collapse 样式。<issue id="2973"></issue></li>
-                        <li>新增荷兰语。<mention id="mervy-sim"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.10.1" h2></Anchor>
-                    <p>
-                        <code>2018-03-09</code>
-                    </p>
-                    <ul>
-                        <li>修复 2.10.0 版本，编译后文件过大的问题。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.10.0 Reigns" h2></Anchor>
-                    <p>
-                        <code>2018-03-09</code>
-                    </p>
-                    <ul>
-                        <li>
-                            重构了 DatePicker 组件。<issue id="2861"></issue>
-                            <ul>
-                                <li><code>daterange</code> 支持从右往左选择。<issue id="2731"></issue></li>
-                                <li>新增 <code>split-panels</code> 属性，开启后，左右两面板可以不联动。<issue id="2067"></issue></li>
-                                <li>新增 <code>multiple</code> 属性，开启后，可以选择多个日期。</li>
-                                <li>新增 <code>start-date</code> 属性，可以设置面板展开时默认显示的日期。<issue id="2814"></issue></li>
-                                <li>新增属性 <code>show-week-numbers</code>，开启后，可以显示星期数。</li>
-                                <li>新增属性 <code>time-picker-options</code>，可以在 type 为 <code>datetime</code> 和 <code>datetimerange</code> 下，配置 TimePicker 的属性，比如时间间隔 <code>steps</code>。<issue id="3091"></issue></li>
-                                <li>修复无法动态修改 <code>type</code> 的问题。<issue id="2608"></issue></li>
-                                <li>修复使用 <code>v-model</code> 绑定的数据，有时无法更新面板的问题。<issue id="2386"></issue></li>
-                                <li>修复手动输入禁用的日期报错的问题。<issue id="2544"></issue></li>
-                            </ul>
-                        </li>
-                        <li>移除全局样式 <code>ul</code> 和 <code>ol</code>。<issue id="3061"></issue></li>
-                        <li>优化了 Slider、Switch 样式与交互，增强键盘的可访问性，更接近原生。<issue id="1647"></issue></li>
-                        <li>修复了 Slider 的 <code>step</code> 属性设置为小数时的 bug。<issue id="2984"></issue></li>
-                        <li>修复 Select 在无 Option 时，按下方向键报错的 bug。</li>
-                        <li>修复 Avatar 使用中文字符，有时不能居中的 bug。<issue id="3033"></issue></li>
-                        <li>修复 Carousel 在没有使用 <code>v-model</code> 时，指示器不更新的 bug。<issue id="3038"></issue></li>
-                        <li>修复 Input 在 <code>size="small"</code> 且使用 <code>prepend</code> 或 <code>append</code> 时，样式不正确的 bug。<issue id="3089"></issue></li>
-                        <li>新增希腊语。<mention id="d4rth0nyx"></mention></li>
-                        <li>优化繁体中文。</li>
-                        <li>修复罗马尼亚语文件错误的问题。<issue id="3060"></issue></li>
-                        <blockquote>特别感谢 <mention id="SergioCrisostomo"></mention> 和 <mention id="Xotic750"></mention> 的贡献！</blockquote>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.9.2" h2></Anchor>
-                    <p>
-                        <code>2018-02-02</code>
-                    </p>
-                    <ul>
-                        <li>修复 Slider 无法正常触发 <code>on-change</code> 事件的 bug。<issue id="2975"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.9.1" h2></Anchor>
-                    <p>
-                        <code>2018-01-30</code>
-                    </p>
-                    <ul>
-                        <li>修复了 Slider 在 2.9.0 版本下，设置 <code>max</code> 大于 100 时的 bug。<issue id="2914"></issue></li>
-                        <li>优化了 Avatar 的默认背景色。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.9.0 Agent A" h2></Anchor>
-                    <p>
-                        <code>2018-01-24</code>
-                    </p>
-                    <ul>
-                        <li>更新依赖，以及使用 browserlist。<issue id="2835"></issue> <issue id="2837"></issue> <issue id="2839"></issue></li>
-                        <li>重构了 Slider 组件。<issue id="2393"></issue></li>
-                        <li>优化了 Button、Radio、Checkbox 样式，增强键盘的可访问性，更接近原生。<issue id="1647"></issue></li>
-                        <li>Menu 支持多级嵌套。</li>
-                        <li>ColorPicker 新增是否显示色彩滑块的属性 <code>hue</code>。<issue id="2672"></issue></li>
-                        <li>AutoComplete 新增 <code>placement</code> 属性。<issue id="2803"></issue></li>
-                        <li>Input 新增 <code>clearable</code> 属性。<issue id="2884"></issue></li>
-                        <li>Dropdown 新增事件 <code>@on-clickoutside</code>。<issue id="2783"></issue></li>
-                        <li>修复 Table 固定列使用排序和筛选功能时的 bug。<issue id="2832"></issue></li>
-                        <li>修复 Table 在筛选时有时报错的 bug。<issue id="2352"></issue></li>
-                        <li>修复 Table 在有滚动条时，数据置空后，表头错误的 bug。<issue id="2775"></issue></li>
-                        <li>修复 Cascader 数据 label 为空时，报错的 bug。<issue id="2722"></issue></li>
-                        <li>修复 Cascader 在 <code>change-on-select</code> 模式下，动态改变 data 无法选中绑定值的 bug。<issue id="2793"></issue></li>
-                        <li>修复 Dropdown 在 <code>trigger="click"</code> 有时报错的问题。<issue id="2780"></issue></li>
-                        <li>修复 Slider 在 Modal 内使用，<code>show-tip="always"</code> 时，Tooltip 错位的 bug。<issue id="2852"></issue></li>
-                        <li>优化 Table 在多选模式下，无数据时，无法点击全选按钮。<issue id="2823"></issue></li>
-                        <li>优化 $Notice 使用 Render 时的样式。<issue id="2752"></issue></li>
-                        <li>优化 Input 在 textarea 模式下的样式。</li>
-                        <li>优化 Select 在 filterable 模式下， disabled 时的样式。<issue id="2893"></issue></li>
-                        <li>新增印地语。<mention id="rajnikant307"></mention></li>
-                        <li>新增波斯语。<mention id="roshangara"></mention></li>
-                        <li>新增罗马尼亚语。<mention id="Leonard1980"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Icon type="ios-snowy" class="ivu-load-loop doc-update-loop" style="font-size: 32px;color: rgb(220,50,51)" slot="dot"></Icon>
-                    <Anchor title="2.8.0 Oceanhorn" h2>
-                        <span class="doc-update-important">Merry Christmas</span>
-                    </Anchor>
-                    <p>
-                        <code>2017-12-25</code>
-                    </p>
-                    <ul>
-                        <li>新增响应式布局组件 Layout（包括 Layout、Header、Sider、Content、Footer 5个组件）。<issue id="2646"></issue> <mention id="lison16"></mention> <router-link to="/components/layout">查看</router-link></li>
-                        <li>Tag 支持自定义颜色。<issue id="2644"></issue></li>
-                        <li>$Message 和 $Notice 支持 Render 函数。<issue id="2667"></issue></li>
-                        <li>Affix 优化滚动时的占位区域高度。<issue id="2628"></issue></li>
-                        <li>$Modal 支持 ESC 键关闭。<issue id="2362"></issue></li>
-                        <li>TimeRange 也增加 steps 属性。<issue id="2580"></issue></li>
-                        <li>修复无法按需加载 Submenu 组件的 bug。<issue id="2553"></issue></li>
-                        <li>修复在 Vue 2.5.11 版本下，Circle 和 Switch 标签名警告的问题。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.7.4" h2></Anchor>
-                    <p>
-                        <code>2017-12-01</code>
-                    </p>
-                    <ul>
-                        <li>修复部分组件在按需加载时报错的问题。<issue id="2537"></issue></li>
-                        <li>Input 增加了更多的类型。<issue id="2526"></issue></li>
-                        <li>新增意大利语。<mention id="lucagentile"></mention></li>
-                        <li>新增泰语。<mention id="NatJNP"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.7.3" h2></Anchor>
-                    <p>
-                        <code>2017-11-16</code>
-                    </p>
-                    <ul>
-                        <li>修复 2.7.0 版本下，无法在 Nuxt.js 中使用的问题。</li>
-                        <li>修复 InputNumber 的一个问题。<issue id="2418"></issue></li>
-                        <li>修改了西班牙语。<issue id="2426"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.7.2" h2></Anchor>
-                    <p>
-                        <code>2017-11-14</code>
-                    </p>
-                    <ul>
-                        <li>修复 Tabs 销毁时报错的问题。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.7.1" h2></Anchor>
-                    <p>
-                        <code>2017-11-14</code>
-                    </p>
-                    <ul>
-                        <li>修复 Tabs 组件报错的问题。<issue id="2407"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.7.0 Lara Croft GO" h2></Anchor>
-                    <p>
-                        <code>2017-11-13</code>
-                    </p>
-                    <ul>
-                        <li>i18n 兼容 vue-i18n 6.x+ 版本，并支持通过 <code>script</code> 标签引入，完善国际化使用文档。<router-link to="/docs/guide/i18n">查看</router-link></li>
-                        <li>现在可以更好地按需加载组件了。<router-link to="/docs/guide/start">查看</router-link></li>
-                        <li>Form 验证方法 <code>validate</code> 支持 Promise。<issue id="2018"></issue></li>
-                        <li>Form 新增 <code>autocomplete</code> 属性。</li>
-                        <li>BreadcrumbItem 的 <code>href</code> 属性支持传入 vue-router 的 to 对象，同时新增 <code>to</code> 属性，与 href 相同，未来将废弃 href 属性。<issue id="2214"></issue></li>
-                        <li>Input 新增 <code>spellcheck</code> 属性，部分可输入类组件设置了默认的 <code>autocomplete</code> 和 <code>spellcheck</code> 属性。<issue id="2324"></issue></li>
-                        <li>Modal 增加事件 <code>on-visible-change</code>。</li>
-                        <li>Transfer 新增选中项变化事件 <code>on-selected-change</code>。<issue id="2019"></issue></li>
-                        <li>InputNumber 新增事件 <code>on-focus</code> 和 <code>on-blur</code>。</li>
-                        <li>Avatar 样式调整为居中。<issue id="1926"></issue></li>
-                        <li>修复 InputNumber 有时无法输入范围内数字的 bug。<issue id="2205"></issue></li>
-                        <li>修复 Table 在未设置 width，垂直滚动时，固定列出现错位的 bug。<issue id="2102"></issue></li>
-                        <li>修复 Table 在可展开且有固定列时，固定一列重复渲染的 bug。<issue id="1648"></issue></li>
-                        <li>修复 DatePicker、TimePicker 第一次点击清除按钮时，无法触发 <code>on-change</code> 事件的 bug。<issue id="2215"></issue></li>
-                        <li>修复 DatePicker、TimePicker、ColorPicker 在 FormItem 内使用时，图标位置不正确的 bug。<issue id="2219"></issue></li>
-                        <li>修复 TimePicker 在 IE 下的一个问题。<issue id="2330"></issue></li>
-                        <li>修复 Page 在 simple 模式下，输入页码为空时，回车显示为 NaN 的 bug。<issue id="1575"></issue></li>
-                        <li>修复 Tooltip 在动态改变 content 时，错位的 bug。<issue id="1482"></issue></li>
-                        <li>增加乌克兰语。<mention id="f3man"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.6.0 FRAMED" h2></Anchor>
-                    <p>
-                        <code>2017-10-26</code>
-                    </p>
-                    <ul>
-                        <li>重构 Tree 组件，支持 Render 函数、异步加载数据，完善文档。<mention id="SergioCrisostomo"></mention></li>
-                        <li>Carousel 增加循环滚动属性 <code>loop</code> 和圆形指示器属性 <code>radius-dot</code>。<issue id="2181"></issue> <mention id="lisafra"></mention></li>
-                        <li>Tabs 标签页过多时，可以进行滚动。<issue id="1031"></issue> <mention id="marxy"></mention></li>
-                        <li>Date 面板可根据当前语言包显示当地的年月格式。<issue id="2097"></issue> <mention id="SergioCrisostomo"></mention></li>
-                        <li>Table 导出 csv 数据方法新增 <code>callback</code>、<code>quoted</code> 和 <code>separator</code> 选项。<issue id="2114"></issue></li>
-                        <li>Table 新增过滤事件 <code>on-filter-change</code>。<issue id="2078"></issue></li>
-                        <li>Tag 新增可选择属性 <code>checkable</code>。<issue id="2115"></issue></li>
-                        <li>Scroll 新增边缘距离属性 <code>distance-to-edge</code>。<issue id="2137"></issue></li>
-                        <li>修复 Scroll 组件在 Firefox 浏览器下，无法触发滚动事件的 bug。<issue id="2135"></issue></li>
-                        <li>修复 Select 在 remote、multiple 模式下，主动清空数据后，未清空选中项的 bug。<issue id="2066"></issue></li>
-                        <li>修复 Poptip 在 transfer 模式下，点击内部会关闭浮层的 bug。<issue id="1700"></issue></li>
-                        <li>修复 Tabs 的 TabPane 无法使用 v-for 动态更新的 bug。<issue id="2100"></issue></li>
-                        <li>修复 Cascader 在 trigger 为 hover 模式下，只有一项时，有时会直接选中的 bug。<issue id="1922"></issue></li>
-                        <li>修复 Input 在 FormItem 内，size 为 small 时，icon 错位的 bug。<issue id="2149"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.5.1" h2></Anchor>
-                    <p>
-                        <code>2017-10-18</code>
-                    </p>
-                    <ul>
-                        <li>修复 2.5.0 版本下，DatePicker 绑定数据为空时，初始化显示为 false 的bug。<issue id="2119"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.5.0 Old Man’s Journey" h2></Anchor>
-                    <p>
-                        <code>2017-10-17</code>
-                    </p>
-                    <ul>
-                        <li><strong>发布后台管理系统模板 <a href="https://github.com/iview/iview-admin" target="_blank">iview-admin</a>。</strong></li>
-                        <li>新增无限滚动组件 Scroll。<router-link to="/components/scroll">查看</router-link></li>
-                        <li>Date 会根据当前语言包自动识别每周起始日。<issue id="1809"></issue></li>
-                        <li>InputNumber 新增 readonly 和 editable 属性。</li>
-                        <li>优化 InputNumber 实时输入的表现。<issue id="2059"></issue></li>
-                        <li>优化 Date 在输入一个错误日期格式后失焦的表现。<issue id="2002"></issue></li>
-                        <li>修复 Date 在 SSR 无法通过 Form 验证的问题。<issue id="1971"></issue></li>
-                        <li>修复 Date 在 IE11 下的一个问题。<issue id="1937"></issue></li>
-                        <li>修复 Date、Dropdown 在 transfer 模式下，body 宽度为 100% 时，样式错误的bug。<issue id="2050"></issue></li>
-                        <li>修复 FormItem 在动态设置 error 时，有时错误信息无法清空的bug。<issue id="2047"></issue></li>
-                        <li>修复 Badge 在开启 dot 且 count 为 0 时，扔显示 dot 的bug。</li>
-                        <li>修复 InputNumber 在 precision 为 0 时，无法设置精度为整数的bug。<issue id="2026"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.4.0 Monument" h2></Anchor>
-                    <p>
-                        <code>2017-09-25</code>
-                    </p>
-                    <ul>
-                        <li>InputNumber 新增精度属性 <code>precision</code>。<issue id="1810"></issue></li>
-                        <li>Spin 增加全局用法 <code>$Spin</code>。<issue id="1063"></issue></li>
-                        <li>Spin 样式调整，<code>fix</code> 时不再强制设置父级宽高。</li>
-                        <li>Table 支持自适应宽度。<issue id="690"></issue></li>
-                        <li>Table 新增加载中属性 <code>loading</code>，及具名 slot <code>loading</code>。<issue id="704"></issue></li>
-                        <li>Table 新增取消单选方法 <code>clearCurrentRow</code>。<issue id="1372"></issue></li>
-                        <li>Table 事件 <code>@on-row-click</code> 和 <code>@on-row-dblclick</code> 返回参数增加 index。<issue id="693"></issue></li>
-                        <li>Date 支持动态切换 type。<issue id="1851"></issue></li>
-                        <li>Steps 支持动态设置 Step。</li>
-                        <li>所有表单类组件都支持设置 <code>name</code> 属性。<issue id="812"></issue></li>
-                        <li>FormItem 新增 <code>label-for</code> 属性，Input、AutoComplete、Cascader、Date、InputNumber、Select(filterable) 增加 <code>element-id</code> 属性，当设置一致时，点击 label 可以聚焦对应的控件。<issue id="433"></issue></li>
-                        <li>修改 Menu 的 z-index 值。<issue id="823"></issue></li>
-                        <li>优化 Message 样式。<issue id="1881"></issue></li>
-                        <li>优化 Select 样式。<issue id="860"></issue></li>
-                        <li>优化 Date 按 tab 建的交互。<issue id="1930"></issue></li>
-                        <li>修复 Table 在 stripe 模式下，hover 样式不正确的bug。<issue id="1380"></issue></li>
-                        <li>修复 Tabs 在关闭所有页签后，报错的bug。<issue id="1842"></issue></li>
-                        <li>修复 Select 在 remote 模式下，高亮搜索词时，再次键入并选择，query 不正确的bug。<issue id="1865"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.3.1 & 2.3.2" h2></Anchor>
-                    <p>
-                        <code>2017-09-10</code>
-                    </p>
-                    <ul>
-                        <li>发布 <router-link to="/docs/guide/iview-loader">iview-loader</router-link>。</li>
-                        <li>修复 Switch 使用 true-value 和 false-value 时，设置 slot 无法正确显示的bug。<issue id="1797"></issue></li>
-                        <li>修复 Select 共用同一份 Option 数据时，仅第一个可以选择的bug。<issue id="1807"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.3.0 Lumino City" h2></Anchor>
-                    <p>
-                        <code>2017-09-05</code>
-                    </p>
-                    <ul>
-                        <li>Switch 新增 true-value 和 false-value 属性。<issue id="1399"></issue></li>
-                        <li>Input 新增 autocomplete 属性。</li>
-                        <li>Table 的 column 新增 type: html，避免 XSS。<issue id="993"></issue></li>
-                        <li>Table 列为可展开时，支持设置 title 或 renderHeader。</li>
-                        <li>提高 Select 渲染性能。<issue id="1777"></issue></li>
-                        <li>修复 Table 在 columns 为空时，报错的bug。<issue id="1736"></issue></li>
-                        <li>修复 Table 在多选模式下，将所有列都禁用时，状态标记为全部选中的bug。<issue id="1751"></issue></li>
-                        <li>修复 Select 选择 Option 时，将 slot 内的标签一同携带的bug。<issue id="1690"></issue></li>
-                        <li>修复 Select 在 remote 模式下，手动清空数据后没有清空 label 的bug。<issue id="1743"></issue></li>
-                        <li>修复 Rate 半选状态初始化不正确的bug。<issue id="1761"></issue></li>
-                        <li>修复 Date 在 IE11 下无法显示初始值的bug。<issue id="1422"></issue></li>
-                        <li>修复 Date 在选择时间模式下，清空再次选择后时间错误的bug。<issue id="1223"></issue></li>
-                        <li>修复 Date 无默认值时，有时选择的时间提前一天的bug。<issue id="1734"></issue></li>
-                        <li>修复 Tabs 在 IE11 下，边线宽度设置不正确的bug。<issue id="695"></issue></li>
-                        <li>修复 Tooltip 在 always 模式下，错位的bug。<issue id="1568"></issue></li>
-                        <li>修复 Slider 双击滑块时，滑块跳动的bug。<issue id="1354"></issue></li>
-                        <li>修复 Cascader 在 transfer 模式下，部分样式错误的bug。<issue id="1728"></issue></li>
-                        <li>新增印尼语。<mention id="IndraGunawan"></mention></li>
-                        <blockquote>特别感谢 <mention id="SergioCrisostomo"></mention></blockquote>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item color="red">
-                    <Icon type="ios-heart" size="18" slot="dot"></Icon>
-                    <Anchor title="2.2.0 Shadowmatic" h2></Anchor>
-                    <p>
-                        <code>2017-08-28</code>
-                    </p>
-                    <ul>
-                        <li>新增头像组件 Avatar。<router-link to="/components/avatar">查看</router-link></li>
-                        <li>新增颜色选择器组件 ColorPicker。<router-link to="/components/color-picker">查看</router-link></li>
-                        <li>新增自动完成组件 AutoComplete。<router-link to="/components/auto-complete">查看</router-link></li>
-                        <li>Form 支持对 ColorPicker 和 AutoComplete 组件的验证。</li>
-                        <li>Radio 和 RadioGroup 新增 size 属性。</li>
-                        <li>Checkbox 和 CheckboxGroup 新增 size 属性。</li>
-                        <li>具有 size 属性的组件都增加了 default。</li>
-                        <li>修复 Select 在 filterable 模式下，开启 disabled 后仍然能够输入的bug。<issue id="1547"></issue></li>
-                        <li>修复 Poptip 在 transfer 模式下，使用 confirm 样式错乱的bug。<issue id="1612"></issue></li>
-                        <li>修复 InputNumber 的一个问题。<issue id="1654"></issue></li>
-                        <li>优化 Grid 组件对 gutter 的设置。<issue id="1661"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.1.0 Alto's Adventure" h2></Anchor>
-                    <p>
-                        <code>2017-08-14</code>
-                    </p>
-                    <ul>
-                        <li>TimePicker 新增属性 steps, 可以设置小时、分钟、秒的间隔。<mention id="SergioCrisostomo"></mention></li>
-                        <li>Radio、Checkbox 新增 true-value 和 false-value 属性。<issue id="1191"></issue></li>
-                        <li>Page 的 current 属性支持 .sync 修饰符。</li>
-                        <li>Poptip、Tooltip 增加 on-popper-show 事件。</li>
-                        <li>优化 Table 导出 csv 在 Safari 浏览器下的表现。</li>
-                        <li>修复 Cascader 在 change-on-select 模式下，再次选择时没有重置子列表的bug。<issue id="1553"></issue></li>
-                        <li>修复 Cascader 在动态加载选项，children 的数据为空时递归触发请求的bug。</li>
-                        <li>修复 InputNumber 有时计算不准确的bug。<issue id="1452"></issue></li>
-                        <li>修复 InputNumber 没有监听 min 和 max 的bug。<issue id="1134"></issue></li>
-                        <li>修复 Page 在改变 total 时，页码计算不正确的bug。<issue id="1543"></issue></li>
-                        <li>修复 Date 在 datetimerange 模式下，返回数据不正确的bug。<issue id="1220"></issue></li>
-                        <li>修复 Tree 在 children 为空时，自动勾选的bug。<issue id="1504"></issue></li>
-                        <li>修复 Form 重置后，部分组件首次无法校验的bug。<issue id="1534"></issue></li>
-                        <li>新增越南语。<mention id="hckhanh"></mention></li>
-                        <li>新增葡萄牙语。<mention id="SergioCrisostomo"></mention></li>
-                        <li>新增瑞典语。<mention id="SergioCrisostomo"></mention></li>
-                    </ul>
-                </Timeline-item>
                 <Timeline-item color="green">
                     <Icon type="trophy" size="18" slot="dot"></Icon>
-                    <Anchor title="2.0.0 Leo's Fortune" h2></Anchor>
-                    <p>
-                        <code>2017-07-28</code>
-                    </p>
-                    <ul>
-                        <li>Nuxt.js 支持使用多语言。<router-link to="/docs/guide/i18n">查看</router-link></li>
-                        <li>Modal 的 width 当不大于 100 时，将以百分比显示。</li>
-                        <li>Progress 新增垂直方向属性 vertical。<issue id="629"></issue></li>
-                        <li>Table 新增默认排序属性 sortType。<issue id="1403"></issue></li>
-                        <li>Table 在多选时，阻止冒泡。<issue id="1271"></issue></li>
-                        <li>Table 的自定义表头方法 renderHeader 改为了 Render 函数。<issue id="1357"></issue></li>
-                        <li>Table 在排序时，点击表头标题也可以进行排序。<issue id="122"></issue></li>
-                        <li>修复 Table 内使用 Select、Dropdown 等组件无法收起的bug。<issue id="1341"></issue></li>
-                        <li>修复 Table 在数据为空时，固定列高度不正确的bug。<issue id="1387"></issue></li>
-                        <li>修复 Table 在数据为空时，未设置宽度的 column 消失的bug。<issue id="658"></issue></li>
-                        <li>修复 Table 在数据为空，设置表格高度时，添加数据后，表格高度计算不正确的bug。<a href="https://github.com/iview/iview/commit/119eeafedea02d984650b82920abdcdf4e809f79" target="_blank">commit</a></li>
-                        <li>
-                            Modal、Poptip、Tooltip、Dropdown、Select、Date、Cascader 组件新增 transfer 属性，开启会将浮层移动到 body 内。<issue id="830"></issue> <issue id="844"></issue> <issue id="1187"></issue>
-                            <blockquote>带有浮层的组件，在 Tabs、带有 fixed 的 Table 内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果。</blockquote>
-                        </li>
-                        <li>Input 新增事件 @on-keyup、@on-keydown、@on-keypress。</li>
-                        <li>修复 Select 在 remote 模式下，在 Modal 内使用时，浮层错位的bug。<issue id="1099"></issue></li>
-                        <li>修复 Tabs 嵌套使用时，外层禁用动画，内层无法切换的bug。<issue id="1427"></issue></li>
-                        <li>新增韩语。<mention id="dokenzy"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.19" h2></Anchor>
-                    <p>
-                        <code>2017-07-17</code>
-                    </p>
-                    <ul>
-                        <li>支持 Vue 2.4.1。</li>
-                        <li>支持 SSR 和 Nuxt.js。<issue id="1315"></issue></li>
-                        <li>Page 支持小键盘操作。<issue id="1318"></issue></li>
-                        <li>Table 新增取消当前行事件 @on-select-cancel。<issue id="705"></issue></li>
-                        <li>修复 Select 在 remote 模式下，手动设置 label 不生效的bug。<issue id="1286"></issue></li>
-                        <li>修复 Table、Cascader、Tree 在 Vue 2.4.1 版本下，报错的问题。<issue id="1353"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.18" h2></Anchor>
-                    <p>
-                        <code>2017-07-03</code>
-                    </p>
-                    <ul>
-                        <li>废弃 Table 旧 render 方法。</li>
-                        <li>修复 Table 在使用展开功能时，render 重复触发的问题。<issue id="1195"></issue></li>
-                        <li>修复 Transfer 在特定条件下报错的问题。</li>
-                        <li>修复 Input 在 small 尺寸时，右间距不正确的问题。<issue id="1174"></issue></li>
-                        <li>修复 Poptip title 无法显示的bug。<issue id="1222"></issue></li>
-                        <li>修复 Poptip 使用 trigger 模式时，对普通元素无法生效的bug。</li>
-                        <li>修复 Select 多选在 Firefox 下样式不正确的bug。<issue id="1224"></issue></li>
-                        <li>修复 Upload 触发区域不准确的bug。<issue id="1258"></issue></li>
-                        <li>优化 Menu 样式。</li>
-                        <li>优化 Page 样式。</li>
-                        <li>Date 组件改为 inline-block。</li>
-                        <li>更新 async-validator 库到 1.7.1 版本。<issue id="1171"></issue></li>
-                        <li>新增德语。<mention id="dspangenberg"></mention></li>
-                        <li>新增葡萄牙语。<mention id="programadorthi"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.17" h2></Anchor>
-                    <p>
-                        <code>2017-06-14</code>
-                    </p>
-                    <ul>
-                        <li>Table 新增禁用鼠标悬停高亮 prop：disabled-hover。<mention id="lcx960324"></mention></li>
-                        <li>修复 CheckboxGroup 的 Checkbox 向上寻找父组件时的bug。</li>
-                        <li>修复 Date 组件在禁用时，点击图标仍然会展开面板的bug。</li>
-                        <li>修复 Vue 2.3.3 版本下， Poptip 在 focus，slot 含有 input、textarea 元素时无法聚焦的bug。<issue id="1101"></issue></li>
-                        <li>修复 Menu 在手风琴模式下，on-open-change 返回值错误的bug。<issue id="1102"></issue></li>
-                        <li>优化 Table 单元格的渲染。</li>
-                        <li>优化 Table 展开项的渲染。<mention id="ckryo"></mention></li>
-                        <li>优化 Tabs 自定义标签页的渲染。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Icon type="social-apple-outline" size="18" slot="dot"></Icon>
-                    <Anchor title="2.0.0-rc.16" h2></Anchor>
-                    <p>
-                        <code>2017-06-05</code>
-                    </p>
-                    <ul>
-                        <li>支持 SSR。</li>
-                        <li>$Modal 内容支持自定义组件。<issue id="1041"></issue></li>
-                        <li>Tabs 支持自定义标签页。</li>
-                        <li>Table 可单独设置某行禁用展开功能。</li>
-                        <li>Menu 增加展开时的过渡动画。<issue id="514"></issue></li>
-                        <li>Collapse 增加展开时的过渡动画。</li>
-                        <li>Tree 增加展开时的过渡动画。</li>
-                        <li>修复 Notice 的 destroy 方法无法使用的bug。<issue id="1054"></issue> <mention id="lcx960324"></mention></li>
-                        <li>修复 Badge 判断类型错误导致渲染错误的bug。<issue id="646"></issue></li>
-                        <li>新增法语。<mention id="LekisS"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.15" h2></Anchor>
-                    <p>
-                        <code>2017-05-31</code>
-                    </p>
-                    <ul>
-                        <li>Table 新增可展开功能。</li>
-                        <li>Message 支持可关闭，并调整参数。<router-link to="/components/message">查看</router-link></li>
-                        <li>Input 增加 type 为 textarea 时的 autofocus。<issue id="1017"></issue></li>
-                        <li>修复 Table 新 render 方法重复渲染组件的bug。<issue id="1011"></issue></li>
-                        <li>修复 Select 在 remote 模式下，绑定初始值但没有设置 label 时报错的问题。<issue id="978"></issue></li>
-                        <li>修复 BackTop 不支持 IE、Firefox 浏览器的bug。<issue id="995"></issue></li>
-                        <li>调整配色。</li>
-                        <li>新增俄语。<mention id="explosivebit"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.14" h2></Anchor>
-                    <p>
-                        <code>2017-05-22</code>
-                    </p>
-                    <ul>
-                        <li>修复 Table 重复调用 render 函数的问题。</li>
-                        <li>Select 新增 prop: label，用于 remote 模式。</li>
-                        <li>修复 Select 在单选 remote 模式下，选中显示为 value 而不是 label 的bug。<issue id="915"></issue></li>
-                        <li>修复 Select 在 remote 模式下，设置初始值不生效的bug。<issue id="952"></issue></li>
-                        <li>优化 Select 在搜索模式下，手动赋值后，第一次展开显示为全部候选项。<issue id="957"></issue></li>
-                        <li>修复 Cascader 在搜索模式下，搜索结果过多时内容溢出的bug。</li>
-                        <li>优化 Cascader 在动态加载选项时，调用 loadData 的时机。<issue id="941"></issue></li>
-                        <li>修复 Form 在只有一个 Input 元素时，回车触发 submit 事件的问题。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.13" h2>
-                        <span class="doc-update-important">重要更新</span>
-                    </Anchor>
+                    <Anchor title="1.0.0" h2></Anchor>
                     <p>
-                        <code>2017-05-12</code>
-                    </p>
-                    <ul>
-                        <li>Table 单元格渲染支持 Render 函数<span style="color: #f50">（目前兼容旧用法，但未来将废弃）</span>。</li>
-                        <li>Select 支持远程搜索。</li>
-                        <li>Cascader 支持异步加载选项。</li>
-                        <li>Cascader 支持搜索。</li>
-                        <li>Input 新增 focus 方法。<mention id="yinheli"></mention></li>
-                        <li>修复 Cascader 在 change-on-select 模式下，初始设置的数组长度为1时视图没有渲染的bug。<issue id="810"></issue></li>
-                        <li>修复 DatePicker 在 daterange 模式下，月模板的年份切换错误的bug。<issue id="845"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.12" h2></Anchor>
-                    <p>
-                        <code>2017-04-28</code>
-                    </p>
-                    <ul>
-                        <li>Table 单元格支持渲染局部注册的组件。<issue id="775"></issue></li>
-                        <li>Tree 新增事件 on-toggle-expand。<mention id="lcx960324"></mention></li>
-                        <li>Page 和 Select 新增 prop: placement，可设置展开方向。</li>
-                        <li>修复 Dropdown 有时点击报错的问题。<issue id="721"></issue></li>
-                        <li>修复 Modal 标题默认为空，更新后不显示的bug。<issue id="504"></issue> <mention id="hezhiying"></mention></li>
-                        <li>修复 FormItem 数据为数组时，第一次 reset 出错的问题。<issue id="768"></issue></li>
-                        <li>修复 Tree 从外部改变数据时，视图没有正确更新的bug。<issue id="787"></issue></li>
-                        <li>修复 CheckboxGroup 动态更新 Checkbox 时，没有选中已选值的bug。<issue id="778"></issue></li>
-                        <li>修复 RadioGroup 动态更新 Radio 时，没有选中已选值的bug。</li>
-                        <li>修复 Select 在单选可搜索模式下，手动设置 Option 时，第一次展开选项显示不全的bug。<issue id="805"></issue></li>
-                        <li>调整 Page 的 on-page-size-change 事件触发时机。<issue id="759"></issue></li>
-                        <li>新增日语。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.11" h2></Anchor>
-                    <p>
-                        <code>2017-04-22</code>
-                    </p>
-                    <ul>
-                        <li>修复 Cascader 在 disabled 模式下扔能使用 clearable 功能的bug。<issue id="635"></issue></li>
-                        <li>修复 Message 的 destroy 方法无法使用的bug。<mention id="lcx960324"></mention></li>
-                        <li>修复 BreadcrumbItem 动态添加时，无法显示分隔符的bug。<mention id="Becavalier"></mention></li>
-                        <li>修复 Menu 的 active-name 为 0 时无法正确匹配的bug。</li>
-                        <li>修复 Slider 在 range 模式下，主动设置 value 时显示错误的bug。<issue id="724"></issue></li>
-                        <li>修复 Select 在单选可搜索模式下，数字 0 默认不会被选中的问题。<issue id="718"></issue></li>
-                        <li>修复 Select 在单选可搜索模式下，第一次展开选项显示不全的bug。<issue id="712"></issue></li>
-                        <li>Table 新增远程过滤。<mention id="hezhiying"></mention> <issue id="714"></issue></li>
-                        <li>Step 新增 slot。<mention id="purocean"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.10" h2></Anchor>
-                    <p>
-                        <code>2017-04-10</code>
-                    </p>
-                    <ul>
-                        <li>Modal 的 DOM 移动到了 body。<issue id="583"></issue> <issue id="380"></issue></li>
-                        <li>Select 新增 <code>on-query-change</code> 事件。</li>
-                        <li>Cascader 新增 <code>on-visible-change</code> 事件。<issue id="593"></issue></li>
-                        <li>修复 Date 在 Table 内使用时，样式错误的问题。<issue id="577"></issue></li>
-                        <li>修复 Table 的 slot 无法使用的bug。<issue id="549"></issue></li>
-                        <li>修复 Table 在 Modal 和 Tabs 内使用时，宽度计算不正确的bug。<issue id="591"></issue></li>
-                        <li>修复 Tree 组件没有正确引入 Icon 组件的bug。<issue id="612"></issue></li>
-                        <li>优化 Slider 在靠近边缘时，卡顿的问题。<issue id="461"></issue></li>
-                        <li>优化 Select 在搜索模式下的交互体验。<issue id="566"></issue></li>
-                        <li>新增西班牙语。<mention id="MatiasVerdier"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.9" h2></Anchor>
-                    <p>
-                        <code>2017-04-01</code>
-                    </p>
-                    <ul>
-                        <li>Table 单元格的 render 方法，支持 <code v-pre>{{ row }}</code>、<code v-pre>{{ column }}</code> 用法。<issue id="438"></issue></li>
-                        <li>Select 支持 IE。</li>
-                        <li>BreadcrumbItem 新增 prop <code>replace</code> ，并支持 vue-router 的 push 和 replae 两种跳转。</li>
-                        <li>Modal 新增 prop <code>transition-names</code>，支持自定义动画。<issue id="505"></issue></li>
-                        <li>优化 DatePicker 在某些时候无法关闭弹窗的问题。</li>
-                        <li>修复部分组件结合 vue-i18n 使用时，无法翻译的bug。</li>
-                        <li>修复动态使用 Col 时，gutter 无法更新的bug。<issue id="540"></issue></li>
-                        <li>修复 Cascader 修改 <code>data</code> 后，不能更新选中项的bug。<issue id="553"></issue></li>
-                        <li>修复 Transfer 修改 <code>data</code> 后，不能更新内容的bug。<issue id="555"></issue></li>
-                        <li>Input 组件：</li>
-                        <ul>
-                            <li>修复使用 slot 时，icon 不显示的bug。<issue id="554"></issue></li>
-                            <li>优化默认情况下有右间距的问题。</li>
-                            <li>优化使用 slot 时，不是圆角的问题。<issue id="397"></issue></li>
-                        </ul>
-                        <li>新增土耳其语。<mention id="ndrshn"></mention></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.8" h2></Anchor>
-                    <p>
-                        <code>2017-03-29</code>
-                    </p>
-                    <ul>
-                        <li>修复 <code>Form</code> 无法对 <code>Cascader</code> 组件及时验证的bug。<issue id="525"></issue></li>
-                        <li>修复 <code>Select</code> 在单选可搜索模式下，从外部清空数据时，视图没有更新的bug。<issue id="518"></issue></li>
-                        <li>优化 <code>Date</code> 类型组件，点击小图标也可以显示选择器。<issue id="528"></issue></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.7" h2></Anchor>
-                    <p>
-                        <code>2017-03-27</code>
-                    </p>
-                    <ul>
-                        <li>重构 <code>Tree</code> 组件。<issue id="468"></issue></li>
-                        <li>修复 <code>Cascader</code> 数据置为空时，视图并没有更新的bug。<issue id="488"></issue></li>
-                        <li>修复 <code>Form</code> 无法对 <code>Date</code> 类型的组件及时验证的bug。<issue id="494"></issue></li>
-                        <li>优化 <code>Radio</code> 组合使用时，无法识别 label 为 0 的情况。<issue id="425"></issue></li>
-                        <li><code>Tabs</code> 新增附加内容 slot <code>extra</code>。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.6" h2></Anchor>
-                    <p>
-                        <code>2017-03-22</code>
-                    </p>
-                    <ul>
-                        <li>Table 的上下文 prop：content 更名为 <code>context</code>。</li>
-                        <li>修复 Table 在生产环境时，自定义单元格渲染上下文失效的bug。<issue id="454"></issue></li>
-                        <li>iCol 增加名称 <code>Col</code>。</li>
-                        <li>iForm 增加名称 <code>Form</code>。</li>
-                        <li>修复 Input 使用 number 模式时，不能正确返回数字类型的bug。</li>
-                        <li>Card 增加内部间距 prop：padding。<mention id="muei"></mention></li>
-                        <li>Tag 增加 prop：name。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.5" h2></Anchor>
-                    <p>
-                        <code>2017-03-15</code>
-                    </p>
-                    <ul>
-                        <li>Table 的 自定义单元格支持 data、methods。</li>
-                        <li>修复 Table 内通过点击操作删除一行数据时，报错的问题。</li>
-                        <li>Button 增加自定义事件 @click，可以不用通过 @click.native 来使用了。</li>
-                        <li>修复 Modal 不能自定义 header 的 bug。<issue id="407" /></li>
-                        <li>优化 RadioGroup、CheckboxGroup、Menu，可以与其它组件进行嵌套使用。</li>
-                        <li>修复 Transfer 在没有使用 slot 时报错的 bug。</li>
-                        <li>优化 Form 在验证带有搜索功能的 Transfer 组件时，搜索框样式显示错误的问题。</li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item>
-                    <Anchor title="2.0.0-rc.4" h2></Anchor>
-                    <p>
-                        <code>2017-03-14</code>
+                        <code>2018-06-01</code>
                     </p>
                     <ul>
-                        <li>修复警告。</li>
-                        <li>修复 Table 筛选下拉菜单不关闭的 bug。</li>
-                        <li>修复含有 Input 的组件在 Form 内使用时，on-form-change 事件触发错误的逻辑。</li>
-                        <li>优化 Select 广播事件重复的问题。</li>
+                        <li>完成 30 个组件。</li>
                     </ul>
                 </Timeline-item>
                 <Timeline-item>
-                    <Anchor title="2.0.0-rc.3" h2></Anchor>
-                    <p>
-                        <code>2017-03-13</code>
-                    </p>
-                    <ul>
-                        <li>修复部分组件在非 template 内书写时不被识别的问题。部分组件新增别名，并兼任1.0版别名。
-                            详见 <a href="https://github.com/iview/iview/blob/2.0/src/index.js#L49" target="_blank">https://github.com/iview/iview/blob/2.0/src/index.js#L49</a></li>
-                    </ul>
-                </Timeline-item>
-                <Timeline-item color="green">
-                    <Icon type="trophy" size="18" slot="dot"></Icon>
-                    <Anchor title="2.0.0-rc.2" h2></Anchor>
+                    <Anchor title="0.0.1" h2></Anchor>
                     <p>
-                        <code>2017-03-10</code>
+                        <code>2018-05-15</code>
                     </p>
                     <ul>
-                        <li>Button 支持组件名 <code>Button</code>，兼容 <code>iButton</code>。</li>
-                        <li>Input 支持组件名 <code>Input</code>，兼容 <code>iInput</code>，支持 v-model。</li>
-                        <li>RadioGroup 支持 v-model。</li>
-                        <li>Radio value 改为了 label，使用 v-model，废弃 checked。</li>
-                        <li>Checkbox 支持 v-model。</li>
-                        <li>CheckboxGroup value 改为了 label，使用 v-model，废弃 checked。</li>
-                        <li>Switch 更名为 <code>iSwitch</code>，废弃checked， 改为了 value，使用 v-model。</li>
-                        <li>Badge class 改为了 className。</li>
-                        <li>InputNumber 使用 v-model。</li>
-                        <li>Progress 支持组件名 <code>iProgress</code>，兼容 <code>Progress</code>，新增 on-status-change 事件。</li>
-                        <li>Upload 父级不能通过 computed 获取 Upload 的 fileList 了。</li>
-                        <li>Collapse 废弃 activeKey，使用 v-model，key 更名为 name。</li>
-                        <li>Carousel 废弃 activeIndex，使用 v-model。</li>
-                        <li>Circle 更名为 <code>iCircle</code>。</li>
-                        <li>Tabs 废弃 activeKey，改用 value，使用 v-model，key 更名为 name。</li>
-                        <li>DropdownItem key 改为 name, Dropdown 的 visible 要使用 @on-visible-change 捕获，不再 sync</li>
-                        <li>Menu 支持组件名 <code>iMenu</code>，兼容 <code>Menu</code>，MenuItem 和 Submenu 的 key 改为了 name，Menu 的 activeKey 改为 activeName,openKeys 改为 openNames。</li>
-                        <li>Select 支持组件名 <code>Select</code>，兼容 <code>iSelect</code>，model 改为 value，支持 v-model。</li>
-                        <li>Page class 改为 className。</li>
-                        <li>DatePicker 使用 v-model。</li>
-                        <li>Modal visible 改为 value，使用 v-model，style 改为 styles。</li>
-                        <li>Table 支持组件名 <code>Table</code>，兼容 <code>iTable</code>。</li>
+                        <li>立项。</li>
                     </ul>
                 </Timeline-item>
-                <Timeline-item>
-                    <Button type="ghost" size="large" @click="handleBefore">查看 1.x 版本的日志</Button>
-                </Timeline-item>
             </Timeline>
         </article>
     </i-article>