Merge branch 'release/v1.2.0'

Former-commit-id: 914e3bc601f1b448526a9201d8057fdcf5b65374 [formerly 914e3bc601f1b448526a9201d8057fdcf5b65374 [formerly 914e3bc601f1b448526a9201d8057fdcf5b65374 [formerly 914e3bc601f1b448526a9201d8057fdcf5b65374 [formerly f1da0d3525c03c8ad764fb7f5e958903878ec56f [formerly 25d81c4f3740c1347fe0c46c2f0a74c469013343]]]]] Former-commit-id: d926fb259f7ab85e0a26087810c5c4ba8a1d085b Former-commit-id: 5900cfbb141514c620f13b19fea8ec2fbaab1481 Former-commit-id: b57d5aa85cc5f036c1e2bea6a6d20a7bb8dbeeb3 [formerly 845b5a8f1beb44be3b13220a2f9a1035266a82c2] Former-commit-id: 2f4427e07ad172504b7d4dc74bff6e1af6f7faee Former-commit-id: db529685a6633e8f258f8b2498f989fa8ce7210b Former-commit-id: 843487bf2e0dfaa1f0c0d622e50f40a6b9cda014 Former-commit-id: 24205b8e54bf1540f36a89762dbaf4790892f93b Former-commit-id: e839f078eb142baca0b026ed600b9f3bdc764b41
2018-08-22 14:33:31 +08:00
parent 562fb549f3 fba9cf7b05
commit 3ed5bbdab0
151 changed files with 3248 additions and 981 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
--- a/.env
+++ b/.env
@@ -2,5 +2,3 @@

 # 页面 title 前缀
 VUE_APP_TITLE=D2Admin
-# 检查更新的接口地址
-VUE_APP_RELEASES_API=https://api.github.com/repos/FairyEver/d2-admin/releases/latest
--- a/.gitignore
+++ b/.gitignore
@@ -15,5 +15,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
-package-lock.json
+
+# d2admin
 dev/design
--- a/README.md
+++ b/README.md
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -18,8 +18,6 @@ module.exports = {
  themeConfig: {
    // 项目仓库地址
    repo: 'https://github.com/d2-projects/d2-admin',
-    // 自定义仓库链接文字
-    repoLabel: '查看源码',
    // 文档不是放在仓库的根目录下
    docsDir: 'docs',
    // 默认是 false, 设置为 true 来启用
@@ -30,93 +28,156 @@ module.exports = {
        selectText: 'Languages',
        label: 'English',
        editLinkText: 'Edit this page on GitHub',
-        lastUpdated: 'Last update',
-        nav: [
-          { text: 'preview', link: 'https://fairyever.gitee.io/d2-admin-preview/#/index' }
-        ]
+        lastUpdated: 'Last update'
      },
      '/zh/': {
-        selectText: '选择语言',
+        selectText: '语言',
        label: '简体中文',
        editLinkText: '在 GitHub 上编辑此页',
        lastUpdated: '最后更新',
        nav: [
-          { text: '指南', link: '/zh/guide/' },
-          { text: '插件', link: '/zh/plugins/' },
-          { text: '组件', link: '/zh/components/' },
+          {
+            text: '学习',
+            items: [
+              { text: '教程', link: '/zh/learn-guide/' },
+              { text: '相关知识', link: '/zh/learn-knowledge/' }
+            ]
+          },
+          {
+            text: '模块',
+            items: [
+              { text: '组件', link: '/zh/sys-components/' },
+              { text: '插件', link: '/zh/sys-plugins/' },
+              { text: 'vuex', link: '/zh/sys-vuex/' },
+              { text: '菜单', link: '/zh/sys-menu/' },
+              { text: '路由', link: '/zh/sys-route/' },
+              { text: '多页面', link: '/zh/sys-multi-page/' },
+              { text: '数据持久化', link: '/zh/sys-db/' },
+              { text: 'CSS 实用类', link: '/zh/sys-css/' },
+              { text: 'JS Util', link: '/zh/sys-util/' },
+              { text: 'cli3 和 webpack', link: '/zh/sys-cli3-webpack/' }
+            ]
+          },
+          {
+            text: '生态',
+            items: [
+              { text: 'D2 Admin start kit', link: '/zh/ecosystem-d2-admin-start-kit/' },
+              { text: 'D2 Admin ICE', link: '/zh/ecosystem-d2-admin-ice/' },
+              { text: 'D2 CRUD', link: '/zh/ecosystem-d2-crud/' },
+              { text: 'D2 Ribbons', link: '/zh/ecosystem-d2-ribbons/' }
+            ]
+          },
          { text: '文章', link: '/zh/article/' },
-          { text: '其它', link: '/zh/others/' },
-          { text: '预览', link: 'https://fairyever.gitee.io/d2-admin-preview/#/index' }
+          {
+            text: '其它',
+            items: [
+              { text: '更新日志', link: '/zh/change-log/' },
+              { text: '参与者名单', link: '/zh/collaborator/' },
+              { text: '借鉴 D2Admin 的项目', link: '/zh/plagiarize/' },
+              {
+                text: '交流',
+                items: [
+                  { text: '微信公众号', link: '/zh/communication-we/' },
+                  { text: '交流群', link: '/zh/communication-group-chat/' }
+                ]
+              },
+              {
+                text: '关注我们',
+                items: [
+                  { text: '掘金', link: 'https://juejin.im/user/57a48b632e958a006691b946/posts' },
+                  { text: 'CSDN', link: 'https://blog.csdn.net/fairyever' },
+                  { text: 'segmentfault', link: 'https://segmentfault.com/blog/liyang-note-book' },
+                  { text: '知乎', link: 'https://www.zhihu.com/people/fairy-ever/activities' }
+                ]
+              },
+              {
+                text: 'D2 在其它地方',
+                items: [
+                  { text: 'awesome-vue', link: 'https://github.com/vuejs/awesome-vue' },
+                  { text: 'ant design scaffolds', link: 'http://scaffold.ant.design/#/scaffolds/d2-admin' },
+                  { text: 'ice vue scaffold', link: 'https://alibaba.github.io/ice/scaffold?type=vue' },
+                  { text: 'awesomes.cn', link: 'https://www.awesomes.cn/repo/d2-projects/d2-admin' },
+                  { text: 'oschina.net', link: 'https://www.oschina.net/p/D2admin' },
+                  { text: 'ctolib.com', link: 'https://www.ctolib.com/FairyEver-d2-admin.html' }
+                ]
+              }
+            ]
+          },
+          { text: '常见问题', link: '/zh/question/' },
+          {
+            text: '旧版文档',
+            items: [
+              { text: '1.1.11', link: 'http://app.d3collection.cn/d2-admin-doc/1.1.11/zh/' }
+            ]
+          }
        ],
        sidebar: {
-          '/zh/guide/': sideBarGuide('指南'),
-          '/zh/plugins/': sideBarPlugins('插件'),
-          '/zh/components/': sideBarComponents('组件'),
-          '/zh/article/': sideBarArticle('Cookbook', '版本更新'),
-          '/zh/others/': sideBarOthers('其它')
+          '/zh/learn-guide/': sideBarLearnGuide(),
+          '/zh/sys-components/': sideBarSysComponents(),
+          '/zh/sys-plugins/': sideBarSysPlugins(),
+          '/zh/article/': sideBarArticle('版本发布', 'Cookbook'),
+          '/zh/ecosystem-d2-crud/': sideBarEcosystemD2Crud()
        }
      }
    }
  }
 }

-function sideBarGuide (title) {
+function sideBarLearnGuide () {
  return [
    {
-      title,
      collapsable: false,
      children: [
        '',
-        'getting-started',
-        'question',
-        'plagiarize',
-        'change-log'
+        'getting-started'
      ]
    }
  ]
 }

-function sideBarPlugins () {
+function sideBarSysComponents () {
  return [
-    '',
+    {
+      collapsable: false,
+      children: [
+        'container',
+        'icon',
+        'icon-svg',
+        'icon-select',
+        'markdown',
+        'highlight',
+        'count-up',
+        'charts'
+      ]
+    }
+  ]
+}
+
+function sideBarSysPlugins () {
+  return [
+    {
+      collapsable: false,
+      children: [
        'data-export',
        'data-import',
        'i18n',
        'mock',
-    'vuex',
-    'util'
-  ]
-}
-
-function sideBarComponents (title) {
-  return [
-    {
-      title,
-      collapsable: false,
-      children: [
-        '',
-        'charts',
-        'charts-new',
-        'container',
-        'count-up',
-        'highlight',
-        'icon-select',
-        'icon-svg',
-        'icon',
-        'markdown'
+        'error',
+        'log',
+        'console'
      ]
    }
  ]
 }

-function sideBarArticle (titleCookBook, titleUpdate) {
+function sideBarArticle (titleUpdate, titleCookbook) {
  return [
    {
-      title: titleCookBook,
+      title: titleCookbook,
      collapsable: false,
      children: [
        'cookbook/what-is-cookbook',
-        'cookbook/combinable-questionnaire',
+        'cookbook/combinable-questionnaire'
      ]
    },
    {
@@ -132,14 +193,13 @@ function sideBarArticle (titleCookBook, titleUpdate) {
  ]
 }

-function sideBarOthers (title) {
+function sideBarEcosystemD2Crud () {
  return [
    {
-      title,
      collapsable: false,
      children: [
        '',
-        'css'
+        'api'
      ]
    }
  ]
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -2,26 +2,19 @@
 home: true
 heroImage: /logo@2x.png
 actionText: 快速上手 →
-actionLink: /zh/guide/
+actionLink: /zh/learn-guide/
 features:
 - title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，超快虚拟 DOM 和最省心的优化。
+- title: 强大的数据持久化方案
+  details: 内部封装了多种数据持久化方式，您可以在数据持久化时区分用户，区分页面，甚至可以创建页面数据快照。
+- title: 模块化全局状态管理
+  details: D2Admin 的系统管理为独立模块，在此模块内根据功能划分为十几个模块，每个模块都分工明确。
+- title: 贴心小工具
+  details: 为您准备了实用的 JavaScript Util 以及 CSS 常用类。
 - title: 丰富集成
-  details: 已经为你准备好了很可能用到的插件和组件，有的来自第三方，有的专为 d2admin 设计。
+  details: 已经为你准备好了很可能用到的插件和组件，专为 D2Admin 设计，或者来自第三方。
 - title: ElementUI组件库
  details: 集成完善且强大的 ElementUI，随意搭配使用任何 ElementUI 组件。
 footer: MIT Licensed | Copyright © 2018-present FairyEver
 ---
-
-```
-// 安装依赖
-npm i
-
-// 运行
-npm run dev
-
-// 打包
-npm run build
-```
-
-> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html)
--- a/docs/zh/article/cookbook/combinable-questionnaire.md.REMOVED.git-id
+++ b/docs/zh/article/cookbook/combinable-questionnaire.md.REMOVED.git-id
@@ -1 +1 @@
-19d478d2f8f1eaf254a2f27de23d407916d28d0d
+7016ea14567961c24eb1fdee492e0c996099f752
--- a/docs/zh/change-log/README.md
+++ b/docs/zh/change-log/README.md
@@ -1,5 +1,37 @@
+---
+sidebar: auto
+---
+
 # 更新日志

+## v1.2.0
+
+* [ 修改 ] 新版首页
+* [ 新增 ] 全局状态管理模块化并且重新设计了 API
+* [ 新增 ] 全新的数据持久化 API
+* [ 新增 ] 数据持久化现在不仅仅支持区分用户，还可以区分路由
+* [ 新增 ] 路由快照功能
+* [ 新增 ] 文档重构
+* [ 新增 ] 菜单支持跳转到外部链接
+* [ 修改 ] bug 修复
+* [ 新增 ] 页面过渡动画设置加入全局状态管理并支持用户私有持久化
+* [ 新增 ] $logAdd 和 $log 快速记录日志和打印日志，并提供演示页面
+* [ 新增 ] 顶栏和侧边栏菜单支持 svg 图标
+
+## v1.1.11
+
+* [ 修改 ] 优化 v1.1.10 的更新代码
+* [ 修改 ] 修正版本号
+
+## v1.1.10
+
+* [ 修改 ] 修复了多标签页使用右侧菜单关闭时的报错
+
+## v1.1.9
+
+* [ 新增 ] 优化了多标签页数据持久化取值逻辑，现在修改路由信息后，刷新页面时数据从持久化存储取值时会多经过一部数据处理，根据 name 字段匹配新的路由数据
+* [ 新增 ] `d2adminUtilDb2VuexByUuid` 和 `d2adminUtilDb2Vuex` 新增第三个参数: handleFunction，该参数可以设置一个数据处理的回调函数，如果设置了该回调函数，在从持久化存储中取值时，如果成功取值，数据会首先经过该函数处理最后赋值到 store
+
 ## v1.1.8

 * [ 新增 ] 增加了错误收集和日志收集功能
--- a/docs/zh/collaborator/README.md
+++ b/docs/zh/collaborator/README.md
@@ -0,0 +1,13 @@
+---
+sidebar: auto
+---
+
+# 参与者名单
+
+| avatar | ID | Github |
+| :---: | --- | --- |
+| <img src="https://avatars1.githubusercontent.com/u/19357920?s=460&v=4" style="width: 30px;"/> | FairyEver | [https://github.com/FairyEver](https://github.com/FairyEver) |
+| <img src="https://avatars1.githubusercontent.com/u/24645480?s=460&v=4" style="width: 30px;"/> | sunhaoxiang | [https://github.com/sunhaoxiang](https://github.com/sunhaoxiang) |
+| <img src="https://avatars2.githubusercontent.com/u/11420885?s=460&v=4" style="width: 30px;"/> | namklaw | [https://github.com/namklaw](https://github.com/namklaw) |
+| <img src="https://avatars2.githubusercontent.com/u/6757507?s=460&v=4" style="width: 30px;"/> | mokeyjay | [https://github.com/mokeyjay](https://github.com/mokeyjay) |
+| <img src="https://avatars2.githubusercontent.com/u/10137653?s=460&v=4" style="width: 30px;"/> | Aysnine | [https://github.com/Aysnine](https://github.com/Aysnine) |
--- a/docs/zh/communication-group-chat/README.md
+++ b/docs/zh/communication-group-chat/README.md
@@ -0,0 +1,6 @@
+# 交流群
+
+| QQ 交流群 | 作者微信 |
+| --- | --- |
+| <img src="./image/qq.jpg" style="width: 200px;"/> | <img src="./image/we.jpg" style="width: 200px;"/> |
+| QQ 群比交流比较活跃 建议加入 | 微信群大于 100 人后需要群主邀请加入 |
--- a/src/layout/header-aside/components/header-help/image/qq.jpg.REMOVED.git-id
+++ b/src/layout/header-aside/components/header-help/image/qq.jpg.REMOVED.git-id
--- a/src/layout/header-aside/components/header-help/image/we.jpg.REMOVED.git-id
+++ b/src/layout/header-aside/components/header-help/image/we.jpg.REMOVED.git-id
--- a/docs/zh/communication-we/README.md
+++ b/docs/zh/communication-we/README.md
@@ -0,0 +1,5 @@
+# 微信公众号
+
+这是 D2 Projects 的官方公众号，我们会不定期推送技术文章和相关项目的更新信息。
+
+<img src="./image/qr@2x.png" style="width: 172px;"/>
--- a/docs/zh/communication-we/image/qr@2x.png.REMOVED.git-id
+++ b/docs/zh/communication-we/image/qr@2x.png.REMOVED.git-id
@@ -0,0 +1 @@
+2ef12d88b2011063784c37f8b8490336503a5f88
--- a/docs/zh/components/charts.md
+++ b/docs/zh/components/charts.md
@@ -1,76 +0,0 @@
-# 图表 [ G2 ] 旧
-
-::: tip
-此文档仅对 `1.1.0` 及其以下版本有效，`1.1.1` 开始变更了图表库
-:::
-
-## 介绍
-
-D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
-
-## 实现方式
-
-`src/components/charts/register.js` 为注册图表组件的文件
-
-`src/components/charts/G2` 为图表组件存放位置
-
-`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件，这是一个所有的图表组件都会使用的 mixin，这个 mixin 主要有以下用途
-
- - 将 G2 和 DataSet 绑定到 data 上，方便组件使用，省去重复 `import G2 from '@antv/g2'` 等
- - 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数，这些参数会在初始化图表时用到
- - 提供了额外的设置参数，比如自动高度，自动初始化，初始化延时
- - 关闭 G2 的体验改进计划打点请求
- - data 上的 chart 对象
- - 自动初始化(或者不初始化)图表
- - `creatChart` 方法，根据参数设置生成 data 上的 chart 对象
- - `resize` 方法
-
-在图表组件中使用这个 mixin 示例
-
-``` vue
-<template>
-  <!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
-  <div ref="chart" style="height: 100%;"></div>
-</template>
-
-<script>
-// 引入公用 mixin
-import G2 from '@/components/charts/G2/mixins/G2.js'
-export default {
-  mixins: [
-    G2
-  ],
-  methods: {
-    // 初始化图表
-    init () {
-      // mixin 中提供 creatChart 方法，这部分每个图表都一样
-      this.creatChart()
-      // 本组件的特殊设置 这部分每个图表不一样 你只需要改这部分内容
-      this.chart.source(this.data)
-      this.chart.coord().transpose()
-      this.chart.interval().position('x*y')
-      // 最后一步 渲染图表 这部分每个图表都一样
-      this.chart.render()
-    },
-    // 数据源改变 重新渲染新的数据
-    changeData () {
-      this.chart.changeData(this.data)
-    }
-  }
-}
-</script>
-```
-
-上面的代码段展示了如何使用 mixin 快速制作一个图表组件，只需根据某个图表的个性化需要，在组件中重新定义 `init` 和 `changeData` 方法即可
-
-你可以修改这个 mixin 去实现更多的功能，同时影响所有的图表组件
-
-::: tip
-这只仅仅是作者个人对于图表封装的一个实现思路
-:::
-
-## 为什么没有选择其他产品
-
-G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
-
-如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
--- a/docs/zh/components/container.md.REMOVED.git-id
+++ b/docs/zh/components/container.md.REMOVED.git-id
@@ -1 +0,0 @@
-be315dc4b20db4a72f9543b102c601365693b67d
--- a/docs/zh/ecosystem-d2-admin-ice/README.md
+++ b/docs/zh/ecosystem-d2-admin-ice/README.md
@@ -0,0 +1,7 @@
+# D2Admin ICE
+
+飞冰官方网站 [https://alibaba.github.io/ice](https://alibaba.github.io/ice)
+
+项目地址 [https://github.com/d2-projects/d2-admin-ice](https://github.com/d2-projects/d2-admin-ice)
+
+使用方法见 [https://juejin.im/post/5b6349716fb9a04f834669d6](https://juejin.im/post/5b6349716fb9a04f834669d6)
--- a/docs/zh/ecosystem-d2-admin-start-kit/README.md
+++ b/docs/zh/ecosystem-d2-admin-start-kit/README.md
@@ -0,0 +1,12 @@
+# D2Admin 项目起始模板
+
+项目地址 [https://github.com/d2-projects/d2-admin-start-kit](https://github.com/d2-projects/d2-admin-start-kit)
+
+只保留了基础功能，例如
+
+* 主题系统
+* 登陆和注销
+* 数据持久化
+* 多标签页
+* 菜单和路由逻辑
+* ...
--- a/docs/zh/ecosystem-d2-crud/README.md
+++ b/docs/zh/ecosystem-d2-crud/README.md
@@ -0,0 +1,3 @@
+# D2 CRUD
+
+介绍内容
--- a/docs/zh/ecosystem-d2-crud/api.md
+++ b/docs/zh/ecosystem-d2-crud/api.md
@@ -0,0 +1,9 @@
+# api
+
+## api-1
+
+hhh
+
+## api-2
+
+## api-3
--- a/docs/zh/ecosystem-d2-ribbons/README.md
+++ b/docs/zh/ecosystem-d2-ribbons/README.md
@@ -0,0 +1,91 @@
+---
+sidebar: auto
+---
+
+![banner](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/banner%402x.png)
+
+D2 Ribbons 是一套为开发者准备的开源社区绶带资源，你你可以下载图片到你的项目中使用或者直接使用仓库资源链接。
+
+项目地址 [https://github.com/d2-projects/d2-ribbons](https://github.com/d2-projects/d2-ribbons)
+
+## Features
+
+* 扁平化风格
+* Github Gitlab Gitee 三套图标
+* 六色主题
+* 半透明 / 不透明样式
+* 文字 / 图标样式
+* @2x 资源
+* 统一尺寸（150 x 150 / 300 x 300 @2x）
+* 附带 Github 经典样式的绶带
+
+## Story
+
+> 我想了想究竟是预览放在前面还是介绍放在前面，最后我觉得应该先写东西，因为预览图太多了
+
+萌生做这么一个项目是从做 [D2Admin](https://github.com/d2-projects/d2-admin) 的时候，我想给我的项目页面角落加一个 “Fork me on github”，然后我就找了几个开源项目想看看他们用的是什么图片，都不很理想，后来找到了 Github 官方的 ribbons，但是和我的项目风格不是很搭配，Github 官方的 ribbons 还是以前的拟物风格，我希望有一个比较“扁平化”的绶带放在上面，于是我就临时画了一个放上去了，长这个样子：
+
+![Snip20180711_32](http://fairyever.qiniudn.com/Snip20180711_32.png)
+
+于是之后我就画了大概半天的事件，画了一套 ribbons 给以后用，自己用，也希望大家能用到，不仅有 github，还有 gitlab 和码云的版本，暂时只做了这些，以后有好的想法了再添加。
+
+![Snip20180711_27](http://fairyever.qiniudn.com/Snip20180711_27.png)
+![Snip20180711_29](http://fairyever.qiniudn.com/Snip20180711_29.png)
+
+> 所有的东西都出自一个程序员之手，没有经过专业的设计学习，请大家觉得丑的话轻喷
+
+sketch 是我最喜欢的设计软件，推荐给大家。
+
+在设计这套图片的时候我也尽量发挥了 sketch 的特性，比如颜色配置，公用样式，symbol等很好用的功能，这些都可以达到改一处动全部和事半功倍的效果。
+
+下面放上效果预览：
+
+## Preview
+
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-opacity-text-github%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-text/github/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-text/github/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-opacity-text-gitlab%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-text/gitlab/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-text/gitlab/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-opacity-text-gitee%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-text/gitee/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-text/gitee/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-opacity-icon-github%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-icon/github/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-icon/github/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-opacity-icon-gitlab%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-icon/gitlab/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-icon/gitlab/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-opacity-icon-gitee%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-icon/gitee/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-opacity-icon/gitee/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-text-github%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-text/github/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-text/github/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-text-gitlab%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-text/gitlab/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-text/gitlab/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-text-gitee%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-text/gitee/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-text/gitee/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-icon-github%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-icon/github/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-icon/github/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-icon-gitlab%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-icon/gitlab/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-icon/gitlab/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-flat-icon-gitee%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-icon/gitee/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/flat-icon/gitee/right%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/doc/ribbons-classic-github%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/classic/github/left%402x.png)
+![](https://raw.githubusercontent.com/d2-projects/d2-ribbons/master/priview/classic/github/right%402x.png)
+
+## How to use
+
+没有固定的使用方法，都是图片，你可以下载下来用到你的项目里，或者直接使用本仓库的图片链接。每款绶带都有 @2x 版本
+
+后续还会陆续更新其它的图片资源。
+
+其实不论 github 还是码云，官方提供的都有类似的 ribbon，看个人喜好选择 D2 还是官方就好
--- a/docs/zh/guide/image/join@2x.png.REMOVED.git-id
+++ b/docs/zh/guide/image/join@2x.png.REMOVED.git-id
@@ -1 +0,0 @@
-f7a47389e6c0773e9d218227678ebb8850ea87e8
--- a/docs/zh/guide/image/preview@2x.png.REMOVED.git-id
+++ b/docs/zh/guide/image/preview@2x.png.REMOVED.git-id
@@ -1 +0,0 @@
-27e431bd9e4752dd51fe827a1281d606bd7bdf07
--- a/docs/zh/guide/question.md.REMOVED.git-id
+++ b/docs/zh/guide/question.md.REMOVED.git-id
@@ -1 +0,0 @@
-60313ac9834bcc8639358f7a6672dcfb18a3ec40
--- a/docs/zh/learn-guide/README.md
+++ b/docs/zh/learn-guide/README.md
@@ -7,9 +7,7 @@ D2Admin 是一个开源的管理系统前端集成方案
  <iframe src="//ghbtns.com/github-btn.html?user=d2-projects&repo=d2-admin&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
 </div>

-本项目仓库在 Github 和 Gitee 同步发布
-
-[中文文档](http://d2admin.fairyever.com/zh/)
+![](http://fairyever.qiniudn.com/20180821142809.png)

 **完整版**

@@ -23,23 +21,11 @@ D2Admin 是一个开源的管理系统前端集成方案
 [码云仓库](https://gitee.com/fairyever/d2-admin-start-kit) | 
 [预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index)

-![preview](./image/preview@2x.png)
+**飞冰物料**

-D2Admin 完整版集成了很多的插件和组件，首次加载会占用很多的时间，所以加入了首屏加载动画。
-
-如果您欣赏 D2Admin 的设计风格，希望基于它开发您的管理系统，**建议使用 [d2-admin-start-kit 简化模板](https://github.com/d2-projects/d2-admin-start-kit)**，简化版模板保留了所有的系统功能，包括登陆注销，主题切换，图标，数据持久化等。其它不必要的组件和插件您可以参照 D2Admin 完整版自行加入。
-
-如果您执意在完整版基础上开发，请您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件。
-
-D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 工作之余完完成（希望您看到这里，可以移步 [Github](https://github.com/d2-projects/d2-admin) 点个 star 支持我），如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`。
-
-![preview](./image/join@2x.png)
-
-::: tip Thanks
-D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日正式发布，39天时间 star 突破 1k ，在此对所有的 D2Admin 支持者表示感谢，项目将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论
-
-—— 2018年7月5日
-:::
+[D2Admin ICE](https://alibaba.github.io/ice/scaffold?type=vue) | 
+[介绍](https://juejin.im/post/5b6349716fb9a04f834669d6) | 
+[预览地址](https://fairyever.gitee.io/d2-admin-ice-preview)

 ## 功能

@@ -47,7 +33,6 @@ D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日
 * 首屏加载等待动画 避免首次加载白屏尴尬
 * 简约主题
 * 每个插件和组件都配有介绍文档
-* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
 * 登陆和注销
 * 根据路由自动生成菜单
 * 可折叠侧边栏
@@ -60,9 +45,8 @@ D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日
 * 图标选择器（组件）
 * 自动引入下载的 SVG 图标
 * 前端假数据支持（ mock ）
-* 集成蚂蚁金服出品的 G2 图表
-* 图表自适应可拖拽大小的卡片容器（示例）
 * 简化剪贴板操作
+* 集成图表插件
 * 时间日期计算工具
 * 导入 Excel （ xlsx 格式 + csv 格式 ）
 * 数据导出 Excel （ xlsx 格式 + csv 格式 ）
@@ -80,7 +64,6 @@ D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日
 * 自定义滚动条和滚动控制
 * 内置5种主题
 * 公用样式抽离，方便的主题定制
-* 支持百万级数据量的表格组件
 * 打包后随意目录部署（已经做好兼容设置）
 * 支持临时菜单配置
 * 提供“试验台”功能 方便展示系统功能调用方法 `1.1.4 +`
@@ -88,13 +71,16 @@ D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日
 * 美化滚动条 `1.1.4 +`
 * json view `1.1.4 +`
 * cookie 封装 `1.1.5 +`
-* 本地持久化存储封装，可根据用户区分存储 `1.1.5 +`
 * 多标签页全局控制 API `1.1.5 +`
 * 菜单全局控制 API `1.1.5 +`
+* 多标签页关闭控制支持右键菜单 `1.1.10 +`
+* 模块化全局状态管理 `1.2.0 +`
+* 多种数据持久化方式：区分用户，区分路由，页面数据快照功能 `1.2.0 +`
+* 支持跳出外部链接的菜单系统 `1.2.0 +`

 ## 目录结构

-```
+<pre style="padding: 0px; font-size: 12px;">
 ├─ dev
 │  └─ snippets 帮助开发的代码片段
 ├─ docs 文档
@@ -112,7 +98,8 @@ D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日
 │  ├─ router 路由
 │  ├─ store 全局状态
 │  ├─ App.vue
-│  └─ main.js
+│  ├─ main.js
+│  └─ setting.js 设置
 ├─ tests 单元测试
 ├─ .env 环境变量
 ├─ .env.development 环境变量 开发环境
@@ -126,31 +113,14 @@ D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日
 ├─ jest.config.js
 ├─ package.json
 └─ vue.config.js 配置文件
-```
+</pre>

-## 获取代码
+## Thanks

-有两种方式可以获得 D2Admin 的代码
+D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日正式发布，39天时间 star 突破 1k ，在此对所有的 D2Admin 支持者表示感谢，项目将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论

-* 在 [releases](https://github.com/d2-projects/d2-admin/releases) 页面下载最新的发行版。发行版一般是完成了某个大升级或者修复重要 bug 后发布的压缩包，你可以下载下来直接使用
+—— 2018年7月5日

-* Fork 仓库到你的 github 然后克隆到本地，然后使用 master 分支继续你的开发。这种方式得到的是最新的代码，但是会有未完成的新功能。**不建议使用这种方式**
+star 破 2k

-* 由于 github 访问较慢，推荐前往码云仓库下载 [gitee.com/fairyever/d2-admin](https://gitee.com/fairyever/d2-admin)，码云上的仓库**在每次发布版本或者修复 bug 才会更新**，所以如果你选择此方法，请直接 fork 仓库并克隆到本地
-
-> 码云的仓库由 github 同步，但是发行版和标签同步有一些问题，所以推荐直接 fork 仓库
-
-## 使用
-
-```
-// 安装依赖
-npm i
-
-// 运行
-npm run dev
-
-// 打包
-npm run build
-```
-
-> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html)
+—— 2018年8月7日
--- a/docs/zh/learn-guide/getting-started.md
+++ b/docs/zh/learn-guide/getting-started.md
@@ -4,28 +4,6 @@

 ![](http://fairyever.qiniudn.com/20180729102354.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim)

-## 前置知识
-
-使用 D2Admin 首先组要有以下前置知识：
-
-* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/)
-* 会使用 [vue.js](https://cn.vuejs.org/)
-
-如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手：
-
-* [ES6](http://es6.ruanyifeng.com/)
-* [sass](https://www.sass.hk/guide/)
-
-## 准备
-
-在上手之前，建议您先大致浏览以下章节，对整个系统有大致了解：
-
-* 每个页面最基础的构成部分：[页面容器](../components/container.md)
-* 一些会用到的全局数据和方法：[VUEX 实用工具](../plugins/vuex.md)
-* 一些会用到的公用方法：[Util 实用工具](../plugins/util.md)
-
-如果想了解更多 D2Admin 相关的教程和更新文章，可以参阅 [文章](../article/)
-
 ## 下载项目

 * 完整版仓库 [Github](https://github.com/d2-projects/d2-admin) | [码云](https://gitee.com/fairyever/d2-admin)
@@ -35,7 +13,7 @@
 挑选一个您喜欢的网站 Fork 代码到您的仓库，然后下载或克隆。

 ::: tip
-如果使用 Github 下载过慢，请参考 [常见问题](question.md)。
+如果使用 Github 下载过慢，请参考 [常见问题](/zh/question/)。
 :::

 我的建议是使用 **简化版起始模板** 因为在完整版的基础上做减法，要比在简化版基础上做加法复杂。
@@ -60,7 +38,7 @@

 安装完毕后检查版本（最好使用 node 8 版本）。

-``` sh
+```
 node -v
 v8.11.1
 npm -v
@@ -77,13 +55,13 @@ npm -v

 安装：

-``` sh
+```
 npm install -g nrm
 ```

 查看所有可用源：

-``` sh
+```
 nrm ls
 * npm -----  https://registry.npmjs.org/
  cnpm ----  http://r.cnpmjs.org/
@@ -95,7 +73,7 @@ nrm ls

 切换源：

-``` sh
+```
 nrm use taobao
 ```

@@ -103,7 +81,7 @@ nrm use taobao

 安装：

-``` sh
+```
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 ```

@@ -111,29 +89,29 @@ npm install -g cnpm --registry=https://registry.npm.taobao.org

 将终端切换到项目目录之后安装依赖：

-``` sh
+```
 npm i
 ```

-如果遇到问题比如 node-sass 安装不上，请参考 [常见问题](question.md)。
+如果遇到问题比如 node-sass 安装不上，请参考 [常见问题](/zh/question/)。

 ## 开发调试

 在项目目录内启动项目：

-``` sh
+```
 npm run dev
 ```

 或者使用：

-``` sh
+```
 npm start
 ```

 也可以使用 cli3 新推荐的命令：

-``` sh
+```
 npm run serve
 ```

@@ -161,7 +139,7 @@ npm run serve
 </template>
 ```

-上面的代码生成了一个带有 header 和 footer 的页面，页面内容只有一句话，如果您好奇为什么这么写，可以参考 [页面容器](../components/container.md)
+上面的代码生成了一个带有 header 和 footer 的页面，页面内容只有一句话，如果您好奇为什么这么写，可以参考 [页面容器](../sys-components/container.md)

 ![](http://fairyever.qiniudn.com/20180729095919.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim)

@@ -218,7 +196,7 @@ const frameIn = [
 `src/menu` 目录是菜单存放目录，里面的两个文件分别存放顶栏和侧边栏的菜单。

 ::: tip
-D2Admin 现在将顶栏和侧边栏菜单分别存放然后赋值的逻辑只是一个最简单的演示，请根据您的需要自己修改菜变化逻辑，您可以只用一行代码就可以动态更新菜单，方法见 [VUEX 实用工具](../plugins/vuex.md)。
+D2Admin 现在将顶栏和侧边栏菜单分别存放然后赋值的逻辑只是一个最简单的演示，请根据您的需要自己修改菜变化逻辑，您可以只用一行代码就可以动态更新菜单，方法见 [vuex](/zh/sys-vuex/)。
 :::

 打开 `src/menu/header.js` 添加新的菜单（高亮行）：
@@ -266,46 +244,3 @@ export default [
 ![](http://fairyever.qiniudn.com/20180729101708.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim)

 上述教程只是介绍了 D2Admin 的冰山一角，更多的配置项和组件文档请查阅本文档其它板块。
-
-如果您有疑问，请加 QQ 群 **806395827** 反馈。
-
-## 资源
-
-下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看：
-
-组件库：
-
-* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)
-
-项目基础：
-
-| 名称 | 介绍 |
-| --- | --- |
-| [vue.js](https://cn.vuejs.org/v2/guide/) | 框架基础 |
-| [vuex](https://vuex.vuejs.org/zh/guide/) | 全局状态管理 |
-| [vue-router](https://router.vuejs.org/zh/guide/) | 路由控制 |
-| [sass](https://www.sass.hk/guide/) | CSS 预处理语言 |
-
-脚手架：
-
-| 名称 | 介绍 |
-| --- | --- |
-| [vue-cli3](https://github.com/vuejs/vue-docs-zh-cn/tree/master/vue-cli) | 项目脚手架 |
-| [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) | vue-cli3 中 webpack 的配置语法 |
-
-插件：
-
-| 名称 | 介绍 |
-| --- | --- |
-| [axios](https://github.com/axios/axios) | 最流行的网络请求库 |
-| [better-scroll](https://github.com/ustbhuangyi/better-scroll) | [d2-container](../components/container.md) 的自定义滚动条依赖 |
-| [dayjs](https://github.com/iamkun/dayjs) | 日期处理库 |
-| [v-charts](https://v-charts.js.org/#/props) | vue 版本的 echarts 由饿了么开发 |
-| [echarts](http://echarts.baidu.com/index.html) | v-charts 的核心 |
-| [lowdb](https://github.com/typicode/lowdb) | D2Admin 操作本地数据的依赖 |
-| [mockjs](https://github.com/nuysoft/Mock/wiki) | 模拟请求依赖 |
-| [vue-i18n](https://kazupon.github.io/vue-i18n/guide/started.html) | 多国语依赖 |
-| [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 |
-| [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 |
-
-上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。
--- a/docs/zh/learn-knowledge/README.md
+++ b/docs/zh/learn-knowledge/README.md
@@ -0,0 +1,57 @@
+---
+sidebar: auto
+---
+
+# 相关知识
+
+使用 D2Admin 首先组要有以下前置知识：
+
+* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/)
+* 会使用 [vue.js](https://cn.vuejs.org/)
+
+如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手：
+
+* [ES6](http://es6.ruanyifeng.com/)
+* [sass](https://www.sass.hk/guide/)
+
+## 资源
+
+下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看：
+
+组件库：
+
+* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)
+
+项目基础：
+
+| 名称 | 介绍 |
+| --- | --- |
+| [vue.js](https://cn.vuejs.org/v2/guide/) | 框架基础 |
+| [vuex](https://vuex.vuejs.org/zh/guide/) | 全局状态管理 |
+| [vue-router](https://router.vuejs.org/zh/guide/) | 路由控制 |
+| [sass](https://www.sass.hk/guide/) | CSS 预处理语言 |
+
+脚手架：
+
+| 名称 | 介绍 |
+| --- | --- |
+| [vue-cli3](https://cli.vuejs.org/zh/) | 项目脚手架 |
+| [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) | vue-cli3 中 webpack 的配置语法 |
+
+插件：
+
+| 名称 | 介绍 |
+| --- | --- |
+| [lodash](https://lodash.com/docs/4.17.10) | 一致性、模块化、高性能的 JavaScript 实用工具库 |
+| [axios](https://github.com/axios/axios) | 最流行的网络请求库 |
+| [better-scroll](https://github.com/ustbhuangyi/better-scroll) | [d2-container](../sys-components/container.md) 的自定义滚动条依赖 |
+| [dayjs](https://github.com/iamkun/dayjs) | 日期处理库 |
+| [v-charts](https://v-charts.js.org/#/props) | vue 版本的 echarts 由饿了么开发 |
+| [echarts](http://echarts.baidu.com/index.html) | v-charts 的核心 |
+| [lowdb](https://github.com/typicode/lowdb) | D2Admin 操作本地数据的依赖 |
+| [mockjs](https://github.com/nuysoft/Mock/wiki) | 模拟请求依赖 |
+| [vue-i18n](https://kazupon.github.io/vue-i18n/guide/started.html) | 多国语依赖 |
+| [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 |
+| [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 |
+
+上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。
--- a/docs/zh/others/README.md
+++ b/docs/zh/others/README.md
@@ -1,3 +0,0 @@
-# 其它
-
-这里主要是介绍一些其它的信息
--- a/docs/zh/plagiarize/README.md
+++ b/docs/zh/plagiarize/README.md
@@ -1,5 +1,5 @@
 ---
-sidebarDepth: 3
+sidebar: auto
 ---

 # 借鉴 D2Admin 的项目
--- a/docs/zh/plugins/vuex.md.REMOVED.git-id
+++ b/docs/zh/plugins/vuex.md.REMOVED.git-id
@@ -1 +0,0 @@
-913aab0c851084536806be4b44bae511e5810df4
--- a/docs/zh/question/README.md.REMOVED.git-id
+++ b/docs/zh/question/README.md.REMOVED.git-id
@@ -0,0 +1 @@
+99c8b3f602498f3dacc3b8503d8dfad58e47430b
--- a/docs/zh/sys-cli3-webpack/README.md.REMOVED.git-id
+++ b/docs/zh/sys-cli3-webpack/README.md.REMOVED.git-id
@@ -0,0 +1 @@
+1ad656c02671d6f1ab2e1bb10adfd45f48f96abc
--- a/docs/zh/sys-components/README.md
+++ b/docs/zh/sys-components/README.md
@@ -1,3 +1,3 @@
-# 组件概述
+# 组件

 d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入
--- a/docs/zh/sys-components/charts.md
+++ b/docs/zh/sys-components/charts.md
@@ -1,4 +1,6 @@
-# 图表 [ v-charts ] 新
+# v-charts
+
+图表组件

 ::: tip
 `1.1.0` 版本使用的是 `G2` 图表库，`1.1.3` 开始使用 `v-charts`
--- a/docs/zh/sys-components/container.md.REMOVED.git-id
+++ b/docs/zh/sys-components/container.md.REMOVED.git-id
@@ -0,0 +1 @@
+a9e6a61590987cd12d1cdfbc28bdf44fae14da06
--- a/docs/zh/sys-components/count-up.md
+++ b/docs/zh/sys-components/count-up.md
@@ -1,4 +1,6 @@
-# 数字动画
+# d2-count-up
+
+数字动画组件

 ## 参数

--- a/docs/zh/sys-components/highlight.md
+++ b/docs/zh/sys-components/highlight.md
@@ -1,4 +1,6 @@
-# 代码高亮
+# d2-highlight
+
+代码高亮显示组件

 ## 参数

--- a/docs/zh/sys-components/icon-select.md
+++ b/docs/zh/sys-components/icon-select.md
@@ -1,4 +1,6 @@
-# 图标 - 选择器
+# d2-icon-select
+
+图标选择器组件

 ## 参数

--- a/docs/zh/sys-components/icon-svg.md
+++ b/docs/zh/sys-components/icon-svg.md
@@ -1,4 +1,6 @@
-# 图标 - SVG
+# d2-icon-svg
+
+SVG 图标组件

 ## 参数

--- a/docs/zh/sys-components/icon.md
+++ b/docs/zh/sys-components/icon.md
@@ -1,4 +1,6 @@
-# 图标
+# d2-icon
+
+图标组件

 ## 参数

--- a/docs/zh/sys-components/image/baiduyun.png.REMOVED.git-id
+++ b/docs/zh/sys-components/image/baiduyun.png.REMOVED.git-id
--- a/docs/zh/sys-components/markdown.md
+++ b/docs/zh/sys-components/markdown.md
@@ -1,4 +1,6 @@
-# markdown 渲染器
+# d2-markdown
+
+markdown 渲染器组件

 ## 参数

--- a/docs/zh/sys-css/README.md
+++ b/docs/zh/sys-css/README.md
@@ -1,12 +1,16 @@
-# CSS 工具类
+---
+sidebar: auto
+---
+
+# CSS 实用类

 ## 样式

 | 类名 | 效果 |
 | --- | --- |
-| `.d2-card` | 将该 class 添加至 el-card 组件上使其有跟随主题变化的样式 |
+| `.d2-card` | 使 el-card 组件样式跟随主题变化 |

-`.d2-card` 示例
+* `.d2-card` 示例

 ``` vue
 <el-card shadow="never" class="d2-card">
--- a/docs/zh/sys-db/README.md.REMOVED.git-id
+++ b/docs/zh/sys-db/README.md.REMOVED.git-id
@@ -0,0 +1 @@
+f859e2952f21e7ee100da4dc863f96f721bb439c
--- a/docs/zh/sys-menu/README.md
+++ b/docs/zh/sys-menu/README.md
@@ -0,0 +1,59 @@
+---
+sidebar: auto
+---
+
+# 菜单
+
+D2Admin 的顶栏菜单和侧边栏菜单相互独立互不影响。
+
+## 数据源
+
+顶栏数据使用 `$store.state.d2admin.menu.header` 作为数据源。[API](../sys-vuex/#state-header)
+
+侧栏数据使用 `$store.state.d2admin.menu.aside` 作为数据源。[API](../sys-vuex/#state-aside)
+
+## 设置菜单
+
+顶栏使用 `$store.commit('d2admin/menu/headerSet', menu)` 更新数据源。[API](../sys-vuex/#mutations-headerset)
+
+侧栏使用 `$store.commit('d2admin/menu/asideSet', menu)` 更新数据源。[API](../sys-vuex/#mutations-asideset)
+
+menu 的数据格式见 [menu 数据格式](../sys-vuex/#mutations-headerset)
+
+## 菜单联动
+
+首先请明确一点，D2Admin 完整版的菜单联动只是一个简单方案，不要拘泥于此演示，下面介绍完整版联动的实现帮助您更快速实现自己的联动方案：
+
+设置数据源
+
+在 `d2-admin/src/menu/index.js` 中导出了两个变量，分别是：
+
+* menuAside 预备侧边栏菜单
+* menuHeader 顶栏菜单
+
+在 main.js 中使用下面的方式导入
+
+``` js
+import { menuHeader, menuAside } from '@/menu'
+```
+
+menuHeader 在初始化根实例时在 created 生命周期直接赋值给顶栏菜单
+
+``` js
+this.$store.commit('d2admin/menu/headerSet', menuHeader)
+```
+
+然后在根实例中添加 $route.matched 的监听器
+
+``` js
+watch: {
+  '$route.matched' (val) {
+    const _side = menuAside.filter(menu => menu.path === val[0].path)
+    this.$store.commit('d2admin/menu/asideSet', _side.length > 0 ? _side[0].children : [])
+  }
+}
+```
+
+这段代码的作用是当路由改变时，根据当前的路由找到 menuAside 中匹配当前路由对象中顶级路由的那个项目，并且赋值给侧边栏菜单达到联动效果。
+
+您可以删除这部分代码，随意使用 vuex 中提供的顶栏和侧边栏菜单的设置方法来实现自己的菜单联动。
--- a/docs/zh/sys-multi-page/README.md
+++ b/docs/zh/sys-multi-page/README.md
@@ -0,0 +1,30 @@
+---
+sidebar: auto
+---
+
+# 多页面
+
+D2Admin 默认支持多页面，并且支持多页面控制器上的 tab 标签页右键菜单控制，可以实现“关闭全部”，“关闭其它”，“关闭左侧”，“关闭右侧”的功能。
+
+## 注册页面
+
+D2Admin 的多页面设置源头在 `d2-admin/src/router/routes.js`，该文件导出了一个 `frameInRoutes` 变量，`d2-admin/src/main.js` 中使用下面的方式导入：
+
+``` js
+import { frameInRoutes } from '@/router/routes'
+```
+
+然后在根实例中加入了一个名为 `getAllPageFromRoutes` 的方法，该方法在 `created` 生命周期调用，递归处理 `frameInRoutes` 中的数据将支持多标签页显示所有页面数据扁平为一位数组，然后使用：
+
+``` js
+$store.commit('d2admin/page/poolSet', pool)
+```
+将得到的路由数据存储到 vuex 中备用。这份数据在操作多页面数据时会使用到。
+
+## 触发
+
+新建页面的触发在 `d2-admin/src/router/index.js` 中的 `router.afterEach` 钩子中。涉及的方法参见 [API](../sys-vuex/#page)
+
+## 标签页控制
+
+标签页组件在 `d2-admin/src/layout/header-aside/components/tabs/index.vue`，该组件实现多页面的各种关闭控制。涉及的方法参见 [API](../sys-vuex/#page)
--- a/docs/zh/sys-plugins/README.md
+++ b/docs/zh/sys-plugins/README.md
--- a/docs/zh/sys-plugins/console.md
+++ b/docs/zh/sys-plugins/console.md
@@ -0,0 +1,51 @@
+# 控制台打印优化
+
+使用 $log 可以在控制台输出美观的日志信息
+
+<img src="http://fairyever.qiniudn.com/20180821133308.png" style="width: 260px; border: 1px solid #eaecef;"/>
+
+## 胶囊
+
+此方法打印一行“胶囊”样式的信息，即上图前四条
+
+**参数：**
+
+$log.capsule( `左侧文字`, `右侧文字`, `主题样式` )
+
+**示例：**
+
+``` js
+this.$log.capsule('title', 'success', 'success')
+```
+
+## 彩色文字
+
+此方法可以随意组合打印文字的颜色顺序
+
+``` js
+this.$log.colorful([
+  { text: 'H', type: 'default' },
+  { text: 'e', type: 'primary' },
+  { text: 'l', type: 'success' },
+  { text: 'l', type: 'warning' },
+  { text: 'o', type: 'danger' }
+])
+```
+
+上面的代码效果为效果图中第五行
+
+## 快速方法
+
+* $log.default
+* $log.primary
+* $log.success
+* $log.warning
+* $log.danger
+
+**示例：**
+
+``` js
+this.$log.primary('primary style')
+```
+
+这五个快速方法的效果为效果图中第六至十行
--- a/docs/zh/sys-plugins/data-export.md
+++ b/docs/zh/sys-plugins/data-export.md
--- a/docs/zh/sys-plugins/data-import.md
+++ b/docs/zh/sys-plugins/data-import.md
--- a/docs/zh/sys-plugins/error.md
+++ b/docs/zh/sys-plugins/error.md
@@ -0,0 +1,13 @@
+# 错误捕捉
+
+框架内已经做好错误捕捉处理，您不需要任何设置，当发生一个错误时，错误会被自动记录在日志中，并且在控制台显示相关错误信息。
+
+日志查看界面：
+
+![](http://fairyever.qiniudn.com/20180820173544.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim)
+
+控制台输出：
+
+> 只在开发模式下输出
+
+![](http://fairyever.qiniudn.com/20180820172927.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim)
--- a/docs/zh/sys-plugins/i18n.md
+++ b/docs/zh/sys-plugins/i18n.md
--- a/docs/zh/sys-plugins/log.md
+++ b/docs/zh/sys-plugins/log.md
@@ -0,0 +1,17 @@
+# 日志
+
+使用 $logAdd 可以快速记录日志
+
+示例：
+
+![](http://fairyever.qiniudn.com/20180820174810.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim)
+
+查看日志：
+
+![](http://fairyever.qiniudn.com/20180820174524.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim)
+
+使用方式：
+
+``` js
+this.$logAdd('your log text')
+```
--- a/docs/zh/sys-plugins/mock.md
+++ b/docs/zh/sys-plugins/mock.md
@@ -1,6 +1,6 @@
 # 模拟数据

-在 `src/mock/demo/001.js` 配置拦截返回的数据
+使用模拟数据可以在接口还没做好的时候更方便地进行你的开发

 ## 使用

--- a/docs/zh/sys-route/README.md
+++ b/docs/zh/sys-route/README.md
@@ -0,0 +1,76 @@
+---
+sidebar: auto
+---
+
+# 路由
+
+## 数据
+
+完整版的 D2Admin 路由设置文件在 `d2-admin/src/router/routes.js`。
+
+需要注意的是大多数路由设置要写在 frameIn 下。frameIn 中的页面会在嵌套在一个包含顶栏和侧边栏的页面布局中显示。
+
+## 路由配置
+
+路由注册和钩子设置文件为 `d2-admin/src/router/index.js`，此文件中将 `routes.js` 中导出的 routes 变量注册到路由，并且设置后续的路由拦截和登陆状态判断，多页面的新建页面事件触发也来自这里。该文件再导出注册了所有页面的路由实例，在 `main.js` 中注册到 vue 根实例。
+
+## 路由缓存
+
+路由缓存默认为开启状态，页面组件会被 keepAlive，如果想禁用某个页面的缓存，请在该路由配置的 meta 中加入：
+
+``` js
+meta: {
+  notCache: true
+}
+```
+
+最后结果类似这样：
+
+``` js {7}
+{
+	path: '/page-cache/off',
+	name: 'page-cache-off',
+	component: () => import('xxx.vue'),
+	meta: {
+    requiresAuth: true,
+		notCache: true,
+		title: '关闭缓存'
+	}
+}
+```
+
+虽然所有的路由默认都是开启缓存的，但是还需要遵守一个约定才可以正确缓存页面：
+
+**页面组件必须有 name 字段，并且 name 字段的值和该路由的 name 字段一致。**
+
+例如：
+
+页面文件：
+
+``` vue {9}
+<template>
+  <d2-container>
+    Hello World
+  </d2-container>
+</template>
+
+<script>
+export default {
+  name: 'page-cache-on'
+}
+</script>
+```
+
+路由设置：
+
+``` js {3}
+{
+	path: '/page-cache/on',
+	name: 'page-cache-on',
+	component: () => import('xxx.vue'),
+	meta: {
+    requiresAuth: true,
+		title: '开启缓存'
+	}
+}
+```
--- a/docs/zh/sys-util/README.md
+++ b/docs/zh/sys-util/README.md
@@ -1,9 +1,11 @@
+---
+sidebar: auto
+---
+
 # Util 实用工具

 D2Admin 的 util 模块位置：`d2-admin/src/libs/util.js`

-下面列举您在开发中很有可能会用到的 util 模块方法。这并不是模块的全部内容，如果您有兴趣可以亲自浏览模块代码。
-
 ## util.cookies.set

 **介绍：**
@@ -144,6 +146,24 @@ util.title('NewTitle')
 `process.env.VUE_APP_TITLE` 在 `d2-admin/.env` 和 `d2-admin/.env.development` 中设置
 :::

+## util.open
+
+**介绍：**
+
+打开新页面
+
+**参数**
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| url | 新的页面地址 | 必选 | String |  |  |
+
+**使用示例：**
+
+``` js
+util.open('http://www.xxx.com')
+```
+
 ## util.ua

 **介绍：**
--- a/docs/zh/sys-vuex/README.md.REMOVED.git-id
+++ b/docs/zh/sys-vuex/README.md.REMOVED.git-id
@@ -0,0 +1 @@
+33948f39bdcc1391fd42429bd95b3b98c167fb23
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,5 +18,6 @@ module.exports = {
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
-  ]
+  ],
+  testURL: 'http://localhost/'
 }
--- a/package-lock.json.REMOVED.git-id
+++ b/package-lock.json.REMOVED.git-id
@@ -0,0 +1 @@
+208665c165b32daf4021f61c3ad430a972cb9735
--- a/package.json
+++ b/package.json
@@ -26,10 +26,7 @@
    "github-markdown-css": "^2.10.0",
    "highlight.js": "^9.12.0",
    "js-cookie": "^2.2.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.get": "^4.4.2",
-    "lodash.sortby": "^4.7.0",
-    "lodash.uniqueid": "^4.0.1",
+    "lodash": "^4.17.10",
    "lowdb": "^1.0.0",
    "marked": "^0.3.9",
    "mockjs": "^1.0.1-beta3",
@@ -41,7 +38,7 @@
    "ua-parser-js": "^0.7.18",
    "v-charts": "^1.17.6",
    "v-contextmenu": "^2.7.0",
-    "vue": "^2.5.16",
+    "vue": "^2.5.17",
    "vue-grid-layout": "^2.1.11",
    "vue-i18n": "^7.4.2",
    "vue-json-tree-view": "^2.1.4",
@@ -52,23 +49,32 @@
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",
-    "@vue/cli-plugin-babel": "^3.0.0-rc.4",
-    "@vue/cli-plugin-eslint": "^3.0.0-rc.4",
-    "@vue/cli-plugin-unit-jest": "^3.0.0-rc.4",
-    "@vue/cli-service": "^3.0.0-rc.4",
-    "@vue/eslint-config-standard": "^3.0.0-rc.4",
+    "@vue/cli-plugin-babel": "^3.0.0",
+    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@vue/cli-plugin-unit-jest": "^3.0.0",
+    "@vue/cli-service": "^3.0.0",
+    "@vue/eslint-config-standard": "^3.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.0.1",
+    "lint-staged": "^7.2.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "svg-sprite-loader": "^3.8.0",
    "text-loader": "0.0.1",
-    "vue-template-compiler": "^2.5.16"
+    "vue-template-compiler": "^2.5.17"
  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "vue-cli-service lint",
+      "git add"
+    ],
+    "*.vue": [
+      "vue-cli-service lint",
+      "git add"
    ]
+  }
 }
--- a/src/assets/style/theme/list.js
+++ b/src/assets/style/theme/list.js
@@ -1,29 +0,0 @@
-export default [
-  {
-    title: 'd2admin 经典',
-    name: 'd2',
-    preview: 'image/theme/d2/preview@2x.png'
-  },
-  {
-    title: '紫罗兰',
-    name: 'violet',
-    preview: 'image/theme/violet/preview@2x.png'
-  },
-  {
-    title: '简约线条',
-    name: 'line',
-    backgroundImage: 'image/theme/line/bg.jpg',
-    preview: 'image/theme/line/preview@2x.png'
-  },
-  {
-    title: '流星',
-    name: 'star',
-    backgroundImage: 'image/theme/star/bg.jpg',
-    preview: 'image/theme/star/preview@2x.png'
-  },
-  {
-    title: 'Tomorrow Night Blue (vsCode)',
-    name: 'tomorrow-night-blue',
-    preview: 'image/theme/tomorrow-night-blue/preview@2x.png'
-  }
-]
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-d08a658f8695d60d5eab3a4e0afa4e9e5f728c38
+87fff7214e7b64123842f1f52b649a8af614eb46
--- a/src/assets/svg-icons/icons/添加.svg
+++ b/src/assets/svg-icons/icons/添加.svg
--- a/src/assets/svg-icons/icons/闹钟.svg
+++ b/src/assets/svg-icons/icons/闹钟.svg
--- a/src/assets/svg-icons/icons/camera.svg
+++ b/src/assets/svg-icons/icons/camera.svg
--- a/src/assets/svg-icons/icons/history.svg
+++ b/src/assets/svg-icons/icons/history.svg
--- a/src/assets/svg-icons/icons/点赞.svg
+++ b/src/assets/svg-icons/icons/点赞.svg
--- a/src/assets/svg-icons/icons/喜欢.svg
+++ b/src/assets/svg-icons/icons/喜欢.svg
--- a/src/assets/svg-icons/icons/message.svg
+++ b/src/assets/svg-icons/icons/message.svg
--- a/src/assets/svg-icons/icons/notice.svg
+++ b/src/assets/svg-icons/icons/notice.svg
--- a/src/assets/svg-icons/icons/search.svg
+++ b/src/assets/svg-icons/icons/search.svg
--- a/src/assets/svg-icons/icons/分享.svg
+++ b/src/assets/svg-icons/icons/分享.svg
--- a/src/assets/svg-icons/icons/星标.svg
+++ b/src/assets/svg-icons/icons/星标.svg
--- a/src/assets/svg-icons/icons/用户.svg
+++ b/src/assets/svg-icons/icons/用户.svg
--- a/src/components/d2-container/components/mixins/bs.js
+++ b/src/components/d2-container/components/mixins/bs.js
@@ -29,8 +29,12 @@ export default {
      }, this.betterScrollOptions))
    },
    scrollDestroy () {
-      if (this.BS) {
+      // https://github.com/d2-projects/d2-admin/issues/75
+      try {
        this.BS.destroy()
+      } catch (e) {
+        delete this.BS
+        this.BS = null
      }
    }
  }
--- a/src/components/d2-page-cover/index.vue
+++ b/src/components/d2-page-cover/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="page-cover">
-    <div class="page-cover__logo">
+  <div class="d2-page-cover">
+    <div class="d2-page-cover__logo">
      <slot/>
    </div>
-    <p class="page-cover__title">{{title}}</p>
-    <p class="page-cover__sub-title d2-mt-0">{{subTitle}}</p>
+    <p class="d2-page-cover__title">{{title}}</p>
+    <p class="d2-page-cover__sub-title d2-mt-0">{{subTitle}}</p>
    <slot name="footer"/>
    <a target="blank" href="https://github.com/d2-projects/d2-admin">
      <img
@@ -34,29 +34,22 @@ export default {

 <style lang="scss" scoped>
@import '~@/assets/style/public.scss';
-.page-index-article-header {
-  overflow: hidden;
-  .page-index-article-header__title {
-    display: inline-block;
-    padding: 12px 20px;
-  }
-}
-.page-cover {
+.d2-page-cover {
  @extend %full;
  @extend %unable-select;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
-  .page-cover__logo {
+  .d2-page-cover__logo {
    img {
      width: 200px;
    }
  }
-  .page-cover__title {
+  .d2-page-cover__title {
    color: $color-text-main;
  }
-  .page-cover__sub-title {
+  .d2-page-cover__sub-title {
    color: $color-text-sub;
  }
 }
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,22 +1,13 @@
 import Vue from 'vue'

-import { GridLayout, GridItem } from 'vue-grid-layout'
-import SplitPane from 'vue-splitpane'
-
 import d2Container from './d2-container'
 import d2LinkBtn from './d2-link-btn'

 // 注意 有些组件使用异步加载会有影响
-
-Vue.component('d2-grid-layout', GridLayout)
-Vue.component('d2-grid-item', GridItem)
-Vue.component('SplitPane', SplitPane)
-
 Vue.component('d2-container', d2Container)
 Vue.component('d2-link-btn', d2LinkBtn)
 Vue.component('d2-page-cover', () => import('./d2-page-cover'))
 Vue.component('d2-count-up', () => import('./d2-count-up'))
-Vue.component('d2-error-log-list', () => import('./d2-error-log-list'))
 Vue.component('d2-highlight', () => import('./d2-highlight'))
 Vue.component('d2-icon', () => import('./d2-icon'))
 Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
--- a/src/layout/header-aside/components/components/menu-item/index.vue
+++ b/src/layout/header-aside/components/components/menu-item/index.vue
@@ -1,12 +1,16 @@
 <template>
-  <el-menu-item :index="menu.path || uniqueid">
-    <i :class="`fa fa-${menu.icon || 'file-o'}`"></i>
+  <el-menu-item :index="menu.path || uniqueId">
+    <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
+    <i v-else-if="menu.iconSvg">
+      <d2-icon-svg :name="menu.iconSvg"/>
+    </i>
+    <i v-else class="fa fa-file-o"></i>
    <span slot="title">{{menu.title || '未命名菜单'}}</span>
  </el-menu-item>
 </template>

 <script>
-import uniqueid from 'lodash.uniqueid'
+import { uniqueId } from 'lodash'
 export default {
  name: 'd2-layout-header-aside-menu-item',
  props: {
@@ -18,7 +22,7 @@ export default {
  },
  data () {
    return {
-      uniqueid: uniqueid('d2-menu-empty-')
+      uniqueId: uniqueId('d2-menu-empty-')
    }
  }
 }
--- a/src/layout/header-aside/components/components/menu-sub/index.vue
+++ b/src/layout/header-aside/components/components/menu-sub/index.vue
@@ -1,7 +1,11 @@
 <template>
-  <el-submenu :index="menu.path || uniqueid">
+  <el-submenu :index="menu.path || uniqueId">
    <template slot="title">
-      <i :class="`fa fa-${menu.icon || 'folder-o'}`"></i>
+      <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
+      <i v-else-if="menu.iconSvg">
+        <d2-icon-svg :name="menu.iconSvg"/>
+      </i>
+      <i v-else class="fa fa-folder-o"></i>
      <span slot="title">{{menu.title}}</span>
    </template>
    <template v-for="(child, childIndex) in menu.children">
@@ -12,7 +16,7 @@
 </template>

 <script>
-import uniqueid from 'lodash.uniqueid'
+import { uniqueId } from 'lodash'
 // 组件
 import d2LayoutMainMenuItem from '../menu-item'

@@ -30,7 +34,7 @@ export default {
  },
  data () {
    return {
-      uniqueid: uniqueid('d2-menu-empty-')
+      uniqueId: uniqueId('d2-menu-empty-')
    }
  }
 }
--- a/src/layout/header-aside/components/header-error-log/components/list/components/ExpandItem/index.vue
+++ b/src/layout/header-aside/components/header-error-log/components/list/components/ExpandItem/index.vue
--- a/src/layout/header-aside/components/header-error-log/components/list/index.vue
+++ b/src/layout/header-aside/components/header-error-log/components/list/index.vue
@@ -116,7 +116,7 @@

    <el-table-column
      label="错误信息"
-      width="140px">
+      width="300px">
      <template
        slot-scope="scope">
        {{get(scope.row.err, 'message', '')}}
@@ -128,7 +128,7 @@

 <script>
 import { mapState } from 'vuex'
-import get from 'lodash.get'
+import { get } from 'lodash'
 import ExpandItem from './components/ExpandItem'
 export default {
  name: 'd2-error-log-list',
@@ -136,15 +136,15 @@ export default {
    ExpandItem
  },
  computed: {
-    ...mapState({
-      log: state => state.d2admin.log
+    ...mapState('d2admin', {
+      logList: state => state.log.list
    }),
    logReverse () {
      // 直接 reverse 的话有点问题
      const res = []
-      const loglength = this.log.length
-      this.log.forEach((log, index) => {
-        res.push(this.log[loglength - 1 - index])
+      const loglength = this.logList.length
+      this.logList.forEach((log, index) => {
+        res.push(this.logList[loglength - 1 - index])
      })
      return res
    }
--- a/src/layout/header-aside/components/header-error-log/index.vue
+++ b/src/layout/header-aside/components/header-error-log/index.vue
@@ -9,12 +9,12 @@
        type="text"
        @click="handleClick">
        <el-badge
-          v-if="d2adminLogLength > 0"
+          v-if="logLength > 0"
          :max="99"
-          :value="d2adminLogErrorLength"
-          :is-dot="d2adminLogErrorLength === 0">
+          :value="logLengthError"
+          :is-dot="logLengthError === 0">
          <d2-icon
-            :name="d2adminLogErrorLength === 0 ? 'dot-circle-o' : 'bug'"
+            :name="logLengthError === 0 ? 'dot-circle-o' : 'bug'"
            style="font-size: 20px"/>
        </el-badge>
        <d2-icon
@@ -34,7 +34,6 @@
          清空
        </el-button>
      </div>
-
      <d2-error-log-list/>
    </el-dialog>
  </div>
@@ -42,37 +41,41 @@

 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import D2ErrorLogList from './components/list'
 export default {
+  components: {
+    D2ErrorLogList
+  },
  data () {
    return {
      dialogVisible: false
    }
  },
  computed: {
-    ...mapGetters([
-      'd2adminLogLength',
-      'd2adminLogErrorLength'
-    ]),
+    ...mapGetters('d2admin', {
+      logLength: 'log/length',
+      logLengthError: 'log/lengthError'
+    }),
    tooltipContent () {
-      return this.d2adminLogLength === 0
+      return this.logLength === 0
        ? '没有日志或异常'
-        : `${this.d2adminLogLength} 条日志${this.d2adminLogErrorLength > 0
-          ? ` | 包含 ${this.d2adminLogErrorLength} 个异常`
+        : `${this.logLength} 条日志${this.logLengthError > 0
+          ? ` | 包含 ${this.logLengthError} 个异常`
          : ''}`
    }
  },
  methods: {
-    ...mapMutations([
-      'd2adminLogClean'
+    ...mapMutations('d2admin/log', [
+      'clean'
    ]),
    handleClick () {
-      if (this.d2adminLogLength > 0) {
+      if (this.logLength > 0) {
        this.dialogVisible = true
      }
    },
    handleLogClean () {
      this.dialogVisible = false
-      this.d2adminLogClean()
+      this.clean()
    }
  }
 }
--- a/src/layout/header-aside/components/header-fullscreen/index.vue
+++ b/src/layout/header-aside/components/header-fullscreen/index.vue
@@ -1,10 +1,10 @@
 <template>
  <el-tooltip
    effect="dark"
-    :content="isFullScreen ? '退出全屏' : '全屏'"
+    :content="active ? '退出全屏' : '全屏'"
    placement="bottom">
-    <el-button class="d2-mr btn-text can-hover" type="text" @click="d2adminFullScreenToggle">
-      <d2-icon v-if="isFullScreen" name="compress"/>
+    <el-button class="d2-mr btn-text can-hover" type="text" @click="toggle">
+      <d2-icon v-if="active" name="compress"/>
      <d2-icon v-else name="arrows-alt" style="font-size: 16px"/>
    </el-button>
  </el-tooltip>
@@ -14,13 +14,13 @@
 import { mapState, mapMutations } from 'vuex'
 export default {
  computed: {
-    ...mapState({
-      isFullScreen: state => state.d2admin.isFullScreen
-    })
+    ...mapState('d2admin/fullscreen', [
+      'active'
+    ])
  },
  methods: {
-    ...mapMutations([
-      'd2adminFullScreenToggle'
+    ...mapMutations('d2admin/fullscreen', [
+      'toggle'
    ])
  }
 }
--- a/src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue
+++ b/src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="themeList" v-bind="table">
+  <el-table :data="list" v-bind="table">
    <el-table-column prop="title" align="center" width="160"/>
    <el-table-column label="预览" width="120">
      <div
@@ -10,7 +10,7 @@
    </el-table-column>
    <el-table-column prop="address" align="center">
      <template slot-scope="scope">
-        <el-button v-if="themeActiveName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
+        <el-button v-if="activeName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
        <el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
      </template>
    </el-table-column>
@@ -30,17 +30,17 @@ export default {
    }
  },
  computed: {
-    ...mapState({
-      themeList: state => state.d2admin.themeList,
-      themeActiveName: state => state.d2admin.themeActiveName
-    })
+    ...mapState('d2admin/theme', [
+      'list',
+      'activeName'
+    ])
  },
  methods: {
-    ...mapMutations([
-      'd2adminThemeSet'
+    ...mapMutations('d2admin/theme', [
+      'set'
    ]),
    handleSelectTheme (name) {
-      this.d2adminThemeSet(name)
+      this.set(name)
    }
  }
 }
--- a/src/layout/header-aside/components/header-user/index.vue
+++ b/src/layout/header-aside/components/header-user/index.vue
@@ -1,6 +1,6 @@
 <template>
  <el-dropdown class="d2-mr">
-    <span class="btn-text">你好 {{userInfo.name}}</span>
+    <span class="btn-text">你好 {{info.name}}</span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="logOff">
        <d2-icon name="power-off" class="d2-mr-5"/>
@@ -14,19 +14,19 @@
 import { mapState, mapActions } from 'vuex'
 export default {
  computed: {
-    ...mapState({
-      userInfo: state => state.d2admin.userInfo
-    })
+    ...mapState('d2admin/user', [
+      'info'
+    ])
  },
  methods: {
-    ...mapActions([
-      'd2adminLogout'
+    ...mapActions('d2admin/account', [
+      'logout'
    ]),
    /**
     * @description 登出
     */
    logOff () {
-      this.d2adminLogout({
+      this.logout({
        vm: this,
        confirm: true
      })
--- a/src/layout/header-aside/components/menu-header/index.vue
+++ b/src/layout/header-aside/components/menu-header/index.vue
@@ -1,6 +1,6 @@
 <template>
  <el-menu mode="horizontal" @select="handleMenuSelect">
-    <template v-for="(menu, menuIndex) in menuHeader">
+    <template v-for="(menu, menuIndex) in header">
      <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
      <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
    </template>
@@ -22,9 +22,9 @@ export default {
    'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
  },
  computed: {
-    ...mapState({
-      menuHeader: state => state.d2admin.menuHeader
-    })
+    ...mapState('d2admin/menu', [
+      'header'
+    ])
  }
 }
 </script>
--- a/src/layout/header-aside/components/menu-side/index.vue
+++ b/src/layout/header-aside/components/menu-side/index.vue
@@ -1,17 +1,17 @@
 <template>
  <div class="d2-layout-header-aside-menu-side">
    <el-menu
-      :collapse="isMenuAsideCollapse"
+      :collapse="asideCollapse"
      :unique-opened="true"
      :default-active="active"
      ref="menu"
      @select="handleMenuSelect">
-      <template v-for="(menu, menuIndex) in menuAside">
+      <template v-for="(menu, menuIndex) in aside">
        <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
        <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
      </template>
    </el-menu>
-    <div v-if="menuAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
+    <div v-if="aside.length === 0 && !asideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
      <d2-icon name="inbox"/>
      <span>没有侧栏菜单</span>
    </div>
@@ -41,14 +41,14 @@ export default {
    }
  },
  computed: {
-    ...mapState({
-      menuAside: state => state.d2admin.menuAside,
-      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
-    })
+    ...mapState('d2admin/menu', [
+      'aside',
+      'asideCollapse'
+    ])
  },
  watch: {
    // 折叠和展开菜单的时候销毁 better scroll
-    isMenuAsideCollapse (val) {
+    asideCollapse (val) {
      this.scrollDestroy()
      setTimeout(() => {
        this.scrollInit()
@@ -59,7 +59,7 @@ export default {
      handler (val) {
        this.active = val[val.length - 1].path
        this.$nextTick(() => {
-          if (this.menuAside.length > 0) {
+          if (this.aside.length > 0) {
            this.$refs.menu.activeIndex = this.active
          }
        })
@@ -85,8 +85,12 @@ export default {
      })
    },
    scrollDestroy () {
-      if (this.BS) {
+      // https://github.com/d2-projects/d2-admin/issues/75
+      try {
        this.BS.destroy()
+      } catch (e) {
+        delete this.BS
+        this.BS = null
      }
    }
  }
--- a/src/layout/header-aside/components/mixin/menu.js
+++ b/src/layout/header-aside/components/mixin/menu.js
@@ -1,8 +1,12 @@
+import util from '@/libs/util.js'
+
 export default {
  methods: {
    handleMenuSelect (index, indexPath) {
      if (/^d2-menu-empty-\d+$/.test(index)) {
        this.$message.warning('临时菜单')
+      } else if (/^https:\/\/|http:\/\//.test(index)) {
+        util.open(index)
      } else {
        this.$router.push({
          path: index
--- a/src/layout/header-aside/components/tabs/index.vue
+++ b/src/layout/header-aside/components/tabs/index.vue
@@ -12,14 +12,14 @@
        </d2-contextmenu>
        <el-tabs
          class="d2-multiple-page-control"
-          :value="pageCurrent"
+          :value="current"
          type="card"
          :closable="true"
          @tab-click="handleClick"
          @edit="handleTabsEdit"
          @contextmenu.native="handleContextmenu">
          <el-tab-pane
-            v-for="(page, index) in pageOpenedList"
+            v-for="(page, index) in opened"
            :key="index"
            :label="page.meta.title || '未命名'"
            :name="page.name"/>
@@ -82,17 +82,18 @@ export default {
    }
  },
  computed: {
-    ...mapState({
-      pageOpenedList: state => state.d2admin.pageOpenedList,
-      pageCurrent: state => state.d2admin.pageCurrent
-    })
+    ...mapState('d2admin/page', [
+      'opened',
+      'current'
+    ])
  },
  methods: {
-    ...mapMutations([
-      'd2adminTagCloseLeft',
-      'd2adminTagCloseRight',
-      'd2adminTagCloseOther',
-      'd2adminTagCloseAll'
+    ...mapMutations('d2admin/page', [
+      'close',
+      'closeLeft',
+      'closeRight',
+      'closeOther',
+      'closeAll'
    ]),
    /**
     * @description 右键菜单功能点击
@@ -136,16 +137,16 @@ export default {
      }
      switch (command) {
        case 'left':
-          this.d2adminTagCloseLeft(params)
+          this.closeLeft(params)
          break
        case 'right':
-          this.d2adminTagCloseRight(params)
+          this.closeRight(params)
          break
        case 'other':
-          this.d2adminTagCloseOther(params)
+          this.closeOther(params)
          break
        case 'all':
-          this.d2adminTagCloseAll(this)
+          this.closeAll(this)
          break
        default:
          this.$message.error('无效的操作')
@@ -156,14 +157,14 @@ export default {
     * @description 接收点击关闭控制上按钮的事件
     */
    handleControlBtnClick () {
-      this.d2adminTagCloseAll(this)
+      this.closeAll(this)
    },
    /**
     * @description 接收点击 tab 标签的事件
     */
    handleClick (tab, event) {
      // 找到点击的页面在 tag 列表里是哪个
-      const page = this.pageOpenedList.find(page => page.name === tab.name)
+      const page = this.opened.find(page => page.name === tab.name)
      const { name, params, query } = page
      if (page) {
        this.$router.push({ name, params, query })
@@ -174,7 +175,7 @@ export default {
     */
    handleTabsEdit (tagName, action) {
      if (action === 'remove') {
-        this.$store.commit('d2adminTagClose', {
+        this.close({
          tagName,
          vm: this
        })
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -2,16 +2,16 @@
  <div
    class="d2-layout-header-aside-group"
    :style="styleLayoutMainGroup"
-    :class="{grayMode: isGrayMode}">
+    :class="{grayMode: grayActive}">
    <!-- 半透明遮罩 -->
    <div class="d2-layout-header-aside-mask"></div>
    <!-- 主体内容 -->
    <div class="d2-layout-header-aside-content" flex="dir:top">
      <!-- 顶栏 -->
      <div class="d2-theme-header" flex-box="0">
-        <div class="logo-group" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
-          <img v-if="isMenuAsideCollapse" :src="`${$baseUrl}image/theme/${d2adminThemeActiveSetting.name}/logo/icon-only.png`">
-          <img v-else :src="`${$baseUrl}image/theme/${d2adminThemeActiveSetting.name}/logo/all.png`">
+        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
+          <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
+          <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
        </div>
        <div class="toggle-aside-btn" @click="handleToggleAside">
          <d2-icon name="bars"/>
@@ -21,7 +21,6 @@
        <div class="d2-header-right">
          <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
          <d2-header-error-log/>
-          <d2-header-help/>
          <d2-header-fullscreen/>
          <d2-header-theme/>
          <d2-header-user/>
@@ -34,7 +33,7 @@
          flex-box="0"
          ref="aside"
          class="d2-theme-container-aside"
-          :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
+          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
          <d2-menu-side/>
        </div>
        <!-- 主体 -->
@@ -43,8 +42,8 @@
            <d2-tabs/>
          </div>
          <div class="d2-theme-container-main-body" flex-box="1">
-            <transition name="fade-transverse">
-              <keep-alive :include="d2adminKeepAliveInclude">
+            <transition :name="transitionActive ? 'fade-transverse' : ''">
+              <keep-alive :include="keepAlive">
                <router-view/>
              </keep-alive>
            </transition>
@@ -66,7 +65,6 @@ export default {
    'd2-header-fullscreen': () => import('./components/header-fullscreen'),
    'd2-header-theme': () => import('./components/header-theme'),
    'd2-header-user': () => import('./components/header-user'),
-    'd2-header-help': () => import('./components/header-help'),
    'd2-header-error-log': () => import('./components/header-error-log')
  },
  data () {
@@ -78,35 +76,35 @@ export default {
    }
  },
  computed: {
-    ...mapState({
-      isGrayMode: state => state.d2admin.isGrayMode,
-      pageOpenedList: state => state.d2admin.pageOpenedList,
-      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
+    ...mapState('d2admin', {
+      grayActive: state => state.gray.active,
+      transitionActive: state => state.transition.active,
+      asideCollapse: state => state.menu.asideCollapse
+    }),
+    ...mapGetters('d2admin', {
+      keepAlive: 'page/keepAlive',
+      themeActiveSetting: 'theme/activeSetting'
    }),
-    ...mapGetters([
-      'd2adminThemeActiveSetting',
-      'd2adminKeepAliveInclude'
-    ]),
    /**
     * @description 最外层容器的背景图片样式
     */
    styleLayoutMainGroup () {
      return {
-        ...this.d2adminThemeActiveSetting.backgroundImage ? {
-          backgroundImage: `url('${this.$baseUrl}${this.d2adminThemeActiveSetting.backgroundImage}')`
+        ...this.themeActiveSetting.backgroundImage ? {
+          backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
        } : {}
      }
    }
  },
  methods: {
-    ...mapMutations([
-      'd2adminMenuAsideCollapseToggle'
+    ...mapMutations('d2admin/menu', [
+      'asideCollapseToggle'
    ]),
    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside () {
-      this.d2adminMenuAsideCollapseToggle()
+      this.asideCollapseToggle()
    }
  }
 }
--- a/src/libs/db.js
+++ b/src/libs/db.js
@@ -1,18 +1,15 @@
 import low from 'lowdb'
 import LocalStorage from 'lowdb/adapters/LocalStorage'
-import { version } from '../../package'
+import setting from '@/setting.js'

-const adapter = new LocalStorage(`d2admin-${version}`)
+const adapter = new LocalStorage(`d2admin-${setting.releases.version}`)
 const db = low(adapter)

-// 初始化数据库
-db.defaults({
-  themeActiveName: [],
-  pageOpenedList: [],
-  userInfo: [],
-  isMenuAsideCollapse: [],
-  database: [],
-  databasePublic: {}
-}).write()
+db
+  .defaults({
+    sys: {},
+    database: {}
+  })
+  .write()

 export default db
--- a/src/libs/util.cookies.js
+++ b/src/libs/util.cookies.js
@@ -0,0 +1,43 @@
+import Cookies from 'js-cookie'
+import setting from '@/setting.js'
+
+const cookies = {}
+
+/**
+ * @description 存储 cookie 值
+ * @param {String} name cookie name
+ * @param {String} value cookie value
+ * @param {Object} setting cookie setting
+ */
+cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
+  let currentCookieSetting = {
+    expires: 1
+  }
+  Object.assign(currentCookieSetting, cookieSetting)
+  Cookies.set(`d2admin-${setting.releases.version}-${name}`, value, currentCookieSetting)
+}
+
+/**
+ * @description 拿到 cookie 值
+ * @param {String} name cookie name
+ */
+cookies.get = function (name = 'default') {
+  return Cookies.get(`d2admin-${setting.releases.version}-${name}`)
+}
+
+/**
+ * @description 拿到 cookie 全部的值
+ */
+cookies.getAll = function () {
+  return Cookies.get()
+}
+
+/**
+ * @description 删除 cookie
+ * @param {String} name cookie name
+ */
+cookies.remove = function (name = 'default') {
+  return Cookies.remove(`d2admin-${setting.releases.version}-${name}`)
+}
+
+export default cookies
--- a/src/libs/util.js
+++ b/src/libs/util.js
@@ -1,49 +1,9 @@
-import Cookies from 'js-cookie'
-import axios from 'axios'
-import semver from 'semver'
-import UaParser from 'ua-parser-js'
-import { version } from '../../package.json'
+import log from './util.log.js'
+import cookies from './util.cookies.js'

 let util = {
-  cookies: {},
-  log: {}
-}
-
-/**
- * @description 存储 cookie 值
- * @param {String} name cookie name
- * @param {String} value cookie value
- * @param {Object} setting cookie setting
- */
-util.cookies.set = function (name = 'default', value = '', setting = {}) {
-  let cookieSetting = {
-    expires: 1
-  }
-  Object.assign(cookieSetting, setting)
-  Cookies.set(`d2admin-${version}-${name}`, value, cookieSetting)
-}
-
-/**
- * @description 拿到 cookie 值
- * @param {String} name cookie name
- */
-util.cookies.get = function (name = 'default') {
-  return Cookies.get(`d2admin-${version}-${name}`)
-}
-
-/**
- * @description 拿到 cookie 全部的值
- */
-util.cookies.getAll = function () {
-  return Cookies.get()
-}
-
-/**
- * @description 删除 cookie
- * @param {String} name cookie name
- */
-util.cookies.remove = function (name = 'default') {
-  return Cookies.remove(`d2admin-${version}-${name}`)
+  cookies,
+  log
 }

 /**
@@ -51,130 +11,22 @@ util.cookies.remove = function (name = 'default') {
 * @param {String} title 标题
 */
 util.title = function (titleText) {
-  window.document.title = `${process.env.VUE_APP_TITLE}${titleText ? ` | ${titleText}` : ''}`
+  const processTitle = process.env.VUE_APP_TITLE || 'D2Admin'
+  window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
 }

 /**
- * @description 获取所有的 UA 信息
+ * @description 打开新页面
+ * @param {String} url 地址
 */
-util.ua = function () {
-  return new UaParser().getResult()
-}
-
-/**
- * @description 判断是否在其内
- * @param {*} ele element
- * @param {Array} targetArr array
- */
-util.isOneOf = function (ele, targetArr) {
-  if (targetArr.indexOf(ele) >= 0) {
-    return true
-  } else {
-    return false
-  }
-}
-
-/**
- * @description 返回这个样式的颜色值
- * @param {String} type 样式名称 [ primary | success | warning | danger | text ]
- */
-util.typeColor = function (type = 'default') {
-  let color = ''
-  switch (type) {
-    case 'default': color = '35495E'; break
-    case 'primary': color = '#3488ff'; break
-    case 'success': color = '#43B883'; break
-    case 'warning': color = '#e6a23c'; break
-    case 'danger': color = '#f56c6c'; break
-    default:; break
-  }
-  return color
-}
-
-/**
- * @description 打印一个 “胶囊” 样式的信息
- * @param {String} title title text
- * @param {String} info info text
- * @param {String} type style
- */
-util.log.capsule = function (title, info, type = 'primary') {
-  console.log(
-    `%c ${title} %c ${info} %c`,
-    'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;',
-    `background:${util.typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff;`,
-    'background:transparent'
-  )
-}
-
-/**
- * @description 打印彩色文字
- */
-util.log.colorful = function (textArr) {
-  console.log(
-    `%c ${textArr.map(t => t.text).join(' %c ')}`,
-    ...textArr.map(t => `color: ${util.typeColor(t.type)};`)
-  )
-}
-
-/**
- * @description 打印 primary 样式的文字
- */
-util.log.primary = function (text) {
-  util.log.colorful([{ text, type: 'primary' }])
-}
-
-/**
- * @description 打印 success 样式的文字
- */
-util.log.success = function (text) {
-  util.log.colorful([{ text, type: 'success' }])
-}
-
-/**
- * @description 打印 warning 样式的文字
- */
-util.log.warning = function (text) {
-  util.log.colorful([{ text, type: 'warning' }])
-}
-
-/**
- * @description 打印 danger 样式的文字
- */
-util.log.danger = function (text) {
-  util.log.colorful([{ text, type: 'danger' }])
-}
-
-/**
- * @description 检查版本更新
- * @param {Object} vm vue
- */
-util.checkUpdate = function (vm) {
-  if (!process.env.VUE_APP_RELEASES_API) {
-    return
-  }
-  axios.get(process.env.VUE_APP_RELEASES_API)
-    .then(res => {
-      let versionGet = res.tag_name
-      const update = semver.lt(version, versionGet)
-      if (update) {
-        util.log.capsule('D2Admin', `New version ${res.name}`)
-        console.log(`版本号: ${res.tag_name} | 详情${res.html_url}`)
-        vm.$store.commit('d2adminReleasesUpdateSet', true)
-      }
-      vm.$store.commit('d2adminReleasesLatestSet', res)
-    })
-    .catch(err => {
-      console.log('checkUpdate error', err)
-    })
-}
-
-/**
- * @description 显示版本信息
- */
-util.showInfo = function showInfo () {
-  util.log.capsule('D2Admin', `v${version}`)
-  console.log('Github https://github.com/d2-projects/d2-admin')
-  console.log('Doc    http://d2admin.fairyever.com/zh/')
+util.open = function (url) {
+  var a = document.createElement('a')
+  a.setAttribute('href', url)
+  a.setAttribute('target', '_blank')
+  a.setAttribute('id', 'd2admin-menu-link')
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(document.getElementById('d2admin-menu-link'))
 }

 export default util
--- a/src/libs/util.log.js
+++ b/src/libs/util.log.js
@@ -0,0 +1,80 @@
+const log = {}
+
+/**
+ * @description 返回这个样式的颜色值
+ * @param {String} type 样式名称 [ primary | success | warning | danger | text ]
+ */
+function typeColor (type = 'default') {
+  let color = ''
+  switch (type) {
+    case 'default': color = '#35495E'; break
+    case 'primary': color = '#3488ff'; break
+    case 'success': color = '#43B883'; break
+    case 'warning': color = '#e6a23c'; break
+    case 'danger': color = '#f56c6c'; break
+    default:; break
+  }
+  return color
+}
+
+/**
+ * @description 打印一个 [ title | text ] 样式的信息
+ * @param {String} title title text
+ * @param {String} info info text
+ * @param {String} type style
+ */
+log.capsule = function (title, info, type = 'primary') {
+  console.log(
+    `%c ${title} %c ${info} %c`,
+    'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;',
+    `background:${typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff;`,
+    'background:transparent'
+  )
+}
+
+/**
+ * @description 打印彩色文字
+ */
+log.colorful = function (textArr) {
+  console.log(
+    `%c${textArr.map(t => t.text || '').join('%c')}`,
+    ...textArr.map(t => `color: ${typeColor(t.type)};`)
+  )
+}
+
+/**
+ * @description 打印 default 样式的文字
+ */
+log.default = function (text) {
+  log.colorful([{ text }])
+}
+
+/**
+ * @description 打印 primary 样式的文字
+ */
+log.primary = function (text) {
+  log.colorful([{ text, type: 'primary' }])
+}
+
+/**
+ * @description 打印 success 样式的文字
+ */
+log.success = function (text) {
+  log.colorful([{ text, type: 'success' }])
+}
+
+/**
+ * @description 打印 warning 样式的文字
+ */
+log.warning = function (text) {
+  log.colorful([{ text, type: 'warning' }])
+}
+
+/**
+ * @description 打印 danger 样式的文字
+ */
+log.danger = function (text) {
+  log.colorful([{ text, type: 'danger' }])
+}
+
+export default log
--- a/src/main.js
+++ b/src/main.js
@@ -1,46 +1,44 @@
+// polyfill
 import 'babel-polyfill'
+// Vue
 import Vue from 'vue'
 import App from './App'
-import 'flex.css'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+// store
+import store from '@/store/index'
+// 模拟数据
+import '@/mock'
+// 多国语
+import i18n from './i18n'
+// 核心插件
+import d2Admin from '@/plugin/d2admin'
+
+// [ 可选插件组件 ] 图表
 import VCharts from 'v-charts'
-import screenfull from 'screenfull'
+// [ 可选插件组件 ] 右键菜单
 import contentmenu from 'v-contextmenu'
 import 'v-contextmenu/dist/index.css'
+// [ 可选插件组件 ] JSON 树状视图
 import vueJsonTreeView from 'vue-json-tree-view'
-import i18n from './i18n'
-import util from '@/libs/util.js'
-import store from '@/store/index'
-import '@/assets/svg-icons'
-import '@/components'
-import '@/mock'
-import '@/plugin/axios'
-import pluginLog from '@/plugin/log'
-import pluginError from '@/plugin/error'
-import pluginImport from '@/plugin/import'
-import pluginExport from '@/plugin/export'
-import pluginOpen from '@/plugin/open'
+// [ 可选插件组件 ] 网格布局组件
+import { GridLayout, GridItem } from 'vue-grid-layout'
+// [ 可选插件组件 ] 区域划分组件
+import SplitPane from 'vue-splitpane'

 // 菜单和路由设置
 import router from './router'
 import { menuHeader, menuAside } from '@/menu'
 import { frameInRoutes } from '@/router/routes'

-Vue.use(ElementUI)
+// 核心插件
+Vue.use(d2Admin)
+
+// 可选插件组件
 Vue.use(VCharts)
 Vue.use(contentmenu)
-Vue.use(pluginLog)
-Vue.use(pluginError)
-Vue.use(pluginImport)
-Vue.use(pluginExport)
-Vue.use(pluginOpen)
 Vue.use(vueJsonTreeView)
-
-Vue.config.productionTip = false
-
-Vue.prototype.$env = process.env.NODE_ENV
-Vue.prototype.$baseUrl = process.env.BASE_URL
+Vue.component('d2-grid-layout', GridLayout)
+Vue.component('d2-grid-item', GridItem)
+Vue.component('SplitPane', SplitPane)

 new Vue({
  router,
@@ -49,59 +47,27 @@ new Vue({
  render: h => h(App),
  created () {
    // 处理路由 得到每一级的路由设置
-    this.getAllPageFromRoutes()
+    this.$store.commit('d2admin/page/init', frameInRoutes)
    // 设置顶栏菜单
-    this.$store.commit('d2adminMenuHeaderSet', menuHeader)
+    this.$store.commit('d2admin/menu/headerSet', menuHeader)
  },
  mounted () {
-    // D2Admin 开发环境检查更新
-    util.checkUpdate(this)
-    // 获取并记录用户 UA
-    this.$store.commit('d2adminUaGet')
    // 展示系统信息
-    util.showInfo()
+    this.$store.commit('d2admin/releases/versionShow')
+    // 检查最新版本
+    this.$store.dispatch('d2admin/releases/checkUpdate')
    // 用户登陆后从数据库加载一系列的设置
-    this.$store.commit('d2adminLoginSuccessLoad')
+    this.$store.commit('d2admin/account/load')
+    // 获取并记录用户 UA
+    this.$store.commit('d2admin/ua/get')
    // 初始化全屏监听
-    this.fullscreenListenerInit()
+    this.$store.commit('d2admin/fullscreen/listen')
  },
  watch: {
    // 监听路由 控制侧边栏显示
    '$route.matched' (val) {
      const _side = menuAside.filter(menu => menu.path === val[0].path)
-      this.$store.commit('d2adminMenuAsideSet', _side.length > 0 ? _side[0].children : [])
-    }
-  },
-  methods: {
-    /**
-     * 初始化全屏监听
-     */
-    fullscreenListenerInit () {
-      if (screenfull.enabled) {
-        screenfull.on('change', () => {
-          if (!screenfull.isFullscreen) {
-            this.$store.commit('d2adminFullScreenSet', false)
-          }
-        })
-      }
-    },
-    /**
-     * 处理路由 得到所有的页面
-     */
-    getAllPageFromRoutes () {
-      const pool = []
-      const push = function (routes) {
-        routes.forEach(route => {
-          if (route.children) {
-            push(route.children)
-          } else {
-            const { meta, name, path } = route
-            pool.push({ meta, name, path })
-          }
-        })
-      }
-      push(frameInRoutes)
-      this.$store.commit('d2adminPagePoolSet', pool)
+      this.$store.commit('d2admin/menu/asideSet', _side.length > 0 ? _side[0].children : [])
    }
  }
 }).$mount('#app')
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -36,7 +36,18 @@ export const menuHeader = [
      demoElement,
      demoCharts,
      demoPlugins,
-      demoPlayground,
+      {
+        title: '跳转外部链接',
+        icon: 'link',
+        children: [
+          { path: 'https://github.com/d2-projects/d2-admin', title: 'D2Admin Github', icon: 'github' },
+          { path: 'https://juejin.im/user/57a48b632e958a006691b946/posts', title: '掘金', icon: 'globe' },
+          { path: 'https://my.oschina.net/u/3871516', title: '开源中国', icon: 'globe' },
+          { path: 'https://www.zhihu.com/people/fairy-ever/activities', title: '知乎', icon: 'globe' },
+          { path: 'https://segmentfault.com/blog/liyang-note-book', title: 'segmentfault 专栏', icon: 'globe' },
+          { path: 'http://www.fairyever.com/', title: 'www.fairyever.com', icon: 'globe' }
+        ]
+      },
      {
        title: '空菜单演示',
        icon: 'folder-o',
@@ -51,8 +62,27 @@ export const menuHeader = [
          { title: '正在开发 2' },
          { title: '正在开发 3' }
        ]
+      },
+      {
+        title: 'svg 菜单图标',
+        iconSvg: 'd2admin',
+        children: [
+          { title: 'add', iconSvg: 'add' },
+          { title: 'alarm', iconSvg: 'alarm' },
+          { title: 'camera', iconSvg: 'camera' },
+          { title: 'history', iconSvg: 'history' },
+          { title: 'like', iconSvg: 'like' },
+          { title: 'love', iconSvg: 'love' },
+          { title: 'message', iconSvg: 'message' },
+          { title: 'notice', iconSvg: 'notice' },
+          { title: 'search', iconSvg: 'search' },
+          { title: 'share', iconSvg: 'share' },
+          { title: 'star', iconSvg: 'star' },
+          { title: 'user', iconSvg: 'user' }
+        ]
      }
    ]
  },
+  demoPlayground,
  demoBusiness
 ]
--- a/src/menu/modules/demo-playground.js
+++ b/src/menu/modules/demo-playground.js
@@ -32,7 +32,8 @@ export default {
        { path: `${pre}store/ua`, title: '浏览器信息', icon: 'info-circle' },
        { path: `${pre}store/gray`, title: '灰度模式', icon: 'eye' },
        { path: `${pre}store/fullscreen`, title: '全屏', icon: 'arrows-alt' },
-        { path: `${pre}store/theme`, title: '主题', icon: 'diamond' }
+        { path: `${pre}store/theme`, title: '主题', icon: 'diamond' },
+        { path: `${pre}store/transition`, title: '页面过渡开关', icon: 'toggle-on' }
      ]
    },
    {
@@ -40,9 +41,13 @@ export default {
      title: '数据持久化',
      icon: 'database',
      children: [
-        { path: `${pre}db/all`, title: '全部数据', icon: 'table' },
-        { path: `${pre}db/user`, title: '用户数据', icon: 'user' },
-        { path: `${pre}db/public`, title: '公用数据', icon: 'users' }
+        { path: `${pre}db/all`, title: '总览', icon: 'table' },
+        { path: `${pre}db/public`, title: '公共存储', icon: 'users' },
+        { path: `${pre}db/user`, title: '私有数据', icon: 'user' },
+        { path: `${pre}db/page-public`, title: '路由存储', icon: 'file-o' },
+        { path: `${pre}db/page-user`, title: '私有路由存储', icon: 'file-o' },
+        { path: `${pre}db/page-snapshot-public`, title: '路由快照', icon: 'file' },
+        { path: `${pre}db/page-snapshot-user`, title: '私有路由快照', icon: 'file' }
      ]
    },
    {
@@ -51,7 +56,8 @@ export default {
      icon: 'bullseye',
      children: [
        { path: `${pre}log/log`, title: '日志记录', icon: 'dot-circle-o' },
-        { path: `${pre}log/error`, title: '错误捕捉', icon: 'bug' }
+        { path: `${pre}log/error`, title: '错误捕捉', icon: 'bug' },
+        { path: `${pre}log/console`, title: '控制台日志', icon: 'lightbulb-o' }
      ]
    },
    { path: `${pre}env`, title: '环境信息', icon: 'exclamation-circle' }
--- a/src/pages/demo/components/countup/index.vue
+++ b/src/pages/demo/components/countup/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <d2-container type="card" class="page-demo-components-countup">
+  <d2-container type="card" class="page">
    <template slot="header">数字动画组件</template>
    <el-row :gutter="20">
      <el-col :span="6">
@@ -76,9 +76,7 @@ export default {

 <style lang="scss" scoped>
@import '~@/assets/style/public.scss';
-.page-demo-components-countup {
-  .el-card {
-    @extend %unable-select;
+.page {
  .group {
    display: flex;
    justify-content: center;
@@ -93,6 +91,5 @@ export default {
      }
    }
  }
-  }
 }
 </style>
--- a/src/pages/demo/components/json-tree/index.vue
+++ b/src/pages/demo/components/json-tree/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <d2-container class="page">
+  <d2-container>
    <tree-view :data="packJson" :options="options"/>
  </d2-container>
 </template>
--- a/src/pages/demo/components/layout/grid.vue
+++ b/src/pages/demo/components/layout/grid.vue
@@ -11,7 +11,7 @@
        @move="moveHandler"
        @resized="resizedHandler"
        @moved="movedHandler">
-        <el-card shadow="never">
+        <el-card shadow="never" class="page_card">
          <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
          <template v-if="item.i === '0'">
            <div class="d2-mb">拖拽卡片调整位置</div>
@@ -104,7 +104,7 @@ export default {
    background-color: $color-bg;
    border-radius: 4px;
    margin: -10px;
-    .el-card {
+    .page_card {
      height: 100%;
      @extend %unable-select;
    }
--- a/Show More
+++ b/Show More