diff --git a/package.json b/package.json
index 4878c422..d103401a 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,10 @@
     "vue-router": "^3.1.3",
     "vue-splitpane": "^1.0.6",
     "vue-ueditor-wrap": "^2.4.1",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "d2-crud-plus": "^1.16.2",
+    "d2-crud-x": "^2.10.2",
+    "d2p-extends": "^1.9.11"
   },
   "devDependencies": {
     "@d2-projects/vue-filename-injector": "^1.1.0",
diff --git a/src/api/index.js b/src/api/index.js
index 8a00cab4..a713ffdc 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -3,7 +3,7 @@ import faker from 'faker/locale/zh_CN'
 import { service, request, serviceForMock, requestForMock, mock } from './service'
 import * as tools from './tools'
 
-const files = require.context('./modules', true, /\.js$/)
+const files = require.context('./modules', true, /\.api\.js$/)
 const generators = files.keys().map(key => files(key).default)
 
 export default assign({}, ...map(generators, generator => generator({
diff --git a/src/api/modules/demo.js b/src/api/modules/demo.api.js
similarity index 100%
rename from src/api/modules/demo.js
rename to src/api/modules/demo.api.js
diff --git a/src/api/modules/file.js b/src/api/modules/file.api.js
similarity index 100%
rename from src/api/modules/file.js
rename to src/api/modules/file.api.js
diff --git a/src/api/modules/sys.user.js b/src/api/modules/sys.user.api.js
similarity index 100%
rename from src/api/modules/sys.user.js
rename to src/api/modules/sys.user.api.js
diff --git a/src/assets/svg-icons/icons/d2-crud-plus.svg b/src/assets/svg-icons/icons/d2-crud-plus.svg
new file mode 100644
index 00000000..7a0b63bd
--- /dev/null
+++ b/src/assets/svg-icons/icons/d2-crud-plus.svg
@@ -0,0 +1,22 @@
+
+<svg width="240px" height="236px" viewBox="0 0 240 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-8.000000, 0.000000)">
+            <g id="d2-crud" transform="translate(8.000000, 0.000000)">
+                <path d="M111.666667,132.146667 L111.666667,166.813334 C111.666667,169.022473 109.875806,170.813334 107.666667,170.813334 L72.9999997,170.813334 C70.7908607,170.813334 68.9999997,169.022473 68.9999997,166.813334 L68.9999997,132.146667 C68.9999997,129.937528 70.7908607,128.146667 72.9999997,128.146667 L107.666667,128.146667 C109.875806,128.146667 111.666667,129.937528 111.666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M47.6666667,132.146667 L47.6666667,166.813334 C47.6666667,169.022473 45.8758057,170.813334 43.6666667,170.813334 L9,170.813334 C6.790861,170.813334 5,169.022473 5,166.813334 L5,132.146667 C5,129.937528 6.790861,128.146667 9,128.146667 L43.6666667,128.146667 C45.8758057,128.146667 47.6666667,129.937528 47.6666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M47.6666667,69 L47.6666667,103.666667 C47.6666667,105.875806 45.8758057,107.666667 43.6666667,107.666667 L9,107.666667 C6.790861,107.666667 5,105.875806 5,103.666667 L5,69 C5,66.790861 6.790861,65 9,65 L43.6666667,65 C45.8758057,65 47.6666667,66.790861 47.6666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M111.666667,69 L111.666667,103.666667 C111.666667,105.875806 109.875806,107.666667 107.666667,107.666667 L72.9999997,107.666667 C70.7908607,107.666667 68.9999997,105.875806 68.9999997,103.666667 L68.9999997,69 C68.9999997,66.790861 70.7908607,65 72.9999997,65 L107.666667,65 C109.875806,65 111.666667,66.790861 111.666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M175.666667,132.146667 L175.666667,166.813334 C175.666667,169.022473 173.875806,170.813334 171.666667,170.813334 L137,170.813334 C134.790861,170.813334 133,169.022473 133,166.813334 L133,132.146667 C133,129.937528 134.790861,128.146667 137,128.146667 L171.666667,128.146667 C173.875806,128.146667 175.666667,129.937528 175.666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M175.666667,69 L175.666667,103.666667 C175.666667,105.875806 173.875806,107.666667 171.666667,107.666667 L137,107.666667 C134.790861,107.666667 133,105.875806 133,103.666667 L133,69 C133,66.790861 134.790861,65 137,65 L171.666667,65 C173.875806,65 175.666667,66.790861 175.666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M47.6666667,197 L47.6666667,231.666667 C47.6666667,233.875806 45.8758057,235.666667 43.6666667,235.666667 L9,235.666667 C6.790861,235.666667 5,233.875806 5,231.666667 L5,197 C5,194.790861 6.790861,193 9,193 L43.6666667,193 C45.8758057,193 47.6666667,194.790861 47.6666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M175.666667,197 L175.666667,231.666667 C175.666667,233.875806 173.875806,235.666667 171.666667,235.666667 L137,235.666667 C134.790861,235.666667 133,233.875806 133,231.666667 L133,197 C133,194.790861 134.790861,193 137,193 L171.666667,193 C173.875806,193 175.666667,194.790861 175.666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <path d="M111.666667,197 L111.666667,231.666667 C111.666667,233.875806 109.875806,235.666667 107.666667,235.666667 L72.9999997,235.666667 C70.7908607,235.666667 68.9999997,233.875806 68.9999997,231.666667 L68.9999997,197 C68.9999997,194.790861 70.7908607,193 72.9999997,193 L107.666667,193 C109.875806,193 111.666667,194.790861 111.666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
+                <rect fill="#35495E" x="176" y="19" width="64" height="26" rx="4"></rect>
+                <rect fill="#35495E" transform="translate(208.000000, 32.000000) rotate(-270.000000) translate(-208.000000, -32.000000) " x="176" y="19" width="64" height="26" rx="4"></rect>
+                <rect fill="#35495E" transform="translate(208.500000, 159.000000) rotate(-270.000000) translate(-208.500000, -159.000000) " x="132" y="146" width="153" height="26" rx="4"></rect>
+                <rect fill="#35495E" transform="translate(78.000000, 32.000000) rotate(-180.000000) translate(-78.000000, -32.000000) " x="0" y="19" width="156" height="26" rx="4"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/d2-container/index.js b/src/components/d2-container/index.js
index 1c723396..ab579c96 100644
--- a/src/components/d2-container/index.js
+++ b/src/components/d2-container/index.js
@@ -23,11 +23,6 @@ export default {
       type: Boolean,
       required: false,
       default: false
-    },
-    betterScrollOptions: {
-      type: Object,
-      required: false,
-      default: () => ({})
     }
   },
   computed: {
@@ -47,7 +42,6 @@ export default {
       class="container-component">
       <this.component
         ref="component"
-        betterScrollOptions={this.betterScrollOptions}
         { ...{ attrs: this.$attrs } }
         onScroll={ e => this.$emit('scroll', e) }>
         { slots }
diff --git a/src/menu/index.js b/src/menu/index.js
index e57108c6..f0dc649d 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -4,16 +4,12 @@ import { uniqueId } from 'lodash'
 import demoPlugins from './modules/demo-plugins'
 // 组件
 import demoComponents from './modules/demo-components'
-// 组件
-import demoCharts from './modules/demo-charts'
-// 试验台
+// 功能
 import demoPlayground from './modules/demo-playground'
-// 示例
-import demoBusiness from './modules/demo-business'
 // CRUD
 import demoD2Crud from './modules/demo-d2-crud'
-// 第三方网页
-import demoFrame from './modules/demo-frame'
+// CRUD PLUS
+import demoD2CrudPlus from './modules/demo-d2-crud-plus'
 
 /**
  * @description 给菜单数据补充上 path 字段
@@ -34,11 +30,9 @@ function supplementPath (menu) {
 export const menuAside = supplementPath([
   demoComponents,
   demoPlugins,
-  demoCharts,
   demoPlayground,
-  demoBusiness,
   demoD2Crud,
-  demoFrame
+  demoD2CrudPlus
 ])
 
 // 菜单 顶栏
@@ -48,29 +42,15 @@ export const menuHeader = supplementPath([
     title: '首页',
     icon: 'home'
   },
+  demoPlayground,
+  demoComponents,
+  demoPlugins,
   {
-    title: '功能',
+    title: '社区插件',
     icon: 'puzzle-piece',
     children: [
       demoD2Crud,
-      demoComponents,
-      demoCharts,
-      demoPlugins,
-      demoFrame,
-      {
-        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' }
-        ]
-      }
+      demoD2CrudPlus
     ]
-  },
-  demoPlayground,
-  demoBusiness
+  }
 ])
diff --git a/src/menu/modules/demo-business.js b/src/menu/modules/demo-business.js
deleted file mode 100644
index 736696f9..00000000
--- a/src/menu/modules/demo-business.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  path: '/demo/business',
-  title: '示例',
-  icon: 'flask',
-  children: (pre => [
-    { path: `${pre}index`, title: '示例', icon: 'home' },
-    {
-      title: '表格',
-      icon: 'table',
-      children: [
-        { path: `${pre}table/1`, title: '表格 1' }
-      ]
-    },
-    {
-      title: 'ISSUES',
-      icon: 'github',
-      children: [
-        { path: `${pre}issues/142`, title: '#142' }
-      ]
-    }
-  ])('/demo/business/')
-}
diff --git a/src/menu/modules/demo-charts.js b/src/menu/modules/demo-charts.js
deleted file mode 100644
index bfd808cd..00000000
--- a/src/menu/modules/demo-charts.js
+++ /dev/null
@@ -1,149 +0,0 @@
-export default {
-  path: '/demo/charts',
-  title: '图表',
-  icon: 'line-chart',
-  children: (pre => [
-    { path: `${pre}index`, title: '图表', icon: 'home' },
-    {
-      path: `${pre}list`,
-      title: '图表',
-      icon: 'cube',
-      children: [
-        {
-          path: `${pre}list/line`,
-          title: '折线图',
-          children: [
-            { path: `${pre}list/line/demo1`, title: '一般' },
-            { path: `${pre}list/line/demo2`, title: '横坐标倾斜' },
-            { path: `${pre}list/line/demo3`, title: '堆叠面积图' },
-            { path: `${pre}list/line/demo4`, title: '显示数值' },
-            { path: `${pre}list/line/demo5`, title: '设置别名' }
-          ]
-        },
-        {
-          path: `${pre}list/histogram`,
-          title: '柱状图',
-          children: [
-            { path: `${pre}list/histogram/demo1`, title: '一般' },
-            { path: `${pre}list/histogram/demo2`, title: '指标维度' },
-            { path: `${pre}list/histogram/demo3`, title: '混合图表' },
-            { path: `${pre}list/histogram/demo4`, title: '堆叠柱状图' },
-            { path: `${pre}list/histogram/demo5`, title: '显示数值' },
-            { path: `${pre}list/histogram/demo6`, title: '横轴连续' }
-          ]
-        },
-        {
-          path: `${pre}list/bar`,
-          title: '条形图',
-          children: [
-            { path: `${pre}list/bar/demo1`, title: '一般' },
-            { path: `${pre}list/bar/demo2`, title: '指标维度' },
-            { path: `${pre}list/bar/demo3`, title: '排序条形图' },
-            { path: `${pre}list/bar/demo4`, title: '堆叠条形图' },
-            { path: `${pre}list/bar/demo5`, title: '纵轴连续' }
-          ]
-        },
-        {
-          path: `${pre}list/pie`,
-          title: '饼图',
-          children: [
-            { path: `${pre}list/pie/demo1`, title: '一般' },
-            { path: `${pre}list/pie/demo2`, title: '指标维度' },
-            { path: `${pre}list/pie/demo3`, title: '玫瑰图' },
-            { path: `${pre}list/pie/demo4`, title: '限制条数' },
-            { path: `${pre}list/pie/demo5`, title: '多圆饼图' },
-            { path: `${pre}list/pie/demo6`, title: '设置半径' }
-          ]
-        },
-        {
-          path: `${pre}list/ring`,
-          title: '环图',
-          children: [
-            { path: `${pre}list/ring/demo1`, title: '一般' },
-            { path: `${pre}list/ring/demo2`, title: '指标维度' },
-            { path: `${pre}list/ring/demo3`, title: '玫瑰图' },
-            { path: `${pre}list/ring/demo4`, title: '限制显示条数' },
-            { path: `${pre}list/ring/demo5`, title: '设置半径' }
-          ]
-        },
-        {
-          path: `${pre}list/waterfall`,
-          title: '瀑布图',
-          children: [
-            { path: `${pre}list/waterfall/demo1`, title: '一般' }
-          ]
-        },
-        {
-          path: `${pre}list/funnel`,
-          title: '漏斗图',
-          children: [
-            { path: `${pre}list/funnel/demo1`, title: '一般' },
-            { path: `${pre}list/funnel/demo2`, title: '金字塔' }
-          ]
-        },
-        {
-          path: `${pre}list/radar`,
-          title: '雷达图',
-          children: [
-            { path: `${pre}list/radar/demo1`, title: '一般' }
-          ]
-        },
-        {
-          path: `${pre}list/map`,
-          title: '地图',
-          children: [
-            { path: `${pre}list/map/demo1`, title: '一般' },
-            { path: `${pre}list/map/demo2`, title: '设置城市' },
-            { path: `${pre}list/map/demo3`, title: '设置样式' }
-          ]
-        },
-        {
-          path: `${pre}list/sankey`,
-          title: '桑基图',
-          children: [
-            { path: `${pre}list/sankey/demo1`, title: '一般' }
-          ]
-        },
-        {
-          path: `${pre}list/heatmap`,
-          title: '热力图',
-          children: [
-            { path: `${pre}list/heatmap/demo1`, title: '一般' },
-            { path: `${pre}list/heatmap/demo2`, title: '地图热力图' }
-          ]
-        },
-        {
-          path: `${pre}list/scatter`,
-          title: '散点图',
-          children: [
-            { path: `${pre}list/scatter/demo1`, title: '单维度多指标' },
-            { path: `${pre}list/scatter/demo2`, title: '双维度多指标' }
-          ]
-        },
-        {
-          path: `${pre}list/candle`,
-          title: 'K线图',
-          children: [
-            { path: `${pre}list/candle/demo1`, title: '一般' },
-            { path: `${pre}list/candle/demo2`, title: 'MA VOL' },
-            { path: `${pre}list/candle/demo3`, title: '自定义' }
-          ]
-        },
-        {
-          path: `${pre}list/gauge`,
-          title: '仪表盘',
-          children: [
-            { path: `${pre}list/gauge/demo1`, title: '一般' }
-          ]
-        },
-        {
-          path: `${pre}list/tree`,
-          title: '树图',
-          children: [
-            { path: `${pre}list/tree/demo1`, title: '径向树图' }
-          ]
-        }
-      ]
-    }
-  ])('/demo/charts/')
-}
diff --git a/src/menu/modules/demo-components.js b/src/menu/modules/demo-components.js
index 233b9205..7edaf985 100644
--- a/src/menu/modules/demo-components.js
+++ b/src/menu/modules/demo-components.js
@@ -1,6 +1,6 @@
 export default {
   path: '/demo/components',
-  title: '内置组件',
+  title: '组件',
   icon: 'puzzle-piece',
   children: (pre => [
     { path: `${pre}index`, title: '扩展组件', icon: 'home' },
diff --git a/src/menu/modules/demo-d2-crud-plus.js b/src/menu/modules/demo-d2-crud-plus.js
new file mode 100644
index 00000000..62d41e2c
--- /dev/null
+++ b/src/menu/modules/demo-d2-crud-plus.js
@@ -0,0 +1,37 @@
+import '@/views/demo/d2-crud-plus/install'
+export default {
+  path: '/demo/d2-crud-plus',
+  title: 'D2 CRUD PLUS',
+  iconSvg: 'd2-crud-plus',
+  children: (pre => [
+    { path: `${pre}index`, title: 'D2 CRUD PLUS', icon: 'home' },
+    {
+      title: '简单示例',
+      path: `${pre}demo`
+    },
+    {
+      title: '表单分组',
+      path: `${pre}group`
+    },
+    {
+      title: '综合示例',
+      path: `${pre}synthesize`
+    },
+    {
+      title: '权限管理',
+      icon: 'link',
+      path: 'http://qiniu.veryreader.com/D2CrudPlusExample/#/permission/resource'
+    },
+    {
+      title: '更多示例',
+      icon: 'link',
+      path: 'http://qiniu.veryreader.com/D2CrudPlusExample/'
+    },
+    {
+      title: '帮助文档',
+      icon: 'link',
+      path: 'http://greper.gitee.io/d2-crud-plus/'
+    }
+
+  ])('/demo/d2-crud-plus/')
+}
diff --git a/src/menu/modules/demo-frame.js b/src/menu/modules/demo-frame.js
deleted file mode 100644
index 30995db3..00000000
--- a/src/menu/modules/demo-frame.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  path: '/demo/frame',
-  title: '内嵌网页',
-  icon: 'globe',
-  children: (pre => [
-    { path: `${pre}index`, title: 'Frame ', icon: 'home' },
-    { path: `${pre}d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' },
-    { path: `${pre}html`, title: '静态 HTML', icon: 'code' },
-    { path: `${pre}report`, title: '构建分析', icon: 'pie-chart' }
-  ])('/demo/frame/')
-}
diff --git a/src/menu/modules/demo-playground.js b/src/menu/modules/demo-playground.js
index 4200500f..76a32f65 100644
--- a/src/menu/modules/demo-playground.js
+++ b/src/menu/modules/demo-playground.js
@@ -1,9 +1,9 @@
 export default {
   path: '/demo/playground',
-  title: '试验台',
+  title: '功能',
   icon: 'flask',
   children: (pre => [
-    { path: `${pre}index`, title: '试验台', icon: 'home' },
+    { path: `${pre}index`, title: '功能', icon: 'home' },
     {
       title: 'svg 菜单图标',
       iconSvg: 'd2-admin',
@@ -37,6 +37,28 @@ export default {
         { title: '正在开发 3' }
       ]
     },
+    {
+      path: `${pre}frame`,
+      title: '内嵌网页',
+      icon: 'globe',
+      children: [
+        { path: `${pre}frame/d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' },
+        { path: `${pre}frame/html`, title: '静态 HTML', icon: 'code' },
+        { path: `${pre}frame/report`, title: '构建分析', icon: 'pie-chart' }
+      ]
+    },
+    {
+      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' }
+      ]
+    },
     {
       path: `${pre}store`,
       title: '全局状态管理',
diff --git a/src/menu/modules/demo-plugins.js b/src/menu/modules/demo-plugins.js
index c486adfd..a97f16ef 100644
--- a/src/menu/modules/demo-plugins.js
+++ b/src/menu/modules/demo-plugins.js
@@ -4,6 +4,147 @@ export default {
   icon: 'plug',
   children: (pre => [
     { path: `${pre}index`, title: '插件', icon: 'home' },
+    {
+      path: `${pre}charts`,
+      title: '图表',
+      icon: 'bar-chart',
+      children: [
+        {
+          path: `${pre}charts/line`,
+          title: '折线图',
+          children: [
+            { path: `${pre}charts/line/demo1`, title: '一般' },
+            { path: `${pre}charts/line/demo2`, title: '横坐标倾斜' },
+            { path: `${pre}charts/line/demo3`, title: '堆叠面积图' },
+            { path: `${pre}charts/line/demo4`, title: '显示数值' },
+            { path: `${pre}charts/line/demo5`, title: '设置别名' }
+          ]
+        },
+        {
+          path: `${pre}charts/histogram`,
+          title: '柱状图',
+          children: [
+            { path: `${pre}charts/histogram/demo1`, title: '一般' },
+            { path: `${pre}charts/histogram/demo2`, title: '指标维度' },
+            { path: `${pre}charts/histogram/demo3`, title: '混合图表' },
+            { path: `${pre}charts/histogram/demo4`, title: '堆叠柱状图' },
+            { path: `${pre}charts/histogram/demo5`, title: '显示数值' },
+            { path: `${pre}charts/histogram/demo6`, title: '横轴连续' }
+          ]
+        },
+        {
+          path: `${pre}charts/bar`,
+          title: '条形图',
+          children: [
+            { path: `${pre}charts/bar/demo1`, title: '一般' },
+            { path: `${pre}charts/bar/demo2`, title: '指标维度' },
+            { path: `${pre}charts/bar/demo3`, title: '排序条形图' },
+            { path: `${pre}charts/bar/demo4`, title: '堆叠条形图' },
+            { path: `${pre}charts/bar/demo5`, title: '纵轴连续' }
+          ]
+        },
+        {
+          path: `${pre}charts/pie`,
+          title: '饼图',
+          children: [
+            { path: `${pre}charts/pie/demo1`, title: '一般' },
+            { path: `${pre}charts/pie/demo2`, title: '指标维度' },
+            { path: `${pre}charts/pie/demo3`, title: '玫瑰图' },
+            { path: `${pre}charts/pie/demo4`, title: '限制条数' },
+            { path: `${pre}charts/pie/demo5`, title: '多圆饼图' },
+            { path: `${pre}charts/pie/demo6`, title: '设置半径' }
+          ]
+        },
+        {
+          path: `${pre}charts/ring`,
+          title: '环图',
+          children: [
+            { path: `${pre}charts/ring/demo1`, title: '一般' },
+            { path: `${pre}charts/ring/demo2`, title: '指标维度' },
+            { path: `${pre}charts/ring/demo3`, title: '玫瑰图' },
+            { path: `${pre}charts/ring/demo4`, title: '限制显示条数' },
+            { path: `${pre}charts/ring/demo5`, title: '设置半径' }
+          ]
+        },
+        {
+          path: `${pre}charts/waterfall`,
+          title: '瀑布图',
+          children: [
+            { path: `${pre}charts/waterfall/demo1`, title: '一般' }
+          ]
+        },
+        {
+          path: `${pre}charts/funnel`,
+          title: '漏斗图',
+          children: [
+            { path: `${pre}charts/funnel/demo1`, title: '一般' },
+            { path: `${pre}charts/funnel/demo2`, title: '金字塔' }
+          ]
+        },
+        {
+          path: `${pre}charts/radar`,
+          title: '雷达图',
+          children: [
+            { path: `${pre}charts/radar/demo1`, title: '一般' }
+          ]
+        },
+        {
+          path: `${pre}charts/map`,
+          title: '地图',
+          children: [
+            { path: `${pre}charts/map/demo1`, title: '一般' },
+            { path: `${pre}charts/map/demo2`, title: '设置城市' },
+            { path: `${pre}charts/map/demo3`, title: '设置样式' }
+          ]
+        },
+        {
+          path: `${pre}charts/sankey`,
+          title: '桑基图',
+          children: [
+            { path: `${pre}charts/sankey/demo1`, title: '一般' }
+          ]
+        },
+        {
+          path: `${pre}charts/heatmap`,
+          title: '热力图',
+          children: [
+            { path: `${pre}charts/heatmap/demo1`, title: '一般' },
+            { path: `${pre}charts/heatmap/demo2`, title: '地图热力图' }
+          ]
+        },
+        {
+          path: `${pre}charts/scatter`,
+          title: '散点图',
+          children: [
+            { path: `${pre}charts/scatter/demo1`, title: '单维度多指标' },
+            { path: `${pre}charts/scatter/demo2`, title: '双维度多指标' }
+          ]
+        },
+        {
+          path: `${pre}charts/candle`,
+          title: 'K线图',
+          children: [
+            { path: `${pre}charts/candle/demo1`, title: '一般' },
+            { path: `${pre}charts/candle/demo2`, title: 'MA VOL' },
+            { path: `${pre}charts/candle/demo3`, title: '自定义' }
+          ]
+        },
+        {
+          path: `${pre}charts/gauge`,
+          title: '仪表盘',
+          children: [
+            { path: `${pre}charts/gauge/demo1`, title: '一般' }
+          ]
+        },
+        {
+          path: `${pre}charts/tree`,
+          title: '树图',
+          children: [
+            { path: `${pre}charts/tree/demo1`, title: '径向树图' }
+          ]
+        }
+      ]
+    },
     {
       path: `${pre}import`,
       title: '导入',
diff --git a/src/router/modules/business.js b/src/router/modules/business.js
deleted file mode 100644
index 8b5cfdac..00000000
--- a/src/router/modules/business.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import layoutHeaderAside from '@/layout/header-aside'
-
-// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
-const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
-
-const meta = { auth: true }
-
-export default {
-  path: '/demo/business',
-  name: 'demo-business',
-  meta,
-  redirect: { name: 'demo-business-index' },
-  component: layoutHeaderAside,
-  children: (pre => [
-    {
-      path: 'index',
-      name: `${pre}index`,
-      component: _import('demo/business/index'),
-      meta: {
-        ...meta,
-        title: '示例首页'
-      }
-    },
-    {
-      path: 'table/1',
-      name: `${pre}table-1`,
-      component: _import('demo/business/table/1'),
-      meta: {
-        ...meta,
-        title: '表格 1'
-      }
-    },
-    {
-      path: 'issues/142',
-      name: `${pre}issues-142`,
-      component: _import('demo/business/issues/142'),
-      meta: {
-        ...meta,
-        title: 'issue #142'
-      }
-    },
-    {
-      path: 'issues/142/edit/:id',
-      name: `${pre}issues-142-edit`,
-      component: _import('demo/business/issues/142/edit'),
-      props: true,
-      meta: {
-        ...meta,
-        title: '无缓存编辑'
-      }
-    },
-    {
-      path: 'issues/142/edit-cache-db/:id',
-      name: `${pre}issues-142-edit-cache-db`,
-      component: _import('demo/business/issues/142/edit-cache-db'),
-      props: true,
-      meta: {
-        ...meta,
-        title: '带缓存编辑 DB'
-      }
-    }
-  ])('demo-business-')
-}
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
deleted file mode 100644
index 365ba8d3..00000000
--- a/src/router/modules/charts.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import layoutHeaderAside from '@/layout/header-aside'
-
-// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
-const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
-
-const meta = { auth: true }
-
-export default {
-  path: '/demo/charts',
-  name: 'demo-charts',
-  meta,
-  redirect: { name: 'demo-charts-index' },
-  component: layoutHeaderAside,
-  children: (pre => [
-    { path: 'index', name: `${pre}index`, component: _import('demo/charts/index'), meta: { ...meta, title: '图表首页' } },
-    { path: 'list/line/demo1', name: `${pre}list-line-demo1`, component: _import('demo/charts/list/line/demo1/index.vue'), meta: { ...meta, title: '折线图示例 1' } },
-    { path: 'list/line/demo2', name: `${pre}list-line-demo2`, component: _import('demo/charts/list/line/demo2/index.vue'), meta: { ...meta, title: '折线图示例 2' } },
-    { path: 'list/line/demo3', name: `${pre}list-line-demo3`, component: _import('demo/charts/list/line/demo3/index.vue'), meta: { ...meta, title: '折线图示例 3' } },
-    { path: 'list/line/demo4', name: `${pre}list-line-demo4`, component: _import('demo/charts/list/line/demo4/index.vue'), meta: { ...meta, title: '折线图示例 4' } },
-    { path: 'list/line/demo5', name: `${pre}list-line-demo5`, component: _import('demo/charts/list/line/demo5/index.vue'), meta: { ...meta, title: '折线图示例 5' } },
-    { path: 'list/histogram/demo1', name: `${pre}list-histogram-demo1`, component: _import('demo/charts/list/histogram/demo1/index.vue'), meta: { ...meta, title: '柱状图示例 1' } },
-    { path: 'list/histogram/demo2', name: `${pre}list-histogram-demo2`, component: _import('demo/charts/list/histogram/demo2/index.vue'), meta: { ...meta, title: '柱状图示例 2' } },
-    { path: 'list/histogram/demo3', name: `${pre}list-histogram-demo3`, component: _import('demo/charts/list/histogram/demo3/index.vue'), meta: { ...meta, title: '柱状图示例 3' } },
-    { path: 'list/histogram/demo4', name: `${pre}list-histogram-demo4`, component: _import('demo/charts/list/histogram/demo4/index.vue'), meta: { ...meta, title: '柱状图示例 4' } },
-    { path: 'list/histogram/demo5', name: `${pre}list-histogram-demo5`, component: _import('demo/charts/list/histogram/demo5/index.vue'), meta: { ...meta, title: '柱状图示例 5' } },
-    { path: 'list/histogram/demo6', name: `${pre}list-histogram-demo6`, component: _import('demo/charts/list/histogram/demo6/index.vue'), meta: { ...meta, title: '柱状图示例 6' } },
-    { path: 'list/bar/demo1', name: `${pre}list-bar-demo1`, component: _import('demo/charts/list/bar/demo1/index.vue'), meta: { ...meta, title: '条形图示例 1' } },
-    { path: 'list/bar/demo2', name: `${pre}list-bar-demo2`, component: _import('demo/charts/list/bar/demo2/index.vue'), meta: { ...meta, title: '条形图示例 2' } },
-    { path: 'list/bar/demo3', name: `${pre}list-bar-demo3`, component: _import('demo/charts/list/bar/demo3/index.vue'), meta: { ...meta, title: '条形图示例 3' } },
-    { path: 'list/bar/demo4', name: `${pre}list-bar-demo4`, component: _import('demo/charts/list/bar/demo4/index.vue'), meta: { ...meta, title: '条形图示例 4' } },
-    { path: 'list/bar/demo5', name: `${pre}list-bar-demo5`, component: _import('demo/charts/list/bar/demo5/index.vue'), meta: { ...meta, title: '条形图示例 5' } },
-    { path: 'list/pie/demo1', name: `${pre}list-pie-demo1`, component: _import('demo/charts/list/pie/demo1/index.vue'), meta: { ...meta, title: '饼图示例 1' } },
-    { path: 'list/pie/demo2', name: `${pre}list-pie-demo2`, component: _import('demo/charts/list/pie/demo2/index.vue'), meta: { ...meta, title: '饼图示例 2' } },
-    { path: 'list/pie/demo3', name: `${pre}list-pie-demo3`, component: _import('demo/charts/list/pie/demo3/index.vue'), meta: { ...meta, title: '饼图示例 3' } },
-    { path: 'list/pie/demo4', name: `${pre}list-pie-demo4`, component: _import('demo/charts/list/pie/demo4/index.vue'), meta: { ...meta, title: '饼图示例 4' } },
-    { path: 'list/pie/demo5', name: `${pre}list-pie-demo5`, component: _import('demo/charts/list/pie/demo5/index.vue'), meta: { ...meta, title: '饼图示例 5' } },
-    { path: 'list/pie/demo6', name: `${pre}list-pie-demo6`, component: _import('demo/charts/list/pie/demo6/index.vue'), meta: { ...meta, title: '饼图示例 6' } },
-    { path: 'list/ring/demo1', name: `${pre}list-ring-demo1`, component: _import('demo/charts/list/ring/demo1/index.vue'), meta: { ...meta, title: '环图示例 1' } },
-    { path: 'list/ring/demo2', name: `${pre}list-ring-demo2`, component: _import('demo/charts/list/ring/demo2/index.vue'), meta: { ...meta, title: '环图示例 2' } },
-    { path: 'list/ring/demo3', name: `${pre}list-ring-demo3`, component: _import('demo/charts/list/ring/demo3/index.vue'), meta: { ...meta, title: '环图示例 3' } },
-    { path: 'list/ring/demo4', name: `${pre}list-ring-demo4`, component: _import('demo/charts/list/ring/demo4/index.vue'), meta: { ...meta, title: '环图示例 4' } },
-    { path: 'list/ring/demo5', name: `${pre}list-ring-demo5`, component: _import('demo/charts/list/ring/demo5/index.vue'), meta: { ...meta, title: '环图示例 5' } },
-    { path: 'list/waterfall/demo1', name: `${pre}list-waterfall-demo1`, component: _import('demo/charts/list/waterfall/demo1/index.vue'), meta: { ...meta, title: '瀑布图示例 1' } },
-    { path: 'list/funnel/demo1', name: `${pre}list-funnel-demo1`, component: _import('demo/charts/list/funnel/demo1/index.vue'), meta: { ...meta, title: '漏斗图示例 1' } },
-    { path: 'list/funnel/demo2', name: `${pre}list-funnel-demo2`, component: _import('demo/charts/list/funnel/demo2/index.vue'), meta: { ...meta, title: '漏斗图示例 2' } },
-    { path: 'list/radar/demo1', name: `${pre}list-radar-demo1`, component: _import('demo/charts/list/radar/demo1/index.vue'), meta: { ...meta, title: '雷达图示例 1' } },
-    { path: 'list/map/demo1', name: `${pre}list-map-demo1`, component: _import('demo/charts/list/map/demo1/index.vue'), meta: { ...meta, title: '地图示例 1' } },
-    { path: 'list/map/demo2', name: `${pre}list-map-demo2`, component: _import('demo/charts/list/map/demo2/index.vue'), meta: { ...meta, title: '地图示例 2' } },
-    { path: 'list/map/demo3', name: `${pre}list-map-demo3`, component: _import('demo/charts/list/map/demo3/index.vue'), meta: { ...meta, title: '地图示例 3' } },
-    { path: 'list/sankey/demo1', name: `${pre}list-sankey-demo1`, component: _import('demo/charts/list/sankey/demo1/index.vue'), meta: { ...meta, title: '桑基图示例 1' } },
-    { path: 'list/heatmap/demo1', name: `${pre}list-heatmap-demo1`, component: _import('demo/charts/list/heatmap/demo1/index.vue'), meta: { ...meta, title: '热力图示例 1' } },
-    { path: 'list/heatmap/demo2', name: `${pre}list-heatmap-demo2`, component: _import('demo/charts/list/heatmap/demo2/index.vue'), meta: { ...meta, title: '热力图示例 2' } },
-    { path: 'list/scatter/demo1', name: `${pre}list-scatter-demo1`, component: _import('demo/charts/list/scatter/demo1/index.vue'), meta: { ...meta, title: '散点图示例 1' } },
-    { path: 'list/scatter/demo2', name: `${pre}list-scatter-demo2`, component: _import('demo/charts/list/scatter/demo2/index.vue'), meta: { ...meta, title: '散点图示例 2' } },
-    { path: 'list/candle/demo1', name: `${pre}list-candle-demo1`, component: _import('demo/charts/list/candle/demo1/index.vue'), meta: { ...meta, title: 'K线图示例 1' } },
-    { path: 'list/candle/demo2', name: `${pre}list-candle-demo2`, component: _import('demo/charts/list/candle/demo2/index.vue'), meta: { ...meta, title: 'K线图示例 2' } },
-    { path: 'list/candle/demo3', name: `${pre}list-candle-demo3`, component: _import('demo/charts/list/candle/demo3/index.vue'), meta: { ...meta, title: 'K线图示例 3' } },
-    { path: 'list/gauge/demo1', name: `${pre}list-gauge-demo1`, component: _import('demo/charts/list/gauge/demo1/index.vue'), meta: { ...meta, title: '仪表盘示例 1' } },
-    { path: 'list/tree/demo1', name: `${pre}list-tree-demo1`, component: _import('demo/charts/list/tree/demo1/index.vue'), meta: { ...meta, title: '树图示例 1' } }
-  ])('demo-charts-')
-}
diff --git a/src/router/modules/d2-crud-plus.js b/src/router/modules/d2-crud-plus.js
new file mode 100644
index 00000000..c1f9ac0c
--- /dev/null
+++ b/src/router/modules/d2-crud-plus.js
@@ -0,0 +1,21 @@
+import layoutHeaderAside from '@/layout/header-aside'
+
+// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
+const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
+
+const meta = { auth: true }
+
+export default {
+  path: '/demo/d2-crud-plus',
+  name: 'demo-d2-crud-plus',
+  meta,
+  redirect: { name: 'demo-d2-crud-plus-index' },
+  component: layoutHeaderAside,
+  children: (pre => [
+    { path: 'index', name: `${pre}index`, component: _import('demo/d2-crud-plus/index'), meta: { ...meta, title: 'D2 CRUD PLUS 首页' } },
+    { path: 'demo', name: `${pre}demo`, component: _import('demo/d2-crud-plus/demo'), meta: { ...meta, title: '简单示例' } },
+    { path: 'group', name: `${pre}group`, component: _import('demo/d2-crud-plus/group'), meta: { ...meta, title: '表单分组' } },
+    { path: 'synthesize', name: `${pre}synthesize`, component: _import('demo/d2-crud-plus/synthesize'), meta: { ...meta, title: '综合示例' } }
+
+  ])('demo-d2-crud-plus-')
+}
diff --git a/src/router/modules/frame.js b/src/router/modules/frame.js
deleted file mode 100644
index 973dc050..00000000
--- a/src/router/modules/frame.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import layoutHeaderAside from '@/layout/header-aside'
-
-// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
-const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
-
-const meta = { auth: true }
-
-export default {
-  path: '/demo/frame',
-  name: 'demo-frame',
-  meta,
-  redirect: { name: 'demo-frame-index' },
-  component: layoutHeaderAside,
-  children: (pre => [
-    { path: 'index', name: `${pre}index`, component: _import('demo/frame/index'), meta: { ...meta, title: 'Frame 首页' } },
-    { path: 'html', name: `${pre}html`, component: _import('demo/frame/html'), meta: { ...meta, title: '静态 HTML' } },
-    { path: 'report', name: `${pre}report`, component: _import('demo/frame/report'), meta: { ...meta, title: 'Size report' } },
-    { path: 'd2-doc', name: `${pre}d2-doc`, component: _import('demo/frame/d2-doc'), meta: { ...meta, title: 'D2Admin 中文文档' } }
-  ])('demo-frame-')
-}
diff --git a/src/router/modules/playground.js b/src/router/modules/playground.js
index c6451f04..de276e35 100644
--- a/src/router/modules/playground.js
+++ b/src/router/modules/playground.js
@@ -12,7 +12,7 @@ export default {
   redirect: { name: 'demo-playground-index' },
   component: layoutHeaderAside,
   children: (pre => [
-    { path: 'index', name: `${pre}index`, component: _import('demo/playground/index'), meta: { ...meta, title: '试验台首页' } },
+    { path: 'index', name: `${pre}index`, component: _import('demo/playground/index'), meta: { ...meta, title: '功能首页' } },
     { path: 'store/page', name: `${pre}store-page`, component: _import('demo/playground/store/page'), meta: { ...meta, cache: true, title: '多标签页控制' } },
     { path: 'store/menu', name: `${pre}store-menu`, component: _import('demo/playground/store/menu'), meta: { ...meta, title: '菜单控制' } },
     { path: 'store/size', name: `${pre}store-size`, component: _import('demo/playground/store/size'), meta: { ...meta, title: '全局尺寸' } },
@@ -39,6 +39,9 @@ export default {
     { path: 'log/log', name: `${pre}log-log`, component: _import('demo/playground/log/log'), meta: { ...meta, title: '日志记录' } },
     { path: 'add-routes/routes', name: `${pre}add-routes-routes`, component: _import('demo/playground/add-routes/routes'), meta: { ...meta, title: '添加页面' } },
     { path: 'env', name: `${pre}env`, component: _import('demo/playground/env'), meta: { ...meta, title: '环境信息' } },
-    { path: 'locales', name: `${pre}locales`, component: _import('demo/playground/locales'), meta: { ...meta, title: '国际化' } }
+    { path: 'locales', name: `${pre}locales`, component: _import('demo/playground/locales'), meta: { ...meta, title: '国际化' } },
+    { path: 'frame/html', name: `${pre}frame-html`, component: _import('demo/playground/frame/html'), meta: { ...meta, title: '静态 HTML' } },
+    { path: 'frame/report', name: `${pre}frame-report`, component: _import('demo/playground/frame/report'), meta: { ...meta, title: 'Size report' } },
+    { path: 'frame/d2-doc', name: `${pre}frame-d2-doc`, component: _import('demo/playground/frame/d2-doc'), meta: { ...meta, title: 'D2Admin 中文文档' } }
   ])('demo-playground-')
 }
diff --git a/src/router/modules/plugins.js b/src/router/modules/plugins.js
index 8bebc4a3..da635b9d 100644
--- a/src/router/modules/plugins.js
+++ b/src/router/modules/plugins.js
@@ -21,6 +21,50 @@ export default {
     { path: 'import/csv', name: `${pre}import-csv`, component: _import('demo/plugins/import/csv.vue'), meta: { ...meta, title: '导入 csv' } },
     { path: 'import/xlsx', name: `${pre}import-xlsx`, component: _import('demo/plugins/import/xlsx.vue'), meta: { ...meta, title: '导入 xlsx' } },
     { path: 'index', name: `${pre}index`, component: _import('demo/plugins/index'), meta: { ...meta, title: '插件首页' } },
-    { path: 'js-cookie', name: `${pre}js-cookie`, component: _import('demo/plugins/js-cookie'), meta: { ...meta, title: 'Cookie' } }
+    { path: 'js-cookie', name: `${pre}js-cookie`, component: _import('demo/plugins/js-cookie'), meta: { ...meta, title: 'Cookie' } },
+    { path: 'charts/line/demo1', name: `${pre}charts-line-demo1`, component: _import('demo/plugins/charts/line/demo1/index.vue'), meta: { ...meta, title: '折线图示例 1' } },
+    { path: 'charts/line/demo2', name: `${pre}charts-line-demo2`, component: _import('demo/plugins/charts/line/demo2/index.vue'), meta: { ...meta, title: '折线图示例 2' } },
+    { path: 'charts/line/demo3', name: `${pre}charts-line-demo3`, component: _import('demo/plugins/charts/line/demo3/index.vue'), meta: { ...meta, title: '折线图示例 3' } },
+    { path: 'charts/line/demo4', name: `${pre}charts-line-demo4`, component: _import('demo/plugins/charts/line/demo4/index.vue'), meta: { ...meta, title: '折线图示例 4' } },
+    { path: 'charts/line/demo5', name: `${pre}charts-line-demo5`, component: _import('demo/plugins/charts/line/demo5/index.vue'), meta: { ...meta, title: '折线图示例 5' } },
+    { path: 'charts/histogram/demo1', name: `${pre}charts-histogram-demo1`, component: _import('demo/plugins/charts/histogram/demo1/index.vue'), meta: { ...meta, title: '柱状图示例 1' } },
+    { path: 'charts/histogram/demo2', name: `${pre}charts-histogram-demo2`, component: _import('demo/plugins/charts/histogram/demo2/index.vue'), meta: { ...meta, title: '柱状图示例 2' } },
+    { path: 'charts/histogram/demo3', name: `${pre}charts-histogram-demo3`, component: _import('demo/plugins/charts/histogram/demo3/index.vue'), meta: { ...meta, title: '柱状图示例 3' } },
+    { path: 'charts/histogram/demo4', name: `${pre}charts-histogram-demo4`, component: _import('demo/plugins/charts/histogram/demo4/index.vue'), meta: { ...meta, title: '柱状图示例 4' } },
+    { path: 'charts/histogram/demo5', name: `${pre}charts-histogram-demo5`, component: _import('demo/plugins/charts/histogram/demo5/index.vue'), meta: { ...meta, title: '柱状图示例 5' } },
+    { path: 'charts/histogram/demo6', name: `${pre}charts-histogram-demo6`, component: _import('demo/plugins/charts/histogram/demo6/index.vue'), meta: { ...meta, title: '柱状图示例 6' } },
+    { path: 'charts/bar/demo1', name: `${pre}charts-bar-demo1`, component: _import('demo/plugins/charts/bar/demo1/index.vue'), meta: { ...meta, title: '条形图示例 1' } },
+    { path: 'charts/bar/demo2', name: `${pre}charts-bar-demo2`, component: _import('demo/plugins/charts/bar/demo2/index.vue'), meta: { ...meta, title: '条形图示例 2' } },
+    { path: 'charts/bar/demo3', name: `${pre}charts-bar-demo3`, component: _import('demo/plugins/charts/bar/demo3/index.vue'), meta: { ...meta, title: '条形图示例 3' } },
+    { path: 'charts/bar/demo4', name: `${pre}charts-bar-demo4`, component: _import('demo/plugins/charts/bar/demo4/index.vue'), meta: { ...meta, title: '条形图示例 4' } },
+    { path: 'charts/bar/demo5', name: `${pre}charts-bar-demo5`, component: _import('demo/plugins/charts/bar/demo5/index.vue'), meta: { ...meta, title: '条形图示例 5' } },
+    { path: 'charts/pie/demo1', name: `${pre}charts-pie-demo1`, component: _import('demo/plugins/charts/pie/demo1/index.vue'), meta: { ...meta, title: '饼图示例 1' } },
+    { path: 'charts/pie/demo2', name: `${pre}charts-pie-demo2`, component: _import('demo/plugins/charts/pie/demo2/index.vue'), meta: { ...meta, title: '饼图示例 2' } },
+    { path: 'charts/pie/demo3', name: `${pre}charts-pie-demo3`, component: _import('demo/plugins/charts/pie/demo3/index.vue'), meta: { ...meta, title: '饼图示例 3' } },
+    { path: 'charts/pie/demo4', name: `${pre}charts-pie-demo4`, component: _import('demo/plugins/charts/pie/demo4/index.vue'), meta: { ...meta, title: '饼图示例 4' } },
+    { path: 'charts/pie/demo5', name: `${pre}charts-pie-demo5`, component: _import('demo/plugins/charts/pie/demo5/index.vue'), meta: { ...meta, title: '饼图示例 5' } },
+    { path: 'charts/pie/demo6', name: `${pre}charts-pie-demo6`, component: _import('demo/plugins/charts/pie/demo6/index.vue'), meta: { ...meta, title: '饼图示例 6' } },
+    { path: 'charts/ring/demo1', name: `${pre}charts-ring-demo1`, component: _import('demo/plugins/charts/ring/demo1/index.vue'), meta: { ...meta, title: '环图示例 1' } },
+    { path: 'charts/ring/demo2', name: `${pre}charts-ring-demo2`, component: _import('demo/plugins/charts/ring/demo2/index.vue'), meta: { ...meta, title: '环图示例 2' } },
+    { path: 'charts/ring/demo3', name: `${pre}charts-ring-demo3`, component: _import('demo/plugins/charts/ring/demo3/index.vue'), meta: { ...meta, title: '环图示例 3' } },
+    { path: 'charts/ring/demo4', name: `${pre}charts-ring-demo4`, component: _import('demo/plugins/charts/ring/demo4/index.vue'), meta: { ...meta, title: '环图示例 4' } },
+    { path: 'charts/ring/demo5', name: `${pre}charts-ring-demo5`, component: _import('demo/plugins/charts/ring/demo5/index.vue'), meta: { ...meta, title: '环图示例 5' } },
+    { path: 'charts/waterfall/demo1', name: `${pre}charts-waterfall-demo1`, component: _import('demo/plugins/charts/waterfall/demo1/index.vue'), meta: { ...meta, title: '瀑布图示例 1' } },
+    { path: 'charts/funnel/demo1', name: `${pre}charts-funnel-demo1`, component: _import('demo/plugins/charts/funnel/demo1/index.vue'), meta: { ...meta, title: '漏斗图示例 1' } },
+    { path: 'charts/funnel/demo2', name: `${pre}charts-funnel-demo2`, component: _import('demo/plugins/charts/funnel/demo2/index.vue'), meta: { ...meta, title: '漏斗图示例 2' } },
+    { path: 'charts/radar/demo1', name: `${pre}charts-radar-demo1`, component: _import('demo/plugins/charts/radar/demo1/index.vue'), meta: { ...meta, title: '雷达图示例 1' } },
+    { path: 'charts/map/demo1', name: `${pre}charts-map-demo1`, component: _import('demo/plugins/charts/map/demo1/index.vue'), meta: { ...meta, title: '地图示例 1' } },
+    { path: 'charts/map/demo2', name: `${pre}charts-map-demo2`, component: _import('demo/plugins/charts/map/demo2/index.vue'), meta: { ...meta, title: '地图示例 2' } },
+    { path: 'charts/map/demo3', name: `${pre}charts-map-demo3`, component: _import('demo/plugins/charts/map/demo3/index.vue'), meta: { ...meta, title: '地图示例 3' } },
+    { path: 'charts/sankey/demo1', name: `${pre}charts-sankey-demo1`, component: _import('demo/plugins/charts/sankey/demo1/index.vue'), meta: { ...meta, title: '桑基图示例 1' } },
+    { path: 'charts/heatmap/demo1', name: `${pre}charts-heatmap-demo1`, component: _import('demo/plugins/charts/heatmap/demo1/index.vue'), meta: { ...meta, title: '热力图示例 1' } },
+    { path: 'charts/heatmap/demo2', name: `${pre}charts-heatmap-demo2`, component: _import('demo/plugins/charts/heatmap/demo2/index.vue'), meta: { ...meta, title: '热力图示例 2' } },
+    { path: 'charts/scatter/demo1', name: `${pre}charts-scatter-demo1`, component: _import('demo/plugins/charts/scatter/demo1/index.vue'), meta: { ...meta, title: '散点图示例 1' } },
+    { path: 'charts/scatter/demo2', name: `${pre}charts-scatter-demo2`, component: _import('demo/plugins/charts/scatter/demo2/index.vue'), meta: { ...meta, title: '散点图示例 2' } },
+    { path: 'charts/candle/demo1', name: `${pre}charts-candle-demo1`, component: _import('demo/plugins/charts/candle/demo1/index.vue'), meta: { ...meta, title: 'K线图示例 1' } },
+    { path: 'charts/candle/demo2', name: `${pre}charts-candle-demo2`, component: _import('demo/plugins/charts/candle/demo2/index.vue'), meta: { ...meta, title: 'K线图示例 2' } },
+    { path: 'charts/candle/demo3', name: `${pre}charts-candle-demo3`, component: _import('demo/plugins/charts/candle/demo3/index.vue'), meta: { ...meta, title: 'K线图示例 3' } },
+    { path: 'charts/gauge/demo1', name: `${pre}charts-gauge-demo1`, component: _import('demo/plugins/charts/gauge/demo1/index.vue'), meta: { ...meta, title: '仪表盘示例 1' } },
+    { path: 'charts/tree/demo1', name: `${pre}charts-tree-demo1`, component: _import('demo/plugins/charts/tree/demo1/index.vue'), meta: { ...meta, title: '树图示例 1' } }
   ])('demo-plugins-')
 }
diff --git a/src/router/routes.js b/src/router/routes.js
index 9e57ad35..e5df54fb 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,10 +1,8 @@
 import playground from './modules/playground'
-import frame from './modules/frame'
 import d2Crud from './modules/d2-crud'
+import d2CrudPlus from './modules/d2-crud-plus'
 import plugins from './modules/plugins'
-import charts from './modules/charts'
 import components from './modules/components'
-import business from './modules/business'
 
 import layoutHeaderAside from '@/layout/header-aside'
 
@@ -57,12 +55,10 @@ const frameIn = [
     ]
   },
   playground,
-  frame,
   d2Crud,
+  d2CrudPlus,
   plugins,
-  charts,
-  components,
-  business
+  components
 ]
 
 /**
diff --git a/src/views/demo/business/index/index.vue b/src/views/demo/business/index/index.vue
deleted file mode 100644
index e3bd2950..00000000
--- a/src/views/demo/business/index/index.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <d2-container type="ghost">
-    <d2-module-index-banner slot="header" v-bind="banner"/>
-    <d2-module-index-menu :menu="menu"/>
-  </d2-container>
-</template>
-
-<script>
-import menu from '@/menu/modules/demo-business'
-export default {
-  data () {
-    return {
-      menu,
-      banner: {
-        title: 'DEMOS',
-        subTitle: '提供借鉴和参考的页面'
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/business/issues/142/edit-cache-db.vue b/src/views/demo/business/issues/142/edit-cache-db.vue
deleted file mode 100644
index 845ed449..00000000
--- a/src/views/demo/business/issues/142/edit-cache-db.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <d2-container
-    type="card"
-    class="page">
-    <el-form
-      ref="form"
-      :model="form"
-      label-width="80px"
-      class="page--form">
-      <el-form-item label="姓名">
-        <el-input v-model="form.name"/>
-      </el-form-item>
-      <el-form-item label="地址">
-        <el-input type="textarea" v-model="form.address"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleSubmit">修改</el-button>
-      </el-form-item>
-    </el-form>
-  </d2-container>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import base from './mixins/index'
-export default {
-  mixins: [
-    base
-  ],
-  // 第一次进入或从其他组件对应路由进入时触发
-  beforeRouteEnter (to, from, next) {
-    const id = to.params.id
-    if (id) {
-      next(async instance => {
-        if (from.name === 'demo-business-issues-142') {
-          await instance.getFormData(id)
-          instance.saveDataToDb()
-        } else {
-          instance.loadDataFromDb(to)
-        }
-      })
-    }
-  },
-  // 在同一组件对应的多个路由间切换时触发
-  beforeRouteUpdate (to, from, next) {
-    const id = to.params.id
-    if (id) {
-      this.loadDataFromDb(to)
-      next()
-    }
-  },
-  watch: {
-    // 表单变化的时候更新持久化
-    form: {
-      handler () {
-        this.saveDataToDb()
-      },
-      deep: true
-    }
-  },
-  methods: {
-    ...mapActions('d2admin/db', [
-      'pageSet',
-      'pageGet'
-    ]),
-    // 将页面数据同步到持久化存储
-    saveDataToDb () {
-      this.pageSet({ instance: this, user: true })
-    },
-    // 从持久化存储恢复数据到页面
-    async loadDataFromDb (to) {
-      const instance = {
-        $route: {
-          fullPath: to.fullPath
-        },
-        $data: {}
-      }
-      const data = await this.pageGet({
-        instance,
-        user: true
-      })
-      for (const key in data) {
-        this[key] = data[key]
-      }
-      this.$message.success('loadDataFromDb')
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.page {
-  .page--form {
-    max-width: 460px;
-  }
-}
-</style>
diff --git a/src/views/demo/business/issues/142/edit.vue b/src/views/demo/business/issues/142/edit.vue
deleted file mode 100644
index 184e6e30..00000000
--- a/src/views/demo/business/issues/142/edit.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <d2-container
-    type="card"
-    class="page">
-    <el-form
-      ref="form"
-      :model="form"
-      label-width="80px"
-      class="page--form">
-      <el-form-item label="姓名">
-        <el-input v-model="form.name"/>
-      </el-form-item>
-      <el-form-item label="地址">
-        <el-input type="textarea" v-model="form.address"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleSubmit">修改</el-button>
-      </el-form-item>
-    </el-form>
-  </d2-container>
-</template>
-
-<script>
-import base from './mixins/index'
-export default {
-  mixins: [
-    base
-  ],
-  // 第一次进入或从其他组件对应路由进入时触发
-  beforeRouteEnter (to, from, next) {
-    const id = to.params.id
-    if (id) {
-      next(instance => {
-        instance.resetFormData()
-        instance.getFormData(id)
-      })
-    } else {
-      next(new Error('未指定ID'))
-    }
-  },
-  // 在同一组件对应的多个路由间切换时触发
-  beforeRouteUpdate (to, from, next) {
-    const id = to.params.id
-    if (id) {
-      this.resetFormData()
-      this.getFormData(id)
-      next()
-    } else {
-      next(new Error('未指定ID'))
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.page {
-  .page--form {
-    max-width: 460px;
-  }
-}
-</style>
diff --git a/src/views/demo/business/issues/142/index.vue b/src/views/demo/business/issues/142/index.vue
deleted file mode 100644
index 27fb86e2..00000000
--- a/src/views/demo/business/issues/142/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <d2-container type="card">
-    <d2-crud
-      v-bind="crud"
-      @edit="({ index, row }) => goToEditPage('demo-business-issues-142-edit', row.id)"
-      @edit-cache-db="({ index, row }) => goToEditPage('demo-business-issues-142-edit-cache-db', row.id)"
-      style="margin: -15px 0;"/>
-    <d2-link-btn
-      slot="footer"
-      title="issue #142"
-      link="https://github.com/d2-projects/d2-admin/issues/142"/>
-  </d2-container>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      crud: {
-        columns: [
-          { title: '姓名', key: 'name', width: 100 },
-          { title: '地址', key: 'address' }
-        ],
-        data: [],
-        options: {
-          border: true,
-          size: 'mini'
-        },
-        rowHandle: {
-          align: 'center',
-          width: 240,
-          custom: [
-            {
-              text: '无缓存编辑',
-              size: 'mini',
-              emit: 'edit'
-            },
-            {
-              text: '带缓存编辑 DB',
-              size: 'mini',
-              emit: 'edit-cache-db'
-            }
-          ]
-        }
-      }
-    }
-  },
-  created () {
-    this.getTableData()
-  },
-  methods: {
-    // 请求表格数据
-    async getTableData () {
-      try {
-        const res = await this.$api.DEMO_BUSINESS_ISSUE_142_LIST()
-        this.crud.data = res.list
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    // 跳转到编辑页面
-    goToEditPage (name, id) {
-      this.$router.push({
-        name,
-        params: {
-          id
-        }
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/business/issues/142/mixins/index.js b/src/views/demo/business/issues/142/mixins/index.js
deleted file mode 100644
index 91505e12..00000000
--- a/src/views/demo/business/issues/142/mixins/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true
-    }
-  },
-  data () {
-    return {
-      form: {
-        name: '',
-        address: ''
-      }
-    }
-  },
-  methods: {
-    // [业务逻辑] 重置表单
-    resetFormData () {
-      this.form = {
-        name: '',
-        address: ''
-      }
-    },
-    // [业务逻辑] 根据 id 获取数据
-    async getFormData (id) {
-      // 重置表单
-      this.resetFormData()
-      // 请求数据
-      try {
-        const res = await this.$api.DEMO_BUSINESS_ISSUE_142_DETAIL(id)
-        const { name, address } = res
-        this.form = { name, address }
-        this.$message.success('getFormData')
-      } catch (error) {
-        console.log('error', error)
-      }
-    },
-    // [业务逻辑] 提交
-    handleSubmit () {
-      this.$notify({
-        title: 'Submit',
-        message: '提交了表单',
-        type: 'info'
-      })
-    }
-  }
-}
diff --git a/src/views/demo/business/table/1/componnets/BooleanControl/index.vue b/src/views/demo/business/table/1/componnets/BooleanControl/index.vue
deleted file mode 100644
index 91856e9a..00000000
--- a/src/views/demo/business/table/1/componnets/BooleanControl/index.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <el-popover
-    :placement="popoverPlacement"
-    :title="popoverTitle"
-    :width="popoverWidth"
-    trigger="hover">
-    <el-switch
-      v-model="currentValue"
-      :active-color="activeColor"
-      :inactive-color="inactiveColor"
-      :active-text="activeText"
-      :inactive-text="inactiveText"
-      :disabled="disabled"
-      @change="handleChange">
-    </el-switch>
-    <span slot="reference">
-      <slot v-if="value" name="active"/>
-      <slot v-else name="inactive"/>
-    </span>
-  </el-popover>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      default: false
-    },
-    popoverPlacement: {
-      default: 'left'
-    },
-    popoverTitle: {
-      default: '修改'
-    },
-    popoverWidth: {
-      default: '150'
-    },
-    activeColor: {
-      default: '#67C23A'
-    },
-    inactiveColor: {
-      default: '#F56C6C'
-    },
-    activeText: {
-      default: '正常'
-    },
-    inactiveText: {
-      default: '禁用'
-    }
-  },
-  data () {
-    return {
-      currentValue: false,
-      disabled: false
-    }
-  },
-  watch: {
-    value: {
-      handler (val) {
-        this.currentValue = val
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleChange (val) {
-      this.disabled = true
-      this.$message({
-        message: '正在发送请求',
-        type: 'info'
-      })
-      // 请将 setTimeout 修改为您的异步请求
-      setTimeout(() => {
-        this.disabled = false
-        this.$message({
-          message: '修改成功',
-          type: 'success'
-        })
-        this.$emit('change', val)
-        // 如果修改失败的话需要在这里手动将 currentValue 复原
-      }, 1000)
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/business/table/1/componnets/BooleanControlMini/index.vue b/src/views/demo/business/table/1/componnets/BooleanControlMini/index.vue
deleted file mode 100644
index 9bfebbe2..00000000
--- a/src/views/demo/business/table/1/componnets/BooleanControlMini/index.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <span slot="reference">
-    <d2-icon
-      v-if="disabled"
-      name="hourglass-start"
-      style="font-size: 14px; line-height: 32px; color: #909399;"/>
-    <span @click="handleClick">
-      <slot
-        v-if="!disabled && value"
-        name="active"/>
-      <slot
-        v-if="!disabled && !value"
-        name="inactive"/>
-    </span>
-  </span>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      default: false
-    }
-  },
-  data () {
-    return {
-      currentValue: false,
-      disabled: false
-    }
-  },
-  watch: {
-    value: {
-      handler (val) {
-        this.currentValue = val
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleClick () {
-      // 这里先赋值是为了和 TypeControl 使用一样的 handleChange
-      this.currentValue = !this.currentValue
-      this.handleChange(this.currentValue)
-    },
-    handleChange (val) {
-      this.disabled = true
-      this.$message({
-        message: '正在发送请求',
-        type: 'info'
-      })
-      // 请将 setTimeout 修改为您的异步请求
-      setTimeout(() => {
-        this.disabled = false
-        this.$message({
-          message: '修改成功',
-          type: 'success'
-        })
-        this.$emit('change', val)
-        // 如果修改失败的话需要在这里手动将 currentValue 复原
-      }, 1000)
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/business/table/1/componnets/PageFooter/index.vue b/src/views/demo/business/table/1/componnets/PageFooter/index.vue
deleted file mode 100644
index 31ac9067..00000000
--- a/src/views/demo/business/table/1/componnets/PageFooter/index.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <el-pagination
-    :current-page="current"
-    :page-size="size"
-    :total="total"
-    :page-sizes="[10, 20, 30, 40]"
-    layout="total, sizes, prev, pager, next, jumper"
-    style="margin: -10px;"
-    @size-change="handleSizeChange"
-    @current-change="handleCurrentChange">
-  </el-pagination>
-</template>
-
-<script>
-export default {
-  props: {
-    current: {
-      default: 0
-    },
-    size: {
-      default: 0
-    },
-    total: {
-      default: 0
-    }
-  },
-  methods: {
-    handleSizeChange (val) {
-      this.$emit('change', {
-        current: this.current,
-        size: val,
-        total: this.total
-      })
-    },
-    handleCurrentChange (val) {
-      this.$emit('change', {
-        current: val,
-        size: this.size,
-        total: this.total
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/business/table/1/componnets/PageHeader/index.vue b/src/views/demo/business/table/1/componnets/PageHeader/index.vue
deleted file mode 100644
index 6cfb1662..00000000
--- a/src/views/demo/business/table/1/componnets/PageHeader/index.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <el-form
-    :inline="true"
-    :model="form"
-    :rules="rules"
-    ref="form"
-    size="mini"
-    style="margin-bottom: -18px;">
-
-    <el-form-item label="状态" prop="type">
-      <el-select
-        v-model="form.type"
-        placeholder="状态选择"
-        style="width: 100px;">
-        <el-option label="状态 1" value="1"/>
-        <el-option label="状态 2" value="2"/>
-        <el-option label="状态 3" value="3"/>
-        <el-option label="状态 4" value="4"/>
-        <el-option label="状态 5" value="5"/>
-      </el-select>
-    </el-form-item>
-
-    <el-form-item label="用户" prop="user">
-      <el-input
-        v-model="form.user"
-        placeholder="用户"
-        style="width: 100px;"/>
-    </el-form-item>
-
-    <el-form-item label="卡密" prop="key">
-      <el-input
-        v-model="form.key"
-        placeholder="卡密"
-        style="width: 120px;"/>
-    </el-form-item>
-
-    <el-form-item label="备注" prop="note">
-      <el-input
-        v-model="form.note"
-        placeholder="备注"
-        style="width: 120px;"/>
-    </el-form-item>
-
-    <el-form-item>
-      <el-button
-        type="primary"
-        @click="handleFormSubmit">
-        <d2-icon name="search"/>
-        查询
-      </el-button>
-    </el-form-item>
-
-    <el-form-item>
-      <el-button
-        @click="handleFormReset">
-        <d2-icon name="refresh"/>
-        重置
-      </el-button>
-    </el-form-item>
-
-  </el-form>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      form: {
-        type: '1',
-        user: 'FairyEver',
-        key: '',
-        note: ''
-      },
-      rules: {
-        type: [{ required: true, message: '请选择一个状态', trigger: 'change' }],
-        user: [{ required: true, message: '请输入用户', trigger: 'change' }]
-      }
-    }
-  },
-  methods: {
-    handleFormSubmit () {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$emit('submit', this.form)
-        } else {
-          this.$notify.error({
-            title: '错误',
-            message: '表单校验失败'
-          })
-          return false
-        }
-      })
-    },
-    handleFormReset () {
-      this.$refs.form.resetFields()
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/business/table/1/componnets/PageMain/index.vue b/src/views/demo/business/table/1/componnets/PageMain/index.vue
deleted file mode 100644
index d4bbd40e..00000000
--- a/src/views/demo/business/table/1/componnets/PageMain/index.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-  <div>
-    <el-form
-      :inline="true"
-      size="mini">
-      <el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
-        <el-button-group>
-          <el-button
-            type="primary"
-            size="mini"
-            :disabled="currentTableData.length === 0"
-            @click="handleDownloadXlsx(currentTableData)">
-            xlsx
-          </el-button>
-          <el-button
-            type="primary"
-            size="mini"
-            :disabled="currentTableData.length === 0"
-            @click="handleDownloadCsv(currentTableData)">
-            csv
-          </el-button>
-        </el-button-group>
-      </el-form-item>
-      <el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
-        <el-button-group>
-          <el-button
-            type="primary"
-            size="mini"
-            :disabled="multipleSelection.length === 0"
-            @click="handleDownloadXlsx(multipleSelection)">
-            xlsx
-          </el-button>
-          <el-button
-            type="primary"
-            size="mini"
-            :disabled="multipleSelection.length === 0"
-            @click="handleDownloadCsv(multipleSelection)">
-            csv
-          </el-button>
-        </el-button-group>
-      </el-form-item>
-    </el-form>
-
-    <el-table
-      :data="currentTableData"
-      v-loading="loading"
-      size="mini"
-      stripe
-      style="width: 100%;"
-      @selection-change="handleSelectionChange">
-
-      <el-table-column
-        type="selection"
-        width="55">
-      </el-table-column>
-
-      <el-table-column label="卡密" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          {{scope.row.key}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="面值" width="60" align="center">
-        <template slot-scope="scope">
-          <el-tag
-            size="mini"
-            type="success">
-            {{scope.row.value}}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="状态" width="50" align="center">
-        <template slot-scope="scope">
-          <boolean-control
-            :value="scope.row.type"
-            @change="(val) => {
-              handleSwitchChange(val, scope.$index)
-            }">
-            <d2-icon
-              name="check-circle"
-              style="font-size: 20px; line-height: 32px; color: #67C23A;"
-              slot="active"/>
-            <d2-icon
-              name="times-circle"
-              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
-              slot="inactive"/>
-          </boolean-control>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="状态" width="50" align="center">
-        <template slot-scope="scope">
-          <boolean-control-mini
-            :value="scope.row.type"
-            @change="(val) => {
-              handleSwitchChange(val, scope.$index)
-            }">
-            <d2-icon
-              name="check-circle"
-              style="font-size: 20px; line-height: 32px; color: #67C23A;"
-              slot="active"/>
-            <d2-icon
-              name="times-circle"
-              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
-              slot="inactive"/>
-          </boolean-control-mini>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="管理员" width="60">
-        <template slot-scope="scope">
-          {{scope.row.admin}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="管理员备注" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          {{scope.row.adminNote}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          {{scope.row.dateTimeCreat}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="使用状态" width="100" align="center">
-        <template slot-scope="scope">
-          <el-tag
-            size="mini"
-            :type="scope.row.used ? 'info' : ''">
-            {{scope.row.used ? '已使用' : '未使用'}}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          {{scope.row.dateTimeUse}}
-        </template>
-      </el-table-column>
-
-    </el-table>
-  </div>
-</template>
-
-<script>
-import BooleanControl from '../BooleanControl'
-import BooleanControlMini from '../BooleanControlMini'
-export default {
-  components: {
-    BooleanControl,
-    BooleanControlMini
-  },
-  props: {
-    tableData: {
-      default: () => []
-    },
-    loading: {
-      default: false
-    }
-  },
-  data () {
-    return {
-      currentTableData: [],
-      multipleSelection: [],
-      downloadColumns: [
-        { label: '卡密', prop: 'key' },
-        { label: '面值', prop: 'value' },
-        { label: '状态', prop: 'type' },
-        { label: '管理员', prop: 'admin' },
-        { label: '管理员备注', prop: 'adminNote' },
-        { label: '创建时间', prop: 'dateTimeCreat' },
-        { label: '使用状态', prop: 'used' },
-        { label: '使用时间', prop: 'dateTimeUse' }
-      ]
-    }
-  },
-  watch: {
-    tableData: {
-      handler (val) {
-        this.currentTableData = val
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleSwitchChange (val, index) {
-      const oldValue = this.currentTableData[index]
-      this.$set(this.currentTableData, index, {
-        ...oldValue,
-        type: val
-      })
-      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
-    },
-    handleSelectionChange (val) {
-      this.multipleSelection = val
-    },
-    downloadDataTranslate (data) {
-      return data.map(row => ({
-        ...row,
-        type: row.type ? '禁用' : '正常',
-        used: row.used ? '已使用' : '未使用'
-      }))
-    },
-    handleDownloadXlsx (data) {
-      this.$export.excel({
-        title: 'D2Admin 表格示例',
-        columns: this.downloadColumns,
-        data: this.downloadDataTranslate(data)
-      })
-        .then(() => {
-          this.$message('导出表格成功')
-        })
-    },
-    handleDownloadCsv (data) {
-      this.$export.csv({
-        title: 'D2Admin 表格示例',
-        columns: this.downloadColumns,
-        data: this.downloadDataTranslate(data)
-      })
-        .then(() => {
-          this.$message('导出CSV成功')
-        })
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/business/table/1/index.vue b/src/views/demo/business/table/1/index.vue
deleted file mode 100644
index 4bac8514..00000000
--- a/src/views/demo/business/table/1/index.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <d2-container>
-    <demo-page-header
-      slot="header"
-      @submit="handleSubmit"
-      ref="header"/>
-    <demo-page-main
-      :table-data="table"
-      :loading="loading"/>
-    <demo-page-footer
-      slot="footer"
-      :current="page.pageCurrent"
-      :size="page.pageSize"
-      :total="page.pageTotal"
-      @change="handlePaginationChange"/>
-  </d2-container>
-</template>
-
-<script>
-export default {
-  // name 值和本页的 $route.name 一致才可以缓存页面
-  name: 'demo-business-table-1',
-  components: {
-    DemoPageHeader: () => import('./componnets/PageHeader'),
-    DemoPageMain: () => import('./componnets/PageMain'),
-    DemoPageFooter: () => import('./componnets/PageFooter')
-  },
-  data () {
-    return {
-      table: [],
-      loading: false,
-      page: {
-        pageCurrent: 1,
-        pageSize: 10,
-        pageTotal: 0
-      }
-    }
-  },
-  methods: {
-    async handlePaginationChange (val) {
-      this.$notify({
-        title: '分页变化',
-        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
-      })
-      this.page = {
-        pageCurrent: val.current,
-        pageSize: val.size,
-        pageTotal: val.total
-      }
-      // nextTick 只是为了优化示例中 notify 的显示
-      await this.$nextTick()
-      this.$refs.header.handleFormSubmit()
-    },
-    handleSubmit (form) {
-      this.loading = true
-      this.$notify({
-        title: '开始请求模拟表格数据'
-      })
-      this.$api.DEMO_BUSINESS_TABLE_1_LIST({
-        ...form,
-        ...this.page
-      })
-        .then(res => {
-          this.loading = false
-          this.$notify({
-            title: '模拟表格数据请求完毕'
-          })
-          this.table = res.list
-          this.page.pageTotal = res.page.total
-        })
-        .catch(err => {
-          this.loading = false
-          this.$notify({
-            title: '模拟表格数据请求异常'
-          })
-          console.log('err', err)
-        })
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/charts/index/index.vue b/src/views/demo/charts/index/index.vue
deleted file mode 100644
index 6bc821b5..00000000
--- a/src/views/demo/charts/index/index.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <d2-container type="ghost">
-    <d2-module-index-banner slot="header" v-bind="banner"/>
-    <d2-module-index-menu :menu="menu"/>
-  </d2-container>
-</template>
-
-<script>
-import menu from '@/menu/modules/demo-charts'
-export default {
-  data () {
-    return {
-      menu,
-      banner: {
-        title: 'CHARTS',
-        subTitle: '图表示例'
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/d2-crud-plus/demo/api.js b/src/views/demo/d2-crud-plus/demo/api.js
new file mode 100644
index 00000000..2007f17d
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/demo/api.js
@@ -0,0 +1,36 @@
+// 请求真实后端
+// import { request } from '@/api/service'
+
+// 请求模拟数据
+import { requestForMock } from '@/api/service'
+
+export function GetList (query) {
+  return requestForMock({
+    url: '/d2crudplus/test/page',
+    method: 'get',
+    data: query
+  })
+}
+
+export function AddObj (obj) {
+  return requestForMock({
+    url: '/d2crudplus/test/add',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function UpdateObj (obj) {
+  return requestForMock({
+    url: '/d2crudplus/test/update',
+    method: 'post',
+    data: obj
+  })
+}
+export function DelObj (id) {
+  return requestForMock({
+    url: '/d2crudplus/test/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/views/demo/d2-crud-plus/demo/crud.js b/src/views/demo/d2-crud-plus/demo/crud.js
new file mode 100644
index 00000000..28db5fec
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/demo/crud.js
@@ -0,0 +1,51 @@
+export const crudOptions = (vm) => {
+  return {
+    viewOptions: {
+      componentType: 'row' // 查看对话框字段使用行组件
+    },
+    columns: [
+      {
+        title: 'ID',
+        key: 'id',
+        width: 90,
+        form: {
+          disabled: true
+        }
+      },
+      {
+        title: '日期',
+        key: 'date',
+        type: 'date'
+      },
+      {
+        title: '状态',
+        key: 'status',
+        sortable: true,
+        search: { disabled: false },
+        type: 'select',
+        dict: {
+          url: '/d2crudplus/dicts/OpenStatusEnum'
+        }
+      },
+      {
+        title: '地区',
+        key: 'address',
+        sortable: true,
+        width: 180,
+        search: { disabled: false },
+        type: 'select',
+        form: {
+          component: {
+            props: {
+              multiple: true // 多选
+            }
+          }
+        },
+        dict: {
+          data: [{ value: 'sz', label: '深圳' }, { value: 'gz', label: '广州' }, { value: 'wh', label: '武汉' }, { value: 'sh', label: '上海' }]
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }
+    ]
+  }
+}
diff --git a/src/views/demo/d2-crud-plus/demo/index.vue b/src/views/demo/d2-crud-plus/demo/index.vue
new file mode 100644
index 00000000..8e045446
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/demo/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <d2-container  :class="{'page-compact':crud.pageOptions.compact}">
+    <template slot="header">简单示例
+      <d2-link-btn  style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
+    </template>
+    <d2-crud-x
+        ref="d2Crud"
+        v-bind="_crudProps"
+        v-on="_crudListeners"
+    >
+      <div slot="header">
+        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
+        <el-button-group>
+          <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
+        </el-button-group>
+        <crud-toolbar :search.sync="crud.searchOptions.show"
+                      :compact.sync="crud.pageOptions.compact"
+                      :columns="crud.columns"
+                      @refresh="doRefresh()"
+                      @columns-filter-changed="handleColumnsFilterChanged"/>
+
+      </div>
+    </d2-crud-x>
+
+  </d2-container>
+</template>
+
+<script>
+import * as api from './api'
+import { crudOptions } from './crud'
+import { d2CrudPlus } from 'd2-crud-plus'
+export default {
+  name: 'formSelect',
+  mixins: [d2CrudPlus.crud],
+  data () {
+    return {
+    }
+  },
+  methods: {
+    getCrudOptions () {
+      return crudOptions(this)
+    },
+    pageRequest (query) {
+      return api.GetList(query)
+    },
+    addRequest (row) {
+      return api.AddObj(row)
+    },
+    updateRequest (row) {
+      return api.UpdateObj(row)
+    },
+    delRequest (row) {
+      return api.DelObj(row.id)
+    }
+  }
+}
+</script>
diff --git a/src/views/demo/d2-crud-plus/demo/mock.js b/src/views/demo/d2-crud-plus/demo/mock.js
new file mode 100644
index 00000000..784266be
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/demo/mock.js
@@ -0,0 +1,49 @@
+import mockUtil from '../mock/base'
+const options = {
+  name: 'd2crudplus/test',
+  idGenerator: 0
+}
+const list = [
+  {
+    date: '2016-05-02',
+    status: '0',
+    address: 'sz'
+  },
+  {
+    date: '2016-05-04',
+    status: '1',
+    address: 'sh,sz'
+  },
+  {
+    date: 2232433534511,
+    status: '1',
+    address: 'gz'
+  },
+  {
+    date: '2016-05-03',
+    status: '2',
+    address: 'wh,gz'
+  }
+]
+const openStatus = [
+  { value: '1', label: '打开', color: 'success' },
+  { value: '2', label: '停止', color: 'info' },
+  { value: '0', label: '关闭', color: 'danger' }
+]
+
+options.list = list
+const mock = mockUtil.buildMock(options)
+mock.push(
+  {
+    path: '/d2crudplus/dicts/OpenStatusEnum',
+    method: 'get',
+    handle ({ body }) {
+      return {
+        code: 0,
+        msg: 'success',
+        data: openStatus
+      }
+    }
+  }
+)
+export default mock
diff --git a/src/views/demo/d2-crud-plus/group/api.js b/src/views/demo/d2-crud-plus/group/api.js
new file mode 100644
index 00000000..6229116b
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/group/api.js
@@ -0,0 +1,36 @@
+// 请求真实后端
+// import { request } from '@/api/service'
+
+// 请求模拟数据
+import { requestForMock } from '@/api/service'
+
+export function GetList (query) {
+  return requestForMock({
+    url: '/d2crudplus/group/page',
+    method: 'get',
+    data: query
+  })
+}
+
+export function AddObj (obj) {
+  return requestForMock({
+    url: '/d2crudplus/group/add',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function UpdateObj (obj) {
+  return requestForMock({
+    url: '/d2crudplus/group/update',
+    method: 'post',
+    data: obj
+  })
+}
+export function DelObj (id) {
+  return requestForMock({
+    url: '/d2crudplus/group/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/views/demo/d2-crud-plus/group/crud.js b/src/views/demo/d2-crud-plus/group/crud.js
new file mode 100644
index 00000000..d6ac8352
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/group/crud.js
@@ -0,0 +1,121 @@
+export const crudOptions = {
+  options: {
+    height: '100%' // 表格高度100%, 使用toolbar必须设置
+  },
+  viewOptions: {
+    disabled: false
+  },
+  rowHandle: {
+  },
+  columns: [
+    {
+      title: 'ID',
+      key: 'id',
+      width: 90,
+      form: {
+        disabled: true
+      }
+    },
+    {
+      title: '商品标题',
+      key: 'title',
+      sortable: true
+    },
+    {
+      title: '商品代码',
+      key: 'code',
+      search: { disabled: false },
+      sortable: true
+    },
+    {
+      title: '图片',
+      key: 'images',
+      sortable: true,
+      type: 'image-uploader',
+      form: {
+        component: {
+          span: 24
+        }
+      }
+    },
+    {
+      title: '价格',
+      key: 'price',
+      sortable: true
+    },
+    {
+      title: '库存',
+      key: 'store',
+      sortable: true,
+      type: 'number'
+    },
+    {
+      title: '简介',
+      key: 'intro',
+      sortable: true,
+      type: 'text-area'
+    },
+    {
+      title: '详情',
+      key: 'content',
+      sortable: true,
+      type: 'editor-quill',
+      disabled: true
+    },
+    {
+      title: '自定义',
+      key: 'custom',
+      sortable: true,
+      form: {
+        component: {
+          span: 24
+        },
+        slot: true
+      }
+    },
+    {
+      title: '自定义2',
+      key: 'custom2',
+      sortable: true,
+      form: {
+        component: {
+          span: 24
+        },
+        slot: true
+      }
+    }
+  ],
+  formGroup: {
+    type: 'collapse', // tab
+    accordion: false,
+    groups: {
+      base: {
+        title: '商品基础',
+        icon: 'el-icon-goods',
+        columns: ['title', 'code', 'images']
+      },
+      price: {
+        title: '库存价格',
+        icon: 'el-icon-price-tag',
+        columns: ['store', 'price']
+      },
+      info: {
+        title: '详情',
+        collapsed: false,
+        icon: 'el-icon-warning-outline',
+        columns: ['intro', 'content']
+      },
+      custom: {
+        title: '自定义',
+        collapsed: true,
+        show (context) {
+          console.log('custom context', context)
+          return context.mode === 'view'
+        },
+        disabled: false,
+        icon: 'el-icon-warning-outline',
+        columns: ['custom', 'custom2']
+      }
+    }
+  }
+}
diff --git a/src/views/demo/d2-crud-plus/group/index.vue b/src/views/demo/d2-crud-plus/group/index.vue
new file mode 100644
index 00000000..3540ef79
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/group/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
+    <template slot="header">表单分组
+      <d2-link-btn  style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
+    </template>
+    <d2-crud-x
+        ref="d2Crud"
+        v-bind="_crudProps"
+        v-on="_crudListeners"
+        >
+      <div slot="header">
+        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
+        <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
+        <crud-toolbar :search.sync="crud.searchOptions.show"
+                      :compact.sync="crud.pageOptions.compact"
+                      :columns="crud.columns"
+                      @refresh="doRefresh()"
+                      @columns-filter-changed="handleColumnsFilterChanged"/>
+      </div>
+      <div slot="priceGroupTitleSlot" slot-scope="scope">
+        <h3 style="display: inline;" class="group-title"> <i class="header-icon" :class="scope.group.icon"/> {{scope.group.title}}</h3>
+        <span style="margin-left:10px">（我是自定义标题）</span>
+      </div>
+
+      <div slot="customFormSlot" >
+        <span >自定义选项</span>
+      </div>
+
+    </d2-crud-x>
+  </d2-container>
+</template>
+
+<script>
+import { crudOptions } from './crud'
+import { d2CrudPlus } from 'd2-crud-plus'
+import { GetList, AddObj, UpdateObj, DelObj } from './api'
+export default {
+  name: 'formGroup',
+  mixins: [d2CrudPlus.crud],
+  methods: {
+    getCrudOptions () {
+      return crudOptions
+    },
+    pageRequest (query) {
+      return GetList(query)
+    },
+    addRequest (row) {
+      return AddObj(row)
+    },
+    updateRequest (row) {
+      return UpdateObj(row)
+    },
+    delRequest (row) {
+      return DelObj(row.id)
+    }
+  }
+}
+</script>
+<style>
+  .d2-crud .group-title{color:#67c23a}
+</style>
diff --git a/src/views/demo/d2-crud-plus/group/mock.js b/src/views/demo/d2-crud-plus/group/mock.js
new file mode 100644
index 00000000..dcbd01ab
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/group/mock.js
@@ -0,0 +1,20 @@
+import mockUtil from '../mock/base'
+
+const options = {
+  name: 'd2crudplus/group',
+  idGenerator: 0
+}
+const list = [
+  {
+    title: '无线充电宝',
+    code: '100001',
+    images: 'https://img0.bdstatic.com/static/searchdetail/img/logo-2X_0c4ef02.png',
+    price: 100,
+    stock: 99,
+    intro: '30000毫安超大容量移动电源充电宝官方原装正品专用便携',
+    content: ''
+  }
+]
+options.list = list
+const mock = mockUtil.buildMock(options)
+export default mock
diff --git a/src/views/demo/d2-crud-plus/index/code.js b/src/views/demo/d2-crud-plus/index/code.js
new file mode 100644
index 00000000..5e0cd216
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/index/code.js
@@ -0,0 +1,31 @@
+export default `columns: [
+  {
+    title: '日期', //字段名称
+    key: 'date', //字段key
+    type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
+  },
+  {
+    title: '状态',
+    key: 'status',
+    type: 'select', //选择框，默认单选
+    dict: { url: '/dicts/OpenStatusEnum' }//远程数据字典
+  },
+  {
+    title: '地区',
+    key: 'address',
+    type: 'select', //选择框
+    form: { //表单组件自定义配置
+      component: { //支持任何v-model组件
+        props: {  multiple: true } // 此处配置选择框为多选
+      }
+    },
+    dict: {
+      data: [ //本地数据字典
+        { value: 'sz', label: '深圳' },
+        { value: 'gz', label: '广州' },
+        { value: 'wh', label: '武汉' },
+        { value: 'sh', label: '上海' }
+      ]
+    }
+  }
+]`
diff --git a/src/views/demo/d2-crud-plus/index/image/gif.webp b/src/views/demo/d2-crud-plus/index/image/gif.webp
new file mode 100644
index 00000000..f61b760a
Binary files /dev/null and b/src/views/demo/d2-crud-plus/index/image/gif.webp differ
diff --git a/src/views/demo/d2-crud-plus/index/index.vue b/src/views/demo/d2-crud-plus/index/index.vue
new file mode 100644
index 00000000..01242bb8
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/index/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <d2-container type="ghost">
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <el-tabs v-model="tab">
+      <el-tab-pane label="效果" name="result">
+        <img src="./image/gif.webp" style="width: 600px; border: 1px solid #E4E7ED; border-radius: 4px;">
+      </el-tab-pane>
+      <el-tab-pane label="代码" name="code">
+        <d2-highlight :code="code" lang="javascript"/>
+      </el-tab-pane>
+    </el-tabs>
+  </d2-container>
+</template>
+
+<script>
+import code from './code'
+
+export default {
+  data () {
+    return {
+      code,
+      tab: 'result',
+      banner: {
+        title: 'D2 CRUD PLUS',
+        subTitle: 'D2 Crud Plus 是一个面向配置的Crud开发框架，辅助d2-crud和d2-crud-x，让开发crud更简单',
+        link: 'https://github.com/greper/d2-crud-plus'
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/demo/d2-crud-plus/install.js b/src/views/demo/d2-crud-plus/install.js
new file mode 100644
index 00000000..93b07536
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/install.js
@@ -0,0 +1,90 @@
+import Vue from 'vue'
+import d2CrudX from 'd2-crud-x'
+import { d2CrudPlus } from 'd2-crud-plus'
+import { D2pAreaSelector, D2pFileUploader, D2pIconSelector, D2pTreeSelector, D2pFullEditor, D2pUploader, D2pDemoExtend } from 'd2p-extends' // 源码方式引入，上传组件支持懒加载
+// http请求
+import { requestForMock } from '@/api/service'
+import './mock' // 模拟数据
+
+// 按如下重命名引入可与官方版共存，index.vue中标签用<d2-crud-x />使用加强版
+// 不传name，则d2CrudX的标签仍为<d2-crud>,不可与官方版共存
+Vue.use(d2CrudX, { name: 'd2-crud-x' })
+
+// 引入d2CrudPlus
+Vue.use(d2CrudPlus, {
+  starTip: false,
+  getRemoteDictFunc (url, dict) {
+    // 此处配置你的字典http请求方法
+    // 实际使用请改成request
+    return requestForMock({
+      url: url,
+      data: dict.body,
+      method: 'get'
+    })
+  },
+  commonOption () { // 公共配置
+    return {
+      format: {
+        response (res) {
+          return res
+        },
+        page: { // page接口返回的数据结构配置，
+          request: {
+            current: 'current',
+            size: 'size'
+          },
+          response: {
+            current: 'current', // 当前页码 ret.data.current
+            size: 'size', // 当前页码 ret.data.current
+            // size: (data) => { return data.size }, // 每页条数，ret.data.size, 你也可以配置一个方法，自定义返回
+            total: 'total', // 总记录数 ret.data.total
+            records: 'records' // 列表数组 ret.data.records
+          }
+        }
+      },
+      pageOptions: {
+        compact: true // 紧凑型页面模式
+      },
+      options: {
+        size: 'small',
+        height: '100%' // 表格高度100%
+      },
+      formOptions: {
+        nullToBlankStr: true, // 提交修改表单时，将undefinded的数据修改为空字符串''，可以解决无法清空字段的问题
+        defaultSpan: 12 // 默认的表单 span
+      },
+      viewOptions: {
+        disabled: false,
+        componentType: 'form' // 【form,row】 表单组件 或 行组件展示
+      },
+      rowHandle: {
+        width: 260,
+        edit: {
+          type: 'primary'
+        }
+      }
+    }
+  }
+})
+
+// 安装扩展插件
+Vue.use(D2pTreeSelector)
+Vue.use(D2pAreaSelector)
+Vue.use(D2pIconSelector)
+Vue.use(D2pFullEditor, {
+  ueditor: {
+    serverUrl: '/api/ueditor/'
+  }
+})
+Vue.use(D2pDemoExtend)
+Vue.use(D2pFileUploader)
+Vue.use(D2pUploader, {
+  defaultType: 'form',
+  form: {
+    action: 'http://d2p.veryreader.com:7070/api/upload/form/upload',
+    name: 'file',
+    successHandle (res) { // 上传成功后，后台返回结果处理
+      return { url: 'http://d2p.veryreader.com:7070' + res.data } // data是该文件的url
+    }
+  }
+})
diff --git a/src/views/demo/d2-crud-plus/mock/base.js b/src/views/demo/d2-crud-plus/mock/base.js
new file mode 100644
index 00000000..3327bc1e
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/mock/base.js
@@ -0,0 +1,234 @@
+function copyList (originList, newList, options, parentId) {
+  for (const item of originList) {
+    const newItem = { ...item, parentId }
+    newItem.id = ++options.idGenerator
+    newList.push(newItem)
+    if (item.children != null) {
+      newItem.children = []
+      copyList(item.children, newItem.children, options, newItem.id)
+    }
+  }
+}
+
+function delById (req, list) {
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+    if ((item.id) === parseInt(req.params.id)) {
+      console.log('remove i')
+      list.splice(i, 1)
+      break
+    }
+    if (item.children != null && item.children.length > 0) {
+      delById(req, item.children)
+    }
+  }
+}
+export default {
+  findById (id, list) {
+    for (const item of list) {
+      if (item.id === id) {
+        return item
+      }
+      if (item.children != null && item.children.length > 0) {
+        const sub = this.findById(id, item.children)
+        if (sub != null) {
+          return sub
+        }
+      }
+    }
+  },
+  buildMock (options) {
+    const name = options.name
+    if (options.copyTimes == null) {
+      options.copyTimes = 29
+    }
+    const list = []
+    for (let i = 0; i < options.copyTimes; i++) {
+      copyList(options.list, list, options)
+    }
+    options.list = list
+    return [
+      {
+        path: '/' + name + '/page',
+        method: 'get',
+        handle (req) {
+          let data = list
+          let size = 20
+          let current = 1
+          for (const item of list) {
+            if (item.children != null && item.children.length === 0) {
+              item.hasChildren = false
+              item.lazy = false
+            }
+          }
+          if (req != null && req.body != null) {
+            if (req.body.size != null) {
+              size = parseInt(req.body.size)
+            }
+            if (req.body.current != null) {
+              current = parseInt(req.body.current)
+            }
+            const query = { ...req.body }
+            delete query.current
+            delete query.size
+            if (Object.keys(query).length > 0) {
+              data = list.filter(item => {
+                let allFound = true // 是否所有条件都符合
+                for (const key in query) {
+                  // 判定某一个条件
+                  const value = query[key]
+                  if (value == null || value === '') {
+                    continue
+                  }
+                  if (value instanceof Array) {
+                    // 如果条件中的value是数组的话，只要查到一个就行
+                    if (value.length === 0) {
+                      continue
+                    }
+                    let found = false
+                    for (const i of value) {
+                      if (item[key] instanceof Array) {
+                        for (const j of item[key]) {
+                          if (i === j) {
+                            found = true
+                            break
+                          }
+                        }
+                        if (found) {
+                          break
+                        }
+                      } else if (item[key] === i || ((typeof item[key]) === 'string' && item[key].indexOf(i + '') >= 0)) {
+                        found = true
+                        break
+                      }
+                      if (found) {
+                        break
+                      }
+                    }
+                    if (!found) {
+                      allFound = false
+                    }
+                  } else if (value instanceof Object) {
+                    for (const key2 in value) {
+                      const v = value[key2]
+                      if (v && v !== item[key][key2]) {
+                        return false
+                      }
+                    }
+                  } else if (item[key] !== value) {
+                    allFound = false
+                  }
+                }
+                return allFound
+              })
+            }
+          }
+
+          const start = size * (current - 1)
+          let end = size * current
+          if (data.length < end) {
+            end = data.length
+          }
+          const records = data.slice(start, end)
+          const maxPage = data.length % size === 0 ? data.length / size : Math.floor(data.length / size) + 1
+          if (current > maxPage) {
+            current = maxPage
+          }
+          if (current < 1) {
+            current = 1
+          }
+          return {
+            code: 0,
+            msg: 'success',
+            data: {
+              records: records,
+              total: data.length,
+              size: size,
+              current: current
+            }
+          }
+        }
+      },
+      {
+        path: '/' + name + '/get',
+        method: 'get',
+        handle (req) {
+          let id = req.params.id
+          id = parseInt(id)
+          let current = null
+          for (const item of list) {
+            if (item.id === id) {
+              current = item
+              break
+            }
+          }
+          return {
+            code: 0,
+            msg: 'success',
+            data: current
+          }
+        }
+      },
+      {
+        path: '/' + name + '/add',
+        method: 'post',
+        handle (req) {
+          req.body.id = ++options.idGenerator
+          list.unshift(req.body)
+          return {
+            code: 0,
+            msg: 'success',
+            data: null
+          }
+        }
+      },
+      {
+        path: '/' + name + '/update',
+        method: 'post',
+        handle (req) {
+          for (const item of list) {
+            if (item.id === req.body.id) {
+              Object.assign(item, req.body)
+              break
+            }
+          }
+          return {
+            code: 0,
+            msg: 'success',
+            data: null
+          }
+        }
+      },
+      {
+        path: '/' + name + '/delete',
+        method: 'post',
+        handle (req) {
+          delById(req, list)
+          return {
+            code: 0,
+            msg: 'success',
+            data: null
+          }
+        }
+      },
+      {
+        path: '/' + name + '/batchDelete',
+        method: 'post',
+        handle (req) {
+          const ids = req.body.ids
+          for (let i = list.length - 1; i >= 0; i--) {
+            const item = list[i]
+            if (ids.indexOf(item.id) >= 0) {
+              list.splice(i, 1)
+            }
+          }
+          return {
+            code: 0,
+            msg: 'success',
+            data: null
+          }
+        }
+      }
+    ]
+  }
+}
diff --git a/src/views/demo/d2-crud-plus/mock/index.js b/src/views/demo/d2-crud-plus/mock/index.js
new file mode 100644
index 00000000..d088f5ab
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/mock/index.js
@@ -0,0 +1,44 @@
+import { mock } from '@/api/service'
+import * as tools from '@/api/tools'
+
+const req = context => context.keys().map(context)
+
+// 模拟数据
+const apiList = req(require.context('../', true, /mock\.js$/))
+  .filter(e => e.default)
+  .map(e => e.default)
+
+apiList.forEach(apiFile => {
+  for (const item of apiFile) {
+    mock
+      .onAny(new RegExp('^/api' + item.path))
+      .reply(config => {
+        console.log('------------fake request start -------------')
+        console.log('request:', config)
+        const data = config.data ? JSON.parse(config.data) : {}
+        const query = config.url.indexOf('?') >= 0 ? config.url.substring(config.url.indexOf('?') + 1) : undefined
+        let params = {}
+        if (query) {
+          const arr = query.split('&')
+          for (const item of arr) {
+            const kv = item.split('=')
+            params[kv[0]] = kv[1]
+          }
+        } else {
+          params = data
+        }
+        const req = {
+          body: data,
+          params: params
+        }
+        const ret = item.handle(req)
+        console.log('response:', ret)
+        console.log('------------fake request end-------------')
+        if (ret.code === 0) {
+          return tools.responseSuccess(ret.data, ret.msg)
+        } else {
+          return tools.responseError(ret.data, ret.msg, ret.code)
+        }
+      })
+  }
+})
diff --git a/src/views/demo/d2-crud-plus/synthesize/api.js b/src/views/demo/d2-crud-plus/synthesize/api.js
new file mode 100644
index 00000000..4719ae98
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/synthesize/api.js
@@ -0,0 +1,40 @@
+// 请求模拟数据
+import { requestForMock } from '@/api/service'
+
+export function GetList (query) {
+  return requestForMock({
+    url: '/d2-crud-plus/synthesize/page',
+    method: 'get',
+    data: query
+  })
+}
+
+export function AddObj (obj) {
+  return requestForMock({
+    url: '/d2-crud-plus/synthesize/add',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function UpdateObj (obj) {
+  return requestForMock({
+    url: '/d2-crud-plus/synthesize/update',
+    method: 'post',
+    data: obj
+  })
+}
+export function DelObj (id) {
+  return requestForMock({
+    url: '/d2-crud-plus/synthesize/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+export function BatchDel (ids) {
+  return requestForMock({
+    url: '/d2-crud-plus/synthesize/batchDelete',
+    method: 'post',
+    data: { ids }
+  })
+}
diff --git a/src/views/demo/d2-crud-plus/synthesize/crud.js b/src/views/demo/d2-crud-plus/synthesize/crud.js
new file mode 100644
index 00000000..dc5adc64
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/synthesize/crud.js
@@ -0,0 +1,129 @@
+// 请求模拟数据
+import { requestForMock } from '@/api/service'
+
+export const crudOptions = {
+  rowHandle: {
+    // columnHeader: '操作',
+    width: 370,
+    custom: [
+      {
+        text: ' 自定义',
+        type: 'warning',
+        size: 'small',
+        emit: 'customHandleBtn',
+        icon: 'el-icon-s-flag'
+      }
+    ],
+    fixed: 'right'
+  },
+  pageOptions: {
+    compact: true // 是否紧凑型页面
+  },
+  options: {
+    height: '100%', // 表格高度100%, 使用toolbar必须设置
+    highlightCurrentRow: true,
+    rowKey: 'id',
+    lazy: true,
+    load: (tree, treeNode, resolve) => {
+      requestForMock({
+        url: '/d2crudplus/synthesize/children',
+        method: 'get',
+        data: { id: tree.id }
+      }).then(ret => {
+        console.log('懒加载数据', ret)
+        resolve(ret)
+      })
+    },
+    showSummary: true,
+    summaryMethod (param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        console.log('111', column)
+        if (column.label !== '金额(元)') {
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = ''
+        }
+      })
+
+      return sums
+    }
+  },
+  indexRow: { // 或者直接传true,不显示title，不居中
+    title: '序号',
+    align: 'center'
+  },
+  selectionRow: {
+    align: 'center',
+    width: 100
+  },
+  expandRow: { // 或者直接传true,不显示title，不居中
+    title: '展开',
+    align: 'center'
+  },
+  columns: [
+    {
+      title: '数据列',
+      key: 'data',
+      sortable: true,
+      width: 200
+    },
+    {
+      title: 'ID',
+      key: 'id',
+      width: 90,
+      form: {
+        disabled: true
+      }
+    },
+    {
+      title: '时间',
+      key: 'time',
+      type: 'datetime',
+      sortable: true,
+      width: 160
+    },
+    {
+      title: '地区',
+      key: 'province',
+      sortable: true,
+      search: { key: 'province', disabled: false },
+      type: 'select',
+      form: {
+        component: { props: { filterable: true, multiple: true, clearable: true } }
+      },
+      dict: {
+        data: [
+          { value: 'sz', label: '深圳' },
+          { value: 'gz', label: '广州' },
+          { value: 'wh', label: '武汉' },
+          { value: 'sh', label: '上海' }
+        ]
+      },
+      width: 300
+    },
+    {
+      title: '金额(元)',
+      key: 'amount',
+      sortable: true,
+      type: 'number'
+    }
+  ]
+}
diff --git a/src/views/demo/d2-crud-plus/synthesize/helper.js b/src/views/demo/d2-crud-plus/synthesize/helper.js
new file mode 100644
index 00000000..b5e8bb0b
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/synthesize/helper.js
@@ -0,0 +1,8 @@
+export default {
+  init: `
+  `,
+  crud: `
+`,
+  template: `
+  `
+}
diff --git a/src/views/demo/d2-crud-plus/synthesize/index.vue b/src/views/demo/d2-crud-plus/synthesize/index.vue
new file mode 100644
index 00000000..cd2ef9b1
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/synthesize/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
+    <template slot="header">综合示例
+      <d2-link-btn  style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
+    </template>
+    <d2-crud-x
+        ref="d2Crud"
+        v-bind="_crudProps"
+        v-on="_crudListeners"
+        @customHandleBtn="customHandleBtnHandle"
+    >
+
+      <div slot="header">
+        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
+
+        <el-button-group >
+          <el-button   size="small" type="primary" @click="addRow"><i class="el-icon-plus"></i> 新增</el-button>
+        </el-button-group>
+
+        <crud-toolbar :search.sync="crud.searchOptions.show"
+                      :compact.sync="crud.pageOptions.compact"
+                      :columns="crud.columns"
+                      @refresh="doRefresh()"
+                      @columns-filter-changed="handleColumnsFilterChanged"/>
+      </div>
+
+      <template slot="expandSlot" slot-scope="scope">
+        这里显示行展开数据:{{scope.row.data}}
+      </template>
+
+      <span slot="PaginationPrefixSlot" class="prefix" >
+        <el-button class="square" size="mini" title="批量删除"   @click="batchDelete" icon="el-icon-delete" :disabled="!multipleSelection || multipleSelection.length==0"  />
+      </span>
+
+    </d2-crud-x>
+  </d2-container>
+</template>
+
+<script>
+import { AddObj, GetList, UpdateObj, DelObj, BatchDel } from './api'
+import { crudOptions } from './crud'
+import { d2CrudPlus } from 'd2-crud-plus'
+import helper from './helper'
+export default {
+  name: 'formColumn',
+  components: {},
+  mixins: [d2CrudPlus.crud],
+  data () {
+    return {
+      helper: helper,
+      multipleSelection: undefined
+    }
+  },
+  computed: {
+  },
+  mounted () {
+    // 修复首次加载表尾合计行无法显示的bug
+    setTimeout(() => {
+      this.getD2CrudTable().store.scheduleLayout()
+    }, 1000)
+  },
+  methods: {
+    getCrudOptions () {
+      return crudOptions
+    },
+    pageRequest (query) {
+      return GetList(query)
+    },
+    addRequest (row) {
+      return AddObj(row)
+    },
+    updateRequest (row) {
+      return UpdateObj(row)
+    },
+    delRequest (row) {
+      return DelObj(row.id).then(ret => {
+        // 手动更新加载项
+        const data = this.getD2Crud().$refs.elTable.store.states.treeData
+        if (data != null) {
+          const item = data[row.parentId]
+          if (item != null) {
+            item.loaded = false
+            item.expanded = false
+          }
+        }
+        return ret
+      })
+    },
+    batchDelRequest (ids) {
+      return BatchDel(ids)
+    },
+    handleCurrentChange (currentRow, oldCurrentRow) {
+      this.$message('单选' + currentRow.data)
+    },
+    customHandleBtnHandle ({ index, row }) {
+      this.$message('自定义操作按钮：' + row.data)
+    },
+    checkSecond () {
+      this.getD2CrudTable().toggleRowSelection(this.getD2CrudTableData()[0]) // 跟下面等效
+      this.getD2Crud().$refs.elTable.toggleRowSelection(this.getD2Crud().d2CrudData[1])
+    }
+  }
+}
+</script>
diff --git a/src/views/demo/d2-crud-plus/synthesize/mock.js b/src/views/demo/d2-crud-plus/synthesize/mock.js
new file mode 100644
index 00000000..d3461f27
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/synthesize/mock.js
@@ -0,0 +1,101 @@
+import mockUtil from '../mock/base'
+
+const options = {
+  name: 'd2-crud-plus/synthesize',
+  idGenerator: 0
+}
+const list = [
+  {
+    data: '我会懒加载',
+    time: '2020-01-01 11:11:11',
+    province: 'wh',
+    amount: 100,
+    hasChildren: true,
+    loaded: false,
+    children: [
+      {
+        data: '懒加载的子数据',
+        province: ['sh', 'gz'],
+        time: '2020-01-01 11:11:11',
+        amount: 100
+      },
+      {
+        data: '懒加载的子数据2',
+        province: ['sh', 'sz'],
+        time: '2020-01-01 11:11:11',
+        amount: 100
+      }
+    ]
+  },
+  {
+    data: 'data2',
+    province: 'sh',
+    time: '2020-01-01 11:11:11',
+    amount: 100,
+    children: [
+      {
+        id: 999,
+        data: 'data1_1',
+        time: '2020-01-01 11:11:11',
+        province: ['gz', 'sz'], // 可以逗号分隔的字符串 'gz,sz'
+        amount: 100,
+        children: [
+          {
+            id: 1000,
+            data: 'data1_1_1',
+            time: '2020-01-01 11:11:11',
+            province: ['sz', 'gz'], // 可以逗号分隔的字符串 'gz,sz'
+            amount: 100
+          }
+        ]
+      },
+      {
+        id: 888,
+        data: 'data1_2',
+        time: '2020-01-01 11:11:11',
+        province: 'sh',
+        amount: 100,
+        children: [
+          {
+            id: 889,
+            data: 'data1_2_1',
+            time: '2020-01-01 11:11:11',
+            province: 'gz',
+            amount: 100
+          }
+        ]
+      }
+    ]
+  },
+  {
+    data: 'data3',
+    province: ['sh', 'gz'],
+    time: '2020-01-01 11:11:11',
+    amount: 100
+  },
+  {
+    data: 'data4',
+    province: ['sh', 'sz'],
+    time: '2020-01-01 11:11:11',
+    amount: 100
+  }
+]
+options.list = list
+const mock = mockUtil.buildMock(options)
+
+mock.push({
+  path: '/d2crudplus/synthesize/children',
+  method: 'get',
+  handle (req) {
+    console.log('req', req)
+    const id = parseInt(req.params.id)
+    const item = mockUtil.findById(id, options.list)
+    console.log('children:', item.children)
+    return {
+      code: 0,
+      msg: 'success',
+      data: item.children
+    }
+  }
+})
+export default mock
diff --git a/src/views/demo/element/index.vue b/src/views/demo/element/index.vue
deleted file mode 100644
index a01577ee..00000000
--- a/src/views/demo/element/index.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <d2-container type="ghost">
-    <d2-module-index-banner slot="header" v-bind="banner"/>
-  </d2-container>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      banner: {
-        title: 'ElementUI',
-        subTitle: 'D2Admin 集成由饿了么出品的 ElementUI',
-        link: 'http://element.eleme.io'
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/frame/index/index.vue b/src/views/demo/frame/index/index.vue
deleted file mode 100644
index 2d2c4ef4..00000000
--- a/src/views/demo/frame/index/index.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <d2-container type="ghost">
-    <d2-module-index-banner slot="header" v-bind="banner"/>
-    <d2-module-index-menu :menu="menu"/>
-  </d2-container>
-</template>
-
-<script>
-import menu from '@/menu/modules/demo-frame'
-export default {
-  data () {
-    return {
-      menu,
-      banner: {
-        title: 'FRAME',
-        subTitle: '在 D2Admin 中嵌入其它页面'
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/demo/frame/d2-doc/index.vue b/src/views/demo/playground/frame/d2-doc/index.vue
similarity index 100%
rename from src/views/demo/frame/d2-doc/index.vue
rename to src/views/demo/playground/frame/d2-doc/index.vue
diff --git a/src/views/demo/frame/html/index.vue b/src/views/demo/playground/frame/html/index.vue
similarity index 100%
rename from src/views/demo/frame/html/index.vue
rename to src/views/demo/playground/frame/html/index.vue
diff --git a/src/views/demo/frame/report/index.vue b/src/views/demo/playground/frame/report/index.vue
similarity index 100%
rename from src/views/demo/frame/report/index.vue
rename to src/views/demo/playground/frame/report/index.vue
diff --git a/src/views/demo/charts/list/_data/beijing.json b/src/views/demo/plugins/charts/_data/beijing.json
similarity index 100%
rename from src/views/demo/charts/list/_data/beijing.json
rename to src/views/demo/plugins/charts/_data/beijing.json
diff --git a/src/views/demo/charts/list/_data/china.json b/src/views/demo/plugins/charts/_data/china.json
similarity index 100%
rename from src/views/demo/charts/list/_data/china.json
rename to src/views/demo/plugins/charts/_data/china.json
diff --git a/src/views/demo/charts/list/_mixin/list.js b/src/views/demo/plugins/charts/_mixin/list.js
similarity index 100%
rename from src/views/demo/charts/list/_mixin/list.js
rename to src/views/demo/plugins/charts/_mixin/list.js
diff --git a/src/views/demo/charts/list/bar/demo1/index.vue b/src/views/demo/plugins/charts/bar/demo1/index.vue
similarity index 95%
rename from src/views/demo/charts/list/bar/demo1/index.vue
rename to src/views/demo/plugins/charts/bar/demo1/index.vue
index dc119fd7..68302d80 100644
--- a/src/views/demo/charts/list/bar/demo1/index.vue
+++ b/src/views/demo/plugins/charts/bar/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/bar/demo2/index.vue b/src/views/demo/plugins/charts/bar/demo2/index.vue
similarity index 95%
rename from src/views/demo/charts/list/bar/demo2/index.vue
rename to src/views/demo/plugins/charts/bar/demo2/index.vue
index 7031a278..73e0fe47 100644
--- a/src/views/demo/charts/list/bar/demo2/index.vue
+++ b/src/views/demo/plugins/charts/bar/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/bar/demo3/index.vue b/src/views/demo/plugins/charts/bar/demo3/index.vue
similarity index 95%
rename from src/views/demo/charts/list/bar/demo3/index.vue
rename to src/views/demo/plugins/charts/bar/demo3/index.vue
index fab351c6..4a38c9c7 100644
--- a/src/views/demo/charts/list/bar/demo3/index.vue
+++ b/src/views/demo/plugins/charts/bar/demo3/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/bar/demo4/index.vue b/src/views/demo/plugins/charts/bar/demo4/index.vue
similarity index 95%
rename from src/views/demo/charts/list/bar/demo4/index.vue
rename to src/views/demo/plugins/charts/bar/demo4/index.vue
index 4c2a4460..d52e761d 100644
--- a/src/views/demo/charts/list/bar/demo4/index.vue
+++ b/src/views/demo/plugins/charts/bar/demo4/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/bar/demo5/index.vue b/src/views/demo/plugins/charts/bar/demo5/index.vue
similarity index 94%
rename from src/views/demo/charts/list/bar/demo5/index.vue
rename to src/views/demo/plugins/charts/bar/demo5/index.vue
index 650dff8b..32dd7d50 100644
--- a/src/views/demo/charts/list/bar/demo5/index.vue
+++ b/src/views/demo/plugins/charts/bar/demo5/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/candle/demo1/index.vue b/src/views/demo/plugins/charts/candle/demo1/index.vue
similarity index 98%
rename from src/views/demo/charts/list/candle/demo1/index.vue
rename to src/views/demo/plugins/charts/candle/demo1/index.vue
index e12ebda8..817e3cca 100644
--- a/src/views/demo/charts/list/candle/demo1/index.vue
+++ b/src/views/demo/plugins/charts/candle/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/candle/demo2/index.vue b/src/views/demo/plugins/charts/candle/demo2/index.vue
similarity index 98%
rename from src/views/demo/charts/list/candle/demo2/index.vue
rename to src/views/demo/plugins/charts/candle/demo2/index.vue
index eddd34a2..e7548b39 100644
--- a/src/views/demo/charts/list/candle/demo2/index.vue
+++ b/src/views/demo/plugins/charts/candle/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/candle/demo3/index.vue b/src/views/demo/plugins/charts/candle/demo3/index.vue
similarity index 98%
rename from src/views/demo/charts/list/candle/demo3/index.vue
rename to src/views/demo/plugins/charts/candle/demo3/index.vue
index cc349a59..5c64d981 100644
--- a/src/views/demo/charts/list/candle/demo3/index.vue
+++ b/src/views/demo/plugins/charts/candle/demo3/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/funnel/demo1/index.vue b/src/views/demo/plugins/charts/funnel/demo1/index.vue
similarity index 92%
rename from src/views/demo/charts/list/funnel/demo1/index.vue
rename to src/views/demo/plugins/charts/funnel/demo1/index.vue
index 7759dabe..1673812c 100644
--- a/src/views/demo/charts/list/funnel/demo1/index.vue
+++ b/src/views/demo/plugins/charts/funnel/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/funnel/demo2/index.vue b/src/views/demo/plugins/charts/funnel/demo2/index.vue
similarity index 93%
rename from src/views/demo/charts/list/funnel/demo2/index.vue
rename to src/views/demo/plugins/charts/funnel/demo2/index.vue
index 5d74181f..c2a5025d 100644
--- a/src/views/demo/charts/list/funnel/demo2/index.vue
+++ b/src/views/demo/plugins/charts/funnel/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/gauge/demo1/index.vue b/src/views/demo/plugins/charts/gauge/demo1/index.vue
similarity index 91%
rename from src/views/demo/charts/list/gauge/demo1/index.vue
rename to src/views/demo/plugins/charts/gauge/demo1/index.vue
index d8711554..807c7b01 100644
--- a/src/views/demo/charts/list/gauge/demo1/index.vue
+++ b/src/views/demo/plugins/charts/gauge/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/heatmap/demo1/index.vue b/src/views/demo/plugins/charts/heatmap/demo1/index.vue
similarity index 95%
rename from src/views/demo/charts/list/heatmap/demo1/index.vue
rename to src/views/demo/plugins/charts/heatmap/demo1/index.vue
index 5c81dab6..3e6bcec1 100644
--- a/src/views/demo/charts/list/heatmap/demo1/index.vue
+++ b/src/views/demo/plugins/charts/heatmap/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/heatmap/demo2/index.vue b/src/views/demo/plugins/charts/heatmap/demo2/index.vue
similarity index 96%
rename from src/views/demo/charts/list/heatmap/demo2/index.vue
rename to src/views/demo/plugins/charts/heatmap/demo2/index.vue
index 05a4c718..b5d4ca41 100644
--- a/src/views/demo/charts/list/heatmap/demo2/index.vue
+++ b/src/views/demo/plugins/charts/heatmap/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/histogram/demo1/index.vue b/src/views/demo/plugins/charts/histogram/demo1/index.vue
similarity index 95%
rename from src/views/demo/charts/list/histogram/demo1/index.vue
rename to src/views/demo/plugins/charts/histogram/demo1/index.vue
index 21795a7c..aea0a38d 100644
--- a/src/views/demo/charts/list/histogram/demo1/index.vue
+++ b/src/views/demo/plugins/charts/histogram/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/histogram/demo2/index.vue b/src/views/demo/plugins/charts/histogram/demo2/index.vue
similarity index 95%
rename from src/views/demo/charts/list/histogram/demo2/index.vue
rename to src/views/demo/plugins/charts/histogram/demo2/index.vue
index b0e6630a..13f60e61 100644
--- a/src/views/demo/charts/list/histogram/demo2/index.vue
+++ b/src/views/demo/plugins/charts/histogram/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/histogram/demo3/index.vue b/src/views/demo/plugins/charts/histogram/demo3/index.vue
similarity index 95%
rename from src/views/demo/charts/list/histogram/demo3/index.vue
rename to src/views/demo/plugins/charts/histogram/demo3/index.vue
index 859b7757..14ecc092 100644
--- a/src/views/demo/charts/list/histogram/demo3/index.vue
+++ b/src/views/demo/plugins/charts/histogram/demo3/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/histogram/demo4/index.vue b/src/views/demo/plugins/charts/histogram/demo4/index.vue
similarity index 95%
rename from src/views/demo/charts/list/histogram/demo4/index.vue
rename to src/views/demo/plugins/charts/histogram/demo4/index.vue
index 165f3c3c..245da847 100644
--- a/src/views/demo/charts/list/histogram/demo4/index.vue
+++ b/src/views/demo/plugins/charts/histogram/demo4/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/histogram/demo5/index.vue b/src/views/demo/plugins/charts/histogram/demo5/index.vue
similarity index 95%
rename from src/views/demo/charts/list/histogram/demo5/index.vue
rename to src/views/demo/plugins/charts/histogram/demo5/index.vue
index 168a0aee..fd445b85 100644
--- a/src/views/demo/charts/list/histogram/demo5/index.vue
+++ b/src/views/demo/plugins/charts/histogram/demo5/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/histogram/demo6/index.vue b/src/views/demo/plugins/charts/histogram/demo6/index.vue
similarity index 95%
rename from src/views/demo/charts/list/histogram/demo6/index.vue
rename to src/views/demo/plugins/charts/histogram/demo6/index.vue
index ab2a9d2f..56bfb869 100644
--- a/src/views/demo/charts/list/histogram/demo6/index.vue
+++ b/src/views/demo/plugins/charts/histogram/demo6/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/line/demo1/index.vue b/src/views/demo/plugins/charts/line/demo1/index.vue
similarity index 95%
rename from src/views/demo/charts/list/line/demo1/index.vue
rename to src/views/demo/plugins/charts/line/demo1/index.vue
index 08d5c423..950cfdbb 100644
--- a/src/views/demo/charts/list/line/demo1/index.vue
+++ b/src/views/demo/plugins/charts/line/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/line/demo2/index.vue b/src/views/demo/plugins/charts/line/demo2/index.vue
similarity index 96%
rename from src/views/demo/charts/list/line/demo2/index.vue
rename to src/views/demo/plugins/charts/line/demo2/index.vue
index b755afb9..7fe419e5 100644
--- a/src/views/demo/charts/list/line/demo2/index.vue
+++ b/src/views/demo/plugins/charts/line/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/line/demo3/index.vue b/src/views/demo/plugins/charts/line/demo3/index.vue
similarity index 95%
rename from src/views/demo/charts/list/line/demo3/index.vue
rename to src/views/demo/plugins/charts/line/demo3/index.vue
index d7e4eb04..b9c67e8a 100644
--- a/src/views/demo/charts/list/line/demo3/index.vue
+++ b/src/views/demo/plugins/charts/line/demo3/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/line/demo4/index.vue b/src/views/demo/plugins/charts/line/demo4/index.vue
similarity index 95%
rename from src/views/demo/charts/list/line/demo4/index.vue
rename to src/views/demo/plugins/charts/line/demo4/index.vue
index 7e3a6a31..162e1485 100644
--- a/src/views/demo/charts/list/line/demo4/index.vue
+++ b/src/views/demo/plugins/charts/line/demo4/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/line/demo5/index.vue b/src/views/demo/plugins/charts/line/demo5/index.vue
similarity index 95%
rename from src/views/demo/charts/list/line/demo5/index.vue
rename to src/views/demo/plugins/charts/line/demo5/index.vue
index e01ae257..1a7297ce 100644
--- a/src/views/demo/charts/list/line/demo5/index.vue
+++ b/src/views/demo/plugins/charts/line/demo5/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/map/demo1/index.vue b/src/views/demo/plugins/charts/map/demo1/index.vue
similarity index 89%
rename from src/views/demo/charts/list/map/demo1/index.vue
rename to src/views/demo/plugins/charts/map/demo1/index.vue
index ff26acc5..4b0f5caf 100644
--- a/src/views/demo/charts/list/map/demo1/index.vue
+++ b/src/views/demo/plugins/charts/map/demo1/index.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
-import mapOrigin from '@/views/demo/charts/list/_data/china'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
+import mapOrigin from '@/views/demo/plugins/charts/_data/china'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/map/demo2/index.vue b/src/views/demo/plugins/charts/map/demo2/index.vue
similarity index 88%
rename from src/views/demo/charts/list/map/demo2/index.vue
rename to src/views/demo/plugins/charts/map/demo2/index.vue
index dde2a486..4d69e18d 100644
--- a/src/views/demo/charts/list/map/demo2/index.vue
+++ b/src/views/demo/plugins/charts/map/demo2/index.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
-import mapOrigin from '@/views/demo/charts/list/_data/beijing'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
+import mapOrigin from '@/views/demo/plugins/charts/_data/beijing'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/map/demo3/index.vue b/src/views/demo/plugins/charts/map/demo3/index.vue
similarity index 89%
rename from src/views/demo/charts/list/map/demo3/index.vue
rename to src/views/demo/plugins/charts/map/demo3/index.vue
index ee935433..dff4748a 100644
--- a/src/views/demo/charts/list/map/demo3/index.vue
+++ b/src/views/demo/plugins/charts/map/demo3/index.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
-import mapOrigin from '@/views/demo/charts/list/_data/china'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
+import mapOrigin from '@/views/demo/plugins/charts/_data/china'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/pie/demo1/index.vue b/src/views/demo/plugins/charts/pie/demo1/index.vue
similarity index 93%
rename from src/views/demo/charts/list/pie/demo1/index.vue
rename to src/views/demo/plugins/charts/pie/demo1/index.vue
index 9100da71..419d67ea 100644
--- a/src/views/demo/charts/list/pie/demo1/index.vue
+++ b/src/views/demo/plugins/charts/pie/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/pie/demo2/index.vue b/src/views/demo/plugins/charts/pie/demo2/index.vue
similarity index 94%
rename from src/views/demo/charts/list/pie/demo2/index.vue
rename to src/views/demo/plugins/charts/pie/demo2/index.vue
index e610d5f5..d2c40a8f 100644
--- a/src/views/demo/charts/list/pie/demo2/index.vue
+++ b/src/views/demo/plugins/charts/pie/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/pie/demo3/index.vue b/src/views/demo/plugins/charts/pie/demo3/index.vue
similarity index 94%
rename from src/views/demo/charts/list/pie/demo3/index.vue
rename to src/views/demo/plugins/charts/pie/demo3/index.vue
index 52b0d064..a5c79348 100644
--- a/src/views/demo/charts/list/pie/demo3/index.vue
+++ b/src/views/demo/plugins/charts/pie/demo3/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/pie/demo4/index.vue b/src/views/demo/plugins/charts/pie/demo4/index.vue
similarity index 94%
rename from src/views/demo/charts/list/pie/demo4/index.vue
rename to src/views/demo/plugins/charts/pie/demo4/index.vue
index a25371af..08d111a5 100644
--- a/src/views/demo/charts/list/pie/demo4/index.vue
+++ b/src/views/demo/plugins/charts/pie/demo4/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/pie/demo5/index.vue b/src/views/demo/plugins/charts/pie/demo5/index.vue
similarity index 94%
rename from src/views/demo/charts/list/pie/demo5/index.vue
rename to src/views/demo/plugins/charts/pie/demo5/index.vue
index 6619a474..359ae1fc 100644
--- a/src/views/demo/charts/list/pie/demo5/index.vue
+++ b/src/views/demo/plugins/charts/pie/demo5/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/pie/demo6/index.vue b/src/views/demo/plugins/charts/pie/demo6/index.vue
similarity index 94%
rename from src/views/demo/charts/list/pie/demo6/index.vue
rename to src/views/demo/plugins/charts/pie/demo6/index.vue
index a1942fe6..131aad02 100644
--- a/src/views/demo/charts/list/pie/demo6/index.vue
+++ b/src/views/demo/plugins/charts/pie/demo6/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/radar/demo1/index.vue b/src/views/demo/plugins/charts/radar/demo1/index.vue
similarity index 95%
rename from src/views/demo/charts/list/radar/demo1/index.vue
rename to src/views/demo/plugins/charts/radar/demo1/index.vue
index d8d87fba..9c6451c2 100644
--- a/src/views/demo/charts/list/radar/demo1/index.vue
+++ b/src/views/demo/plugins/charts/radar/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/ring/demo1/index.vue b/src/views/demo/plugins/charts/ring/demo1/index.vue
similarity index 93%
rename from src/views/demo/charts/list/ring/demo1/index.vue
rename to src/views/demo/plugins/charts/ring/demo1/index.vue
index 687756a2..25d46c05 100644
--- a/src/views/demo/charts/list/ring/demo1/index.vue
+++ b/src/views/demo/plugins/charts/ring/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/ring/demo2/index.vue b/src/views/demo/plugins/charts/ring/demo2/index.vue
similarity index 94%
rename from src/views/demo/charts/list/ring/demo2/index.vue
rename to src/views/demo/plugins/charts/ring/demo2/index.vue
index 67d31ede..c70c6d03 100644
--- a/src/views/demo/charts/list/ring/demo2/index.vue
+++ b/src/views/demo/plugins/charts/ring/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/ring/demo3/index.vue b/src/views/demo/plugins/charts/ring/demo3/index.vue
similarity index 94%
rename from src/views/demo/charts/list/ring/demo3/index.vue
rename to src/views/demo/plugins/charts/ring/demo3/index.vue
index 87bd878c..5ee9a798 100644
--- a/src/views/demo/charts/list/ring/demo3/index.vue
+++ b/src/views/demo/plugins/charts/ring/demo3/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/ring/demo4/index.vue b/src/views/demo/plugins/charts/ring/demo4/index.vue
similarity index 94%
rename from src/views/demo/charts/list/ring/demo4/index.vue
rename to src/views/demo/plugins/charts/ring/demo4/index.vue
index d84fd690..0405004a 100644
--- a/src/views/demo/charts/list/ring/demo4/index.vue
+++ b/src/views/demo/plugins/charts/ring/demo4/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/ring/demo5/index.vue b/src/views/demo/plugins/charts/ring/demo5/index.vue
similarity index 94%
rename from src/views/demo/charts/list/ring/demo5/index.vue
rename to src/views/demo/plugins/charts/ring/demo5/index.vue
index 09fd494e..c00fba46 100644
--- a/src/views/demo/charts/list/ring/demo5/index.vue
+++ b/src/views/demo/plugins/charts/ring/demo5/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/sankey/demo1/index.vue b/src/views/demo/plugins/charts/sankey/demo1/index.vue
similarity index 96%
rename from src/views/demo/charts/list/sankey/demo1/index.vue
rename to src/views/demo/plugins/charts/sankey/demo1/index.vue
index abdd26b1..f296a836 100644
--- a/src/views/demo/charts/list/sankey/demo1/index.vue
+++ b/src/views/demo/plugins/charts/sankey/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/scatter/demo1/index.vue b/src/views/demo/plugins/charts/scatter/demo1/index.vue
similarity index 94%
rename from src/views/demo/charts/list/scatter/demo1/index.vue
rename to src/views/demo/plugins/charts/scatter/demo1/index.vue
index 6acbf7b7..3cac1b57 100644
--- a/src/views/demo/charts/list/scatter/demo1/index.vue
+++ b/src/views/demo/plugins/charts/scatter/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/scatter/demo2/index.vue b/src/views/demo/plugins/charts/scatter/demo2/index.vue
similarity index 97%
rename from src/views/demo/charts/list/scatter/demo2/index.vue
rename to src/views/demo/plugins/charts/scatter/demo2/index.vue
index e0430f85..e0e527c4 100644
--- a/src/views/demo/charts/list/scatter/demo2/index.vue
+++ b/src/views/demo/plugins/charts/scatter/demo2/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/tree/demo1/index.vue b/src/views/demo/plugins/charts/tree/demo1/index.vue
similarity index 98%
rename from src/views/demo/charts/list/tree/demo1/index.vue
rename to src/views/demo/plugins/charts/tree/demo1/index.vue
index 1880c03e..aa0a6fd6 100644
--- a/src/views/demo/charts/list/tree/demo1/index.vue
+++ b/src/views/demo/plugins/charts/tree/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/src/views/demo/charts/list/waterfall/demo1/index.vue b/src/views/demo/plugins/charts/waterfall/demo1/index.vue
similarity index 92%
rename from src/views/demo/charts/list/waterfall/demo1/index.vue
rename to src/views/demo/plugins/charts/waterfall/demo1/index.vue
index f9f9a6ff..17c859c3 100644
--- a/src/views/demo/charts/list/waterfall/demo1/index.vue
+++ b/src/views/demo/plugins/charts/waterfall/demo1/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import list from '@/views/demo/charts/list/_mixin/list.js'
+import list from '@/views/demo/plugins/charts/_mixin/list.js'
 export default {
   mixins: [
     list
diff --git a/yarn.lock b/yarn.lock
index a9420057..a2ffe92c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2304,9 +2304,9 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.3.0:
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
+  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
   integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
 
 base@^0.11.1:
@@ -2811,6 +2811,11 @@ check-types@^8.0.3:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
+china-division@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/china-division/-/china-division-2.3.1.tgz#a49fa806af01d1852747466ad3c30bf0be988511"
+  integrity sha512-mOfLagVRZ+lRmbIIZ0sci0+9Sr+uGyPCp9an4Orov2KxLf3DGSB/4qyao/jy3pegW4Weppvh0yzGfs+dAPJA7A==
+
 "chokidar@>=2.0.0 <4.0.0":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
@@ -3325,7 +3330,7 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-js@^3.4.3, core-js@^3.6.4:
+core-js@^3.4.3, core-js@^3.6.4, core-js@^3.6.5:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
@@ -3335,6 +3340,13 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
+cos-js-sdk-v5@^0.5.27:
+  version "0.5.27"
+  resolved "https://registry.npmjs.org/cos-js-sdk-v5/-/cos-js-sdk-v5-0.5.27.tgz#22759bc32b3f0c63caf3328400140f97f50fe6b3"
+  integrity sha512-kq5363l1TpU26AHRZTcWCibPfM5ykQ2zHsdpnP/Ax8SMuYQDNIP/BVWaA55Ks2r5JsELjqXLF516FeXQz3jEZw==
+  dependencies:
+    xmldom "^0.1.27"
+
 cosmiconfig@^5.0.0, cosmiconfig@^5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -3389,6 +3401,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cropperjs@^1.5.6:
+  version "1.5.7"
+  resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.7.tgz#b65019725bae1c6285e881fb661b2141fa57025b"
+  integrity sha512-sGj+G/ofKh+f6A4BtXLJwtcKJgMUsXYVUubfTo9grERiDGXncttefmue/fyQFvn8wfdyoD1KhDRYLfjkJFl0yw==
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -3651,6 +3668,44 @@ cz-conventional-changelog@3.2.0, cz-conventional-changelog@^3.2.0:
   optionalDependencies:
     "@commitlint/load" ">6.1.1"
 
+d2-crud-plus@^1.16.2:
+  version "1.16.2"
+  resolved "https://registry.npmjs.org/d2-crud-plus/-/d2-crud-plus-1.16.2.tgz#eb3b40a759ed5697afd74955d46854110bdcaa5e"
+  integrity sha512-OOSegheCJdXeEFr328WGdZl3HRJGn0UsSkMFTJ8VDR2O+ckDw+DTiz+P8zWEC7dcVHjKC3OY9eFgcqz3VaClHA==
+  dependencies:
+    dayjs "^1.8.17"
+    lodash "^4.17.19"
+    vue "^2.6.11"
+    vuedraggable "^2.24.0"
+
+d2-crud-x@^2.10.2:
+  version "2.10.2"
+  resolved "https://registry.npmjs.org/d2-crud-x/-/d2-crud-x-2.10.2.tgz#7e0829b361a1ed4408c6c531f1804d677d637cc6"
+  integrity sha512-wO9JwS7jnB49DvjydRqLt8aW+Qv1eg6odyu0tnePg2JK3v/AGmOQTTdPUPB10lFp6vNV3omNU2WoDByaMl4LZw==
+  dependencies:
+    lodash.clonedeep "^4.5.0"
+    lodash.foreach "^4.5.0"
+    lodash.get "^4.4.2"
+    lodash.merge "^4.5.0"
+    lodash.set "^4.3.2"
+
+d2p-extends@^1.9.11:
+  version "1.9.11"
+  resolved "https://registry.npmjs.org/d2p-extends/-/d2p-extends-1.9.11.tgz#b6213a72dd6afe891692d27a4446d46713d452f2"
+  integrity sha512-/c35rLwrh0KJrH5n7BBYj1eeXlwruLj66db8J3PxZEDYeS13UTLeP++4xLQgKILrFoqXScOaW5u5pUKYOmeNeA==
+  dependencies:
+    base64-js "^1.3.0"
+    china-division "^2.2.0"
+    core-js "^3.6.5"
+    cos-js-sdk-v5 "^0.5.27"
+    cropperjs "^1.5.6"
+    lodash "^4.17.19"
+    object-assign "^4.1.1"
+    qiniu-js "^2.5.4"
+    quill "^1.3.7"
+    spark-md5 "^3.0.0"
+    vue "^2.6.11"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -7025,6 +7080,11 @@ lodash.memoize@4.x, lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.5.0:
+  version "4.6.2"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
@@ -7050,6 +7110,11 @@ lodash@4, lodash@4.17.15, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lod
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
 log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -8873,6 +8938,11 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qiniu-js@^2.5.4:
+  version "2.5.5"
+  resolved "https://registry.npmjs.org/qiniu-js/-/qiniu-js-2.5.5.tgz#77d295f222620f9377d6148f3f757d189a1e4977"
+  integrity sha512-cJcdZMCfU4OJirjCzKJwPXSgrXF0INB2qtqA6ImNBe2PJFqi8kWE7rp3qr1RKH0H4OTtPOXyBC2FVSl/zM7ERg==
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -9775,6 +9845,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+spark-md5@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.1.tgz#83a0e255734f2ab4e5c466e5a2cfc9ba2aa2124d"
+  integrity sha512-0tF3AGSD1ppQeuffsLDIOWlKUd3lS92tFxcsrh5Pe3ZphhnoK+oXIBTzOAThZCiuINZLvpiLH/1VS1/ANEJVig==
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -10963,6 +11038,13 @@ vue@^2.5.11, vue@^2.5.16, vue@^2.5.19, vue@^2.6.11:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
+vuedraggable@^2.24.0:
+  version "2.24.1"
+  resolved "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.1.tgz#304abd7644dde05c1f199a227bf9e9107f56197a"
+  integrity sha512-G1fxO1oshx+WLdieSGl6jSJdlHOQFga1FpjuUpgXldbpKNzxpjsGn4xYNnRHVrOAqm8aG5FfpdQlh5LHesxCeA==
+  dependencies:
+    sortablejs "^1.10.1"
+
 vuex@^3.1.2:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.3.0.tgz#665b4630ea1347317139fcc5cb495aab3ec5e513"
@@ -11319,6 +11401,11 @@ xmlchars@^2.1.1:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmldom@^0.1.27:
+  version "0.1.31"
+  resolved "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
+  integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"