diff --git a/src/assets/image/logo/w500-chart.png.REMOVED.git-id b/src/assets/image/logo/w500-chart.png.REMOVED.git-id
new file mode 100644
index 00000000..92e0ae71
--- /dev/null
+++ b/src/assets/image/logo/w500-chart.png.REMOVED.git-id
@@ -0,0 +1 @@
+ced2a0c6ac224943617c9f3447ca49f5418af81d
\ No newline at end of file
diff --git a/src/assets/image/logo/w500-component.png.REMOVED.git-id b/src/assets/image/logo/w500-component.png.REMOVED.git-id
new file mode 100644
index 00000000..dd770d91
--- /dev/null
+++ b/src/assets/image/logo/w500-component.png.REMOVED.git-id
@@ -0,0 +1 @@
+feffe17f1e6693c27c5ec0345455393272fde3f8
\ No newline at end of file
diff --git a/src/components/demo/PageIndexArticle/index.vue b/src/components/demo/PageIndexArticle/index.vue
index 3c434c04..e5ad323b 100644
--- a/src/components/demo/PageIndexArticle/index.vue
+++ b/src/components/demo/PageIndexArticle/index.vue
@@ -1,11 +1,31 @@
 <template>
   <div class="page-index-body">
-    <img class="page-index-body__logo" src="@/assets/image/logo/w500.png">
-    <p class="page-index-body__title">这是D2Admin</p>
-    <p class="page-index-body__sub-title dd-mt-0">一个追求简洁和上手即用的前端模板</p>
+    <div class="page-index-body__logo">
+      <slot></slot>
+    </div>
+    <p class="page-index-body__title">{{title}}</p>
+    <p class="page-index-body__sub-title dd-mt-0">{{subTitle}}</p>
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: 'Title'
+    },
+    subTitle: {
+      type: String,
+      required: false,
+      default: 'subTitle'
+    }
+  }
+}
+</script>
+
+
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .page-index-header {
@@ -26,7 +46,9 @@
   justify-content: center;
   align-items: center;
   .page-index-body__logo {
-    width: 200px;
+    img {
+      width: 200px;
+    }
   }
   .page-index-body__title {
     color: $color-text-main;
diff --git a/src/pages/core/index/index.vue b/src/pages/core/index/index.vue
index 480d3ba2..db5df448 100644
--- a/src/pages/core/index/index.vue
+++ b/src/pages/core/index/index.vue
@@ -1,5 +1,9 @@
 <template>
   <Container type="card-full">
-    <PageIndexArticle></PageIndexArticle>
+    <PageIndexArticle
+      title="这是D2Admin"
+      sub-title="一个追求简洁和上手即用的前端模板">
+      <img src="@/assets/image/logo/w500.png">
+    </PageIndexArticle>
   </Container>
 </template>
diff --git a/src/pages/demo/chart/index/components/ChartCardHeader.vue b/src/pages/demo/chart/all/components/ChartCardHeader.vue
similarity index 100%
rename from src/pages/demo/chart/index/components/ChartCardHeader.vue
rename to src/pages/demo/chart/all/components/ChartCardHeader.vue
diff --git a/src/pages/demo/chart/all/index.vue b/src/pages/demo/chart/all/index.vue
new file mode 100644
index 00000000..6812e4a4
--- /dev/null
+++ b/src/pages/demo/chart/all/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <Container type="ghost" :responsive="true" class="demo-chart-index">
+    <el-row :gutter="20">
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
+          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
+        </el-card>
+      </el-col>
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
+          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
+        </el-card>
+      </el-col>
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
+          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
+        </el-card>
+      </el-col>
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
+          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
+        </el-card>
+      </el-col>
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
+          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
+        </el-card>
+      </el-col>
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
+          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
+        </el-card>
+      </el-col>
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
+          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
+        </el-card>
+      </el-col>
+      <el-col class="col" :span="8">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
+          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+export default {
+  components: {
+    ChartCardHeader: () => import('./components/ChartCardHeader')
+  },
+  data () {
+    return {
+      chart: [
+        {
+          api: {url: '/api/chart/G2Line', data: {type: 'base'}},
+          refName: 'G2LineBase',
+          ready: false,
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Line', data: {type: 'step'}},
+          refName: 'G2LineStep',
+          ready: false,
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Column', data: {type: 'base'}},
+          refName: 'G2ColumnBase',
+          ready: false,
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
+          refName: 'G2BarBase',
+          ready: false,
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
+          refName: 'G2PieBase',
+          ready: false,
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
+          refName: 'G2NightingaleRoseBase',
+          ready: false,
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
+          refName: 'G2RadarBase',
+          ready: false,
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Area', data: {type: 'base'}},
+          refName: 'G2AreaBase',
+          ready: false,
+          data: []
+        }
+      ]
+    }
+  },
+  computed: {
+    // 所有的图表已经 mounted
+    ready () {
+      return !this.chart.find(e => !e.ready)
+    }
+  },
+  watch: {
+    // 在所有的图表 mounted 后加载数据
+    ready (ready) {
+      if (ready) {
+        this.syncData()
+        this.showInfo()
+      }
+    }
+  },
+  methods: {
+    // 显示提示
+    showInfo () {
+      this.$notify({
+        title: '提示',
+        message: '点击卡片右上角的刷新按钮可以重新载入某个图表的数据',
+        duration: 10000
+      })
+    },
+    // 图表 mounted
+    isReady (index) {
+      this.chart[index].ready = true
+    },
+    // 请求图表数据
+    syncData () {
+      this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
+        .then(this.$axios.spread((...res) => {
+          res.forEach((e, index) => {
+            this.chart[index].data = e
+          })
+        }))
+    },
+    // 用户触发了卡片右上角的刷新按钮
+    handleRefreshData (index) {
+      const api = this.chart[index].api
+      this.$axios.post(api.url, api.data)
+        .then(res => {
+          this.chart[index].data = res
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/pages/demo/chart/index/style.scss b/src/pages/demo/chart/all/style.scss
similarity index 100%
rename from src/pages/demo/chart/index/style.scss
rename to src/pages/demo/chart/all/style.scss
diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue
index 6812e4a4..d17da97c 100644
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -1,166 +1,9 @@
 <template>
-  <Container type="ghost" :responsive="true" class="demo-chart-index">
-    <el-row :gutter="20">
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
-        </el-card>
-      </el-col>
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
-        </el-card>
-      </el-col>
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
-        </el-card>
-      </el-col>
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
-        </el-card>
-      </el-col>
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
-        </el-card>
-      </el-col>
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
-        </el-card>
-      </el-col>
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
-        </el-card>
-      </el-col>
-      <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
-        </el-card>
-      </el-col>
-    </el-row>
+  <Container type="card-full">
+    <PageIndexArticle
+      title="内置组件"
+      sub-title="D2Admin 为你提供了一些上手即用的组件">
+      <img src="@/assets/image/logo/w500-component.png">
+    </PageIndexArticle>
   </Container>
-</template>
-
-<script>
-export default {
-  components: {
-    ChartCardHeader: () => import('./components/ChartCardHeader')
-  },
-  data () {
-    return {
-      chart: [
-        {
-          api: {url: '/api/chart/G2Line', data: {type: 'base'}},
-          refName: 'G2LineBase',
-          ready: false,
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Line', data: {type: 'step'}},
-          refName: 'G2LineStep',
-          ready: false,
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Column', data: {type: 'base'}},
-          refName: 'G2ColumnBase',
-          ready: false,
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
-          refName: 'G2BarBase',
-          ready: false,
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
-          refName: 'G2PieBase',
-          ready: false,
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
-          refName: 'G2NightingaleRoseBase',
-          ready: false,
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
-          refName: 'G2RadarBase',
-          ready: false,
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Area', data: {type: 'base'}},
-          refName: 'G2AreaBase',
-          ready: false,
-          data: []
-        }
-      ]
-    }
-  },
-  computed: {
-    // 所有的图表已经 mounted
-    ready () {
-      return !this.chart.find(e => !e.ready)
-    }
-  },
-  watch: {
-    // 在所有的图表 mounted 后加载数据
-    ready (ready) {
-      if (ready) {
-        this.syncData()
-        this.showInfo()
-      }
-    }
-  },
-  methods: {
-    // 显示提示
-    showInfo () {
-      this.$notify({
-        title: '提示',
-        message: '点击卡片右上角的刷新按钮可以重新载入某个图表的数据',
-        duration: 10000
-      })
-    },
-    // 图表 mounted
-    isReady (index) {
-      this.chart[index].ready = true
-    },
-    // 请求图表数据
-    syncData () {
-      this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
-        .then(this.$axios.spread((...res) => {
-          res.forEach((e, index) => {
-            this.chart[index].data = e
-          })
-        }))
-    },
-    // 用户触发了卡片右上角的刷新按钮
-    handleRefreshData (index) {
-      const api = this.chart[index].api
-      this.$axios.post(api.url, api.data)
-        .then(res => {
-          this.chart[index].data = res
-        })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import './style.scss';
-</style>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/components/index/index.vue b/src/pages/demo/components/index/index.vue
new file mode 100644
index 00000000..d17da97c
--- /dev/null
+++ b/src/pages/demo/components/index/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <Container type="card-full">
+    <PageIndexArticle
+      title="内置组件"
+      sub-title="D2Admin 为你提供了一些上手即用的组件">
+      <img src="@/assets/image/logo/w500-component.png">
+    </PageIndexArticle>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/index/index.vue b/src/pages/demo/plugins/index/index.vue
index 0fd556f9..1f4da72c 100644
--- a/src/pages/demo/plugins/index/index.vue
+++ b/src/pages/demo/plugins/index/index.vue
@@ -1,55 +1,9 @@
 <template>
   <Container type="card-full">
-    <template slot="header">
-      <div class="page-plugin-index-header">
-        <div class="dd-fl">
-          <span class="page-plugin-index-header__title">
-            插件
-          </span>
-        </div>
-        <div class="dd-fr">
-          <el-button>
-            <Icon name="github"></Icon>
-            Github
-          </el-button>
-        </div>
-      </div>
-    </template>
-    <div class="page-plugin-index-body">
-      <img class="page-plugin-index-body__logo" src="@/assets/image/logo/w500-plugin.png">
-      <p class="page-plugin-index-body__title">插件演示</p>
-      <p class="page-plugin-index-body__sub-title dd-mt-0">D2Admin 集成了许多实用插件</p>
-    </div>
+    <PageIndexArticle
+      title="插件演示"
+      sub-title="D2Admin 集成了许多实用插件">
+      <img src="@/assets/image/logo/w500-plugin.png">
+    </PageIndexArticle>
   </Container>
-</template>
-
-<style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
-.page-plugin-index-header {
-  overflow: hidden;
-  .page-plugin-index-header__title {
-    display: inline-block;
-    padding: 12px 20px;
-  }
-}
-.page-plugin-index-body {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  .page-plugin-index-body__logo {
-    width: 200px;
-  }
-  .page-plugin-index-body__title {
-    color: $color-text-main;
-  }
-  .page-plugin-index-body__sub-title {
-    color: $color-text-sub;
-  }
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/src/router/menu/_chart.js b/src/router/menu/_chart.js
index f387a2a1..5ea89d4f 100644
--- a/src/router/menu/_chart.js
+++ b/src/router/menu/_chart.js
@@ -21,17 +21,26 @@ export const menu = {
     requiresAuth: true
   },
   component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
+  redirect: {
+    name: 'demo-chart-index'
+  },
   children: [
+    // 首页
+    {
+      path: 'index',
+      name: 'demo-chart-index',
+      component: resolve => { require(['@/pages/demo/chart/index/index.vue'], resolve) }
+    },
     // 所有
     {
       title: '所有',
       icon: 'th',
-      path: 'index',
-      name: 'demo-chart-index',
+      path: 'all',
+      name: 'demo-chart-all',
       meta: {
         requiresAuth: true
       },
-      component: resolve => { require(['@/pages/demo/chart/index/index.vue'], resolve) }
+      component: resolve => { require(['@/pages/demo/chart/all/index.vue'], resolve) }
     },
     // 动态尺寸
     {
diff --git a/src/router/menu/_components.js b/src/router/menu/_components.js
index f508bd41..ed46c89a 100644
--- a/src/router/menu/_components.js
+++ b/src/router/menu/_components.js
@@ -7,10 +7,16 @@ export const menu = {
     requiresAuth: true
   },
   component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
-  // redirect: {
-  //   name: ''
-  // },
+  redirect: {
+    name: 'demo-components-index'
+  },
   children: [
+    // 首页
+    {
+      path: 'index',
+      name: 'demo-components-index',
+      component: resolve => { require(['@/pages/demo/components/index/index.vue'], resolve) }
+    },
     // 页面容器
     {
       title: '页面容器',
diff --git a/src/router/menu/_plugin.js b/src/router/menu/_plugin.js
index 36126208..9de2c4a3 100644
--- a/src/router/menu/_plugin.js
+++ b/src/router/menu/_plugin.js
@@ -11,6 +11,7 @@ export const menu = {
     name: 'demo-plugins-index'
   },
   children: [
+    // 首页
     {
       path: 'index',
       name: 'demo-plugins-index',