From fae99e87644441ca9228988a57b7440f8ce0f957 Mon Sep 17 00:00:00 2001
From: harrywan <harrywan@webank.com>
Date: Fri, 25 Sep 2020 11:07:24 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20template=E5=A2=9E=E5=8A=A0=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=E5=92=8C=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |   1 +
 packages/fes-template/fes.config.js           |  13 +-
 packages/fes-template/package.json            |   6 +-
 .../src/assets/images/favicon.png             | Bin 0 -> 1843 bytes
 .../fes-template/src/assets/styles/login.scss | 131 -----
 .../fes-template/src/assets/styles/main.scss  |  18 +-
 packages/fes-template/src/components/Card.vue |  54 +++
 .../fes-template/src/components/Chart.vue     |  81 ++++
 .../src/pages/dashboard/console.vue           | 449 ++++++++++++++++++
 .../fes-template/src/pages/home/index.vue     | 136 ------
 packages/fes-template/src/pages/index.vue     | 241 ++++++++++
 11 files changed, 857 insertions(+), 273 deletions(-)
 create mode 100644 packages/fes-template/src/assets/images/favicon.png
 delete mode 100644 packages/fes-template/src/assets/styles/login.scss
 create mode 100644 packages/fes-template/src/components/Card.vue
 create mode 100644 packages/fes-template/src/components/Chart.vue
 create mode 100644 packages/fes-template/src/pages/dashboard/console.vue
 delete mode 100644 packages/fes-template/src/pages/home/index.vue
 create mode 100644 packages/fes-template/src/pages/index.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index be2a2b04..3d1b282e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
     rules: {
         'no-plusplus': 'off',
         'no-bitwise': 'off',
+        'no-console': 'off',
         'vue/comment-directive': 'off',
         'no-param-reassign': 'off',
         'func-names': 'off',
diff --git a/packages/fes-template/fes.config.js b/packages/fes-template/fes.config.js
index 69257038..3d3b2a53 100644
--- a/packages/fes-template/fes.config.js
+++ b/packages/fes-template/fes.config.js
@@ -24,8 +24,8 @@ module.exports = {
     },
     // 配置角色-路由访问权限，使用FesApp.setRole('unLogin')来修改当前用户的角色，控制路由访问权限
     roles: {
-        unLogin: ['/home'],
-        admin: ['/list', '*']
+        unLogin: ['/'],
+        admin: ['/dashboard/console', '*']
     },
     // map
     map: {
@@ -33,6 +33,15 @@ module.exports = {
     },
     // 左侧菜单配置
     menu: [
+        {
+            title: '工作台',
+            subMenu: [
+                {
+                    title: '工作台',
+                    path: '/dashboard/console'
+                }
+            ]
+        },
         {
             title: '列表页',
             subMenu: [
diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json
index b6845c9b..eaf17967 100644
--- a/packages/fes-template/package.json
+++ b/packages/fes-template/package.json
@@ -33,8 +33,10 @@
     "csp-html-webpack-plugin": "^4.0.0"
   },
   "dependencies": {
+    "@antv/data-set": "^0.11.7",
+    "@antv/g2": "^4.0.15",
+    "@babel/runtime-corejs3": "^7.11.2",
     "@webank/fes-core": "^0.2.1",
-    "@webank/fes-ui": "^0.2.0",
-    "@babel/runtime-corejs3": "^7.11.2"
+    "@webank/fes-ui": "^0.2.0"
   }
 }
diff --git a/packages/fes-template/src/assets/images/favicon.png b/packages/fes-template/src/assets/images/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8900c6baefef2132820c295ee7e23f30d7c294a
GIT binary patch
literal 1843
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

literal 0
HcmV?d00001

diff --git a/packages/fes-template/src/assets/styles/login.scss b/packages/fes-template/src/assets/styles/login.scss
deleted file mode 100644
index 3c5a095d..00000000
--- a/packages/fes-template/src/assets/styles/login.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-.login-panel {
-    position: absolute;
-    left: 0;
-    top: 0;
-    margin: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    background-color: $body-background;
-    background-image: url("../images/bg.png");
-    background-position: left bottom;
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    font-size: 18px;
-    color: $black-text-color;
-  }
-  
-  .login-panel .login-panel-swap {
-    position: relative;
-    width: 945px;
-    height: 324px;
-    margin: 10% auto;
-    border-radius: $border-radius-small;
-  }
-  
-  .login-panel .logo {
-    display: inline-block;
-    vertical-align: middle;
-    width: 400px;
-    height: 100%;
-    text-align: center;
-    .logo-text {
-      display: inline-block;
-      vertical-align: middle;
-      margin-top: 130px;
-      font-size: 28px;
-      font-weight: bold;
-    }
-  }
-  
-  .login-panel .split {
-    display: inline-block;
-    background: $border-color-base;
-    width: 1px;
-    height: 180px;
-    vertical-align: middle;
-  }
-  
-  .login-panel .error {
-    margin-top: 10px;
-    width: 350px;
-    color: $error-color;
-    font-size: 14px;
-    .ui-icon-exclamation-circle{
-        margin-right: 6px;
-    }
-  }
-  
-  .login-panel .login-form {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0 75px 0;
-    height: 270px;
-    input::-webkit-input-placeholder{
-      color: $black-text-color;
-    }
-    input::-moz-placeholder {
-      color: $black-text-color;
-    }
-    /* ie */
-    input:-ms-input-placeholder {
-      color: $black-text-color;
-    }
-    /* firefox 19+ */
-    input:-moz-placeholder {
-      color: $black-text-color;
-    }
-  
-    input:-webkit-autofill {
-      -webkit-box-shadow: 0 0 0px 1000px white inset !important;
-      -webkit-text-fill-color: $black-text-color !important;
-    }
-    .line{
-        padding-top: 30px;
-        border-bottom: 1px solid $border-color-split;
-    }
-    input[type="text"],
-    input[type="password"]{
-      margin: 0;
-      width: 350px;
-      height: 40px;
-      line-height: 40px;
-      padding: 0 15px;
-      vertical-align: middle;
-      background: 0 0;
-      outline: 0;
-      border: none;
-      font-size: 16px;
-      color: $black-text-color;
-    }
-    button {
-      margin-top: 10px;
-      width: 350px;
-      height: 48px;
-      border-radius: 4px;
-      line-height: 46px;
-      border: none;
-      outline: 0;
-      background-color: $primary-color;
-      color: #ffffff;
-      cursor: pointer;
-      text-align: center;
-      font-size: 18px;
-      &:hover {
-          background-color: $selected-color;
-      }
-    }
-  }
-  
-.ie-palceholder::after{
-    content: '用户名';
-    position: absolute;
-    left: 88px;
-    top: 38px;
-    font-size: 16px;
-}
-.ie-palceholder-password::after{
-    content: '密码';
-    top: 110px;
-}
\ No newline at end of file
diff --git a/packages/fes-template/src/assets/styles/main.scss b/packages/fes-template/src/assets/styles/main.scss
index bc4b9434..1e8a8d68 100644
--- a/packages/fes-template/src/assets/styles/main.scss
+++ b/packages/fes-template/src/assets/styles/main.scss
@@ -1,5 +1,4 @@
 @import "variables";
-@import "login";
 
 .article {
   padding: 20px;
@@ -57,11 +56,25 @@
     margin-left: 16px;
 }
 
+.mt-16{
+    margin-top: 16px;
+}
+
+.pr-16{
+    padding-right: 16px;
+}
+
 // 修复问题
 .ui-modal .ui-modal-dialog{
     overflow: visible;
 }
 
+.query-page .query-page-table .ui-page {
+    margin: 20px;
+    text-align: center;
+    justify-content: center;
+}
+
 .page {
     display: flex;
     flex-direction: column;
@@ -70,7 +83,7 @@
     .page-header{
         padding: 16px 32px 0;
         background: #fff;
-        border-bottom: $border-color-split ;
+        border-bottom: 1px solid $border-color-split ;
         .page-header-title{
             color: $title-color;
             font-weight: 500;
@@ -86,5 +99,6 @@
         min-height: 0;
         margin: 24px 24px;
         background: #fff;
+        border: 1px solid $border-color-split ;
     }
 }
diff --git a/packages/fes-template/src/components/Card.vue b/packages/fes-template/src/components/Card.vue
new file mode 100644
index 00000000..c0b7dfec
--- /dev/null
+++ b/packages/fes-template/src/components/Card.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="card">
+        <div class="card-header">
+            {{title}}
+            <div class="card-header-extra"><slot name="extra"></slot></div>
+        </div>
+        <div class="card-body">
+            <slot name="body"></slot>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/variables";
+.card {
+  box-sizing: border-box;
+  position: relative;
+  background: rgb(255, 255, 255);
+  border-radius: 2px;
+  color: $text-color;
+  .card-header {
+    min-height: 48px;
+    margin-bottom: -1px;
+    padding: 0px 24px;
+    color: $title-color;
+    font-weight: 500;
+    font-size: 16px;
+    background: transparent;
+    border-bottom: 1px solid rgb(240, 240, 240);
+    border-radius: 2px 2px 0px 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .card-header-extra {
+      color: $title-color;
+      font-weight: normal;
+      font-size: 14px;
+    }
+  }
+  .card-body {
+    margin: -1px 0px 0px -1px;
+    padding: 0px;
+  }
+}
+</style>
diff --git a/packages/fes-template/src/components/Chart.vue b/packages/fes-template/src/components/Chart.vue
new file mode 100644
index 00000000..b692b3ea
--- /dev/null
+++ b/packages/fes-template/src/components/Chart.vue
@@ -0,0 +1,81 @@
+<template>
+    <div ref="chart"></div>
+</template>
+<script>
+import { Chart } from '@antv/g2';
+
+export default {
+    props: {
+        data: {
+            type: Array,
+            required: true
+        },
+        options: {
+            type: Object,
+            required: true
+        }
+    },
+    watch: {
+        data() {
+            if (this.chart) {
+                this.chart.changeData(this.data);
+                this.chart.render();
+            }
+        }
+    },
+    mounted() {
+        const chart = new Chart({
+            container: this.$refs.chart,
+            autoFit: true,
+            height: 300
+        });
+        this.chart = chart;
+        Object.keys(this.options).forEach((p) => {
+            const option = this.options[p];
+            switch (p) {
+                case 'scale':
+                    chart.scale(option);
+                    break;
+                case 'coordinate':
+                    chart.coordinate(option);
+                    break;
+                case 'tooltip':
+                    chart.tooltip(option);
+                    break;
+                case 'axis':
+                    Object.keys(option).forEach((pp) => {
+                        chart.axis(pp, option[pp]);
+                    });
+                    break;
+                default:
+            }
+        });
+
+        if (this.options.line) {
+            const lineGeometry = chart.line();
+            Object.keys(this.options.line).forEach((pp) => {
+                lineGeometry[pp](this.options.line[pp]);
+            });
+        }
+
+        if (this.options.point) {
+            const pointGeometry = chart.point();
+            Object.keys(this.options.point).forEach((pp) => {
+                pointGeometry[pp](this.options.point[pp]);
+            });
+        }
+
+        if (this.data.length === 0) {
+            return;
+        }
+        chart.data(this.data);
+        chart.render();
+    },
+    beforeDestroy() {
+        this.chart && this.chart.destroy();
+    }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/fes-template/src/pages/dashboard/console.vue b/packages/fes-template/src/pages/dashboard/console.vue
new file mode 100644
index 00000000..15c14f9a
--- /dev/null
+++ b/packages/fes-template/src/pages/dashboard/console.vue
@@ -0,0 +1,449 @@
+<template>
+    <div class="page page-console">
+        <div class="page-header">
+            <div class="page-header-title">工作台</div>
+            <div class="page-hader-content">
+                <img
+                    class="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"
+                />
+                <div class="user">
+                    <div class="user-wellcome">早安，Harry，祝你开心每一天！</div>
+                    <div class="user-role">
+                        前端开发工程师 | 某某公司-某某部门-某某科室
+                    </div>
+                </div>
+                <div class="report">
+                    <div class="report-item">
+                        <span class="report-item-name">项目数量</span>
+                        <span class="report-item-score">56</span>
+                    </div>
+                    <div class="report-item">
+                        <span class="report-item-name">团队内排名</span>
+                        <span class="report-item-score">8 / 24</span>
+                    </div>
+                    <div class="report-item">
+                        <span class="report-item-name">项目访问</span>
+                        <span class="report-item-score">2,223</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="page-body">
+            <Row>
+                <Cell span="16" class="pr-16">
+                    <Card title="进行中的项目">
+                        <a slot="extra" href="">全部项目</a>
+                        <div slot="body" class="grid-project">
+                            <div v-for="(item, i) in projects" :key="i" class="grid-project-item">
+                                <div class="grid-project-title">
+                                    <img :src="item.icon" />
+                                    <span>{{item.title}}</span>
+                                </div>
+                                <div class="grid-project-desc">{{item.desc}}</div>
+                                <div class="grid-project-content">
+                                    <span>{{item.group}}</span>
+                                    <span class="grid-project-time">{{item.time}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </Card>
+
+                    <Card class="mt-16" title="动态">
+                        <div slot="body" class="list-dynamic">
+                            <div v-for="(item, i) in projects" :key="i" class="list-dynamic-item">
+                                <img
+                                    class="list-dynamic-logo"
+                                    src="https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"
+                                />
+                                <div class="list-dynamic-content">
+                                    曲丽丽 在 <a>高逼格设计天团</a> 新建项目 <a>六月迭代</a>
+                                    <div class="list-dynamic-desc">3 小时前</div>
+                                </div>
+                            </div>
+                        </div>
+                    </Card>
+                </Cell>
+                <Cell span="8">
+                    <Card title="快速开始 / 便捷导航">
+                        <div slot="body" class="grid-nav">
+                            <div v-for="(item, i) in navs" :key="i" class="grid-nav-item">
+                                {{item}}
+                            </div>
+                            <div>
+                                <Wb-button icon="md-add" type="ghost">添加</Wb-button>
+                            </div>
+                        </div>
+                    </Card>
+
+                    <Card class="mt-16" title="幸运指数">
+                        <div slot="body" class="card-chart">
+                            <Chart :data="chartData" :options="chartOptions"></Chart>
+                        </div>
+                    </Card>
+
+                    <Card class="mt-16" title="团队">
+                        <div slot="body" class="grid-group">
+                            <div v-for="(item, i) in projects" :key="i" class="grid-group-item">
+                                <img :src="item.icon" class="grid-group-icon" />
+                                <span class="grid-group-name">{{item.group}}</span>
+                            </div>
+                        </div>
+                    </Card>
+                </Cell>
+            </Row>
+        </div>
+    </div>
+</template>
+<script>
+import DataSet from '@antv/data-set';
+
+
+export default {
+    FesData() {
+        return {
+            projects: [
+                {
+                    icon: 'https://cn.vuejs.org/images/logo.png',
+                    title: 'Vue',
+                    desc: '那是一种内在的东西，他们到达不了，也无法触及的',
+                    group: '科学搬砖组',
+                    time: '2 小时前'
+                },
+                {
+                    icon:
+                        'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+                    title: 'Angular',
+                    desc: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+                    group: '中二少女团',
+                    time: '3 年前'
+                },
+                {
+                    icon:
+                        'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
+                    title: 'React',
+                    desc: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+                    group: 'javascript',
+                    time: '2 小时前'
+                },
+                {
+                    icon:
+                        'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
+                    title: 'Bootstrap',
+                    desc: '那时候我只会想自己想要什么，从不想自己拥有什么',
+                    group: 'java',
+                    time: '2 小时前'
+                },
+                {
+                    icon:
+                        'https://s.cn.bing.net/th?id=OJ.wjuHWOYyiQYnjw&pid=MsnJVFeeds&w=16&h=16',
+                    title: 'Wechat',
+                    desc: '凛冬将至',
+                    group: '部落',
+                    time: '2 小时前'
+                },
+                {
+                    icon:
+                        'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+                    title: 'Alipay',
+                    desc: '生命就像一盒巧克力，结果往往出人意料',
+                    group: '联盟',
+                    time: '2 小时前'
+                }
+            ],
+            navs: ['操作一', '操作二', '操作三', '操作四', '操作五', '操作六'],
+            chartData: [],
+            chartOptions: {
+                scale: {
+                    score: {
+                        min: 0,
+                        max: 100
+                    }
+                },
+                coordinate: {
+                    type: 'polar',
+                    cfg: {
+                        radius: 0.85
+                    }
+                },
+                tooltip: {
+                    shared: true,
+                    showCrosshairs: true,
+                    crosshairs: {
+                        line: {
+                            style: {
+                                lineDash: [4, 4],
+                                stroke: '#333'
+                            }
+                        }
+                    }
+                },
+                axis: {
+                    item: {
+                        line: null,
+                        tickLine: null,
+                        grid: {
+                            line: {
+                                style: {
+                                    lineDash: null
+                                }
+                            }
+                        }
+                    },
+                    score: {
+                        line: null,
+                        tickLine: null,
+                        grid: {
+                            line: {
+                                type: 'line',
+                                style: {
+                                    lineDash: null
+                                }
+                            }
+                        }
+                    }
+                },
+                line: {
+                    position: 'item*score',
+                    color: 'user',
+                    size: 2
+                },
+                point: {
+                    position: 'item*score',
+                    color: 'user',
+                    shape: 'circle',
+                    size: 4,
+                    style: {
+                        stroke: '#fff',
+                        lineWidth: 1,
+                        fillOpacity: 1
+                    }
+                }
+            }
+        };
+    },
+    FesReady() {
+        const data = [
+            {
+                item: '热度',
+                a: 70,
+                b: 10,
+                c: 70
+            },
+            {
+                item: '引用',
+                a: 100,
+                b: 30,
+                c: 40
+            },
+            {
+                item: '口碑',
+                a: 80,
+                b: 90,
+                c: 10
+            },
+            {
+                item: '产出',
+                a: 40,
+                b: 60,
+                c: 60
+            },
+            {
+                item: '贡献',
+                a: 50,
+                b: 30,
+                c: 60
+            }
+        ];
+        const { DataView } = DataSet;
+        const dv = new DataView().source(data);
+        dv.transform({
+            type: 'rename',
+            map: {
+                a: '个人',
+                b: '团队',
+                c: '部门'
+            }
+        });
+        dv.transform({
+            type: 'fold',
+            fields: ['个人', '团队', '部门'], // 展开字段集
+            key: 'user', // key字段
+            value: 'score' // value字段
+        });
+        this.chartData = dv.rows;
+    },
+    FesBeforeDestroy() {
+    },
+    methods: {}
+};
+</script>
+<style lang="scss">
+@import "~@/assets/styles/variables";
+.page.page-console{
+  font-size: 14px;
+  .page-header {
+    .page-hader-content {
+      display: flex;
+      align-items: center;
+      margin-bottom: 24px;
+      .avatar {
+        width: 60px;
+        height: 60px;
+        margin-right: 16px;
+      }
+      .user {
+        flex: 1;
+        .user-wellcome {
+          font-size: 18px;
+          color: $title-color;
+        }
+        .user-role {
+          margin-top: 8px;
+        }
+      }
+      .report {
+        min-width: 420px;
+        margin-left: 88px;
+        display: flex;
+        .report-item {
+          flex: 1;
+          display: flex;
+          padding: 0 32px;
+          flex-direction: column;
+          align-items: flex-end;
+          position: relative;
+          &:not(:last-child):before{
+              content: "";
+              position: absolute;
+              right: 0;
+              top: 6px;
+              bottom: 6px;
+              width: 1px;
+              background: $border-color-split;
+          }
+          &:last-child{
+              padding-right: 0;
+
+          }
+          .report-item-name {
+            margin-bottom: 4px;
+          }
+          .report-item-score {
+            font-size: 24px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+  .page-body {
+    background: #f0f2f5;
+    border: none;
+
+    .grid-project {
+      display: grid;
+      grid-template-columns: repeat(3, 33.33%);
+      .grid-project-item {
+        padding: 24px;
+        border: 0px;
+        box-shadow: rgb(240, 240, 240) 1px 0px 0px 0px,
+          rgb(240, 240, 240) 0px 1px 0px 0px, rgb(240, 240, 240) 1px 1px 0px 0px,
+          rgb(240, 240, 240) 1px 0px 0px 0px inset,
+          rgb(240, 240, 240) 0px 1px 0px 0px inset;
+        transition: all 0.3s ease 0s;
+        &:hover {
+          position: relative;
+          z-index: 1;
+          box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
+            0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+        }
+      }
+      .grid-project-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+        font-size: 16px;
+        img {
+          width: 24px;
+          height: auto;
+        }
+        span {
+          margin-left: 8px;
+        }
+      }
+      .grid-project-desc {
+        height: 44px;
+        overflow: hidden;
+        color: $sub-text-color;
+        line-height: 22px;
+        font-size: 14px;
+      }
+      .grid-project-content {
+        margin-top: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .grid-project-time {
+          color: rgba($sub-text-color, 0.85);
+        }
+      }
+    }
+    .grid-nav {
+      display: grid;
+      padding: 20px;
+      row-gap: 20px;
+      grid-template-columns: repeat(4, 25%);
+      .grid-nav-item {
+        line-height: 24px;
+      }
+      .ui-button {
+        padding: 2px 8px;
+      }
+    }
+    .card-chart {
+      padding: 20px;
+    }
+    .grid-group {
+      display: grid;
+      padding: 20px;
+      row-gap: 20px;
+      grid-template-columns: repeat(2, 50%);
+      .grid-group-item {
+        display: flex;
+        align-items: center;
+      }
+      .grid-group-icon {
+        width: 24px;
+        height: auto;
+      }
+      .grid-group-name {
+        margin-left: 8px;
+      }
+    }
+    .list-dynamic {
+      padding: 8px 24px 8px 24px;
+      .list-dynamic-item {
+        padding: 16px 24px;
+        border-bottom: 1px solid #f0f0f0;
+        display: flex;
+        &:last-child {
+          border: 0;
+        }
+        .list-dynamic-logo {
+          margin-right: 16px;
+          width: 24px;
+          height: 24px;
+        }
+        .list-dynamic-content {
+          flex: 1;
+          .list-dynamic-desc {
+            margin-top: 4px;
+            color: $sub-text-color;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/fes-template/src/pages/home/index.vue b/packages/fes-template/src/pages/home/index.vue
deleted file mode 100644
index d8f4cd1d..00000000
--- a/packages/fes-template/src/pages/home/index.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <div class="login-panel">
-        <div class="login-panel-swap">
-            <div class="logo">
-                <span class="logo-text">
-                    Fes.js 运营平台
-                </span>
-            </div>
-            <div class="split" />
-            <div class="login-form">
-                <div :class="getStyle('userFocus')" class="line">
-                    <input
-                        ref="username"
-                        v-model="username"
-                        @input="input"
-                        @keydown.enter="login"
-                        @focus="focusHandler('userFocus')"
-                        @blur="blurHandler('userFocus')"
-                        type="text"
-                        name="username"
-                        autocomplete="off"
-                        autofocus
-                        placeholder="用户名"
-                    >
-                </div>
-                <div :class="getStyle('passwordFocus')" class="line">
-                    <input
-                        ref="password"
-                        v-model="password"
-                        @input="input"
-                        @keydown.enter="login"
-                        @focus="focusHandler('passwordFocus')"
-                        @blur="blurHandler('passwordFocus')"
-                        type="password"
-                        name="password"
-                        autocomplete="off"
-                        placeholder="密码"
-                    >
-                </div>
-                <div class="line">
-                    <button @click="login">
-                        登录
-                    </button>
-                </div>
-                <div v-show="error" class="error">
-                    <Icon type="exclamation-circle" />{{error}}
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    FesLeft: false,
-    FesData() {
-        return {
-            userFocus: false,
-            passwordFocus: false,
-            username: '',
-            password: '',
-            error: '' // 请输入正确的密码，8-16位
-        };
-    },
-    FesReady() {
-        this.$nextTick(() => {
-            this.$refs.username.focus();
-        });
-        this.initStyle();
-        if (this.FesStorage.get('userLogin') === true) {
-            this.getRole();
-        }
-    },
-    methods: {
-        login() {
-            if (this.validate()) {
-                // 设置用户、角色等
-                this.FesApp.set('FesUserName', 'harrywan');
-                this.FesApp.set('FesRoleName', '管理员');
-                this.FesStorage.set('userLogin', true);
-                this.getRole();
-            }
-        },
-        getRole() {
-            this.FesApp.setRole('admin');
-        },
-        input() {
-            this.error = '';
-        },
-        validate() {
-            const { username } = this;
-            const { password } = this;
-            if (username === '' || username == null) {
-                this.error = '请输入用户名';
-                return false;
-            }
-            if (!/^[a-zA-Z0-9]+([._\\-]*[a-zA-Z0-9])*@([a-zA-Z0-9]+[-a-zA-Z0-9]*[a-zA-Z0-9]+.){1,63}[a-zA-Z0-9]+$/.test(username)) {
-                this.error = '请输入正确邮箱账号';
-                return false;
-            }
-            if (password === '' || password == null) {
-                this.error = '请输入密码';
-                return false;
-            }
-            return true;
-        },
-        getStyle(type) {
-            let style = '';
-            if (this[type] && this.isIE(9)) {
-                if (type === 'passwordFocus' && !this.password) {
-                    style += ' ie-palceholder ie-palceholder-password';
-                } else if (type === 'userFocus' && !this.username) {
-                    style += ' ie-palceholder';
-                }
-            }
-            return style;
-        },
-        initStyle() {
-            if (this.isIE(9)) {
-                !this.password && (this.passwordFocus = true);
-                !this.username && (this.userFocus = true);
-            }
-        },
-        focusHandler(type) {
-            this.isIE(9) && (this[type] = false);
-        },
-        blurHandler(type) {
-            this[type] = true;
-        },
-        isIE(ver) {
-            const b = document.createElement('b');
-            b.innerHTML = `<!--[if IE ${ver}]><i></i><![endif]-->`;
-            return b.getElementsByTagName('i').length === 1;
-        }
-    }
-};
-</script>
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
new file mode 100644
index 00000000..1f88ac44
--- /dev/null
+++ b/packages/fes-template/src/pages/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <div class="login-panel">
+        <div class="login-panel-swap">
+            <div class="login-project">
+                <div class="title">
+                    <!-- <img class="logo" src="~@/assets/images/favicon.png" /> -->
+                    <span class="text">Fes.js 运营平台</span>
+                </div>
+                <div class="desc">fes.js是一个优秀的中台应用前端解决方案</div>
+            </div>
+            <div class="login-form">
+                <div :class="{ focus: currentFoucs === 'userFocus' }" class="input-swap">
+                    <Icon class="icon" type="md-person" />
+                    <input
+                        ref="username"
+                        v-model="username"
+                        @input="input"
+                        @keydown.enter="login"
+                        @focus="focusHandler('userFocus')"
+                        @blur="blurHandler('userFocus')"
+                        class="input"
+                        type="text"
+                        name="username"
+                        autocomplete="off"
+                        autofocus
+                        placeholder="用户名: 符合邮箱规则即可"
+                    />
+                </div>
+                <div :class="{ focus: currentFoucs === 'passwordFocus' }" class="input-swap">
+                    <Icon class="icon" type="md-eye-off" />
+                    <input
+                        ref="password"
+                        v-model="password"
+                        @input="input"
+                        @keydown.enter="login"
+                        @focus="focusHandler('passwordFocus')"
+                        @blur="blurHandler('passwordFocus')"
+                        class="input"
+                        type="password"
+                        name="password"
+                        autocomplete="off"
+                        placeholder="密码：任意"
+                    />
+                </div>
+                <div class="help">
+                    <Checkbox value="1">
+                        记住密码
+                    </Checkbox>
+                    <a>忘记密码</a>
+                </div>
+                <button @click="login" class="button">登录</button>
+                <div v-show="error" class="error">
+                    <Icon type="md-warning" />
+                    {{error}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    FesLeft: false,
+    FesData() {
+        return {
+            currentFoucs: '',
+            username: '',
+            password: '',
+            error: '' // 请输入正确的密码，8-16位
+        };
+    },
+    FesReady() {
+        this.$nextTick(() => {
+            this.$refs.username.focus();
+            this.currentFoucs = 'userFocus';
+        });
+        if (this.FesStorage.get('userLogin') === true) {
+            this.getRole();
+        }
+    },
+    methods: {
+        login() {
+            if (this.validate()) {
+                // 设置用户、角色等
+                this.FesApp.set('FesUserName', 'harrywan');
+                this.FesApp.set('FesRoleName', '管理员');
+                this.FesStorage.set('userLogin', true);
+                this.getRole();
+            }
+        },
+        getRole() {
+            this.FesApp.setRole('admin');
+        },
+        input() {
+            this.error = '';
+        },
+        focusHandler(type) {
+            this.currentFoucs = type;
+        },
+        blurHandler() {
+            this.currentFoucs = '';
+        },
+        validate() {
+            const { username } = this;
+            const { password } = this;
+            if (username === '' || username == null) {
+                this.error = '请输入用户名';
+                return false;
+            }
+            if (
+                !/^[a-zA-Z0-9]+([._\\-]*[a-zA-Z0-9])*@([a-zA-Z0-9]+[-a-zA-Z0-9]*[a-zA-Z0-9]+.){1,63}[a-zA-Z0-9]+$/.test(
+                    username
+                )
+            ) {
+                this.error = '请输入正确邮箱账号';
+                return false;
+            }
+            if (password === '' || password == null) {
+                this.error = '请输入密码';
+                return false;
+            }
+            return true;
+        }
+    }
+};
+</script>
+<style lang="scss">
+@import "~@/assets/styles/variables";
+.login-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: #f0f2f5;
+  background-image: url("~@/assets/images/bg.png");
+  background-position: left bottom;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+}
+
+.login-panel .login-panel-swap {
+  width: 350px;
+  margin: auto;
+  text-align: center;
+  .login-project {
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 33px;
+      color: $black-text-color;
+      .logo {
+          margin-right: 20px;
+      }
+    }
+    .desc {
+      margin-top: 12px;
+      margin-bottom: 40px;
+      color: $sub-text-color;
+      font-size: 14px;
+    }
+  }
+  .login-form {
+    height: 270px;
+    .input-swap {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-height: 32px;
+      padding: 6px 11px;
+      font-size: 14px;
+      border-radius: 2px;
+      border: 1px solid $border-color-base;
+      background: #ffffff;
+      transition: all 0.3s;
+      &:not(:first-child) {
+        margin-top: 12px;
+      }
+      &:hover,&.focus {
+        border-color: $link-hover-color;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      }
+      .icon {
+        margin-right: 4px;
+        color: $primary-color;
+      }
+      .input {
+        padding: 0;
+        border: none;
+        outline: none;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        font-variant: tabular-nums;
+        list-style: none;
+        font-feature-settings: "tnum", "tnum";
+        position: relative;
+        width: 100%;
+        min-width: 0;
+        padding: 2px 11px;
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 14px;
+      }
+    }
+    .button {
+      margin-top: 24px;
+      width: 100%;
+      border: 0;
+      outline: 0;
+      height: 40px;
+      line-height: 40px;
+      background: $primary-color;
+      color: #ffffff;
+      border-radius: 2px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.3s;
+      &:hover{
+          background: rgba($primary-color, 0.85);
+      }
+    }
+    .error {
+      margin-top: 10px;
+      width: 350px;
+      color: $error-color;
+      font-size: 14px;
+      text-align: left;
+      .ui-icon {
+        margin-right: 6px;
+      }
+    }
+  }
+  .help{
+      margin-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+  }
+}
+</style>