diff --git a/views/src/main/resources/vueboot/src/router/index.js b/views/src/main/resources/vueboot/src/router/index.js
index 47fff0321dd0baeea8a8ac2dcc2a362ecd1f324b..2c4d686f9abb92ccf873af781f775b5aa5a6ce78 100644
--- a/views/src/main/resources/vueboot/src/router/index.js
+++ b/views/src/main/resources/vueboot/src/router/index.js
@@ -1,16 +1,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-
-Vue.use(Router)
-
 /* Layout */
 import Layout from '@/layout'
 
 /* Router Modules */
-import componentsRouter from './modules/components'
-import chartsRouter from './modules/charts'
-import tableRouter from './modules/table'
-import nestedRouter from './modules/nested'
+
+Vue.use(Router)
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -79,7 +74,7 @@ export const constantRoutes = [
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
-        meta: { title: '控制台', icon: 'dashboard', affix: true }
+        meta: {title: '控制台', icon: 'dashboard', affix: true}
       }
     ]
   },
@@ -91,305 +86,137 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/documentation/index'),
         name: 'Documentation',
-        meta: { title: '文档', icon: 'documentation', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/guide',
-    component: Layout,
-    redirect: '/guide/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: '使用手册', icon: 'guide', noCache: true }
+        meta: {title: '使用文档', icon: 'documentation', affix: true}
       }
     ]
   },
   {
-    path: '/profile',
+    path: '/bicConfig',
     component: Layout,
-    redirect: '/profile/index',
-    hidden: true,
+    redirect: '/bic-config/index',
+    name: 'bicConfig',
+    meta: {
+      title: '纠察图配置',
+      icon: 'el-icon-setting'
+    },
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/profile/index'),
-        name: 'Profile',
-        meta: { title: '关于我', icon: 'user', noCache: true }
-      }
-    ]
-  }
-]
-
-/**
- * asyncRoutes
- * the routes that need to be dynamically loaded based on user roles
- */
-export const asyncRoutes = [
-  // {
-  //   path: '/permission',
-  //   component: Layout,
-  //   redirect: '/permission/page',
-  //   alwaysShow: true, // will always show the root menu
-  //   name: 'Permission',
-  //   meta: {
-  //     title: 'Permission',
-  //     icon: 'lock',
-  //     roles: ['admin', 'editor'] // you can set roles in root nav
-  //   },
-  //   children: [
-  //     {
-  //       path: 'page',
-  //       component: () => import('@/views/permission/page'),
-  //       name: 'PagePermission',
-  //       meta: {
-  //         title: 'Page Permission',
-  //         roles: ['admin'] // or you can only set roles in sub nav
-  //       }
-  //     },
-  //     {
-  //       path: 'directive',
-  //       component: () => import('@/views/permission/directive'),
-  //       name: 'DirectivePermission',
-  //       meta: {
-  //         title: 'Directive Permission'
-  //         // if do not set roles, means: this page does not require permission
-  //       }
-  //     },
-  //     {
-  //       path: 'role',
-  //       component: () => import('@/views/permission/role'),
-  //       name: 'RolePermission',
-  //       meta: {
-  //         title: 'Role Permission',
-  //         roles: ['admin']
-  //       }
-  //     }
-  //   ]
-  // },
-
-  {
-    path: '/icon',
-    component: Layout,
-    children: [
+        path: 'system-config',
+        component: () => import('@/views/bic-config/system-config'),
+        name: 'systemConfig',
+        meta: {title: '应用系统配置'},
+      },
       {
-        path: 'index',
-        component: () => import('@/views/icons/index'),
-        name: 'Icons',
-        meta: { title: '图标', icon: 'icon', noCache: true }
-      }
-    ]
-  },
-
-  /** when your routing map is too long, you can split it into small modules **/
-  componentsRouter,
-  chartsRouter,
-  nestedRouter,
-  tableRouter,
-
-  // {
-  //   path: '/example',
-  //   component: Layout,
-  //   redirect: '/example/list',
-  //   name: 'Example',
-  //   meta: {
-  //     title: '示例',
-  //     icon: 'el-icon-s-help'
-  //   },
-  //   children: [
-  //     {
-  //       path: 'create',
-  //       component: () => import('@/views/example/create'),
-  //       name: 'CreateArticle',
-  //       meta: { title: 'Create Article', icon: 'edit' }
-  //     },
-  //     {
-  //       path: 'edit/:id(\\d+)',
-  //       component: () => import('@/views/example/edit'),
-  //       name: 'EditArticle',
-  //       meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
-  //       hidden: true
-  //     },
-  //     {
-  //       path: 'list',
-  //       component: () => import('@/views/example/list'),
-  //       name: 'ArticleList',
-  //       meta: { title: 'Article List', icon: 'list' }
-  //     }
-  //   ]
-  // },
-
-  {
-    path: '/tab',
-    component: Layout,
-    children: [
+        path: 'edge-config',
+        component: () => import('@/views/bic-config/edge-config'),
+        name: 'edgeConfig',
+        meta: {title: '边配置'}
+      },
       {
-        path: 'index',
-        component: () => import('@/views/tab/index'),
-        name: 'Tab',
-        meta: { title: 'Tab框', icon: 'tab' }
-      }
-    ]
-  },
-
-  {
-    path: '/error',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
-    meta: {
-      title: '错误页面',
-      icon: '404'
-    },
-    children: [
+        path: 'edge-function-config',
+        component: () => import('@/views/bic-config/edge-function-config'),
+        name: 'edgeFunctionConfig',
+        meta: {title: '边函数配置'}
+      },
       {
-        path: '401',
-        component: () => import('@/views/error-page/401'),
-        name: 'Page401',
-        meta: { title: '401', noCache: true }
+        path: 'node-config',
+        component: () => import('@/views/bic-config/node-config'),
+        name: 'nodeConfig',
+        meta: {title: '节点配置'}
       },
       {
-        path: '404',
-        component: () => import('@/views/error-page/404'),
-        name: 'Page404',
-        meta: { title: '404', noCache: true }
-      }
-    ]
-  },
-
-  {
-    path: '/error-log',
-    component: Layout,
-    children: [
+        path: 'node-function-config',
+        component: () => import('@/views/bic-config/node-function-config'),
+        name: 'nodeFunctionConfig',
+        meta: {title: '节点函数配置'}
+      },
       {
-        path: 'log',
-        component: () => import('@/views/error-log/index'),
-        name: 'ErrorLog',
-        meta: { title: '错误日志', icon: 'bug' }
-      }
+        path: 'module-relation',
+        component: () => import('@/views/bic-config/module-relation'),
+        name: 'moduleRelation',
+        meta: {title: '组织模块联系'}
+      },
     ]
   },
-
   {
-    path: '/excel',
+    path: '/bicData',
     component: Layout,
-    redirect: '/excel/export-excel',
-    name: 'Excel',
+    redirect: '/bic-data/index',
+    name: 'bicData',
     meta: {
-      title: 'Excel表格',
-      icon: 'excel'
+      title: '纠察图数据',
+      icon: 'form'
     },
     children: [
       {
-        path: 'export-excel',
-        component: () => import('@/views/excel/export-excel'),
-        name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
-      },
-      {
-        path: 'export-selected-excel',
-        component: () => import('@/views/excel/select-excel'),
-        name: 'SelectExcel',
-        meta: { title: 'Export Selected' }
+        path: 'edge-data',
+        component: () => import('@/views/bic-data/edge-data'),
+        name: 'edgeData',
+        meta: {title: '边数据'}
       },
       {
-        path: 'export-merge-header',
-        component: () => import('@/views/excel/merge-header'),
-        name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
+        path: 'node-data',
+        component: () => import('@/views/bic-data/node-data'),
+        name: 'nodeData',
+        meta: {title: '节点数据'}
       },
-      {
-        path: 'upload-excel',
-        component: () => import('@/views/excel/upload-excel'),
-        name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
-      }
     ]
   },
-
   {
-    path: '/zip',
+    path: '/bicView',
     component: Layout,
-    redirect: '/zip/download',
-    alwaysShow: true,
-    name: 'Zip',
-    meta: { title: 'Zip压缩导出', icon: 'zip' },
+    redirect: '/bic-view/index',
+    name: 'bicView',
+    meta: {
+      title: '纠察图视图',
+      icon: 'eye-open'
+    },
     children: [
       {
-        path: 'download',
-        component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
-        meta: { title: 'Export Zip' }
-      }
-    ]
-  },
-
-  {
-    path: '/pdf',
-    component: Layout,
-    redirect: '/pdf/index',
-    children: [
+        path: 'bic-singleton-view',
+        component: () => import('@/views/bic-view/bic-singleton-view'),
+        name: 'bicSingletonView',
+        meta: {title: '单例视图'}
+      },
       {
-        path: 'index',
-        component: () => import('@/views/pdf/index'),
-        name: 'PDF',
-        meta: { title: 'PDF下载', icon: 'pdf' }
-      }
+        path: 'bic-summary-view',
+        component: () => import('@/views/bic-view/bic-summary-view'),
+        name: 'bicSummaryView',
+        meta: {title: '聚合视图'}
+      },
     ]
   },
   {
-    path: '/pdf/download',
-    component: () => import('@/views/pdf/download'),
-    hidden: true
-  },
-
-  {
-    path: '/theme',
+    path: '/icon',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/theme/index'),
-        name: 'Theme',
-        meta: { title: '主题', icon: 'theme' }
+        component: () => import('@/views/icons/index'),
+        name: 'Icons',
+        meta: {title: '图标', icon: 'icon', noCache: true}
       }
     ]
   },
-
   {
-    path: '/clipboard',
+    path: '/profile',
     component: Layout,
+    redirect: '/profile/index',
+    hidden: true,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/clipboard/index'),
-        name: 'ClipboardDemo',
-        meta: { title: '复制', icon: 'clipboard' }
-      }
-    ]
-  },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: '外部链接', icon: 'link' }
+        component: () => import('@/views/profile/index'),
+        name: 'Profile',
+        meta: {title: '关于我', icon: 'user', noCache: true}
       }
     ]
-  },
-
-  // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
+  }
 ]
 
 const createRouter = () => new Router({
   // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
+  scrollBehavior: () => ({y: 0}),
   routes: constantRoutes
 })
 
diff --git a/views/src/main/resources/vueboot/src/router/modules/charts.js b/views/src/main/resources/vueboot/src/router/modules/charts.js
deleted file mode 100644
index 48339613d07f130c1976db14d77eec3ddd96fc61..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/router/modules/charts.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/** When your routing table is too long, you can split it into small modules**/
-
-import Layout from '@/layout'
-
-const chartsRouter = {
-  path: '/charts',
-  component: Layout,
-  redirect: 'noRedirect',
-  name: 'Charts',
-  meta: {
-    title: '图表组件',
-    icon: 'chart'
-  },
-  children: [
-    {
-      path: 'keyboard',
-      component: () => import('@/views/charts/keyboard'),
-      name: 'KeyboardChart',
-      meta: { title: 'Keyboard Chart', noCache: true }
-    },
-    {
-      path: 'line',
-      component: () => import('@/views/charts/line'),
-      name: 'LineChart',
-      meta: { title: 'Line Chart', noCache: true }
-    },
-    {
-      path: 'mix-chart',
-      component: () => import('@/views/charts/mix-chart'),
-      name: 'MixChart',
-      meta: { title: 'Mix Chart', noCache: true }
-    }
-  ]
-}
-
-export default chartsRouter
diff --git a/views/src/main/resources/vueboot/src/router/modules/components.js b/views/src/main/resources/vueboot/src/router/modules/components.js
deleted file mode 100644
index 1a79bea2d08bb501550b99eaf1185c6fb0b5150a..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/router/modules/components.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const componentsRouter = {
-  path: '/components',
-  component: Layout,
-  redirect: 'noRedirect',
-  name: 'ComponentDemo',
-  meta: {
-    title: '科研组件',
-    icon: 'component'
-  },
-  children: [
-    {
-      path: 'tinymce',
-      component: () => import('@/views/components-demo/tinymce'),
-      name: 'TinymceDemo',
-      meta: { title: 'Tinymce' }
-    },
-    {
-      path: 'markdown',
-      component: () => import('@/views/components-demo/markdown'),
-      name: 'MarkdownDemo',
-      meta: { title: 'Markdown' }
-    },
-    {
-      path: 'json-editor',
-      component: () => import('@/views/components-demo/json-editor'),
-      name: 'JsonEditorDemo',
-      meta: { title: 'JSON Editor' }
-    },
-    {
-      path: 'split-pane',
-      component: () => import('@/views/components-demo/split-pane'),
-      name: 'SplitpaneDemo',
-      meta: { title: 'SplitPane' }
-    },
-    {
-      path: 'avatar-upload',
-      component: () => import('@/views/components-demo/avatar-upload'),
-      name: 'AvatarUploadDemo',
-      meta: { title: 'Upload' }
-    },
-    {
-      path: 'dropzone',
-      component: () => import('@/views/components-demo/dropzone'),
-      name: 'DropzoneDemo',
-      meta: { title: 'Dropzone' }
-    },
-    {
-      path: 'sticky',
-      component: () => import('@/views/components-demo/sticky'),
-      name: 'StickyDemo',
-      meta: { title: 'Sticky' }
-    },
-    {
-      path: 'count-to',
-      component: () => import('@/views/components-demo/count-to'),
-      name: 'CountToDemo',
-      meta: { title: 'Count To' }
-    },
-    {
-      path: 'mixin',
-      component: () => import('@/views/components-demo/mixin'),
-      name: 'ComponentMixinDemo',
-      meta: { title: 'Component Mixin' }
-    },
-    {
-      path: 'back-to-top',
-      component: () => import('@/views/components-demo/back-to-top'),
-      name: 'BackToTopDemo',
-      meta: { title: 'Back To Top' }
-    },
-    {
-      path: 'drag-dialog',
-      component: () => import('@/views/components-demo/drag-dialog'),
-      name: 'DragDialogDemo',
-      meta: { title: 'Drag Dialog' }
-    },
-    {
-      path: 'drag-select',
-      component: () => import('@/views/components-demo/drag-select'),
-      name: 'DragSelectDemo',
-      meta: { title: 'Drag Select' }
-    },
-    {
-      path: 'dnd-list',
-      component: () => import('@/views/components-demo/dnd-list'),
-      name: 'DndListDemo',
-      meta: { title: 'Dnd List' }
-    },
-    {
-      path: 'drag-kanban',
-      component: () => import('@/views/components-demo/drag-kanban'),
-      name: 'DragKanbanDemo',
-      meta: { title: 'Drag Kanban' }
-    }
-  ]
-}
-
-export default componentsRouter
diff --git a/views/src/main/resources/vueboot/src/router/modules/nested.js b/views/src/main/resources/vueboot/src/router/modules/nested.js
deleted file mode 100644
index 26985c75bc03eaaa72dc1a3186e5f578220c3ac2..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/router/modules/nested.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const nestedRouter = {
-  path: '/nested',
-  component: Layout,
-  redirect: '/nested/menu1/menu1-1',
-  name: 'Nested',
-  meta: {
-    title: '嵌套路由',
-    icon: 'nested'
-  },
-  children: [
-    {
-      path: 'menu1',
-      component: () => import('@/views/nested/menu1/index'), // Parent router-view
-      name: 'Menu1',
-      meta: { title: 'Menu 1' },
-      redirect: '/nested/menu1/menu1-1',
-      children: [
-        {
-          path: 'menu1-1',
-          component: () => import('@/views/nested/menu1/menu1-1'),
-          name: 'Menu1-1',
-          meta: { title: 'Menu 1-1' }
-        },
-        {
-          path: 'menu1-2',
-          component: () => import('@/views/nested/menu1/menu1-2'),
-          name: 'Menu1-2',
-          redirect: '/nested/menu1/menu1-2/menu1-2-1',
-          meta: { title: 'Menu 1-2' },
-          children: [
-            {
-              path: 'menu1-2-1',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-              name: 'Menu1-2-1',
-              meta: { title: 'Menu 1-2-1' }
-            },
-            {
-              path: 'menu1-2-2',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-              name: 'Menu1-2-2',
-              meta: { title: 'Menu 1-2-2' }
-            }
-          ]
-        },
-        {
-          path: 'menu1-3',
-          component: () => import('@/views/nested/menu1/menu1-3'),
-          name: 'Menu1-3',
-          meta: { title: 'Menu 1-3' }
-        }
-      ]
-    },
-    {
-      path: 'menu2',
-      name: 'Menu2',
-      component: () => import('@/views/nested/menu2/index'),
-      meta: { title: 'Menu 2' }
-    }
-  ]
-}
-
-export default nestedRouter
diff --git a/views/src/main/resources/vueboot/src/router/modules/table.js b/views/src/main/resources/vueboot/src/router/modules/table.js
deleted file mode 100644
index 8323cfb107bbfc2d3ea2c2d64af4578bc9704228..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/router/modules/table.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const tableRouter = {
-  path: '/table',
-  component: Layout,
-  redirect: '/table/complex-table',
-  name: 'Table',
-  meta: {
-    title: '表格',
-    icon: 'table'
-  },
-  children: [
-    {
-      path: 'dynamic-table',
-      component: () => import('@/views/table/dynamic-table/index'),
-      name: 'DynamicTable',
-      meta: { title: 'Dynamic Table' }
-    },
-    {
-      path: 'drag-table',
-      component: () => import('@/views/table/drag-table'),
-      name: 'DragTable',
-      meta: { title: 'Drag Table' }
-    },
-    {
-      path: 'inline-edit-table',
-      component: () => import('@/views/table/inline-edit-table'),
-      name: 'InlineEditTable',
-      meta: { title: 'Inline Edit' }
-    },
-    {
-      path: 'complex-table',
-      component: () => import('@/views/table/complex-table'),
-      name: 'ComplexTable',
-      meta: { title: 'Complex Table' }
-    }
-  ]
-}
-export default tableRouter
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/edge-config.vue b/views/src/main/resources/vueboot/src/views/bic-config/edge-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..96deb1cd0131009d75d02f573612928559450fe3
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/edge-config.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">边</span> 配置简介：对纠察图的 <span class="red-text-css">节点之间的边</span> 进行配置。
+      系统提供了一些常见的边配置，但是你依旧可以自定义边，只需要实现标准函数即可。对于边的使用，不限制业务域，其为公共域使用。边的更多说明以及配置方式，请到文档查看详细说明。
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "edge-config",
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/edge-function-config.vue b/views/src/main/resources/vueboot/src/views/bic-config/edge-function-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7910cce85ed7070fecf6f98375cd2ead7be7d5c0
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/edge-function-config.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">边函数</span> 配置简介：对纠察图的 <span class="red-text-css">节点之间的边的执行函数</span> 进行配置。
+      系统提供了一些常见的边配置函数，但是你依旧可以自定义边函数，只需要实现标准函数即可。对于边函数的使用，不限制业务域，其为公共域使用，其可以和边组合使用。边函数的更多说明以及配置方式，请到文档查看详细说明。
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "edge-function-config",
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/example/edit.vue b/views/src/main/resources/vueboot/src/views/bic-config/index.vue
similarity index 30%
rename from views/src/main/resources/vueboot/src/views/example/edit.vue
rename to views/src/main/resources/vueboot/src/views/bic-config/index.vue
index 87b612601c1ad7a6b039af8e8453d2333af069cf..2de6494abac98e3cc7a836ca7236700b67673562 100644
--- a/views/src/main/resources/vueboot/src/views/example/edit.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/index.vue
@@ -1,13 +1,17 @@
 <template>
-  <article-detail :is-edit="true" />
+  <div></div>
 </template>
 
 <script>
-import ArticleDetail from './components/ArticleDetail'
-
 export default {
-  name: 'EditForm',
-  components: { ArticleDetail }
+  name: "index",
+  data() {
+    return {}
+  },
+  methods: {}
 }
 </script>
 
+<style scoped>
+
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/module-relation.vue b/views/src/main/resources/vueboot/src/views/bic-config/module-relation.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05b205c501822a54f56a36f18a37eedb38530ed2
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/module-relation.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">组织模块</span> 配置简介：对纠察图的 <span class="red-text-css">整个图的渲染</span> 进行配置。
+      实际上关系的是业务节点之间的关联，对于关联关系，每个节点提供节点函数、每个边提供边函数的配置。上述的边配置和节点配置划分2类。
+      一类是边和节点的基本属性。另外一个是计算相关事件的属性，现在支持的属性有 <span class="blue-text-css">@click</span> 和 <span class="blue-text-css">@hover</span> 两类事件
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "module-relation",
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+.blue-text-css {
+  color: #0bb7b3;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/node-config.vue b/views/src/main/resources/vueboot/src/views/bic-config/node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0bb837c2539be35d4ad9bb95f4e975ce4d7c1ede
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/node-config.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">节点</span> 配置简介：对纠察图的 <span class="red-text-css">边相互关联的节点</span> 进行配置。
+      系统提供了一些常见的节点配置，但是你依旧可以自定义边，只需要实现标准函数即可。对于节点的使用，不限制业务域，其为公共域使用。节点的更多说明以及配置方式，请到文档查看详细说明。
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "node-config",
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/node-function-config.vue b/views/src/main/resources/vueboot/src/views/bic-config/node-function-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b8cc2ee18f3ed0cb2ff72f0d03f0b4e7f539fb7b
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/node-function-config.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">节点函数</span> 配置简介：对纠察图的 <span class="red-text-css">边相互关联的节点的函数</span> 进行配置。
+      系统提供了一些常见的节点函数配置，但是你依旧可以自定义节点函数，只需要实现标准函数即可。对于函数的使用，不限制业务域，其为公共域使用。函数的更多说明以及配置方式，请到文档查看详细说明。
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "node-function-config",
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/system-config.vue b/views/src/main/resources/vueboot/src/views/bic-config/system-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ae5fccc61ddb796c6afc2c007c9585e0a794fcb
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/system-config.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">系统</span> 配置简介：对纠察图的 <span class="red-text-css">所属应用</span> 进行分组。
+      因为边配置和节点配置是需要应用隔离的，因此需要维护一份数据，而在SDK或者HTTP写入的数据中，SystemKey就是应用的唯一标识。可以相关相互关联。
+    </aside>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "system-config"
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-data/edge-data.vue b/views/src/main/resources/vueboot/src/views/bic-data/edge-data.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b23f5b59cab40470493ba361eb8b676711b16ee1
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-data/edge-data.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">边数据</span>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "edge-data"
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/error-log/components/ErrorTestB.vue b/views/src/main/resources/vueboot/src/views/bic-data/index.vue
similarity index 48%
rename from views/src/main/resources/vueboot/src/views/error-log/components/ErrorTestB.vue
rename to views/src/main/resources/vueboot/src/views/bic-data/index.vue
index d796beefdcaab23f6a06ad3ed1946a28595ef9cc..54b19c16a4e805bd24f9197cef710b077440603a 100644
--- a/views/src/main/resources/vueboot/src/views/error-log/components/ErrorTestB.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-data/index.vue
@@ -1,11 +1,13 @@
 <template>
-  <div />
+
 </template>
 
 <script>
 export default {
-  created() {
-    this.b = b // eslint-disable-line
-  }
+  name: "index"
 }
 </script>
+
+<style scoped>
+
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-data/node-data.vue b/views/src/main/resources/vueboot/src/views/bic-data/node-data.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e54290babc5f0b90f62debbd78209e110b2d5f10
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-data/node-data.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">节点数据</span>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "node-data"
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/bic-singleton-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/bic-singleton-view.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b7f3160bb311a1674710ce8eef0ce6480f8906d
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-view/bic-singleton-view.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">单例视图</span>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "bic-singleton-view"
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/bic-summary-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/bic-summary-view.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2afd28058f6c6ee80c6941155abc94b578624cf7
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-view/bic-summary-view.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="app-container">
+    <aside>
+      <span class="red-text-css">汇总视图</span>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "bic-summary-view"
+}
+</script>
+
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
+}
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/error-log/components/ErrorTestA.vue b/views/src/main/resources/vueboot/src/views/bic-view/index.vue
similarity index 39%
rename from views/src/main/resources/vueboot/src/views/error-log/components/ErrorTestA.vue
rename to views/src/main/resources/vueboot/src/views/bic-view/index.vue
index 52654e0e2e37f7df6b16795e0db7834a2e81365a..54b19c16a4e805bd24f9197cef710b077440603a 100644
--- a/views/src/main/resources/vueboot/src/views/error-log/components/ErrorTestA.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-view/index.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <!--error code-->
-    {{ a.a }}
-    <!--error code-->
-  </div>
+
 </template>
 
 <script>
 export default {
-  name: 'ErrorTestA'
+  name: "index"
 }
 </script>
+
+<style scoped>
+
+</style>
diff --git a/views/src/main/resources/vueboot/src/views/clipboard/index.vue b/views/src/main/resources/vueboot/src/views/clipboard/index.vue
deleted file mode 100644
index 4a6bdd1e2741589ebde74c38a235020b86a65dc2..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/clipboard/index.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="use clipboard  directly" name="directly">
-        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
-          copy
-        </el-button>
-      </el-tab-pane>
-      <el-tab-pane label="use clipboard by v-directive" name="v-directive">
-        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
-          copy
-        </el-button>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-import clip from '@/utils/clipboard' // use clipboard directly
-import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
-
-export default {
-  name: 'ClipboardDemo',
-  directives: {
-    clipboard
-  },
-  data() {
-    return {
-      activeName: 'directly',
-      inputData: 'https://github.com/PanJiaChen/vue-element-admin'
-    }
-  },
-  methods: {
-    handleCopy(text, event) {
-      clip(text, event)
-    },
-    clipboardSuccess() {
-      this.$message({
-        message: 'Copy successfully',
-        type: 'success',
-        duration: 1500
-      })
-    }
-  }
-}
-</script>
-
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/avatar-upload.vue b/views/src/main/resources/vueboot/src/views/components-demo/avatar-upload.vue
deleted file mode 100644
index 5cb20a56aeaa448aa92681482201613ee33f6a94..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/avatar-upload.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>This is based on
-      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
-      Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.
-    </aside>
-
-    <pan-thumb :image="image" />
-
-    <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
-      Change Avatar
-    </el-button>
-
-    <image-cropper
-      v-show="imagecropperShow"
-      :key="imagecropperKey"
-      :width="300"
-      :height="300"
-      url="https://httpbin.org/post"
-      lang-type="en"
-      @close="close"
-      @crop-upload-success="cropSuccess"
-    />
-  </div>
-</template>
-
-<script>
-import ImageCropper from '@/components/ImageCropper'
-import PanThumb from '@/components/PanThumb'
-
-export default {
-  name: 'AvatarUploadDemo',
-  components: { ImageCropper, PanThumb },
-  data() {
-    return {
-      imagecropperShow: false,
-      imagecropperKey: 0,
-      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
-    }
-  },
-  methods: {
-    cropSuccess(resData) {
-      this.imagecropperShow = false
-      this.imagecropperKey = this.imagecropperKey + 1
-      this.image = resData.files.avatar
-    },
-    close() {
-      this.imagecropperShow = false
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .avatar{
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-  }
-</style>
-
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/back-to-top.vue b/views/src/main/resources/vueboot/src/views/components-demo/back-to-top.vue
deleted file mode 100644
index df5370befeae189a815050bd1b45d64b1832452d..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/back-to-top.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner
-    </aside>
-    <aside>
-      You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally
-    </aside>
-    <div class="placeholder-container">
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-    </div>
-    <!-- you can add element-ui's tooltip -->
-    <el-tooltip placement="top" content="tooltip">
-      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
-    </el-tooltip>
-  </div>
-</template>
-
-<script>
-import BackToTop from '@/components/BackToTop'
-
-export default {
-  name: 'BackToTopDemo',
-  components: { BackToTop },
-  data() {
-    return {
-      // customizable button style, show/hide critical point, return position
-      myBackToTopStyle: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
-        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.placeholder-container div {
-  margin: 10px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/count-to.vue b/views/src/main/resources/vueboot/src/views/components-demo/count-to.vue
deleted file mode 100644
index 70681df691eace66b598ac4dd8fcd55240f348cb..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/count-to.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
-    </aside>
-    <count-to
-      ref="example"
-      :start-val="_startVal"
-      :end-val="_endVal"
-      :duration="_duration"
-      :decimals="_decimals"
-      :separator="_separator"
-      :prefix="_prefix"
-      :suffix="_suffix"
-      :autoplay="false"
-      class="example"
-    />
-    <div style="margin-left: 25%;margin-top: 40px;">
-      <label class="label" for="startValInput">startVal:
-        <input v-model.number="setStartVal" type="number" name="startValInput">
-      </label>
-      <label class="label" for="endValInput">endVal:
-        <input v-model.number="setEndVal" type="number" name="endVaInput">
-      </label>
-      <label class="label" for="durationInput">duration:
-        <input v-model.number="setDuration" type="number" name="durationInput">
-      </label>
-      <div class="startBtn example-btn" @click="start">
-        Start
-      </div>
-      <div class="pause-resume-btn example-btn" @click="pauseResume">
-        pause/resume
-      </div>
-      <br>
-      <label class="label" for="decimalsInput">decimals:
-        <input v-model.number="setDecimals" type="number" name="decimalsInput">
-      </label>
-      <label class="label" for="separatorInput">separator:
-        <input v-model="setSeparator" name="separatorInput">
-      </label>
-      <label class="label" for="prefixInput">prefix:
-        <input v-model="setPrefix" name="prefixInput">
-      </label>
-      <label class="label" for="suffixInput">suffix:
-        <input v-model="setSuffix" name="suffixInput">
-      </label>
-    </div>
-    <aside>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
-      :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
-      :autoplay=false&gt;</aside>
-  </div>
-</template>
-
-<script>
-import countTo from 'vue-count-to'
-
-export default {
-  name: 'CountToDemo',
-  components: { countTo },
-  data() {
-    return {
-      setStartVal: 0,
-      setEndVal: 2017,
-      setDuration: 4000,
-      setDecimals: 0,
-      setSeparator: ',',
-      setSuffix: ' rmb',
-      setPrefix: '¥ '
-    }
-  },
-  computed: {
-    _startVal() {
-      if (this.setStartVal) {
-        return this.setStartVal
-      } else {
-        return 0
-      }
-    },
-    _endVal() {
-      if (this.setEndVal) {
-        return this.setEndVal
-      } else {
-        return 0
-      }
-    },
-    _duration() {
-      if (this.setDuration) {
-        return this.setDuration
-      } else {
-        return 100
-      }
-    },
-    _decimals() {
-      if (this.setDecimals) {
-        if (this.setDecimals < 0 || this.setDecimals > 20) {
-          alert('digits argument must be between 0 and 20')
-          return 0
-        }
-        return this.setDecimals
-      } else {
-        return 0
-      }
-    },
-    _separator() {
-      return this.setSeparator
-    },
-    _suffix() {
-      return this.setSuffix
-    },
-    _prefix() {
-      return this.setPrefix
-    }
-  },
-  methods: {
-    start() {
-      this.$refs.example.start()
-    },
-    pauseResume() {
-      this.$refs.example.pauseResume()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.example-btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: 500;
-  text-align: center;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  line-height: 1.5;
-  padding: 4px 15px;
-  font-size: 12px;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  position: relative;
-  color: rgba(0, 0, 0, .65);
-  background-color: #fff;
-  border-color: #d9d9d9;
-}
-
-.example-btn:hover {
-  color: #4AB7BD;
-  background-color: #fff;
-  border-color: #4AB7BD;
-}
-.example {
-  font-size: 50px;
-  color: #F6416C;
-  display: block;
-  margin: 10px 0;
-  text-align: center;
-  font-size: 80px;
-  font-weight: 500;
-}
-
-.label {
-  color: #2f4f4f;
-  font-size: 16px;
-  display: inline-block;
-  margin: 15px 30px 15px 0;
-}
-
-input {
-  position: relative;
-  display: inline-block;
-  padding: 4px 7px;
-  width: 70px;
-  height: 28px;
-  cursor: text;
-  font-size: 12px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, .65);
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  -webkit-transition: all .3s;
-  transition: all .3s;
-}
-
-.startBtn {
-  margin-left: 20px;
-  font-size: 20px;
-  color: #30B08F;
-  background-color: #fff;
-}
-
-.startBtn:hover {
-  background-color: #30B08F;
-  color: #fff;
-  border-color: #30B08F;
-}
-
-.pause-resume-btn {
-  font-size: 20px;
-  color: #E65D6E;
-  background-color: #fff;
-}
-
-.pause-resume-btn:hover {
-  background-color: #E65D6E;
-  color: #fff;
-  border-color: #E65D6E;
-}
-</style>
-
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/dnd-list.vue b/views/src/main/resources/vueboot/src/views/components-demo/dnd-list.vue
deleted file mode 100644
index e299fa68b6da2fbafd950636926eb6a969ac369b..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/dnd-list.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>drag-list base on
-      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
-    </aside>
-    <div class="editor-container">
-      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
-    </div>
-  </div>
-</template>
-
-<script>
-import DndList from '@/components/DndList'
-import { fetchList } from '@/api/article'
-
-export default {
-  name: 'DndListDemo',
-  components: { DndList },
-  data() {
-    return {
-      list1: [],
-      list2: []
-    }
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.listLoading = true
-      fetchList().then(response => {
-        this.list1 = response.data.items.splice(0, 5)
-        this.list2 = response.data.items
-      })
-    }
-  }
-}
-</script>
-
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/drag-dialog.vue b/views/src/main/resources/vueboot/src/views/components-demo/drag-dialog.vue
deleted file mode 100644
index c815b282e147f195ca04513cae43d110fa8cf0c6..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/drag-dialog.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="components-container">
-    <el-button type="primary" @click="dialogTableVisible = true">
-      open a Drag Dialog
-    </el-button>
-    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
-      <el-select ref="select" v-model="value" placeholder="请选择">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-      </el-select>
-      <el-table :data="gridData">
-        <el-table-column property="date" label="Date" width="150" />
-        <el-table-column property="name" label="Name" width="200" />
-        <el-table-column property="address" label="Address" />
-      </el-table>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
-
-export default {
-  name: 'DragDialogDemo',
-  directives: { elDragDialog },
-  data() {
-    return {
-      dialogTableVisible: false,
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' }
-      ],
-      value: '',
-      gridData: [{
-        date: '2016-05-02',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-04',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-01',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-03',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }]
-    }
-  },
-  methods: {
-    // v-el-drag-dialog onDrag callback function
-    handleDrag() {
-      this.$refs.select.blur()
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/drag-kanban.vue b/views/src/main/resources/vueboot/src/views/components-demo/drag-kanban.vue
deleted file mode 100644
index 943be455328ba73397331e1b72e1a5027f0f2031..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/drag-kanban.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="components-container board">
-    <Kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo" />
-    <Kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working" />
-    <Kanban :key="3" :list="list3" :group="group" class="kanban done" header-text="Done" />
-  </div>
-</template>
-<script>
-import Kanban from '@/components/Kanban'
-
-export default {
-  name: 'DragKanbanDemo',
-  components: {
-    Kanban
-  },
-  data() {
-    return {
-      group: 'mission',
-      list1: [
-        { name: 'Mission', id: 1 },
-        { name: 'Mission', id: 2 },
-        { name: 'Mission', id: 3 },
-        { name: 'Mission', id: 4 }
-      ],
-      list2: [
-        { name: 'Mission', id: 5 },
-        { name: 'Mission', id: 6 },
-        { name: 'Mission', id: 7 }
-      ],
-      list3: [
-        { name: 'Mission', id: 8 },
-        { name: 'Mission', id: 9 },
-        { name: 'Mission', id: 10 }
-      ]
-    }
-  }
-}
-</script>
-<style lang="scss">
-.board {
-  width: 1000px;
-  margin-left: 20px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: row;
-  align-items: flex-start;
-}
-.kanban {
-  &.todo {
-    .board-column-header {
-      background: #4A9FF9;
-    }
-  }
-  &.working {
-    .board-column-header {
-      background: #f9944a;
-    }
-  }
-  &.done {
-    .board-column-header {
-      background: #2ac06d;
-    }
-  }
-}
-</style>
-
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/drag-select.vue b/views/src/main/resources/vueboot/src/views/components-demo/drag-select.vue
deleted file mode 100644
index 905ecb94e906a744e15cfa56d5f85c7a26503aff..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/drag-select.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="components-container">
-    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-    </el-drag-select>
-
-    <div style="margin-top:30px;">
-      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">
-        {{ item }}
-      </el-tag>
-    </div>
-  </div>
-</template>
-
-<script>
-import ElDragSelect from '@/components/DragSelect' // base on element-ui
-
-export default {
-  name: 'DragSelectDemo',
-  components: { ElDragSelect },
-  data() {
-    return {
-      value: ['Apple', 'Banana', 'Orange'],
-      options: [{
-        value: 'Apple',
-        label: 'Apple'
-      }, {
-        value: 'Banana',
-        label: 'Banana'
-      }, {
-        value: 'Orange',
-        label: 'Orange'
-      }, {
-        value: 'Pear',
-        label: 'Pear'
-      }, {
-        value: 'Strawberry',
-        label: 'Strawberry'
-      }]
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/dropzone.vue b/views/src/main/resources/vueboot/src/views/components-demo/dropzone.vue
deleted file mode 100644
index a8c1040056843a87e3e99ec518d3c090b7a21b18..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/dropzone.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
-      Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.
-    </aside>
-    <div class="editor-container">
-      <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Dropzone from '@/components/Dropzone'
-
-export default {
-  name: 'DropzoneDemo',
-  components: { Dropzone },
-  methods: {
-    dropzoneS(file) {
-      console.log(file)
-      this.$message({ message: 'Upload success', type: 'success' })
-    },
-    dropzoneR(file) {
-      console.log(file)
-      this.$message({ message: 'Delete success', type: 'success' })
-    }
-  }
-}
-</script>
-
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/json-editor.vue b/views/src/main/resources/vueboot/src/views/components-demo/json-editor.vue
deleted file mode 100644
index 85bf3834d2cf997bf67b49e26d4b9e9755a7545f..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/json-editor.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
-      base on <a
-        href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
-        target="_blank"
-      >json-lint</a>.</aside>
-    <div class="editor-container">
-      <json-editor ref="jsonEditor" v-model="value" />
-    </div>
-  </div>
-</template>
-
-<script>
-import JsonEditor from '@/components/JsonEditor'
-
-const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
-
-export default {
-  name: 'JsonEditorDemo',
-  components: { JsonEditor },
-  data() {
-    return {
-      value: JSON.parse(jsonData)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.editor-container{
-  position: relative;
-  height: 100%;
-}
-</style>
-
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/markdown.vue b/views/src/main/resources/vueboot/src/views/components-demo/markdown.vue
deleted file mode 100644
index 25cf3e3763955f93c62ecfa668df6fce04f89c80..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/markdown.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>Markdown is based on
-      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
-      <a
-        target="_blank"
-        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
-      >
-        Documentation </a>
-    </aside>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        Basic:
-      </el-tag>
-      <markdown-editor v-model="content1" height="300px" />
-    </div>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        Markdown Mode:
-      </el-tag>
-      <markdown-editor ref="markdownEditor" v-model="content2" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
-    </div>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        Customize Toolbar:
-      </el-tag>
-      <markdown-editor v-model="content3" :options="{ toolbarItems: ['heading','bold','italic']}" />
-    </div>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        I18n:
-      </el-tag>
-      <el-alert
-        :closable="false"
-        title="You can change the language of the admin system to see the effect"
-        type="success"
-      />
-      <markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
-    </div>
-
-    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
-      Get HTML
-    </el-button>
-    <div v-html="html" />
-  </div>
-</template>
-
-<script>
-import MarkdownEditor from '@/components/MarkdownEditor'
-
-const content = `
-**This is test**
-
-* vue
-* element
-* webpack
-
-`
-export default {
-  name: 'MarkdownDemo',
-  components: { MarkdownEditor },
-  data() {
-    return {
-      content1: content,
-      content2: content,
-      content3: content,
-      content4: content,
-      html: '',
-      languageTypeList: {
-        'en': 'en_US',
-        'zh': 'zh_CN',
-        'es': 'es_ES'
-      }
-    }
-  },
-  computed: {
-    language() {
-      return this.languageTypeList['en']
-    }
-  },
-  methods: {
-    getHtml() {
-      this.html = this.$refs.markdownEditor.getHtml()
-      console.log(this.html)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.editor-container{
-  margin-bottom: 30px;
-}
-.tag-title{
-  margin-bottom: 5px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/mixin.vue b/views/src/main/resources/vueboot/src/views/components-demo/mixin.vue
deleted file mode 100644
index 425cf4fb431388c48b5946211e3e5fba8dbe5fbd..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/mixin.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div class="mixin-components-container">
-    <el-row>
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>Buttons</span>
-        </div>
-        <div style="margin-bottom:50px;">
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn blue-btn" to="/documentation/index">
-              Documentation
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn light-blue-btn" to="/icon/index">
-              Icons
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn pink-btn" to="/excel/export-excel">
-              Excel
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn green-btn" to="/table/complex-table">
-              Table
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn tiffany-btn" to="/example/create">
-              Form
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn yellow-btn" to="/theme/index">
-              Theme
-            </router-link>
-          </el-col>
-        </div>
-      </el-card>
-    </el-row>
-
-    <el-row :gutter="20" style="margin-top:50px;">
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Material Design 的input</span>
-          </div>
-          <div style="height:100px;">
-            <el-form :model="demo" :rules="demoRules">
-              <el-form-item prop="title">
-                <md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
-                  标题
-                </md-input>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>图片hover效果</span>
-          </div>
-          <div class="component-item">
-            <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
-              vue-element-admin
-            </pan-thumb>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>水波纹 waves v-directive</span>
-          </div>
-          <div class="component-item">
-            <el-button v-waves type="primary">
-              水波纹效果
-            </el-button>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>hover text</span>
-          </div>
-          <div class="component-item">
-            <mallki class-name="mallki-text" text="vue-element-admin" />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="20" style="margin-top:50px;">
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Share</span>
-          </div>
-          <div class="component-item" style="height:420px;">
-            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import PanThumb from '@/components/PanThumb'
-import MdInput from '@/components/MDinput'
-import Mallki from '@/components/TextHoverEffect/Mallki'
-import DropdownMenu from '@/components/Share/DropdownMenu'
-import waves from '@/directive/waves/index.js' // 水波纹指令
-
-export default {
-  name: 'ComponentMixinDemo',
-  components: {
-    PanThumb,
-    MdInput,
-    Mallki,
-    DropdownMenu
-  },
-  directives: {
-    waves
-  },
-  data() {
-    const validate = (rule, value, callback) => {
-      if (value.length !== 6) {
-        callback(new Error('请输入六个字符'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      demo: {
-        title: ''
-      },
-      demoRules: {
-        title: [{ required: true, trigger: 'change', validator: validate }]
-      },
-      articleList: [
-        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
-        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
-        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
-      ]
-    }
-  }
-}
-</script>
-
-<style scoped>
-.mixin-components-container {
-  background-color: #f0f2f5;
-  padding: 30px;
-  min-height: calc(100vh - 84px);
-}
-.component-item{
-  min-height: 100px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/split-pane.vue b/views/src/main/resources/vueboot/src/views/components-demo/split-pane.vue
deleted file mode 100644
index 7dba353fe0915df81329c1b02d584bb86bc290b6..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/split-pane.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside><strong>SplitPane</strong> If you've used
-      <a href="https://codepen.io/" target="_blank"> codepen</a>,
-      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
-      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
-    </aside>
-    <split-pane split="vertical" @resize="resize">
-      <template slot="paneL">
-        <div class="left-container" />
-      </template>
-      <template slot="paneR">
-        <split-pane split="horizontal">
-          <template slot="paneL">
-            <div class="top-container" />
-          </template>
-          <template slot="paneR">
-            <div class="bottom-container" />
-          </template>
-        </split-pane>
-      </template>
-    </split-pane>
-  </div>
-</template>
-
-<script>
-import splitPane from 'vue-splitpane'
-
-export default {
-  name: 'SplitpaneDemo',
-  components: { splitPane },
-  methods: {
-    resize() {
-      console.log('resize')
-    }
-  }
-}
-</script>
-
-<style  scoped>
-  .components-container {
-    position: relative;
-    height: 100vh;
-  }
-
-  .left-container {
-    background-color: #F38181;
-    height: 100%;
-  }
-
-  .right-container {
-    background-color: #FCE38A;
-    height: 200px;
-  }
-
-  .top-container {
-    background-color: #FCE38A;
-    width: 100%;
-    height: 100%;
-  }
-
-  .bottom-container {
-    width: 100%;
-    background-color: #95E1D3;
-    height: 100%;
-  }
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/sticky.vue b/views/src/main/resources/vueboot/src/views/components-demo/sticky.vue
deleted file mode 100644
index f01d088a2d712235a7b1b35848ac91be801c5619..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/sticky.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div>
-    <sticky :z-index="10" class-name="sub-navbar">
-      <el-dropdown trigger="click">
-        <el-button plain>
-          Platform<i class="el-icon-caret-bottom el-icon--right" />
-        </el-button>
-        <el-dropdown-menu slot="dropdown" class="no-border">
-          <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
-            <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
-              {{ item.name }}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <el-dropdown trigger="click">
-        <el-button plain>
-          Link<i class="el-icon-caret-bottom el-icon--right" />
-        </el-button>
-        <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
-          <el-input v-model="url" placeholder="Please enter the content">
-            <template slot="prepend">
-              Url
-            </template>
-          </el-input>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <div class="time-container">
-        <el-date-picker v-model="time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time" />
-      </div>
-
-      <el-button style="margin-left: 10px;" type="success">
-        publish
-      </el-button>
-    </sticky>
-
-    <div class="components-container">
-      <aside>
-        Sticky header, When the page is scrolled to the preset position will be sticky on the top.
-      </aside>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <sticky :sticky-top="200">
-        <el-button type="primary"> placeholder</el-button>
-      </sticky>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Sticky from '@/components/Sticky'
-
-export default {
-  name: 'StickyDemo',
-  components: { Sticky },
-  data() {
-    return {
-      time: '',
-      url: '',
-      platforms: ['a-platform'],
-      platformsOptions: [
-        { key: 'a-platform', name: 'platformA' },
-        { key: 'b-platform', name: 'platformB' },
-        { key: 'c-platform', name: 'platformC' }
-      ],
-      pickerOptions: {
-        disabledDate(time) {
-          return time.getTime() > Date.now()
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.components-container div {
-  margin: 10px;
-}
-
-.time-container {
-  display: inline-block;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/components-demo/tinymce.vue b/views/src/main/resources/vueboot/src/views/components-demo/tinymce.vue
deleted file mode 100644
index f03389a00a6700b5f475899b38ea1479b1bdfb1a..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/components-demo/tinymce.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">Documentation</a>
-    </aside>
-    <div>
-      <tinymce v-model="content" :height="300" />
-    </div>
-    <div class="editor-content" v-html="content" />
-  </div>
-</template>
-
-<script>
-import Tinymce from '@/components/Tinymce'
-
-export default {
-  name: 'TinymceDemo',
-  components: { Tinymce },
-  data() {
-    return {
-      content:
-      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
-        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
-      </ul>`
-    }
-  }
-}
-</script>
-
-<style scoped>
-.editor-content{
-  margin-top: 20px;
-}
-</style>
-
diff --git a/views/src/main/resources/vueboot/src/views/documentation/index.vue b/views/src/main/resources/vueboot/src/views/documentation/index.vue
index 1b7bbe53985504298d29c7dcbb671f46dedc54ea..21fa76d5924895fb3f0cb5ba511f86d890b049f6 100644
--- a/views/src/main/resources/vueboot/src/views/documentation/index.vue
+++ b/views/src/main/resources/vueboot/src/views/documentation/index.vue
@@ -1,47 +1,25 @@
 <template>
-  <div class="app-container documentation-container">
-    <a class="document-btn" target="_blank" href="https://www.yuque.com/icanci">我的博客</a>
-
-    <dropdown-menu class="document-btn" :items="articleList" title="系列文章"/>
+  <div class="app-container">
+    <aside>
+      <p><span class="red-text-css">边配置简介：</span> 对纠察图的 <span class="red-text-css">节点之间的边</span> 进行配置。</p>
+      <p><span class="red-text-css">边函数配置简介：</span> 对纠察图的 <span class="red-text-css">节点之间的边函数</span> 进行配置。</p>
+    </aside>
   </div>
 </template>
 
 <script>
-import DropdownMenu from '@/components/Share/DropdownMenu'
 
 export default {
   name: 'Documentation',
-  components: {DropdownMenu},
   data() {
-    return {
-      articleList: [
-        {title: '设计模式', href: 'https://www.yuque.com/icanci/ftrcq4'},
-        {title: 'Java集合框架源码', href: 'https://www.yuque.com/icanci/zev0fa'},
-      ]
-    }
+    return {}
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.documentation-container {
-  margin: 50px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .document-btn {
-    flex-shrink: 0;
-    display: block;
-    cursor: pointer;
-    background: black;
-    color: white;
-    height: 60px;
-    padding: 0 16px;
-    margin: 16px;
-    line-height: 60px;
-    font-size: 20px;
-    text-align: center;
-  }
+<style scoped>
+.red-text-css {
+  color: red;
+  font-weight: bolder;
 }
 </style>
diff --git a/views/src/main/resources/vueboot/src/views/error-log/index.vue b/views/src/main/resources/vueboot/src/views/error-log/index.vue
deleted file mode 100644
index e999c85bc064095157f12f1ffe2ed511485d2157..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/error-log/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="errPage-container">
-    <ErrorA />
-    <ErrorB />
-    <h3>Please click the bug icon in the upper right corner</h3>
-    <aside>
-      Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
-        Document introduction
-      </a>
-    </aside>
-    <a href="#">
-      <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
-    </a>
-  </div>
-</template>
-
-<script>
-import ErrorA from './components/ErrorTestA'
-import ErrorB from './components/ErrorTestB'
-
-export default {
-  name: 'ErrorLog',
-  components: { ErrorA, ErrorB }
-}
-</script>
-
-<style scoped>
-  .errPage-container {
-    padding: 30px;
-  }
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/example/components/ArticleDetail.vue b/views/src/main/resources/vueboot/src/views/example/components/ArticleDetail.vue
deleted file mode 100644
index 157497b244eeb50b3744aacf6af3e19e67bd06d8..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/components/ArticleDetail.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<template>
-  <div class="createPost-container">
-    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
-
-      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
-        <CommentDropdown v-model="postForm.comment_disabled" />
-        <PlatformDropdown v-model="postForm.platforms" />
-        <SourceUrlDropdown v-model="postForm.source_uri" />
-        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
-          Publish
-        </el-button>
-        <el-button v-loading="loading" type="warning" @click="draftForm">
-          Draft
-        </el-button>
-      </sticky>
-
-      <div class="createPost-main-container">
-        <el-row>
-          <Warning />
-
-          <el-col :span="24">
-            <el-form-item style="margin-bottom: 40px;" prop="title">
-              <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
-                Title
-              </MDinput>
-            </el-form-item>
-
-            <div class="postInfo-container">
-              <el-row>
-                <el-col :span="8">
-                  <el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
-                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-
-                <el-col :span="10">
-                  <el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
-                    <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
-                  </el-form-item>
-                </el-col>
-
-                <el-col :span="6">
-                  <el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
-                    <el-rate
-                      v-model="postForm.importance"
-                      :max="3"
-                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
-                      :low-threshold="1"
-                      :high-threshold="3"
-                      style="display:inline-block"
-                    />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </div>
-          </el-col>
-        </el-row>
-
-        <el-form-item style="margin-bottom: 40px;" label-width="70px" label="Summary:">
-          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Please enter the content" />
-          <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}words</span>
-        </el-form-item>
-
-        <el-form-item prop="content" style="margin-bottom: 30px;">
-          <Tinymce ref="editor" v-model="postForm.content" :height="400" />
-        </el-form-item>
-
-        <el-form-item prop="image_uri" style="margin-bottom: 30px;">
-          <Upload v-model="postForm.image_uri" />
-        </el-form-item>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import Tinymce from '@/components/Tinymce'
-import Upload from '@/components/Upload/SingleImage3'
-import MDinput from '@/components/MDinput'
-import Sticky from '@/components/Sticky' // 粘性header组件
-import { validURL } from '@/utils/validate'
-import { fetchArticle } from '@/api/article'
-import { searchUser } from '@/api/remote-search'
-import Warning from './Warning'
-import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
-
-const defaultForm = {
-  status: 'draft',
-  title: '', // 文章题目
-  content: '', // 文章内容
-  content_short: '', // 文章摘要
-  source_uri: '', // 文章外链
-  image_uri: '', // 文章图片
-  display_time: undefined, // 前台展示时间
-  id: undefined,
-  platforms: ['a-platform'],
-  comment_disabled: false,
-  importance: 0
-}
-
-export default {
-  name: 'ArticleDetail',
-  components: { Tinymce, MDinput, Upload, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
-  props: {
-    isEdit: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    const validateRequire = (rule, value, callback) => {
-      if (value === '') {
-        this.$message({
-          message: rule.field + '为必传项',
-          type: 'error'
-        })
-        callback(new Error(rule.field + '为必传项'))
-      } else {
-        callback()
-      }
-    }
-    const validateSourceUri = (rule, value, callback) => {
-      if (value) {
-        if (validURL(value)) {
-          callback()
-        } else {
-          this.$message({
-            message: '外链url填写不正确',
-            type: 'error'
-          })
-          callback(new Error('外链url填写不正确'))
-        }
-      } else {
-        callback()
-      }
-    }
-    return {
-      postForm: Object.assign({}, defaultForm),
-      loading: false,
-      userListOptions: [],
-      rules: {
-        image_uri: [{ validator: validateRequire }],
-        title: [{ validator: validateRequire }],
-        content: [{ validator: validateRequire }],
-        source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
-      },
-      tempRoute: {}
-    }
-  },
-  computed: {
-    contentShortLength() {
-      return this.postForm.content_short.length
-    },
-    displayTime: {
-      // set and get is useful when the data
-      // returned by the back end api is different from the front end
-      // back end return => "2013-06-25 06:59:25"
-      // front end need timestamp => 1372114765000
-      get() {
-        return (+new Date(this.postForm.display_time))
-      },
-      set(val) {
-        this.postForm.display_time = new Date(val)
-      }
-    }
-  },
-  created() {
-    if (this.isEdit) {
-      const id = this.$route.params && this.$route.params.id
-      this.fetchData(id)
-    }
-
-    // Why need to make a copy of this.$route here?
-    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
-    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
-    this.tempRoute = Object.assign({}, this.$route)
-  },
-  methods: {
-    fetchData(id) {
-      fetchArticle(id).then(response => {
-        this.postForm = response.data
-
-        // just for test
-        this.postForm.title += `   Article Id:${this.postForm.id}`
-        this.postForm.content_short += `   Article Id:${this.postForm.id}`
-
-        // set tagsview title
-        this.setTagsViewTitle()
-
-        // set page title
-        this.setPageTitle()
-      }).catch(err => {
-        console.log(err)
-      })
-    },
-    setTagsViewTitle() {
-      const title = 'Edit Article'
-      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
-      this.$store.dispatch('tagsView/updateVisitedView', route)
-    },
-    setPageTitle() {
-      const title = 'Edit Article'
-      document.title = `${title} - ${this.postForm.id}`
-    },
-    submitForm() {
-      console.log(this.postForm)
-      this.$refs.postForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          this.$notify({
-            title: '成功',
-            message: '发布文章成功',
-            type: 'success',
-            duration: 2000
-          })
-          this.postForm.status = 'published'
-          this.loading = false
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    draftForm() {
-      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
-        this.$message({
-          message: '请填写必要的标题和内容',
-          type: 'warning'
-        })
-        return
-      }
-      this.$message({
-        message: '保存成功',
-        type: 'success',
-        showClose: true,
-        duration: 1000
-      })
-      this.postForm.status = 'draft'
-    },
-    getRemoteUserList(query) {
-      searchUser(query).then(response => {
-        if (!response.data.items) return
-        this.userListOptions = response.data.items.map(v => v.name)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "~@/styles/mixin.scss";
-
-.createPost-container {
-  position: relative;
-
-  .createPost-main-container {
-    padding: 40px 45px 20px 50px;
-
-    .postInfo-container {
-      position: relative;
-      @include clearfix;
-      margin-bottom: 10px;
-
-      .postInfo-container-item {
-        float: left;
-      }
-    }
-  }
-
-  .word-counter {
-    width: 40px;
-    position: absolute;
-    right: 10px;
-    top: 0px;
-  }
-}
-
-.article-textarea ::v-deep {
-  textarea {
-    padding-right: 40px;
-    resize: none;
-    border: none;
-    border-radius: 0px;
-    border-bottom: 1px solid #bfcbd9;
-  }
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/Comment.vue b/views/src/main/resources/vueboot/src/views/example/components/Dropdown/Comment.vue
deleted file mode 100644
index d34b2b906d24cc0f58b99eff63ee2122fd7e0acf..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/Comment.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <el-dropdown :show-timeout="100" trigger="click">
-    <el-button plain>
-      {{ !comment_disabled?'Comment: opened':'Comment: closed' }}
-      <i class="el-icon-caret-bottom el-icon--right" />
-    </el-button>
-    <el-dropdown-menu slot="dropdown" class="no-padding">
-      <el-dropdown-item>
-        <el-radio-group v-model="comment_disabled" style="padding: 10px;">
-          <el-radio :label="true">
-            Close comment
-          </el-radio>
-          <el-radio :label="false">
-            Open comment
-          </el-radio>
-        </el-radio-group>
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    comment_disabled: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/Platform.vue b/views/src/main/resources/vueboot/src/views/example/components/Dropdown/Platform.vue
deleted file mode 100644
index 0a527264577f1731c794341a687733bd92491ea4..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/Platform.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
-    <el-button plain>
-      Platfroms({{ platforms.length }})
-      <i class="el-icon-caret-bottom el-icon--right" />
-    </el-button>
-    <el-dropdown-menu slot="dropdown" class="no-border">
-      <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
-        <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
-          {{ item.name }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      required: true,
-      default: () => [],
-      type: Array
-    }
-  },
-  data() {
-    return {
-      platformsOptions: [
-        { key: 'a-platform', name: 'a-platform' },
-        { key: 'b-platform', name: 'b-platform' },
-        { key: 'c-platform', name: 'c-platform' }
-      ]
-    }
-  },
-  computed: {
-    platforms: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/SourceUrl.vue b/views/src/main/resources/vueboot/src/views/example/components/Dropdown/SourceUrl.vue
deleted file mode 100644
index 8f47485a3587abacd7c764fe98163f92f7e2310c..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/SourceUrl.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <el-dropdown :show-timeout="100" trigger="click">
-    <el-button plain>
-      Link
-      <i class="el-icon-caret-bottom el-icon--right" />
-    </el-button>
-    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
-      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
-        <el-input v-model="source_uri" placeholder="Please enter the content">
-          <template slot="prepend">
-            URL
-          </template>
-        </el-input>
-      </el-form-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    source_uri: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/index.js b/views/src/main/resources/vueboot/src/views/example/components/Dropdown/index.js
deleted file mode 100644
index bc0c171b9d4b9b92fab4513731107b59a6bfd6e0..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/components/Dropdown/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as CommentDropdown } from './Comment'
-export { default as PlatformDropdown } from './Platform'
-export { default as SourceUrlDropdown } from './SourceUrl'
diff --git a/views/src/main/resources/vueboot/src/views/example/components/Warning.vue b/views/src/main/resources/vueboot/src/views/example/components/Warning.vue
deleted file mode 100644
index 8d2a7e5ad36c23500f042cbbe4a86f37ce8f551a..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/components/Warning.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <aside>
-    Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support
-    caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching
-    effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all
-    pages directly. See details
-    <a
-      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
-      target="_blank"
-    >Document</a>
-  </aside>
-</template>
-
diff --git a/views/src/main/resources/vueboot/src/views/example/create.vue b/views/src/main/resources/vueboot/src/views/example/create.vue
deleted file mode 100644
index f28ce287cbb5cbfcdf26ceb283e05eca52338882..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/create.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <article-detail :is-edit="false" />
-</template>
-
-<script>
-import ArticleDetail from './components/ArticleDetail'
-
-export default {
-  name: 'CreateArticle',
-  components: { ArticleDetail }
-}
-</script>
-
diff --git a/views/src/main/resources/vueboot/src/views/example/list.vue b/views/src/main/resources/vueboot/src/views/example/list.vue
deleted file mode 100644
index 7cdc4ac092e5c176f342af176c5712fc3ce1515a..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/example/list.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="80">
-        <template slot-scope="scope">
-          <span>{{ scope.row.id }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="scope">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="120px" align="center" label="Author">
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="100px" label="Importance">
-        <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
-        </template>
-      </el-table-column>
-
-      <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
-          <router-link :to="'/example/edit/'+row.id" class="link-type">
-            <span>{{ row.title }}</span>
-          </router-link>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Actions" width="120">
-        <template slot-scope="scope">
-          <router-link :to="'/example/edit/'+scope.row.id">
-            <el-button type="primary" size="small" icon="el-icon-edit">
-              Edit
-            </el-button>
-          </router-link>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
-
-export default {
-  name: 'ArticleList',
-  components: { Pagination },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      total: 0,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20
-      }
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-        this.listLoading = false
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.edit-input {
-  padding-right: 100px;
-}
-.cancel-btn {
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/excel/components/AutoWidthOption.vue b/views/src/main/resources/vueboot/src/views/excel/components/AutoWidthOption.vue
deleted file mode 100644
index 9050e659408f5b2127c28609764f2f1befb655b2..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/excel/components/AutoWidthOption.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div style="display:inline-block;">
-    <label class="radio-label">Cell Auto-Width: </label>
-    <el-radio-group v-model="autoWidth">
-      <el-radio :label="true" border>
-        True
-      </el-radio>
-      <el-radio :label="false" border>
-        False
-      </el-radio>
-    </el-radio-group>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    autoWidth: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/excel/components/BookTypeOption.vue b/views/src/main/resources/vueboot/src/views/excel/components/BookTypeOption.vue
deleted file mode 100644
index af9fed391b6f511b56ae3cfddc1d1f831d400b38..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/excel/components/BookTypeOption.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div style="display:inline-block;">
-    <label class="radio-label">Book Type: </label>
-    <el-select v-model="bookType" style="width:120px;">
-      <el-option
-        v-for="item in options"
-        :key="item"
-        :label="item"
-        :value="item"
-      />
-    </el-select>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: 'xlsx'
-    }
-  },
-  data() {
-    return {
-      options: ['xlsx', 'csv', 'txt']
-    }
-  },
-  computed: {
-    bookType: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/excel/components/FilenameOption.vue b/views/src/main/resources/vueboot/src/views/excel/components/FilenameOption.vue
deleted file mode 100644
index 75092235ce9db8721c497debc80e9e32a73a5cdd..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/excel/components/FilenameOption.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div style="display:inline-block;">
-    <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    filename: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/excel/export-excel.vue b/views/src/main/resources/vueboot/src/views/excel/export-excel.vue
deleted file mode 100644
index b4d7500b49f6065fbe44a9d247738b56baf84694..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/excel/export-excel.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div class="app-container">
-
-    <div>
-      <FilenameOption v-model="filename" />
-      <AutoWidthOption v-model="autoWidth" />
-      <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
-        Export Excel
-      </el-button>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
-        <el-tag type="info">Documentation</el-tag>
-      </a>
-    </div>
-
-    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
-      <el-table-column align="center" label="Id" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-import { parseTime } from '@/utils'
-// options components
-import FilenameOption from './components/FilenameOption'
-import AutoWidthOption from './components/AutoWidthOption'
-import BookTypeOption from './components/BookTypeOption'
-
-export default {
-  name: 'ExportExcel',
-  components: { FilenameOption, AutoWidthOption, BookTypeOption },
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      downloadLoading: false,
-      filename: '',
-      autoWidth: true,
-      bookType: 'xlsx'
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      fetchList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-        const list = this.list
-        const data = this.formatJson(filterVal, list)
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: this.filename,
-          autoWidth: this.autoWidth,
-          bookType: this.bookType
-        })
-        this.downloadLoading = false
-      })
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
-    }
-  }
-}
-</script>
-
-<style>
-.radio-label {
-  font-size: 14px;
-  color: #606266;
-  line-height: 40px;
-  padding: 0 12px 0 30px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/excel/merge-header.vue b/views/src/main/resources/vueboot/src/views/excel/merge-header.vue
deleted file mode 100644
index 4be0227d76980a0a459015c15e4738da705d5052..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/excel/merge-header.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div class="app-container">
-
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">Export</el-button>
-
-    <el-table
-      ref="multipleTable"
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="Id" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Main Information" align="center">
-        <el-table-column label="Title">
-          <template slot-scope="scope">
-            {{ scope.row.title }}
-          </template>
-        </el-table-column>
-        <el-table-column label="Author" width="110" align="center">
-          <template slot-scope="scope">
-            <el-tag>{{ scope.row.author }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="Readings" width="115" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.pageviews }}
-          </template>
-        </el-table-column>
-      </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-import { parseTime } from '@/utils'
-
-export default {
-  name: 'MergeHeader',
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      downloadLoading: false
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const multiHeader = [['Id', 'Main Information', '', '', 'Date']]
-        const header = ['', 'Title', 'Author', 'Readings', '']
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-        const list = this.list
-        const data = this.formatJson(filterVal, list)
-        const merges = ['A1:A2', 'B1:D1', 'E1:E2']
-        excel.export_json_to_excel({
-          multiHeader,
-          header,
-          merges,
-          data
-        })
-        this.downloadLoading = false
-      })
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/excel/select-excel.vue b/views/src/main/resources/vueboot/src/views/excel/select-excel.vue
deleted file mode 100644
index 05b85fb81f323b401ed8d563f99d993c9f7bd98a..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/excel/select-excel.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
-      Export Selected Items
-    </el-button>
-    <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
-      <el-tag type="info">Documentation</el-tag>
-    </a>
-    <el-table
-      ref="multipleTable"
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="拼命加载中"
-      border
-      fit
-      highlight-current-row
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" align="center" />
-      <el-table-column align="center" label="Id" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="PDate" width="220">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-
-export default {
-  name: 'SelectExcel',
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      multipleSelection: [],
-      downloadLoading: false,
-      filename: ''
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val
-    },
-    handleDownload() {
-      if (this.multipleSelection.length) {
-        this.downloadLoading = true
-        import('@/vendor/Export2Excel').then(excel => {
-          const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
-          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-          const list = this.multipleSelection
-          const data = this.formatJson(filterVal, list)
-          excel.export_json_to_excel({
-            header: tHeader,
-            data,
-            filename: this.filename
-          })
-          this.$refs.multipleTable.clearSelection()
-          this.downloadLoading = false
-        })
-      } else {
-        this.$message({
-          message: 'Please select at least one item',
-          type: 'warning'
-        })
-      }
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/excel/upload-excel.vue b/views/src/main/resources/vueboot/src/views/excel/upload-excel.vue
deleted file mode 100644
index 1772b7fdad0882129ecadb8c20df38bd5b6f779b..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/excel/upload-excel.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="app-container">
-    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
-    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
-      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
-    </el-table>
-  </div>
-</template>
-
-<script>
-import UploadExcelComponent from '@/components/UploadExcel/index.vue'
-
-export default {
-  name: 'UploadExcel',
-  components: { UploadExcelComponent },
-  data() {
-    return {
-      tableData: [],
-      tableHeader: []
-    }
-  },
-  methods: {
-    beforeUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1
-
-      if (isLt1M) {
-        return true
-      }
-
-      this.$message({
-        message: 'Please do not upload files larger than 1m in size.',
-        type: 'warning'
-      })
-      return false
-    },
-    handleSuccess({ results, header }) {
-      this.tableData = results
-      this.tableHeader = header
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/guide/index.vue b/views/src/main/resources/vueboot/src/views/guide/index.vue
deleted file mode 100644
index a436b99b33cffc5e71824b53eec5bcb0586c858f..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/guide/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="app-container">
-    <aside>
-      指南页面对一些第一次进入项目的人很有用。您可以简要介绍项目的特点。Demo基于
-      <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
-    </aside>
-    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
-      试一试
-    </el-button>
-  </div>
-</template>
-
-<script>
-import Driver from 'driver.js' // import driver.js
-import 'driver.js/dist/driver.min.css' // import driver.js css
-import steps from './steps'
-
-export default {
-  name: 'Guide',
-  data() {
-    return {
-      driver: null
-    }
-  },
-  mounted() {
-    this.driver = new Driver()
-  },
-  methods: {
-    guide() {
-      this.driver.defineSteps(steps)
-      this.driver.start()
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/guide/steps.js b/views/src/main/resources/vueboot/src/views/guide/steps.js
deleted file mode 100644
index 953f18d390be59e6f374c0abc4d9e467ed25d11c..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/guide/steps.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const steps = [
-  {
-    element: '#hamburger-container',
-    popover: {
-      title: '侧边栏收缩框',
-      description: '打开或关闭侧边栏',
-      position: 'bottom'
-    }
-  },
-  {
-    element: '#breadcrumb-container',
-    popover: {
-      title: '路由',
-      description: '当前页面是在哪儿',
-      position: 'bottom'
-    }
-  },
-  {
-    element: '#header-search',
-    popover: {
-      title: '页面搜索',
-      description: '快速定位到页面位置',
-      position: 'left'
-    }
-  },
-  {
-    element: '#screenfull',
-    popover: {
-      title: '全屏',
-      description: '将当前页面全屏展示',
-      position: 'left'
-    }
-  },
-  {
-    element: '#size-select',
-    popover: {
-      title: '选择字体大小',
-      description: '设置系统字体大小',
-      position: 'left'
-    }
-  },
-  {
-    element: '#tags-view-container',
-    popover: {
-      title: '标签页',
-      description: '您访问的页面的历史记录',
-      position: 'bottom'
-    },
-    padding: 0
-  }
-]
-
-export default steps
diff --git a/views/src/main/resources/vueboot/src/views/nested/menu1/index.vue b/views/src/main/resources/vueboot/src/views/nested/menu1/index.vue
deleted file mode 100644
index 30cb670118ee7441850a6f8f83bda2b3514d8e0c..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/nested/menu1/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1">
-      <router-view />
-    </el-alert>
-  </div>
-</template>
diff --git a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-1/index.vue b/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-1/index.vue
deleted file mode 100644
index 27e173a6b473d2eb308f059384bf9c4790894a5f..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-1/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-1" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>
diff --git a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/index.vue b/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/index.vue
deleted file mode 100644
index 0c86276e0162396768de0d2781927e7d0322130f..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>
diff --git a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
deleted file mode 100644
index f87d88f4908681b45eae1fbb26389b86b5f9cc1d..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
-  </div>
-</template>
diff --git a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
deleted file mode 100644
index d88789f205ed5bbba622bfb1b6291ad827e6004d..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
-  </div>
-</template>
diff --git a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-3/index.vue b/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-3/index.vue
deleted file mode 100644
index f7cd0738f1b36e662bf6b088b337c79865878c4c..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/nested/menu1/menu1-3/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-3" type="success" />
-  </div>
-</template>
diff --git a/views/src/main/resources/vueboot/src/views/nested/menu2/index.vue b/views/src/main/resources/vueboot/src/views/nested/menu2/index.vue
deleted file mode 100644
index 19dd48f0edf37f54317f14b0cfb707d00ab04f11..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/nested/menu2/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 2" />
-  </div>
-</template>
diff --git a/views/src/main/resources/vueboot/src/views/pdf/content.js b/views/src/main/resources/vueboot/src/views/pdf/content.js
deleted file mode 100644
index e62b1a2b17f0c2f4862f35dc35c007f42bff5ec5..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/pdf/content.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const title = 'Plans for the Next Iteration of Vue.js'
-
-const content = `<p>Last week at<a href="https://vuejs.london/summary" rel="nofollow">Vue.js London</a>I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth overview of the plan.</p>
-<p><img class=" wscnph" src="https://wpimg.wallstcn.com/b8a1d7be-0b73-41b8-be8c-7c01c93cab66.png" data-wscntype="image" data-wscnh="742" data-wscnw="692" /></p>
-<h3>Why a new majorversion?</h3>
-<p>Vue 2.0 was released<a href="https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8" rel="nofollow">exactly two years ago</a>(how time flies!). During this period, the core has remained backwards compatible with five minor releases. We’ve accumulated a number of ideas that would bring improvements, but they were held off because they would result in breaking changes. At the same time, the JavaScript ecosystem and the language itself has been evolving rapidly. There are greatly improved tools that could enhance our workflow, and many new language features that could unlock simpler, more complete, and more efficient solutions to the problems Vue is trying to solve. What’s more exciting is that we are seeing ES2015 support becoming a baseline for all major evergreen browsers. Vue 3.0 aims to leverage these new language features to make Vue core smaller, faster, and more powerful.</p>
-<p>Vue 3.0 is currently in prototyping phase, and we have already implemented a runtime close to feature-parity with 2.x.<strong>Many of the items listed below are either already implemented, or confirmed to be feasible. Ones that are not yet implemented or still in exploration phase are marked with a *.</strong></p>
-<h3>The Details</h3>
-<h4>High-Level APIChanges</h4>
-<blockquote>TL;DR: Everything except render function API and scoped-slots syntax will either remain the same or can be made 2.x compatible via a compatibility build.</blockquote>
-<p>Since it’s a new major, there is going to be some breaking changes. However, we take backwards compatibility seriously, so we want to start communicating these changes as soon as possible. Here’s the currently planned public API changes:</p>
-<ul><li>Template syntax will remain 99% the same. There may be small tweaks in scoped slots syntax, but other than that we have no plans to change anything else for templates.</li><li>3.0 will support class-based components natively, with the aim to provide an API that is pleasant to use in native ES2015 without requiring any transpilation or stage-x features. Most current options will have a reasonable mapping in the class-based API. Stage-x features such as class fields and decorators can still be used optionally to enhance the authoring experience. In addition, the API is designed with TypeScript type inference in mind. The 3.x codebase will itself be written in TypeScript, and providing improved TypeScript support. (That said, usage of TypeScript in an application is still entirely optional.)</li><li>The 2.x object-based component format will still be supported by internally transforming the object to a corresponding class.</li><li>Mixins will still be supported.*</li><li>Top level APIs will likely receive an overhaul to avoid globally mutating the Vue runtime when installing plugins. Instead, plugins will be applied and scoped to a component tree. This will make it easier to test components that rely on specific plugins, and also make it possible to mount multiple Vue applications on the same page with different plugins, but using the same Vue runtime.*</li><li>Functional components can finally be plain functions —however, async components will now need to be explicitly created via a helper function.</li><li>The part that will receive the most changes is the Virtual DOM format used in render functions. We are currently collecting feedback from major library authors and will be sharing more details as we are more confident of the changes, but as long as you don’t heavily rely on hand-written (non-JSX) render functions in your app, upgrading should be a reasonably straightforward process.</li></ul>
-<h4>Source Code Architecture</h4>
-<blockquote>TL;DR: better decoupled internal modules, TypeScript, and a codebase that is easier to contribute to.</blockquote>
-<p>We are re-writing 3.0 from the ground up for a cleaner and more maintainable architecture, in particular trying to make it easier to contribute to. We are breaking some internal functionalities into individual packages in order to isolate the scope of complexity. For example, the observer module will become its own package, with its own public API and tests. Note this does not affect framework-level API— you will not have to manually import individual bits from multiple packages in order to use Vue. Instead, the final Vue package is assembled using these internal packages.</p>
-<p>The codebase is also now written in TypeScript. Although this will make proficiency in TypeScript a pre-requisite for contributing to the new codebase, we believe the type information and IDE support will actually make it easier for a new contributor to make meaningful contributions.</p>
-<p>Decoupling the observer and scheduler into separate packages also allows us to easily experiment with alternative implementations of these parts. For example, we can implement an IE11 compatible observer implementation with the same API, or an alternative scheduler that leverages<code>requestIdleCallback</code>to yield to the browser during long updates.*</p>
-<p><img class=" wscnph" src="https://wpimg.wallstcn.com/4d0b5fb2-d7f9-48fd-8f1b-03362b534dd9.png" data-wscntype="image" data-wscnh="716" data-wscnw="460" /></p>
-<h4>Observation Mechanism</h4>
-<blockquote>TL;DR: more complete, precise, efficient and debuggable reactivity tracking &amp; API for creating observables.</blockquote>
-<p>3.0 will ship with a Proxy-based observer implementation that provides reactivity tracking with full language coverage. This eliminates a number of limitations of Vue 2’s current implementation based on<code>Object.defineProperty</code>:</p>
-<p>The new observer also features the following:</p>
-<p>Easily understand why a component is re-rendering</p>
-<p><img class=" wscnph" src="https://wpimg.wallstcn.com/a0c9d811-1ef9-4628-8976-f7c1aaa66da0.png" data-wscntype="image" data-wscnh="540" data-wscnw="789" /></p>
-<h4>Other Runtime Improvements</h4>
-<blockquote>TL;DR: smaller, faster, tree-shakable features, fragments &amp; portals, custom renderer API.</blockquote>
-<h4>Compiler Improvements*</h4>
-<blockquote>TL;DR: tree-shaking friendly output, more AOT optimizations, parser with better error info and source map support.</blockquote>
-<h4>IE11 Support*</h4>
-<blockquote>TL;DR: it will be supported, but in a separate build with the same reactivity limitations of Vue 2.x.</blockquote>
-<p>The new codebase currently targets evergreen browsers only and assumes baseline native ES2015 support. But alas, we know a lot of our users still need to support IE11 for the foreseeable future. Most of the ES2015 features used can be transpiled / polyfilled for IE11, with the exception for Proxies. Our plan is to implement an alternative observer with the same API, but using the good old ES5<code>Object.defineProperty</code>API. A separate build of Vue 3.x will be distributed using this observer implementation. However, this build will be subject to the same change detection caveats of Vue 2.x and thus not fully compatible with the “modern” build of 3.x. We are aware that this imposes some inconvenience for library authors as they will need to be aware of compatibility for two different builds, but we will make sure to provide clear guidelines on this when we reach that stage.</p>
-<h3>How Do We GetThere</h3>
-<p>First of all, although we are announcing it today, we do not have a definitive timeline yet. What we do know at the moment is the steps we will be taking to get there:</p>
-<h4>1. Internal Feedback for the Runtime Prototype</h4>
-<p>This is the phase we are in right now. Currently, we already have a working runtime prototype that includes the new observer, Virtual DOM and component implementation. We have invited a group of authors of influential community projects to provide feedback for the internal changes, and would like to make sure they are comfortable with the changes before moving forward. We want to ensure that important libraries in the ecosystem will be ready at the same time when we release 3.0, so that users relying on those projects can upgrade easily.</p>
-<h4>2. Public Feedback viaRFCs</h4>
-<p>Once we gain a certain level of confidence in the new design, for each breaking change we will be opening a dedicated RFC issue which includes:</p>
-<p>We will anticipate public feedback from the wider community to help us consolidate these ideas.</p>
-<h4>3. Introduce Compatible Features in 2.x &amp;2.x-next</h4>
-<p>We are not forgetting about 2.x! In fact, we plan to use 2.x to progressively accustom users to the new changes. We will be gradually introducing confirmed API changes into 2.x via opt-in adaptors, and 2.x-next will allow users to try out the new Proxy-based observer.</p>
-<p>The last minor release in 2.x will become LTS and continue to receive bug and security fixes for 18 months when 3.0 is released.</p>
-<h4>4. AlphaPhase</h4>
-<p>Next, we will finish up the compiler and server-side rendering parts of 3.0 and start making alpha releases. These will mostly be for stability testing purposes in small greenfield apps.</p>
-<h4>5. BetaPhase</h4>
-<p>During beta phase, our main goal is updating support libraries and tools like Vue Router, Vuex, Vue CLI, Vue DevTools and make sure they work smoothly with the new core. We will also be working with major library authors from the community to help them get ready for 3.0.</p>
-<h4>6. RCPhase</h4>
-<p>Once we consider the API and codebase stable, we will enter RC phase with API freeze. During this phase we will also work on a “compat build”: a build of 3.0 that includes compatibility layers for 2.x API. This build will also ship with a flag you can turn on to emit deprecation warnings for 2.x API usage in your app. The compat build can be used as a guide to upgrade your app to 3.0.</p>
-<h4>7. IE11build</h4>
-<p>The last task before the final release will be the IE11 compatibility build as mentioned above.</p>
-<h4>8. FinalRelease</h4>
-<p>In all honesty, we don’t know when this will happen yet, but likely in 2019. Again, we care more about shipping something that is solid and stable rather than hitting specific dates. There is a lot of work to be done, but we are excited for what’s coming next!</p>`
-
-const data = {
-  title,
-  content
-}
-
-export default data
diff --git a/views/src/main/resources/vueboot/src/views/pdf/download.vue b/views/src/main/resources/vueboot/src/views/pdf/download.vue
deleted file mode 100644
index a348c6978b06d4a2812d7364ae5562df3685b24a..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/pdf/download.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-  <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
-    <div class="article__heading">
-      <div class="article__heading__title">
-        {{ article.title }}
-      </div>
-    </div>
-    <div style="color: #ccc;">
-      This article is from Evan You on <a target="_blank" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf">medium</a>
-    </div>
-    <div ref="content" class="node-article-content" v-html="article.content" />
-  </div>
-</template>
-
-<script>
-
-export default {
-  data() {
-    return {
-      article: '',
-      fullscreenLoading: true
-    }
-  },
-  mounted() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      import('./content.js').then(data => {
-        const { title } = data.default
-        document.title = title
-        this.article = data.default
-        setTimeout(() => {
-          this.fullscreenLoading = false
-          this.$nextTick(() => {
-            window.print()
-          })
-        }, 3000)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@mixin clearfix {
-  &:before {
-    display: table;
-    content: '';
-    clear: both;
-  }
-
-  &:after {
-    display: table;
-    content: '';
-    clear: both;
-  }
-}
-
-.main-article {
-  padding: 20px;
-  margin: 0 auto;
-  display: block;
-  width: 740px;
-  background: #fff;
-}
-
-.article__heading {
-  position: relative;
-  padding: 0 0 20px;
-  overflow: hidden;
-}
-
-.article__heading__title {
-  display: block;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  font-size: 32px;
-  line-height: 48px;
-  font-weight: 600;
-  color: #333;
-  overflow: hidden;
-}
-
-.node-article-content {
-  margin: 20px 0 0;
-  @include clearfix;
-  font-size: 16px;
-  color: #333;
-  letter-spacing: 0.5px;
-  line-height: 28px;
-  margin-bottom: 30px;
-  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
-
-  &> :last-child {
-    margin-bottom: 0;
-  }
-
-  b,
-  strong {
-    font-weight: inherit;
-    font-weight: bolder;
-  }
-
-  img {
-    max-width: 100%;
-    display: block;
-    margin: 0 auto;
-  }
-
-  p {
-    font-weight: 400;
-    font-style: normal;
-    font-size: 21px;
-    line-height: 1.58;
-    letter-spacing: -.003em;
-
-  }
-
-  ul {
-    margin-bottom: 30px;
-  }
-
-  li {
-    --x-height-multiplier: 0.375;
-    --baseline-multiplier: 0.17;
-
-    letter-spacing: .01rem;
-    font-weight: 400;
-    font-style: normal;
-    font-size: 21px;
-    line-height: 1.58;
-    letter-spacing: -.003em;
-    margin-left: 30px;
-    margin-bottom: 14px;
-  }
-
-  a {
-    text-decoration: none;
-    background-repeat: repeat-x;
-    background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
-    background-size: 1px 1px;
-    background-position: 0 calc(1em + 1px);
-    padding: 0 6px;
-  }
-
-  code {
-    background: rgba(0, 0, 0, .05);
-    padding: 3px 4px;
-    margin: 0 2px;
-    font-size: 16px;
-    display: inline-block;
-  }
-
-  img {
-    border: 0;
-  }
-
-  /* 解决 IE6-7 图片缩放锯齿问题 */
-  img {
-    -ms-interpolation-mode: bicubic;
-  }
-
-  blockquote {
-    --x-height-multiplier: 0.375;
-    --baseline-multiplier: 0.17;
-    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
-    letter-spacing: .01rem;
-    font-weight: 400;
-    font-style: italic;
-    font-size: 21px;
-    line-height: 1.58;
-    letter-spacing: -.003em;
-    border-left: 3px solid rgba(0, 0, 0, .84);
-    padding-left: 20px;
-    margin-left: -23px;
-    padding-bottom: 2px;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  h2,
-  h3,
-  h4 {
-    font-size: 34px;
-    line-height: 1.15;
-    letter-spacing: -.015em;
-    margin: 53px 0 0;
-  }
-
-  h4 {
-    font-size: 26px;
-  }
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/pdf/index.vue b/views/src/main/resources/vueboot/src/views/pdf/index.vue
deleted file mode 100644
index 86278b38a0b0ec3e4368df05ed2c0bb720de571d..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/pdf/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="app-container">
-    <aside style="margin-top:15px;">
-      Here we use window.print() to implement the feature of downloading PDF.
-    </aside>
-    <router-link target="_blank" to="/pdf/download">
-      <el-button type="primary">
-        Click to download PDF
-      </el-button>
-    </router-link>
-  </div>
-</template>
-
diff --git a/views/src/main/resources/vueboot/src/views/qiniu/upload.vue b/views/src/main/resources/vueboot/src/views/qiniu/upload.vue
deleted file mode 100644
index 9dc9aedadab005fbf7aab9dc068e210ce4c533e8..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/qiniu/upload.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
-    <i class="el-icon-upload" />
-    <div class="el-upload__text">
-      将文件拖到此处，或<em>点击上传</em>
-    </div>
-  </el-upload>
-</template>
-
-<script>
-import { getToken } from '@/api/qiniu'
-// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
-// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
-
-export default {
-  data() {
-    return {
-      dataObj: { token: '', key: '' },
-      image_uri: [],
-      fileList: []
-    }
-  },
-  methods: {
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
-      })
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/tab/components/TabPane.vue b/views/src/main/resources/vueboot/src/views/tab/components/TabPane.vue
deleted file mode 100644
index 3fb1439e98bb4ee3e6e45914d2eb8db1652c1f84..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/tab/components/TabPane.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <el-table :data="list" border fit highlight-current-row style="width: 100%">
-    <el-table-column
-      v-loading="loading"
-      align="center"
-      label="ID"
-      width="65"
-      element-loading-text="请给我点时间！"
-    >
-      <template slot-scope="scope">
-        <span>{{ scope.row.id }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column width="180px" align="center" label="Date">
-      <template slot-scope="scope">
-        <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column min-width="300px" label="Title">
-      <template slot-scope="{row}">
-        <span>{{ row.title }}</span>
-        <el-tag>{{ row.type }}</el-tag>
-      </template>
-    </el-table-column>
-
-    <el-table-column width="110px" align="center" label="Author">
-      <template slot-scope="scope">
-        <span>{{ scope.row.author }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column width="120px" label="Importance">
-      <template slot-scope="scope">
-        <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" />
-      </template>
-    </el-table-column>
-
-    <el-table-column align="center" label="Readings" width="95">
-      <template slot-scope="scope">
-        <span>{{ scope.row.pageviews }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column class-name="status-col" label="Status" width="110">
-      <template slot-scope="{row}">
-        <el-tag :type="row.status | statusFilter">
-          {{ row.status }}
-        </el-tag>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'CN'
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listQuery: {
-        page: 1,
-        limit: 5,
-        type: this.type,
-        sort: '+id'
-      },
-      loading: false
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.loading = true
-      this.$emit('create') // for test
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.loading = false
-      })
-    }
-  }
-}
-</script>
-
diff --git a/views/src/main/resources/vueboot/src/views/tab/index.vue b/views/src/main/resources/vueboot/src/views/tab/index.vue
deleted file mode 100644
index 2a35fa5840a467b18934ae4bed693f71c1c51b5d..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/tab/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="tab-container">
-    <el-tag>mounted times ：{{ createdTimes }}</el-tag>
-    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
-    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
-      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
-        <keep-alive>
-          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
-        </keep-alive>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-import TabPane from './components/TabPane'
-
-export default {
-  name: 'Tab',
-  components: { TabPane },
-  data() {
-    return {
-      tabMapOptions: [
-        { label: 'China', key: 'CN' },
-        { label: 'USA', key: 'US' },
-        { label: 'Japan', key: 'JP' },
-        { label: 'Eurozone', key: 'EU' }
-      ],
-      activeName: 'CN',
-      createdTimes: 0
-    }
-  },
-  watch: {
-    activeName(val) {
-      this.$router.push(`${this.$route.path}?tab=${val}`)
-    }
-  },
-  created() {
-    // init the default selected tab
-    const tab = this.$route.query.tab
-    if (tab) {
-      this.activeName = tab
-    }
-  },
-  methods: {
-    showCreatedTimes() {
-      this.createdTimes = this.createdTimes + 1
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .tab-container {
-    margin: 30px;
-  }
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/table/complex-table.vue b/views/src/main/resources/vueboot/src/views/table/complex-table.vue
deleted file mode 100644
index 295c5fc49642abeea4e990f6705d8839fe65dc1c..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/table/complex-table.vue
+++ /dev/null
@@ -1,379 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
-        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
-      </el-select>
-      <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
-        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
-      </el-select>
-      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
-        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
-      </el-select>
-      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
-        Search
-      </el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
-        Add
-      </el-button>
-      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
-        Export
-      </el-button>
-      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
-        reviewer
-      </el-checkbox>
-    </div>
-
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-      @sort-change="sortChange"
-    >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Date" width="150px" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Title" min-width="150px">
-        <template slot-scope="{row}">
-          <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
-          <el-tag>{{ row.type | typeFilter }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110px" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
-        <template slot-scope="{row}">
-          <span style="color:red;">{{ row.reviewer }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Imp" width="80px">
-        <template slot-scope="{row}">
-          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" align="center" width="95">
-        <template slot-scope="{row}">
-          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
-          <span v-else>0</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Status" class-name="status-col" width="100">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
-        <template slot-scope="{row,$index}">
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">
-            Edit
-          </el-button>
-          <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
-            Publish
-          </el-button>
-          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
-            Draft
-          </el-button>
-          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
-            Delete
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
-        <el-form-item label="Type" prop="type">
-          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Date" prop="timestamp">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
-        </el-form-item>
-        <el-form-item label="Title" prop="title">
-          <el-input v-model="temp.title" />
-        </el-form-item>
-        <el-form-item label="Status">
-          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Imp">
-          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
-        </el-form-item>
-        <el-form-item label="Remark">
-          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">
-          Cancel
-        </el-button>
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
-          Confirm
-        </el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
-      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
-        <el-table-column prop="key" label="Channel" />
-        <el-table-column prop="pv" label="Pv" />
-      </el-table>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
-import waves from '@/directive/waves' // waves directive
-import { parseTime } from '@/utils'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-
-const calendarTypeOptions = [
-  { key: 'CN', display_name: 'China' },
-  { key: 'US', display_name: 'USA' },
-  { key: 'JP', display_name: 'Japan' },
-  { key: 'EU', display_name: 'Eurozone' }
-]
-
-// arr to obj, such as { CN : "China", US : "USA" }
-const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
-  acc[cur.key] = cur.display_name
-  return acc
-}, {})
-
-export default {
-  name: 'ComplexTable',
-  components: { Pagination },
-  directives: { waves },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    },
-    typeFilter(type) {
-      return calendarTypeKeyValue[type]
-    }
-  },
-  data() {
-    return {
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-        importance: undefined,
-        title: undefined,
-        type: undefined,
-        sort: '+id'
-      },
-      importanceOptions: [1, 2, 3],
-      calendarTypeOptions,
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
-      statusOptions: ['published', 'draft', 'deleted'],
-      showReviewer: false,
-      temp: {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        type: '',
-        status: 'published'
-      },
-      dialogFormVisible: false,
-      dialogStatus: '',
-      textMap: {
-        update: 'Edit',
-        create: 'Create'
-      },
-      dialogPvVisible: false,
-      pvData: [],
-      rules: {
-        type: [{ required: true, message: 'type is required', trigger: 'change' }],
-        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
-        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
-      },
-      downloadLoading: false
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-
-        // Just to simulate the time of the request
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
-    },
-    handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
-    },
-    handleModifyStatus(row, status) {
-      this.$message({
-        message: '操作Success',
-        type: 'success'
-      })
-      row.status = status
-    },
-    sortChange(data) {
-      const { prop, order } = data
-      if (prop === 'id') {
-        this.sortByID(order)
-      }
-    },
-    sortByID(order) {
-      if (order === 'ascending') {
-        this.listQuery.sort = '+id'
-      } else {
-        this.listQuery.sort = '-id'
-      }
-      this.handleFilter()
-    },
-    resetTemp() {
-      this.temp = {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        status: 'published',
-        type: ''
-      }
-    },
-    handleCreate() {
-      this.resetTemp()
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-    },
-    createData() {
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
-          this.temp.author = 'vue-element-admin'
-          createArticle(this.temp).then(() => {
-            this.list.unshift(this.temp)
-            this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Created Successfully',
-              type: 'success',
-              duration: 2000
-            })
-          })
-        }
-      })
-    },
-    handleUpdate(row) {
-      this.temp = Object.assign({}, row) // copy obj
-      this.temp.timestamp = new Date(this.temp.timestamp)
-      this.dialogStatus = 'update'
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-    },
-    updateData() {
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          const tempData = Object.assign({}, this.temp)
-          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
-          updateArticle(tempData).then(() => {
-            const index = this.list.findIndex(v => v.id === this.temp.id)
-            this.list.splice(index, 1, this.temp)
-            this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Update Successfully',
-              type: 'success',
-              duration: 2000
-            })
-          })
-        }
-      })
-    },
-    handleDelete(row, index) {
-      this.$notify({
-        title: 'Success',
-        message: 'Delete Successfully',
-        type: 'success',
-        duration: 2000
-      })
-      this.list.splice(index, 1)
-    },
-    handleFetchPv(pv) {
-      fetchPv(pv).then(response => {
-        this.pvData = response.data.pvData
-        this.dialogPvVisible = true
-      })
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
-        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
-        const data = this.formatJson(filterVal)
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: 'table-list'
-        })
-        this.downloadLoading = false
-      })
-    },
-    formatJson(filterVal) {
-      return this.list.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
-    },
-    getSortClass: function(key) {
-      const sort = this.listQuery.sort
-      return sort === `+${key}` ? 'ascending' : 'descending'
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/table/drag-table.vue b/views/src/main/resources/vueboot/src/views/table/drag-table.vue
deleted file mode 100644
index 3b5c890a0ebbb9dd062b58c9b41a4bf1dcfbcba4..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/table/drag-table.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- Note that row-key is necessary to get a correct row order. -->
-    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="65">
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
-          <span>{{ row.title }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="110px" align="center" label="Author">
-        <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="100px" label="Importance">
-        <template slot-scope="{row}">
-          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="icon-star" />
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Readings" width="95">
-        <template slot-scope="{row}">
-          <span>{{ row.pageviews }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Drag" width="80">
-        <template slot-scope="{}">
-          <svg-icon class="drag-handler" icon-class="drag" />
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="show-d">
-      <el-tag>The default order :</el-tag> {{ oldList }}
-    </div>
-    <div class="show-d">
-      <el-tag>The after dragging order :</el-tag> {{ newList }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-import Sortable from 'sortablejs'
-
-export default {
-  name: 'DragTable',
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      total: null,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 10
-      },
-      sortable: null,
-      oldList: [],
-      newList: []
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    async getList() {
-      this.listLoading = true
-      const { data } = await fetchList(this.listQuery)
-      this.list = data.items
-      this.total = data.total
-      this.listLoading = false
-      this.oldList = this.list.map(v => v.id)
-      this.newList = this.oldList.slice()
-      this.$nextTick(() => {
-        this.setSort()
-      })
-    },
-    setSort() {
-      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-        setData: function(dataTransfer) {
-          // to avoid Firefox bug
-          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-          dataTransfer.setData('Text', '')
-        },
-        onEnd: evt => {
-          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
-          this.list.splice(evt.newIndex, 0, targetRow)
-
-          // for show the changes, you can delete in you code
-          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
-          this.newList.splice(evt.newIndex, 0, tempIndex)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style>
-.sortable-ghost{
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
-}
-</style>
-
-<style scoped>
-.icon-star{
-  margin-right:2px;
-}
-.drag-handler{
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-}
-.show-d{
-  margin-top: 15px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/table/dynamic-table/components/FixedThead.vue b/views/src/main/resources/vueboot/src/views/table/dynamic-table/components/FixedThead.vue
deleted file mode 100644
index c3deb925ff2218b8135a04251143cabfb15b70e9..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/table/dynamic-table/components/FixedThead.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox-group v-model="checkboxVal">
-        <el-checkbox label="apple">
-          apple
-        </el-checkbox>
-        <el-checkbox label="banana">
-          banana
-        </el-checkbox>
-        <el-checkbox label="orange">
-          orange
-        </el-checkbox>
-      </el-checkbox-group>
-    </div>
-
-    <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
-      <el-table-column prop="name" label="fruitName" width="180" />
-      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
-        <template slot-scope="scope">
-          {{ scope.row[fruit] }}
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-const defaultFormThead = ['apple', 'banana']
-
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          name: 'fruit-1',
-          apple: 'apple-10',
-          banana: 'banana-10',
-          orange: 'orange-10'
-        },
-        {
-          name: 'fruit-2',
-          apple: 'apple-20',
-          banana: 'banana-20',
-          orange: 'orange-20'
-        }
-      ],
-      key: 1, // table key
-      formTheadOptions: ['apple', 'banana', 'orange'],
-      checkboxVal: defaultFormThead, // checkboxVal
-      formThead: defaultFormThead // 默认表头 Default header
-    }
-  },
-  watch: {
-    checkboxVal(valArr) {
-      this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
-      this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
-    }
-  }
-}
-</script>
-
diff --git a/views/src/main/resources/vueboot/src/views/table/dynamic-table/components/UnfixedThead.vue b/views/src/main/resources/vueboot/src/views/table/dynamic-table/components/UnfixedThead.vue
deleted file mode 100644
index 831b070acc071f1d5b53df504b89e22ff41bf79a..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/table/dynamic-table/components/UnfixedThead.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox-group v-model="formThead">
-        <el-checkbox label="apple">
-          apple
-        </el-checkbox>
-        <el-checkbox label="banana">
-          banana
-        </el-checkbox>
-        <el-checkbox label="orange">
-          orange
-        </el-checkbox>
-      </el-checkbox-group>
-    </div>
-
-    <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
-      <el-table-column prop="name" label="fruitName" width="180" />
-      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
-        <template slot-scope="scope">
-          {{ scope.row[fruit] }}
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          name: 'fruit-1',
-          apple: 'apple-10',
-          banana: 'banana-10',
-          orange: 'orange-10'
-        },
-        {
-          name: 'fruit-2',
-          apple: 'apple-20',
-          banana: 'banana-20',
-          orange: 'orange-20'
-        }
-      ],
-      formThead: ['apple', 'banana']
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/table/dynamic-table/index.vue b/views/src/main/resources/vueboot/src/views/table/dynamic-table/index.vue
deleted file mode 100644
index 5a4dd363e534babea7bd08268d7cdd23ac8e50cd..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/table/dynamic-table/index.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="app-container">
-    <div style="margin:0 0 5px 20px">
-      Fixed header, sorted by header order,
-    </div>
-    <fixed-thead />
-
-    <div style="margin:30px 0 5px 20px">
-      Not fixed header, sorted by click order
-    </div>
-    <unfixed-thead />
-  </div>
-</template>
-
-<script>
-import FixedThead from './components/FixedThead'
-import UnfixedThead from './components/UnfixedThead'
-
-export default {
-  name: 'DynamicTable',
-  components: { FixedThead, UnfixedThead }
-}
-</script>
-
diff --git a/views/src/main/resources/vueboot/src/views/table/inline-edit-table.vue b/views/src/main/resources/vueboot/src/views/table/inline-edit-table.vue
deleted file mode 100644
index 31e0065fc013504c5bc1fc45c17ea333298abd27..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/table/inline-edit-table.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="80">
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="120px" align="center" label="Author">
-        <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="100px" label="Importance">
-        <template slot-scope="{row}">
-          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
-        </template>
-      </el-table-column>
-
-      <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
-          <template v-if="row.edit">
-            <el-input v-model="row.title" class="edit-input" size="small" />
-            <el-button
-              class="cancel-btn"
-              size="small"
-              icon="el-icon-refresh"
-              type="warning"
-              @click="cancelEdit(row)"
-            >
-              cancel
-            </el-button>
-          </template>
-          <span v-else>{{ row.title }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Actions" width="120">
-        <template slot-scope="{row}">
-          <el-button
-            v-if="row.edit"
-            type="success"
-            size="small"
-            icon="el-icon-circle-check-outline"
-            @click="confirmEdit(row)"
-          >
-            Ok
-          </el-button>
-          <el-button
-            v-else
-            type="primary"
-            size="small"
-            icon="el-icon-edit"
-            @click="row.edit=!row.edit"
-          >
-            Edit
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-
-export default {
-  name: 'InlineEditTable',
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 10
-      }
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    async getList() {
-      this.listLoading = true
-      const { data } = await fetchList(this.listQuery)
-      const items = data.items
-      this.list = items.map(v => {
-        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
-        v.originalTitle = v.title //  will be used when user click the cancel botton
-        return v
-      })
-      this.listLoading = false
-    },
-    cancelEdit(row) {
-      row.title = row.originalTitle
-      row.edit = false
-      this.$message({
-        message: 'The title has been restored to the original value',
-        type: 'warning'
-      })
-    },
-    confirmEdit(row) {
-      row.edit = false
-      row.originalTitle = row.title
-      this.$message({
-        message: 'The title has been edited',
-        type: 'success'
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.edit-input {
-  padding-right: 100px;
-}
-.cancel-btn {
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/theme/index.vue b/views/src/main/resources/vueboot/src/views/theme/index.vue
deleted file mode 100644
index 0af7711a040fcd2098834b74484c8f907248185c..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/theme/index.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card">
-      <div slot="header">
-        <a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
-          Theme documentation
-        </a>
-      </div>
-      <div class="box-item">
-        <span class="field-label">Change Theme : </span>
-        <el-switch v-model="theme" />
-        <aside style="margin-top:15px;">
-          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
-        </aside>
-      </div>
-    </el-card>
-
-    <div class="block">
-      <el-button type="primary">
-        Primary
-      </el-button>
-      <el-button type="success">
-        Success
-      </el-button>
-      <el-button type="info">
-        Info
-      </el-button>
-      <el-button type="warning">
-        Warning
-      </el-button>
-      <el-button type="danger">
-        Danger
-      </el-button>
-    </div>
-
-    <div class="block">
-      <el-button type="primary" icon="el-icon-edit" />
-      <el-button type="primary" icon="el-icon-share" />
-      <el-button type="primary" icon="el-icon-delete" />
-      <el-button type="primary" icon="el-icon-search">
-        Search
-      </el-button>
-      <el-button type="primary">
-        Upload
-        <i class="el-icon-upload el-icon-right" />
-      </el-button>
-    </div>
-
-    <div class="block">
-      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
-        {{ tag.name }}
-      </el-tag>
-    </div>
-
-    <div class="block">
-      <el-radio-group v-model="radio">
-        <el-radio :label="3">
-          Option A
-        </el-radio>
-        <el-radio :label="6">
-          Option B
-        </el-radio>
-        <el-radio :label="9">
-          Option C
-        </el-radio>
-      </el-radio-group>
-    </div>
-
-    <div class="block">
-      <el-slider v-model="slideValue" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { toggleClass } from '@/utils'
-import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
-
-export default {
-  name: 'Theme',
-  data() {
-    return {
-      theme: false,
-      tags: [
-        { name: 'Tag One', type: '' },
-        { name: 'Tag Two', type: 'info' },
-        { name: 'Tag Three', type: 'success' },
-        { name: 'Tag Four', type: 'warning' },
-        { name: 'Tag Five', type: 'danger' }
-      ],
-      slideValue: 50,
-      radio: 3
-    }
-  },
-  watch: {
-    theme() {
-      toggleClass(document.body, 'custom-theme')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.field-label{
-  vertical-align: middle;
-}
-.box-card {
-  width: 400px;
-  max-width: 100%;
-  margin: 20px auto;
-}
-
-.block {
-  padding: 30px 24px;
-}
-
-.tag-item {
-  margin-right: 15px;
-}
-</style>
diff --git a/views/src/main/resources/vueboot/src/views/zip/index.vue b/views/src/main/resources/vueboot/src/views/zip/index.vue
deleted file mode 100644
index 412608f8bad7a5b2f2160c77a9b6cee2a8a87538..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/zip/index.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
-      Export Zip
-    </el-button>
-    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label="ID" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="95" align="center">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-
-export default {
-  name: 'ExportZip',
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      downloadLoading: false,
-      filename: ''
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    async fetchData() {
-      this.listLoading = true
-      const { data } = await fetchList()
-      this.list = data.items
-      this.listLoading = false
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Zip').then(zip => {
-        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-        const list = this.list
-        const data = this.formatJson(filterVal, list)
-        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
-        this.downloadLoading = false
-      })
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
-    }
-  }
-}
-</script>