diff --git a/packages/fes-template/fes.config.js b/packages/fes-template/fes.config.js
index 7dcb15ea..1b5a8507 100644
--- a/packages/fes-template/fes.config.js
+++ b/packages/fes-template/fes.config.js
@@ -1,7 +1,10 @@
 module.exports = {
-    mode: 'vertical', // 可选有vertical、horizontal，默认vertical
-    theme: 'blue', // 可选有blue、dark，默认blue
-    fesName: 'xx 运营平台', // 项目名称
+    // 可选有vertical、horizontal，默认vertical
+    mode: 'vertical',
+    // 可选有blue、dark，默认blue
+    theme: 'blue',
+    // 项目名称
+    fesName: 'Fes.js 运营平台',
     favicon: 'static/favicon.ico', // 图标
     // 环境变量配置, 默认使用local环境
     env: {
@@ -25,94 +28,54 @@ module.exports = {
     },
     // map
     map: {
-        status: [['1', '成功'], ['2', '失败']]
+        level: [['1', '青铜'], ['2', '白银'], ['3', '黄金'], ['4', '铂金']]
     },
     // 左侧菜单配置
     menu: [
         {
-            title: '$i18n.menu.interface',
-            path: '/api',
+            title: '列表页',
             subMenu: [
                 {
-                    title: 'Fes',
-                    path: '/api/fes'
-                },
-                {
-                    title: 'FesApp',
-                    path: '/api/fesApp'
-                },
-                {
-                    title: 'FesApi',
-                    path: '/api/fesApi'
-                },
-                {
-                    title: 'FesMenu',
-                    path: '/api/fesMenu'
-                },
-                {
-                    title: 'FesMap',
-                    path: '/api/fesMap'
-                },
-                {
-                    title: 'FesFesx',
-                    path: '/api/fesFesx'
-                },
-                {
-                    title: 'FesStorage',
-                    path: '/api/fesStorage'
-                },
-                {
-                    title: 'FesUtil',
-                    path: '/api/fesUtil'
+                    title: '查询列表',
+                    path: '/list'
                 }
             ]
         },
         {
-            title: '路由',
-            path: '/route'
+            title: '表单页',
+            subMenu: [
+                {
+                    title: '基础表单',
+                    path: '/form/base'
+                },
+                {
+                    title: '分步表单',
+                    path: '/form/step'
+                }
+            ]
         },
         {
-            icon: 'static/bell.png',
-            title: '列表页',
-            path: '/list'
-        },
-        {
-            title: '内容很多的编辑',
-            path: '/list/edit'
-        },
-        {
-            title: '显示头部',
-            path: '/header'
-        },
-        {
-            title: '静态资源',
-            path: '/static'
-        },
-        {
-            title: '子路由',
+            title: '功能演示',
             path: '/layout',
             subMenu: [
                 {
-                    title: '子路由A',
-                    path: '/layout/a'
+                    title: '$i18n.menu.internationalization',
+                    path: '/layout/i18n'
                 },
                 {
-                    title: '子路由B',
-                    path: '/layout/b'
+                    title: '静态资源',
+                    path: '/layout/static'
                 }
             ]
-        },
-        {
-            title: '国际化',
-            path: '/i18n'
         }
     ],
     i18n: {
-        locale: 'zh-cn', // default zh-cn
+        // default zh-cn
+        locale: 'zh-cn',
         messages: {
             'zh-cn': {
                 menu: {
-                    interface: '接口'
+                    internationalization: '国际化'
                 },
                 overview: '概述',
                 i18n: {
@@ -120,11 +83,11 @@ module.exports = {
                     achieve: '实现。',
                     ui: 'UI组件'
                 },
-                title: '标题'
+                title: 'Fes.js 运营平台'
             },
             en: {
                 menu: {
-                    interface: 'interface'
+                    internationalization: 'internationalization'
                 },
                 overview: 'Overview',
                 i18n: {
@@ -132,7 +95,7 @@ module.exports = {
                     achieve: 'to achieve.',
                     ui: 'UI components'
                 },
-                title: 'title'
+                title: 'Fes.js Admin'
             }
         }
     }
diff --git a/packages/fes-template/src/assets/images/logo.png b/packages/fes-template/src/assets/images/logo.png
index 217f6597..d8b32345 100644
Binary files a/packages/fes-template/src/assets/images/logo.png and b/packages/fes-template/src/assets/images/logo.png differ
diff --git a/packages/fes-template/src/assets/styles/main.scss b/packages/fes-template/src/assets/styles/main.scss
index 76e41f96..bc4b9434 100644
--- a/packages/fes-template/src/assets/styles/main.scss
+++ b/packages/fes-template/src/assets/styles/main.scss
@@ -28,12 +28,12 @@
   ul {
     padding-left: 40px;
   }
-
   li {
     list-style-type: disc;
     margin-bottom: 5px;
     font-size: 14px;
   }
+
   table{
     border-collapse: collapse;
     border-spacing: 0;
@@ -47,4 +47,44 @@
     padding: 8px 16px;
     text-align: left;
   }
-}
\ No newline at end of file
+}
+
+.ml-8{
+    margin-left: 8px;
+}
+
+.ml-16{
+    margin-left: 16px;
+}
+
+// 修复问题
+.ui-modal .ui-modal-dialog{
+    overflow: visible;
+}
+
+.page {
+    display: flex;
+    flex-direction: column;
+    background: #f0f2f5;
+    min-height: 100%;
+    .page-header{
+        padding: 16px 32px 0;
+        background: #fff;
+        border-bottom: $border-color-split ;
+        .page-header-title{
+            color: $title-color;
+            font-weight: 500;
+            font-size: 16px;
+            margin-bottom: 16px;
+        }
+        .page-header-desc{
+            margin-bottom: 16px;
+        }
+    }
+    .page-body{
+        flex: auto;
+        min-height: 0;
+        margin: 24px 24px;
+        background: #fff;
+    }
+}
diff --git a/packages/fes-template/src/pages/api/fes/index.vue b/packages/fes-template/src/pages/api/fes/index.vue
deleted file mode 100644
index f67abf2c..00000000
--- a/packages/fes-template/src/pages/api/fes/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>对Vue做了一层封装。给Vue添加了一些属性，方便使用。</p>
-
-        <h2>属性</h2>
-        <ul>
-            <li><router-link to="/api/fesApp">this.FesApp App实例</router-link></li>
-            <li><router-link to="/api/fesUtil">this.FesUtil 工具函数</router-link></li>
-            <li><router-link to="/api/fesStorage">this.FesStorage 操作存储: cookie、sessionStorage、localStorage</router-link></li>
-            <li><router-link to="/api/fesApi">this.FesApi 操作Ajax</router-link></li>
-        </ul>
-
-        <h2>响应式数据FesData</h2>
-        <ul>
-            <li>
-                <p>双向绑定的值，类似绑定到ng里面scope的值</p>
-                <p>
-                    <input v-model="data1">  {{data1}}
-                </p>
-            </li>
-            <li>
-                <p><router-link to="/api/fesMap"><strong>数据字典FesMap</strong></router-link></p>
-                <p>FesMap会自动挂载到FesData</p>
-                <p>FesMap: {{FesMap}}</p>
-            </li>
-            <li>
-                <p><router-link to="/api/fesFesx"><strong>全局状态FesFesx</strong></router-link></p>
-                <p>FesFesx会自动挂载到FesData </p>
-                <p>FesFesx: {{FesFesx}}</p>
-            </li>
-        </ul>
-
-
-        <h2>异步响应数据FesSyncData</h2>
-        <p>进入路由时根据接口查询到的值，并且设置成响应数据</p>
-        <p>
-            <input v-model="data2">
-        </p>
-        <p>
-            data2: {{data2}}
-        </p>
-
-
-        <h2>过滤器</h2>
-        <p>日期: {{date}} => {{date | date}}</p>
-        <p>日期（带参数）: {{date}} => {{date | date('yyyy-MM-dd')}}</p>
-        <p>金钱: {{money}} => {{money | money}}</p>
-        <p>银行卡: {{card}} => {{card | card}}</p>
-        <p>加密: {{safety}} => {{safety | safety(4,3)}}</p>
-        <p>数据字典: {{map}} => {{map | map(FesMap.status)}}</p>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-    FesData: {
-        data1: '1',
-        money: 100000,
-        card: '11122233242323',
-        safety: '42222991018719191',
-        map: '1',
-        date: new Date().getTime()
-    },
-    FesSyncData: {
-        data2: ['/getNumber', {
-            max: 100,
-            min: 1
-        }]
-    },
-    FesReady() {
-        // do something
-    }
-};
-</script>
diff --git a/packages/fes-template/src/pages/api/fesApi/index.vue b/packages/fes-template/src/pages/api/fesApi/index.vue
deleted file mode 100644
index 250925bd..00000000
--- a/packages/fes-template/src/pages/api/fesApi/index.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>对vue-resource的封装。公共的异常处理，响应处理等。</p>
-
-        <h2>函数</h2>
-        <ul>
-            <li>
-                <p>get(url, data, option)</p>
-                <p>
-                    发起一个get请求，返回值是promise对象
-                </p>
-            </li>
-            <li>
-                <p>post(url, data, option)</p>
-                <p>
-                    发起一个post请求，返回值是promise对象
-                </p>
-            </li>
-            <li>
-                <p>fetch(url, data, option)</p>
-                <p>
-                    默认调用post请求，返回值是promise对象
-                </p>
-            </li>
-            <li>
-                <p>option(option)</p>
-                <p>
-                    设置ajax的公共配置，比如root（根路径）、timeout（超时时间）、xhr（xhr对象）
-                </p>
-            </li>
-            <li>
-                <p>setError(errors)</p>
-                <p>
-                    设置当响应状态是非200时触发的事件钩子，比如401啊等
-                </p>
-            </li>
-            <li>
-                <p>setResponse(constructionOfResponse)</p>
-                <p>
-                    设置响应结构。响应一般会由状态码、错误消息、数据组成。通过此函数设置一个路径，当响应回来是来解析响应。
-                </p>
-            </li>
-        </ul>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-};
-</script>
diff --git a/packages/fes-template/src/pages/api/fesApp/index.vue b/packages/fes-template/src/pages/api/fesApp/index.vue
deleted file mode 100644
index f3c5ef9d..00000000
--- a/packages/fes-template/src/pages/api/fesApp/index.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>一个App表示一个应用。管理一些应用级别的状态。</p>
-
-        <h2>属性</h2>
-        <ul>
-            <li>
-                <router-link to="/api/fesApi">
-                    <p>this.FesApi</p>
-                    <p>操作ajax的对象</p>
-                </router-link>
-            </li>
-            <li>
-                <router-link to="/api/fesMap">
-                    <p>this.FesMap</p>
-                    <p>数据字典，保存数据字典的容器，提供查找函数</p>
-                </router-link>
-            </li>
-            <li>
-                <router-link to="/api/fesUtil">
-                    <p>this.FesUtil</p>
-                    <p>工具函数，操作dom、对象等</p>
-                </router-link>
-            </li>
-            <li>
-                <router-link to="/api/fesFesx">
-                    <p>this.FesFesx</p>
-                    <p>存储全局状态的容器</p>
-                </router-link>
-            </li>
-            <li>
-                <router-link to="/api/fesStorage">
-                    <p>this.FesStorage</p>
-                    <p>操作存储: cookie、sessionStorage、localStorage</p>
-                </router-link>
-            </li>
-            <li>
-                <p>this.router</p>
-                <p>当前路由对象，具体api查询vue-router v0.7</p>
-            </li>
-        </ul>
-
-        <h2>函数</h2>
-        <ul>
-            <li>
-                <p>init</p>
-                <p>
-                    初始化整个应用，我们只需要在app.js写入自定义的初始化内容，比如设置菜单、项目名等
-                </p>
-            </li>
-            <li>
-                <p>get(prop)</p>
-                <p>
-                    根据prop获取在App保存的应用层面的状态值
-                </p>
-            </li>
-            <li>
-                <p>set(prop, value)</p>
-                <p>
-                    设置应用层面的状态，包括FesName、FesMenu、FesUserName、FesRoleName、FesLogout
-                </p>
-            </li>
-            <li>
-                <p>setRole(role)</p>
-                <p>
-                    我们需要在common/rolesConfig.js中配置角色所属的菜单权限，可以把未登录状态也当作一种角色。根据当前登录状态或者用户设置不同的角色。菜单也会根据角色展示。
-                </p>
-            </li>
-            <li>
-                <p>getAllowPage()</p>
-                <p>
-                    返回当前能访问的页面
-                </p>
-            </li>
-            <li>
-                <p>setBeforeRouter(beforeRouter)</p>
-                <p>
-                    设置路由切换之前的事件钩子，可以根据条件判断是否阻止切换
-                </p>
-            </li>
-            <li>
-                <p>setAfterRouter(afterRouter)</p>
-                <p>
-                    路由切换之后的事件钩子
-                </p>
-            </li>
-        </ul>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-};
-</script>
diff --git a/packages/fes-template/src/pages/api/fesFesx/index.vue b/packages/fes-template/src/pages/api/fesFesx/index.vue
deleted file mode 100644
index c1dc2d4a..00000000
--- a/packages/fes-template/src/pages/api/fesFesx/index.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>全局的状态管理容器</p>
-
-        <h2>函数</h2>
-        <ul>
-            <li>
-                <p>get(prop)</p>
-                <p>
-                    根据prop获取值
-                </p>
-            </li>
-            <li>
-                <p>set(prop, value)</p>
-                <p>
-                    设置一个全局的状态
-                </p>
-            </li>
-        </ul>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-};
-</script>
diff --git a/packages/fes-template/src/pages/api/fesMap/index.vue b/packages/fes-template/src/pages/api/fesMap/index.vue
deleted file mode 100644
index bf0f8cca..00000000
--- a/packages/fes-template/src/pages/api/fesMap/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>数据字典管理对象。当程序加载时，从common/map.js中读取原始数据，转换成{value: value, text: text}，存入FesMap</p>
-
-        <h2>函数</h2>
-        <ul>
-            <li>
-                <p>getNameByValue(name, value)</p>
-                <p>
-                    从FesMap[name]中找出值是value的那一条数据
-                </p>
-            </li>
-        </ul>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-};
-</script>
diff --git a/packages/fes-template/src/pages/api/fesMenu/index.vue b/packages/fes-template/src/pages/api/fesMenu/index.vue
deleted file mode 100644
index aaffb93e..00000000
--- a/packages/fes-template/src/pages/api/fesMenu/index.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>
-            配置公共左侧菜单
-            <br> 在调用FesApp.setRole(...)之后，FesMenu只显示当前用户可以访问的菜单
-        </p>
-        <h2>API</h2>
-        <p>
-            <table>
-                <thead>
-                    <tr>
-                        <th style="text-align:left">
-                            属性
-                        </th>
-                        <th style="text-align:left">
-                            说明
-                        </th>
-                        <th style="text-align:left">
-                            类型
-                        </th>
-                        <th style="text-align:left">
-                            默认值
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td style="text-align:left">
-                            title
-                        </td>
-                        <td style="text-align:left">
-                            菜单标题
-                        </td>
-                        <td style="text-align:left">
-                            String
-                        </td>
-                        <td style="text-align:left">
-                            空
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="text-align:left">
-                            path
-                        </td>
-                        <td style="text-align:left">
-                            菜单项点击后，跳转路径
-                        </td>
-                        <td style="text-align:left">
-                            String
-                        </td>
-                        <td style="text-align:left">
-                            空
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="text-align:left">
-                            subMenu
-                        </td>
-                        <td style="text-align:left">
-                            子菜单，每项也有path和title
-                        </td>
-                        <td style="text-align:left">
-                            Array
-                        </td>
-                        <td style="text-align:left">
-                            空
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </p>
-        <h2>示例</h2>
-        <pre>
-    //在app.js文件中设置菜单
-    this.set("FesMenu", [{
-            title: "接口",
-            path: '/api',
-            subMenu: [{
-                title: "Fes",
-                path: '/api/fes',
-            },{
-                title: "FesApp",
-                path: '/api/fesApp',
-            },{
-                title: "FesApi",
-                path: '/api/fesApi',
-            },{
-                title: "FesMenu",
-                path: '/api/fesMenu',
-            },{
-                title: "FesMap",
-                path: '/api/fesMap',
-            },{
-                title: "FesFesx",
-                path: '/api/fesFesx',
-            },{
-                title: "FesStorage",
-                path: '/api/fesStorage',
-            },{
-                title: "FesUtil",
-                path: '/api/fesUtil',
-            }]
-        },{
-            title: "简单的列表页",
-            path: '/list'
-        },{
-            title: "自定义内容列表页",
-            path: '/list1'
-        },{
-            title: "内容很多的编辑",
-            path: '/list/edit'
-        }]
-    );
-        </pre>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-    FesData: {
-        data1: '1',
-        money: 100000,
-        card: '11122233242323',
-        safety: '42222991018719191',
-        map: '1',
-        date: new Date().getTime()
-    }
-};
-</script>
diff --git a/packages/fes-template/src/pages/api/fesStorage/index.vue b/packages/fes-template/src/pages/api/fesStorage/index.vue
deleted file mode 100644
index a5e469dd..00000000
--- a/packages/fes-template/src/pages/api/fesStorage/index.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>操作Storage，包含cookie、sessionStorage、localStorage。 category值SESSION对应sessionStorage，LOCAL对应localStorage，COOKIE对应cookie</p>
-
-        <h2>函数</h2>
-        <ul>
-            <li>
-                <p>set(key, value, category = SESSION, expired)</p>
-                <p>
-                    往Storage中存入一个值
-                </p>
-            </li>
-            <li>
-                <p>get(key, category = SESSION)</p>
-                <p>
-                    从Storage中取得值
-                </p>
-            </li>
-            <li>
-                <p>clear(category = SESSION)</p>
-                <p>
-                    清除所有值
-                </p>
-            </li>
-            <li>
-                <p>remove(key, category = SESSION)</p>
-                <p>
-                    删除key对应的值
-                </p>
-            </li>
-        </ul>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-};
-</script>
diff --git a/packages/fes-template/src/pages/api/fesUtil/index.vue b/packages/fes-template/src/pages/api/fesUtil/index.vue
deleted file mode 100644
index be19be80..00000000
--- a/packages/fes-template/src/pages/api/fesUtil/index.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>工具集合</p>
-
-        <h2>函数</h2>
-        <ul>
-            <li>getClass</li>
-            <li>hasClass</li>
-            <li>setClass</li>
-            <li>addClass</li>
-            <li>removeClass</li>
-            <li>contains</li>
-            <li>addEvent</li>
-            <li>triggerEvent</li>
-            <li>merge</li>
-            <li>extend</li>
-            <li>isPlainObject</li>
-            <li>isNumber</li>
-            <li>isDate</li>
-            <li>isFunction</li>
-            <li>isObject</li>
-            <li>isArray</li>
-            <li>isObjectLike</li>
-            <li>isString</li>
-            <li>isNull</li>
-        </ul>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-};
-</script>
diff --git a/packages/fes-template/src/pages/form/base.vue b/packages/fes-template/src/pages/form/base.vue
new file mode 100644
index 00000000..d7244794
--- /dev/null
+++ b/packages/fes-template/src/pages/form/base.vue
@@ -0,0 +1,136 @@
+<template>
+    <div class="page">
+        <div class="page-header">
+            <div class="page-header-title">
+                基础表单
+            </div>
+            <div class="page-header-desc">
+                表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
+            </div>
+        </div>
+        <div class="page-body">
+            <Row>
+                <Cell offset="5" span="12">
+                    <Wb-form ref="formValidate" :rule="ruleValidate" :label-width="150">
+                        <Form-item label="是否需要标题:" prop="hasTitle">
+                            <Radio-group v-model="form.hasTitle">
+                                <Radio value="1">
+                                    是
+                                </Radio>
+                                <Radio value="2">
+                                    否
+                                </Radio>
+                            </Radio-group>
+                        </Form-item>
+                        <Form-item label="标题:" prop="title">
+                            <wb-input v-model="form.title" placeholder="请输入标题"></wb-input>
+                        </Form-item>
+                        <Form-item label="城市:" prop="city">
+                            <wb-select v-model="form.city" placeholder="请选择城市">
+                                <wb-option :value="1">北京市</wb-option>
+                                <wb-option :value="2">上海市</wb-option>
+                                <wb-option :value="3">深圳市</wb-option>
+                                <wb-option :value="4">杭州市</wb-option>
+                                <wb-option :value="5">南京市</wb-option>
+                                <wb-option :value="6">重庆市</wb-option>
+                            </wb-select>
+                        </Form-item>
+                        <Form-item label="娱乐活动:" prop="active">
+                            <Checkbox-group v-model="form.active">
+                                <Checkbox value="1">
+                                    吃饭
+                                </Checkbox>
+                                <Checkbox value="2">
+                                    睡觉
+                                </Checkbox>
+                                <Checkbox value="3">
+                                    跑步
+                                </Checkbox>
+                            </Checkbox-group>
+                        </Form-item>
+                        <Form-item label="日期范围:" prop="date">
+                            <Wb-input-date-picker v-model="form.date" model="range" />
+                        </Form-item>
+                        <Form-item label="目标描述:" prop="desc">
+                            <wb-input v-model="form.desc" :autosize="true" type="textarea" placeholder="请输入目标描述"></wb-input>
+                        </Form-item>
+                        <Form-item :value="form.pics" label="图片上传" prop="pics">
+                            <Upload :accept="accpetType" :action="handleUpload">
+                            </Upload>
+                            <div class="img-list">
+                                <img v-for="(item, index) in form.pics" :key="index" :src="converToURL(item)" />
+                            </div>
+                        </Form-item>
+                        <Form-item>
+                            <Wb-button @click="click" type="primary">提交</Wb-button>
+                            <Wb-button @click="reset" type="ghost" class="ml-8">重置</Wb-button>
+                        </Form-item>
+                    </Wb-form>
+                </Cell>
+            </Row>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    FesData() {
+        const self = this;
+        return {
+            form: {
+                hasTitle: '',
+                title: '',
+                city: '',
+                active: [],
+                date: [],
+                desc: '',
+                pics: []
+            },
+            ruleValidate: {
+                hasTitle: [
+                    { required: true, message: '请选择是否需要标题' }
+                ],
+                title: [
+                    { required: self.form && self.form.hasTitle === '1', message: '请输入标题' }
+                ],
+                city: [
+                    { required: true, message: '请选择城市' }
+                ],
+                active: [
+                    {
+                        required: true, message: '请至少选择一个活动', type: 'array', min: 1
+                    }
+                ],
+                pics: [
+                    {
+                        required: true, message: '请至少上传一张图片', type: 'array', min: 1
+                    }
+                ]
+            },
+            accpetType: ['jpg', 'png']
+        };
+    },
+    methods: {
+        click() {
+            this.$refs.formValidate.validate((valid, errors) => {
+                if (valid) {
+                    console.log(this.form);
+                    // 调用接口
+                } else {
+                    console.log(errors);
+                }
+            });
+        },
+        reset() {
+            this.$refs.formValidate.resetFields();
+        },
+        handleUpload(valid, formData) {
+            if (valid) {
+                this.form.pics.push(formData.get('upFiles'));
+            }
+        },
+        converToURL(item) {
+            return URL.createObjectURL(item);
+        }
+    }
+};
+</script>
diff --git a/packages/fes-template/src/pages/form/step.vue b/packages/fes-template/src/pages/form/step.vue
new file mode 100644
index 00000000..fccc369f
--- /dev/null
+++ b/packages/fes-template/src/pages/form/step.vue
@@ -0,0 +1,139 @@
+<template>
+    <div class="page">
+        <div class="page-header">
+            <div class="page-header-title">分步表单</div>
+            <div class="page-header-desc">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</div>
+        </div>
+        <div class="page-body">
+            <Steps :current="current" class="step">
+                <Step title="填写转账信息"></Step>
+                <Step title="确认转账信息"></Step>
+                <Step title="完成"></Step>
+            </Steps>
+            <Wb-form v-show="current === 1" class="step-form">
+                <Form-item label="付款账户:">
+                    <wb-select v-model="form.payNo" placeholder="请选择付款账户">
+                        <wb-option value="fes@alipay.com">fes@alipay.com</wb-option>
+                        <wb-option value="fes@wepay.com">fes@wepay.com</wb-option>
+                    </wb-select>
+                </Form-item>
+                <Form-item label="收款账户:">
+                    <Wb-input v-model="form.accountNo" placeholder="请输入收款账户" />
+                </Form-item>
+                <Form-item label="收款人姓名:">
+                    <Wb-input v-model="form.name" placeholder="请输入收款人姓名" />
+                </Form-item>
+                <Form-item label="转账金额:">
+                    <Wb-input v-model="form.amount" placeholder="请输入转账金额">
+                    </Wb-input>
+                </Form-item>
+                <Form-item>
+                    <Wb-button @click="next" type="primary">提交</Wb-button>
+                </Form-item>
+            </Wb-form>
+            <Wb-form v-show="current === 2" class="step-form">
+                <Form-item label="付款账户:">
+                    <span class="text">{{form.payNo}}</span>
+                </Form-item>
+                <Form-item label="收款账户:">
+                    <span class="text">{{form.accountNo | card}}</span>
+                </Form-item>
+                <Form-item label="收款人姓名:">
+                    <span class="text">{{form.name}}</span>
+                </Form-item>
+                <Form-item label="转账金额:">
+                    <span class="text big">{{form.amount}}</span>
+                </Form-item>
+                <Form-item label="支付密码:" class="line">
+                    <Wb-input v-model="form.password" type="password" placeholder="请输入支付密码" />
+                </Form-item>
+                <Form-item>
+                    <Wb-button @click="next" type="primary">提交</Wb-button>
+                    <Wb-button @click="last" class="ml-16" type="primary">上一步</Wb-button>
+                </Form-item>
+            </Wb-form>
+            <div v-show="current === 3" class="step-form">
+                <div class="result-icon">
+                    <Process-circle :percent="100" stroke-color="#00cc66" stroke-type="round">
+                        <Icon type="md-checkmark" size="50" color="#00cc66"></Icon>
+                    </Process-circle>
+                </div>
+                <div class="result-title">操作成功</div>
+                <div class="result-subtitle">预计两小时内到账</div>
+                <div class="result-extra">
+                    <Wb-button @click="reset" type="primary">再转一笔</Wb-button>
+                    <Wb-button class="ml-16">查看账单</Wb-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    FesData() {
+        return {
+            current: 1,
+            form: {
+                payNo: 'fes@wepay.com',
+                accountNo: '622000011876188',
+                name: 'Hali',
+                amount: 500,
+                password: '11212'
+            }
+        };
+    },
+    methods: {
+        next() {
+            this.current += 1;
+        },
+        last() {
+            this.current -= 1;
+        },
+        reset() {
+            this.current = 1;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/variables";
+.step {
+  margin: 40px auto 0;
+  width: 800px;
+  transform: translateX(12%);
+}
+.step-form {
+  margin: 20px auto;
+  width: 500px;
+  .text {
+    line-height: 32px;
+    &.big {
+      font-size: 16px;
+    }
+  }
+  .line {
+    padding-top: 30px;
+    border-top: 1px solid $border-color-split;
+  }
+  .result-icon {
+    text-align: center;
+    margin-bottom: 24px;
+  }
+  .result-title {
+    color: $title-color;
+    font-size: $font-size-lg;
+    line-height: 1.8;
+    text-align: center;
+  }
+  .result-subtitle {
+    color: $sub-text-color;
+    font-size: $font-size-small;
+    line-height: 1.6;
+    text-align: center;
+  }
+  .result-extra{
+    margin: 24px 0 0 0;
+    text-align: center;
+  }
+}
+</style>
diff --git a/packages/fes-template/src/pages/header/index.vue b/packages/fes-template/src/pages/header/index.vue
deleted file mode 100644
index 98e5cdfe..00000000
--- a/packages/fes-template/src/pages/header/index.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <div>
-        <Fes-search-panel>
-            <Wb-form :label-width="150" type="query">
-                <Form-item label="姓名：">
-                    <wb-input placeholder="请输入" />
-                </Form-item>
-                <Form-item label="身份证：">
-                    <wb-input placeholder="请输入" />
-                </Form-item>
-            </Wb-form>
-            <div slot="button">
-                <Wb-button @click="search" type="primary" icon="search">
-                    查询
-                </Wb-button>
-            </div>
-        </Fes-search-panel>
-        <Fes-list-panel>
-            <Wb-table :data="data">
-                <Column prop="date" name="日期" />
-                <Column prop="name" name="姓名" />
-                <Column prop="age" name="年龄" />
-                <Column prop="adr" name="地址" />
-                <Column prop="status" name="等级" />
-            </Wb-table>
-            <Pagination :size="paginationOption.pageSize" :current="paginationOption.currentPage" :total="paginationOption.totalPage" @on-change="changePage" />
-        </Fes-list-panel>
-    </div>
-</template>
-<script>
-export default {
-    FesHeader: true,
-    FesData() {
-        return {
-            data: [{
-                name: '张晓刚',
-                age: 24,
-                date: new Date(2016, 9, 10),
-                adr: '北京市海淀区西二旗',
-                status: 1
-            }, {
-                name: '李晓红',
-                age: 26,
-                date: new Date(2016, 9, 11),
-                adr: '北京市海淀区西二旗',
-                status: 2
-            }, {
-                name: '隔壁老王',
-                age: 22,
-                date: new Date(2016, 9, 12),
-                adr: '北京市海淀区西二旗',
-                status: 3
-            }, {
-                name: '我爸是李刚',
-                age: 19,
-                date: new Date(2016, 9, 13),
-                adr: '北京市海淀区西二旗',
-                status: 4
-            }],
-            paginationOption: {
-                pageSize: 10,
-                currentPage: 1,
-                totalPage: 1
-            }
-        };
-    },
-    methods: {
-        search() {
-            // do something
-        },
-        changePage() {
-            // do something
-        }
-    }
-};
-
-</script>
diff --git a/packages/fes-template/src/pages/home/index.vue b/packages/fes-template/src/pages/home/index.vue
index 4d6305e2..d8f4cd1d 100644
--- a/packages/fes-template/src/pages/home/index.vue
+++ b/packages/fes-template/src/pages/home/index.vue
@@ -3,7 +3,7 @@
         <div class="login-panel-swap">
             <div class="logo">
                 <span class="logo-text">
-                    xx运营平台
+                    Fes.js 运营平台
                 </span>
             </div>
             <div class="split" />
@@ -66,7 +66,6 @@ export default {
             this.$refs.username.focus();
         });
         this.initStyle();
-
         if (this.FesStorage.get('userLogin') === true) {
             this.getRole();
         }
@@ -74,20 +73,15 @@ export default {
     methods: {
         login() {
             if (this.validate()) {
-                // this.FesApi.fetch('login').then(() => {
-                    // 设置用户、角色等
+                // 设置用户、角色等
                 this.FesApp.set('FesUserName', 'harrywan');
                 this.FesApp.set('FesRoleName', '管理员');
                 this.FesStorage.set('userLogin', true);
                 this.getRole();
-                // });
             }
         },
         getRole() {
-            // this.FesApi.fetch('getRoleName').then((res) => {
-                // 默认跳入rolesConfig的第一项
-            this.FesApp.setRole("admin");
-            // });
+            this.FesApp.setRole('admin');
         },
         input() {
             this.error = '';
diff --git a/packages/fes-template/src/pages/layout/a.vue b/packages/fes-template/src/pages/layout/a.vue
deleted file mode 100644
index 76f339b3..00000000
--- a/packages/fes-template/src/pages/layout/a.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <div class="article">
-        A子页面
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-    FesReady() {
-        // do something
-    }
-};
-</script>
diff --git a/packages/fes-template/src/pages/layout/b.vue b/packages/fes-template/src/pages/layout/b.vue
deleted file mode 100644
index 8a6a578c..00000000
--- a/packages/fes-template/src/pages/layout/b.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <div class="article">
-        B子页面
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-    FesReady() {
-        // do something
-    }
-};
-</script>
diff --git a/packages/fes-template/src/pages/i18n/index.vue b/packages/fes-template/src/pages/layout/i18n.vue
similarity index 100%
rename from packages/fes-template/src/pages/i18n/index.vue
rename to packages/fes-template/src/pages/layout/i18n.vue
diff --git a/packages/fes-template/src/pages/layout/layout.vue b/packages/fes-template/src/pages/layout/layout.vue
index 32df58ad..2db9cc9a 100644
--- a/packages/fes-template/src/pages/layout/layout.vue
+++ b/packages/fes-template/src/pages/layout/layout.vue
@@ -1,13 +1,14 @@
 <template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>
-            根路由下所有page共用的外层
-        </p>
-        <router-view />
+    <div class="page">
+        <div class="page-header">
+            <div class="page-header-title">公共路由</div>
+        </div>
+        <div class="page-body">
+            <router-view />
+        </div>
     </div>
 </template>
-<script type="text/ecmascript-6">
+<script>
 export default {
     FesReady() {
         // do something
diff --git a/packages/fes-template/src/pages/static/index.vue b/packages/fes-template/src/pages/layout/static.vue
similarity index 100%
rename from packages/fes-template/src/pages/static/index.vue
rename to packages/fes-template/src/pages/layout/static.vue
diff --git a/packages/fes-template/src/pages/list/edit/index.vue b/packages/fes-template/src/pages/list/edit/index.vue
deleted file mode 100644
index 64e8c23b..00000000
--- a/packages/fes-template/src/pages/list/edit/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-    <Panel title="新增XXXX">
-        <Icon slot="action" type="check" title="保存" size="20" />
-        <Icon slot="action" type="rollback" title="返回到列表页面" size="20" />
-        <Wb-form :label-width="150">
-            <Row>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-            </Row>
-            <Row>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-            </Row>
-            <Row>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-            </Row>
-            <Row>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-            </Row>
-            <Row>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-            </Row>
-            <Row>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-                <Cell span="12">
-                    <Form-item label="应用名称：">
-                        <wb-input placeholder="我是文本哦" />
-                    </Form-item>
-                </Cell>
-            </Row>
-        </Wb-form>
-    </Panel>
-</template>
-<script type="text/ecmascript-6">
-export default {
-    FesData() {
-        return {
-        };
-    },
-    methods: {}
-};
-</script>
diff --git a/packages/fes-template/src/pages/list/index.vue b/packages/fes-template/src/pages/list/index.vue
index 328f3c6a..9bd6a600 100644
--- a/packages/fes-template/src/pages/list/index.vue
+++ b/packages/fes-template/src/pages/list/index.vue
@@ -1,83 +1,160 @@
 <template>
-    <div>
-        <fes-search-panel>
-            <Wb-form :label-width="150" type="query">
-                <Form-item label="姓名：">
-                    <wb-input v-model="query.name" placeholder="请输入" />
+    <div class="page">
+        <div class="page-header">
+            <div class="page-header-title">查询列表</div>
+        </div>
+        <div class="page-body">
+            <fes-search-panel>
+                <Wb-form :label-width="150" type="query">
+                    <Form-item label="姓名：">
+                        <wb-input v-model="query.name" placeholder="请输入" />
+                    </Form-item>
+                    <Form-item label="身份证：">
+                        <wb-input v-model="query.id" placeholder="请输入" />
+                    </Form-item>
+                </Wb-form>
+                <div slot="button">
+                    <Wb-button @click="search" type="primary" icon="md-search">查询</Wb-button>
+                    <Wb-button @click="add" type="primary" icon="md-add">新增</Wb-button>
+                </div>
+            </fes-search-panel>
+            <fes-list-panel>
+                <Wb-table :data="data">
+                    <Column prop="date" name="日期" />
+                    <Column prop="name" name="姓名" />
+                    <Column prop="age" name="年龄" />
+                    <Column prop="adr" name="地址" />
+                    <Column :filter="FesMap.level" prop="status" name="等级" />
+                    <Column :action="action" name="配置" />
+                </Wb-table>
+                <Pagination
+                    :size="paginationOption.pageSize"
+                    :current="paginationOption.currentPage"
+                    :total="paginationOption.totalPage"
+                    @on-change="changePage"
+                />
+            </fes-list-panel>
+        </div>
+        <modal ref="createModal" title="新增用户">
+            <Wb-form ref="formValidate" :label-width="60">
+                <Form-item label="姓名：" prop="name">
+                    <wb-input placeholder="请输入用户名"></wb-input>
                 </Form-item>
-                <Form-item label="身份证：">
-                    <wb-input v-model="query.id" placeholder="请输入" />
+                <Form-item label="年龄：" prop="name">
+                    <wb-input type="number" placeholder="请输入用户名"></wb-input>
+                </Form-item>
+                <Form-item label="日期：" prop="name">
+                    <Wb-input-date-picker />
+                </Form-item>
+                <Form-item>
+                    <Wb-button ref="addButton" @click="handleAdd" type="primary">提交</Wb-button>
                 </Form-item>
             </Wb-form>
-            <div slot="button">
-                <Wb-button @click="search" type="primary" icon="search">
-                    查询
-                </Wb-button>
-            </div>
-        </fes-search-panel>
-        <fes-list-panel>
-            <Wb-table :data="data">
-                <Column prop="date" name="日期" />
-                <Column prop="name" name="姓名" />
-                <Column prop="age" name="年龄" />
-                <Column prop="adr" name="地址" />
-                <Column prop="status" name="等级" />
-            </Wb-table>
-            <Pagination :size="paginationOption.pageSize" :current="paginationOption.currentPage" :total="paginationOption.totalPage" @on-change="changePage" />
-        </fes-list-panel>
+        </modal>
+        <modal ref="editModal" title="编辑用户">
+            <Wb-form ref="formValidate" :label-width="60">
+                <Form-item label="姓名：" prop="name">
+                    <wb-input v-model="editObj.name" placeholder="请输入用户名"></wb-input>
+                </Form-item>
+                <Form-item label="年龄：" prop="name">
+                    <wb-input v-model="editObj.age" type="number" placeholder="请输入用户名"></wb-input>
+                </Form-item>
+                <Form-item label="日期：" prop="name">
+                    <Wb-input-date-picker v-model="editObj.date" />
+                </Form-item>
+                <Form-item>
+                    <Wb-button ref="editButton" @click="handleEdit" type="primary">提交</Wb-button>
+                </Form-item>
+            </Wb-form>
+        </modal>
     </div>
 </template>
-<script type="text/ecmascript-6">
+<script>
 export default {
-    FesDataCache: 'test',
     FesData() {
         return {
             query: {
                 name: '',
                 id: ''
             },
-            data: [{
-                name: '张晓刚',
-                age: 24,
-                date: new Date(2016, 9, 10),
-                adr: '北京市海淀区西二旗',
-                status: 1
-            }, {
-                name: '李晓红',
-                age: 26,
-                date: new Date(2016, 9, 11),
-                adr: '北京市海淀区西二旗',
-                status: 2
-            }, {
-                name: '隔壁老王',
-                age: 22,
-                date: new Date(2016, 9, 12),
-                adr: '北京市海淀区西二旗',
-                status: 3
-            }, {
-                name: '我爸是李刚',
-                age: 19,
-                date: new Date(2016, 9, 13),
-                adr: '北京市海淀区西二旗',
-                status: 4
-            }],
+            editObj: {
+                name: '',
+                age: '',
+                date: ''
+            },
+            data: [
+                {
+                    name: '张晓刚',
+                    age: 24,
+                    date: new Date(2016, 9, 10),
+                    adr: '北京市海淀区西二旗',
+                    status: 1
+                },
+                {
+                    name: '李晓红',
+                    age: 26,
+                    date: new Date(2016, 9, 11),
+                    adr: '北京市海淀区西二旗',
+                    status: 2
+                },
+                {
+                    name: '隔壁老王',
+                    age: 22,
+                    date: new Date(2016, 9, 12),
+                    adr: '北京市海淀区西二旗',
+                    status: 3
+                },
+                {
+                    name: '我爸是李刚',
+                    age: 19,
+                    date: new Date(2016, 9, 13),
+                    adr: '北京市海淀区西二旗',
+                    status: 4
+                }
+            ],
             paginationOption: {
                 pageSize: 10,
                 currentPage: 1,
                 totalPage: 2
-            }
+            },
+            action: [
+                {
+                    text: '修改',
+                    func(trData) {
+                        Object.assign(this.editObj, trData);
+                        this.$refs.editModal.show();
+                    }
+                },
+                {
+                    text: '删除',
+                    func(trData) {
+                        this.$Message.confirm('警告', `确认删除用户${trData.name}吗`).then((index) => {
+                            if (index === 0) {
+                                this.$Toast.success('删除用户成功！', { align: 'top' });
+                            }
+                        });
+                    }
+                }
+            ]
         };
     },
-    FesReady() {
-        console.log(this);
-    },
+    FesReady() {},
     methods: {
         changePage({ current, size }) {
             this.paginationOption.currentPage = current;
             this.paginationOption.pageSize = size;
         },
-        search() {
-            this.FesApp.router.push('/test');
+        search() {},
+        add() {
+            this.$refs.createModal.show();
+        },
+        handleAdd() {
+            this.$refs.createModal.close();
+            this.$Toast.success('创建用户成功！', { align: 'top' });
+        },
+        handleEdit() {
+            this.$refs.editModal.close();
+            this.$Toast.success('编辑用户成功！', { align: 'top' });
         }
     }
 };
diff --git a/packages/fes-template/src/pages/route.vue b/packages/fes-template/src/pages/route.vue
deleted file mode 100644
index d5286533..00000000
--- a/packages/fes-template/src/pages/route.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <div class="article">
-        <h2>{{$t('overview')}}</h2>
-        <p>
-            Fes的路由是根据src/pages目录自动生成的<br>
-        </p>
-        <h2>生成规则</h2>
-        <pre>
-   pages
-    ├── index.fes         # 根路由页面 路径 http://localhost:5000/index.html#!/
-    ├── a.fes             # 路径 /a
-    ├── b
-    │   ├── index.fes     # 路径 /b
-    │   ├── @id.fes       # 动态路由 /b/:id
-    │   └── c.fes         # 路径 /b/c(优先于/b/:id进行匹配)
-    └── layout.fes        # 根路由下所有page共用的外层
-        </pre>
-    </div>
-</template>
-<script type="text/ecmascript-6">
-export default {
-    FesData() {
-        return {
-            value: +new Date()
-        };
-    }
-};
-</script>