diff --git a/vue/full/element-ui-personal/component/Menu/MenuItem.vue b/vue/full/element-ui-personal/component/Menu/MenuItem.vue
deleted file mode 100644
index ef8835b..0000000
--- a/vue/full/element-ui-personal/component/Menu/MenuItem.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <li
-        class="el-menu-item"
-        :style="paddingStyle"
-        :class="{'is-active': active,'is-disabled': disabled}"
-        @click="handleClick"
-    >
-        <el-tooltip
-            v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title"
-            effect="dark"
-            placement="right"
-        >
-            <template v-slot:content>
-                <slot name="title"/>
-            </template>
-            <div :style="iconContainerStyle">
-                <slot/>
-            </div>
-        </el-tooltip>
-
-        <template v-else>
-            <slot/>
-            <slot name="title"/>
-        </template>
-    </li>
-</template>
-
-<script>
-import MenuMixin from './mixin'
-import Emitter from 'element-ui/lib/mixins/emitter'
-
-export default {
-    name: 'ElMenuItem',
-
-    componentName: 'ElMenuItem',
-
-    mixins: [MenuMixin, Emitter],
-
-    props: {
-        index: String,
-        route: [String, Object],
-        disabled: Boolean
-    },
-
-    computed: {
-        active() {
-            return this.index === this.rootMenu.activeIndex
-        },
-
-        iconContainerStyle() {
-            return `position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 ${this.inlineIndent}px;`
-        }
-    },
-
-    methods: {
-        handleClick() {
-            if (!this.disabled) {
-                this.dispatch('ElMenu', 'item-click', this)
-                this.$emit('click', this)
-            }
-        }
-    },
-
-    mounted() {
-        this.parentMenu.addItem(this)
-        this.rootMenu.addItem(this)
-    },
-
-    beforeDestroy() {
-        this.parentMenu.removeItem(this)
-        this.rootMenu.removeItem(this)
-    }
-}
-</script>
diff --git a/vue/full/element-ui-personal/component/Menu/Submenu.vue b/vue/full/element-ui-personal/component/Menu/Submenu.vue
deleted file mode 100644
index f83a589..0000000
--- a/vue/full/element-ui-personal/component/Menu/Submenu.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script type="text/jsx">
-import MenuMixin from './mixin'
-import Emitter from 'element-ui/lib/mixins/emitter'
-import Popper from 'element-ui/lib/utils/vue-popper'
-
-const PopperMixin = {
-    props: {
-        transformOrigin: {type: [Boolean, String], default: false},
-        offset: Popper.props.offset,
-        boundariesPadding: Popper.props.boundariesPadding,
-        popperOptions: Popper.props.popperOptions
-    },
-    data: Popper.data,
-    methods: Popper.methods,
-    beforeDestroy: Popper.beforeDestroy,
-    deactivated: Popper.deactivated
-}
-
-export default {
-    name: 'ElSubmenu',
-
-    componentName: 'ElSubmenu',
-
-    mixins: [MenuMixin, Emitter, PopperMixin],
-
-    props: {
-        index: String,
-        showTimeout: {type: Number, default: 300},
-        hideTimeout: {type: Number, default: 300},
-        popperClass: String,
-        disabled: Boolean,
-        popperAppendToBody: {type: Boolean, default: true}
-    },
-
-    data() {
-        return {
-            popperJS: null,
-            timeout: null,
-            items: {},
-            submenus: {},
-            mouseInChild: false
-        }
-    },
-
-    computed: {
-        appendToBody() {
-            return this.popperAppendToBody === undefined
-                ? this.isFirstLevel
-                : this.popperAppendToBody
-        },
-        menuTransitionName() {
-            return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top'
-        },
-        opened() {
-            return this.rootMenu.openedMenus.includes(this.index)
-        },
-        active() {
-            const active = Object.values(this.items).some(v => v.active)
-            return active || Object.values(this.submenus).some(v => v.active)
-        },
-        mode() {
-            return this.rootMenu.mode
-        },
-        isMenuPopup() {
-            return this.rootMenu.isMenuPopup
-        },
-        isFirstLevel() {
-            const arr = ['ElSubmenu', 'ElMenuItemGroup']
-            let isFirstLevel = true
-            let parent = this.$parent
-
-            while (parent && parent !== this.rootMenu) {
-                if (arr.includes(parent.$options.componentName)) {
-                    isFirstLevel = false
-                    break
-                }
-                else parent = parent.$parent
-            }
-            return isFirstLevel
-        }
-    },
-
-    watch: {
-        opened() {
-            this.isMenuPopup && this.$nextTick(this.updatePopper)
-        }
-    },
-
-    methods: {
-        handleCollapseToggle(value) {
-            value ? this.initPopper() : this.doDestroy()
-        },
-
-        addItem(item) {
-            this.$set(this.items, item.index, item)
-        },
-        removeItem(item) {
-            delete this.items[item.index]
-        },
-        addSubmenu(item) {
-            this.$set(this.submenus, item.index, item)
-        },
-        removeSubmenu(item) {
-            delete this.submenus[item.index]
-        },
-
-        handleClick() {
-            const {rootMenu, disabled} = this
-            if (
-                (rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||
-                (rootMenu.collapse && rootMenu.mode === 'vertical') ||
-                disabled
-            ) {
-                return
-            }
-            this.dispatch('ElMenu', 'submenu-click', this)
-        },
-
-        handleMouseenter(event, showTimeout = this.showTimeout) {
-            if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) {
-                return
-            }
-
-            const {rootMenu, disabled} = this
-
-            if (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal'
-                || !rootMenu.collapse && rootMenu.mode === 'vertical'
-                || disabled) return
-
-            this.dispatch('ElSubmenu', 'mouse-enter-child')
-
-            window.clearTimeout(this.timeout)
-            this.timeout = window.setTimeout(() => this.rootMenu.openMenu(this.index, this.indexPath), showTimeout)
-
-            this.appendToBody && this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'))
-        },
-
-        handleMouseleave(deepDispatch = false) {
-            const {rootMenu} = this
-
-            if (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal'
-                || !rootMenu.collapse && rootMenu.mode === 'vertical') return
-
-            this.dispatch('ElSubmenu', 'mouse-leave-child')
-
-            window.clearTimeout(this.timeout)
-            this.timeout = window.setTimeout(() => !this.mouseInChild && this.rootMenu.closeMenu(this.index), this.hideTimeout)
-
-            if (this.appendToBody && deepDispatch) {
-                if (this.$parent.$options.name === 'ElSubmenu') {
-                    this.$parent.handleMouseleave(true)
-                }
-            }
-        },
-
-        updatePlacement() {
-            this.placement = this.mode === 'horizontal' && this.isFirstLevel
-                ? 'bottom-start'
-                : 'right-start'
-        },
-
-        initPopper() {
-            this.referenceElm = this.$el
-            this.popperElm = this.$refs.menu
-            this.updatePlacement()
-        }
-    },
-
-    created() {
-        this.$on('toggle-collapse', this.handleCollapseToggle)
-        this.$on('mouse-enter-child', () => {
-            this.mouseInChild = true
-            window.clearTimeout(this.timeout)
-        })
-        this.$on('mouse-leave-child', () => {
-            this.mouseInChild = false
-            window.clearTimeout(this.timeout)
-        })
-    },
-
-    mounted() {
-        this.parentMenu.addSubmenu(this)
-        this.rootMenu.addSubmenu(this)
-        this.initPopper()
-    },
-
-    beforeDestroy() {
-        this.parentMenu.removeSubmenu(this)
-        this.rootMenu.removeSubmenu(this)
-    },
-
-    render() {
-        const {rootMenu, $slots} = this
-
-        const popupMenu = (
-            <transition name={this.menuTransitionName}>
-                <div
-                    ref="menu"
-                    v-show={this.opened}
-                    class={[`el-menu--${this.mode}`, this.popperClass]}
-                    on-mouseenter={e => this.handleMouseenter(e, 100)}
-                    on-mouseleave={() => this.handleMouseleave(true)}
-                    on-focus={e => this.handleMouseenter(e, 100)}>
-                    <ul class={['el-menu el-menu--popup', `el-menu--popup-${this.currentPlacement}`]}>
-                        {$slots.default}
-                    </ul>
-                </div>
-            </transition>
-        )
-
-        const inlineMenu = (
-            <el-collapse-transition>
-                <ul v-show={this.opened} class="el-menu el-menu--inline">
-                    {$slots.default}
-                </ul>
-            </el-collapse-transition>
-        )
-
-        const submenuTitleIcon = (
-            rootMenu.mode === 'horizontal' && this.isFirstLevel ||
-            rootMenu.mode === 'vertical' && !rootMenu.collapse
-        ) ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
-
-        return (
-            <li
-                class={{
-                    'el-submenu': true,
-                    'is-active': this.active,
-                    'is-opened': this.opened,
-                    'is-disabled': this.disabled
-                }}
-                on-mouseenter={this.handleMouseenter}
-                on-mouseleave={() => this.handleMouseleave(false)}
-                on-focus={this.handleMouseenter}
-            >
-                <div
-                    ref="submenu-title"
-                    class="el-submenu__title"
-                    style={this.paddingStyle}
-                    on-click={this.handleClick}
-                >
-                    {$slots.title}
-                    <i class={['el-submenu__icon-arrow', submenuTitleIcon]}/>
-                </div>
-                {this.isMenuPopup ? popupMenu : inlineMenu}
-            </li>
-        )
-    }
-}
-</script>
diff --git a/vue/full/element-ui-personal/component/Menu/mixin.js b/vue/full/element-ui-personal/component/Menu/mixin.js
deleted file mode 100644
index 71201c5..0000000
--- a/vue/full/element-ui-personal/component/Menu/mixin.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * 在原基础上增加了 inlineIndent 属性，用于确定每级节点的单位缩进距离
- */
-export default {
-    inject: ['rootMenu'],
-
-    props: {
-        inlineIndent: {type: Number, default: 20}
-    },
-
-    computed: {
-        indexPath() {
-            const path = [this.index]
-            let parent = this.$parent
-            while (parent.$options.componentName !== 'ElMenu') {
-                if (parent.index) {
-                    path.unshift(parent.index)
-                }
-                parent = parent.$parent
-            }
-            return path
-        },
-
-        parentMenu() {
-            let parent = this.$parent
-            while (
-                parent &&
-                ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1
-                ) {
-                parent = parent.$parent
-            }
-            return parent
-        },
-
-        paddingStyle() {
-            if (this.rootMenu.mode !== 'vertical') return {}
-
-            let padding = this.inlineIndent
-
-            if (!this.rootMenu.collapse) {
-                let parent = this.$parent
-                while (parent && parent.$options.componentName !== 'ElMenu') {
-                    if (parent.$options.componentName === 'ElSubmenu') {
-                        padding += this.inlineIndent
-                    }
-                    parent = parent.$parent
-                }
-            }
-
-            return {'padding-left': `${padding}px`}
-        }
-    }
-}
diff --git a/vue/full/element-ui-personal/index.js b/vue/full/element-ui-personal/index.js
index 1845aea..a9dbdc6 100644
--- a/vue/full/element-ui-personal/index.js
+++ b/vue/full/element-ui-personal/index.js
@@ -1,13 +1,5 @@
-import MenuItem from "./component/Menu/MenuItem"
-import Submenu from "./component/Menu/Submenu"
 import Message from "./component/Message"
 
-const components = [MenuItem, Submenu]
-
 export default function (Vue) {
-    components.forEach(component => {
-        Vue.component(component.name, component)
-    })
-
     Vue.prototype.$message = Message
 }
diff --git a/vue/full/package-lock.json b/vue/full/package-lock.json
index 63351f8..435276a 100644
--- a/vue/full/package-lock.json
+++ b/vue/full/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "my",
-  "version": "0.1.0",
+  "name": "element-ui-admin-full",
+  "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4733,7 +4733,7 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
-      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "requires": {
         "core-js": "^2.4.0",
@@ -6946,6 +6946,11 @@
       "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
       "dev": true
     },
+    "el-admin-layout": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/el-admin-layout/-/el-admin-layout-0.0.2.tgz",
+      "integrity": "sha512-F+5n9HzlbGyD3EbQi4Uk7RdMlZbSLmPAsw5aoK5pYmEtLJktZCOC70bGMNRESc38bGpADa7Cv1+8bwCruG1/uw=="
+    },
     "electron-to-chromium": {
       "version": "1.3.455",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.455.tgz",
@@ -9610,14 +9615,9 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
       "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
     },
-    "normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npm.taobao.org/normalize.css/download/normalize.css-8.0.1.tgz",
-      "integrity": "sha1-m5iiCHOLnMJjTKrLxC0THJdIe/M="
-    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
diff --git a/vue/full/package.json b/vue/full/package.json
index 33c4979..8db6a97 100644
--- a/vue/full/package.json
+++ b/vue/full/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "my",
-  "version": "0.1.0",
+  "name": "element-ui-admin-full",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -11,10 +11,10 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "decimal.js": "^10.2.0",
+    "el-admin-layout": "0.0.2",
     "element-ui": "^2.14.1",
     "file-saver": "^2.0.5",
     "js-md5": "^0.7.3",
-    "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "pako": "^1.0.11",
     "socket.io-client": "^2.3.0",
diff --git a/vue/full/src/asset/style/cover/element-ui.scss b/vue/full/src/asset/style/cover/element-ui.scss
index 4a11829..301cc2b 100644
--- a/vue/full/src/asset/style/cover/element-ui.scss
+++ b/vue/full/src/asset/style/cover/element-ui.scss
@@ -92,57 +92,21 @@
     }
 }
 
-.el-loading-mask {
-    background-color: $--color-white;
-    color: $--color-primary;
-}
-
-.el-menu {
-    width: 100%;
-    border: none !important;
-    overflow: hidden;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-    //子级菜单激活时，父级同样高亮
-    .el-menu-item.is-active,
-    .is-active > .el-submenu__title {
-        color: $--color-primary !important;
-    }
-
-    //箭头图标与字体同色
-    .el-submenu__title i {
-        color: inherit;
-    }
-
-    //原先垂直时右侧展开箭头偏上
-    .el-submenu__icon-arrow {
-        margin-top: -4px;
-    }
-
-    //弹出菜单
-    &.el-menu--popup {
-        max-height: 88vh;
-        min-width: 160px;
-        padding: 0;
-        margin-bottom: 0.5vh;
-        overflow-y: auto;
+.el-form {
+    &-item__content {
+        > .el-tree {
+            margin-top: 8px;
+        }
 
-        .el-menu-item,
-        .el-submenu__title {
-            padding: 0 $menu-padding;
+        > .el-switch {
+            vertical-align: baseline;
         }
     }
+}
 
-    &--horizontal > .el-menu-item:not(.is-disabled):hover,
-    &--horizontal > .el-menu-item:not(.is-disabled):focus,
-    &--horizontal > .el-submenu .el-submenu__title:hover,
-    &--horizontal .el-menu .el-menu-item,
-    &--horizontal .el-menu .el-submenu__title {
-        background-color: inherit;
-    }
+.el-loading-mask {
+    background-color: $--color-white;
+    color: $--color-primary;
 }
 
 .el-message {
@@ -215,6 +179,12 @@
     }
 }
 
+.el-table {
+    a {
+        color: $--color-primary;
+    }
+}
+
 .el-textarea {
     .el-input__count {
         background-color: transparent;
diff --git a/vue/full/src/asset/style/cover/var.scss b/vue/full/src/asset/style/cover/var.scss
index 6dfabd6..d53d4ce 100644
--- a/vue/full/src/asset/style/cover/var.scss
+++ b/vue/full/src/asset/style/cover/var.scss
@@ -5,9 +5,6 @@ $--backtop-background-color: $--background-color-base;
 //返回顶部hover背景色
 $--backtop-hover-background-color: $--border-color-lighter;
 
-//el-menu的hover背景颜色
-$--menu-item-hover-fill: none;
-
 //el-table的表头字体颜色
 $--table-header-font-color: $--color-text-primary;
 //el-table的表头背景颜色
diff --git a/vue/full/src/asset/style/display.scss b/vue/full/src/asset/style/display.scss
deleted file mode 100644
index a71f2f1..0000000
--- a/vue/full/src/asset/style/display.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@media only screen and (max-width: $--sm) {
-    .hidden-xs {
-        display: none !important
-    }
-}
diff --git a/vue/full/src/asset/style/index.scss b/vue/full/src/asset/style/index.scss
index 57d3d80..84b34fd 100644
--- a/vue/full/src/asset/style/index.scss
+++ b/vue/full/src/asset/style/index.scss
@@ -1,12 +1,11 @@
-@import "~normalize.css/normalize.css";
 @import "./var.scss";
 @import "./cover/var.scss";
 @import "./mixin.scss";
 @import "~element-ui/packages/theme-chalk/src/index.scss";
 @import "~@ele/style/index.scss";
+//layout中的样式需要覆盖element-ui原定义，所以放element-ui的后面
+@import "~@/layout/style.scss";
 @import "./cover/element-ui.scss";
-@import './display.scss';
-@import "./transition.scss";
 @import "./nprogress.scss";
 
 html {
@@ -16,6 +15,7 @@ html {
 
 body {
     height: 100%;
+    margin: 0;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
@@ -41,7 +41,6 @@ div:focus {
 a,
 a:focus,
 a:hover {
-    cursor: pointer;
     color: inherit;
     text-decoration: none;
 }
@@ -57,7 +56,7 @@ a:hover {
 
         &-thumb {
             width: 6px;
-            //border-radius: 5px;
+            border-radius: 5px;
             background-color: rgba($--color-primary, 0.8);
 
             &:hover {
@@ -71,10 +70,6 @@ a:hover {
     @include clearfix;
 }
 
-.overflow-hidden {
-    overflow: hidden !important;
-}
-
 .flex {
     display: flex;
     flex-wrap: wrap;
@@ -82,75 +77,16 @@ a:hover {
     align-content: space-between;
 }
 
-
-/*----------路由页面的最大高度开始----------*/
-//可能达到的最大高度
-$max-height: '100vh - #{$page-view-margin * 2}';
-
-.max-view-height {
-    max-height: calc(#{$max-height});
-}
-
-//即使高度不够也占满
-.max-view-height.full {
-    height: 100vh;
-}
-
-//有导航栏
-.has-nav .max-view-height {
-    max-height: calc(#{$max-height} - #{$nav-height});
-}
-
-//有多页签栏
-.has-tags-view .max-view-height {
-    max-height: calc(#{$max-height} - #{$tags-view-height});
-}
-
-//有页头
-.has-page-header .max-view-height {
-    max-height: calc(#{$max-height} - #{$page-header-height});
-}
-
-//有页脚
-.has-page-footer .max-view-height {
-    max-height: calc(#{$max-height} - #{$page-footer-height});
-}
-
-//同时有导航栏和多页签栏
-.has-nav.has-tags-view .max-view-height {
-    max-height: calc(#{$max-height} - #{$nav-height} - #{$tags-view-height});
-}
-
-//同时有导航栏和页头
-.has-nav .has-page-header .max-view-height {
-    max-height: calc(#{$max-height} - #{$nav-height} - #{$page-header-height});
-}
-
-//同时有导航栏和页脚
-.has-nav .has-page-footer .max-view-height {
-    max-height: calc(#{$max-height} - #{$nav-height} - #{$page-footer-height});
-}
-
-//同时有导航栏、多页签栏、页头
-.has-nav.has-tags-view .has-page-header .max-view-height {
-    max-height: calc(#{$max-height} - #{$nav-height} - #{$tags-view-height} - #{$page-header-height});
-}
-
-//同时有导航栏、多页签栏、页脚
-.has-nav.has-tags-view .has-page-footer .max-view-height {
-    max-height: calc(#{$max-height} - #{$nav-height} - #{$tags-view-height} - #{$page-footer-height});
-}
-
-//同时有导航栏、多页签栏、页头、页脚
-.has-nav.has-tags-view .has-page-header.has-page-footer .max-view-height {
-    max-height: calc(#{$max-height} - #{$nav-height} - #{$tags-view-height} - #{$page-header-height} - #{$page-footer-height});
+.table-container {
+    margin-top: 10px;
 }
 
-/*----------路由页面的最大高度结束----------*/
-
+.table-add-btn {
+    margin: 8px 0;
 
-.table-container {
-    margin-top: 10px;
+    .el-button {
+        width: 100%;
+    }
 }
 
 .table-image {
@@ -171,31 +107,14 @@ $max-height: '100vh - #{$page-view-margin * 2}';
     }
 }
 
-//仅用于演示用例
-.tip-row {
-    position: relative;
-    z-index: 1;
-    background-color: #fafafa;
-    padding: 8px 24px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-    display: block;
-    line-height: 32px;
-    font-size: 16px;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    color: #337ab7;
-    user-select: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    * + & {
-        margin-top: 40px;
-    }
+.button-group {
+    .el-button {
+        margin-top: 10px;
+        margin-right: 10px;
 
-    a {
-        color: #337ab7;
-        cursor: pointer;
-        text-decoration: underline;
+        & + .el-button {
+            margin-left: 0;
+        }
     }
 }
 
@@ -224,35 +143,30 @@ $max-height: '100vh - #{$page-view-margin * 2}';
     }
 }
 
-.button-group {
-    .el-button {
-        margin-top: 10px;
-        margin-right: 10px;
-
-        & + .el-button {
-            margin-left: 0;
-        }
-    }
-}
-
-.table-add-btn {
-    margin: 8px 0;
-
-    .el-button {
-        width: 100%;
-    }
-}
+//仅用于演示用例
+.tip-row {
+    position: relative;
+    z-index: 1;
+    background-color: #fafafa;
+    padding: 8px 24px;
+    margin-bottom: 20px;
+    border-radius: 2px;
+    display: block;
+    line-height: 32px;
+    font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    color: #337ab7;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
-.el-form-item__content {
-    > .el-tree {
-        margin-top: 8px;
+    * + & {
+        margin-top: 40px;
     }
 
-    > .el-switch {
-        vertical-align: baseline;
+    a {
+        color: #337ab7;
+        cursor: pointer;
+        text-decoration: underline;
     }
 }
-
-.el-table a {
-    color: $--color-primary;
-}
diff --git a/vue/full/src/asset/style/transition.scss b/vue/full/src/asset/style/transition.scss
deleted file mode 100644
index f05199c..0000000
--- a/vue/full/src/asset/style/transition.scss
+++ /dev/null
@@ -1,253 +0,0 @@
-$transition-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
-
-.right-out,
-.left-out {
-    &-leave-active,
-    &-enter-active {
-        transition: all .2s;
-    }
-}
-
-.right-out {
-    &-enter {
-        opacity: 0;
-        transform: translateX(-30px);
-    }
-
-    &-leave-to {
-        opacity: 0;
-        transform: translateX(30px);
-    }
-}
-
-.left-out {
-    &-enter {
-        opacity: 0;
-        transform: translateX(30px);
-    }
-
-    &-leave-to {
-        opacity: 0;
-        transform: translateX(-30px);
-    }
-}
-
-.slide-right,
-.slide-left,
-.slide-up,
-.slide-down,
-.jump-right,
-.jump-left,
-.jump-up,
-.jump-down,
-.fade,
-.scale,
-.rotate,
-.flip {
-    &-leave-active {
-        position: absolute
-    }
-}
-
-.slide-right,
-.slide-left,
-.slide-up,
-.slide-down {
-    &-enter-active,
-    &-leave-active {
-        transition: transform .3s $transition-easing
-    }
-}
-
-.slide-right {
-    &-enter {
-        transform: translate3d(-100%, 0, 0);
-    }
-
-    &-leave-to {
-        transform: translate3d(100%, 0, 0);
-    }
-}
-
-.slide-left {
-    &-enter {
-        transform: translate3d(100%, 0, 0);
-    }
-
-    &-leave-to {
-        transform: translate3d(-100%, 0, 0);
-    }
-}
-
-.slide-up {
-    &-enter {
-        transform: translate3d(0, 100%, 0)
-    }
-
-    &-leave-to {
-        transform: translate3d(0, -100%, 0)
-    }
-}
-
-.slide-down {
-    &-enter {
-        transform: translate3d(0, -100%, 0)
-    }
-
-    &-leave-to {
-        transform: translate3d(0, 100%, 0)
-    }
-}
-
-.jump-right,
-.jump-left,
-.jump-up,
-.jump-down {
-    &-enter-active,
-    &-leave-active {
-        transition: opacity .3s, transform .3s
-    }
-
-    &-enter,
-    &-leave-to {
-        opacity: 0
-    }
-}
-
-.jump-right {
-    &-enter {
-        transform: translate3d(-15px, 0, 0)
-    }
-
-    &-leave-to {
-        transform: translate3d(15px, 0, 0)
-    }
-}
-
-.jump-left {
-    &-enter {
-        transform: translate3d(15px, 0, 0)
-    }
-
-    &-leave-to {
-        transform: translateX(-15px)
-    }
-}
-
-.jump-up {
-    &-enter {
-        transform: translate3d(0, 15px, 0)
-    }
-
-    &-leave-to {
-        transform: translate3d(0, -15px, 0)
-    }
-}
-
-.jump-down {
-    &-enter {
-        transform: translate3d(0, -15px, 0)
-    }
-
-    &-leave-to {
-        transform: translate3d(15px, 0, 0)
-    }
-}
-
-.fade {
-    &-enter-active,
-    &-leave-active {
-        transition: opacity .3s ease-out
-    }
-
-    &-enter,
-    &-leave,
-    &-leave-to {
-        opacity: 0
-    }
-}
-
-.scale {
-    &-enter-active,
-    &-leave-active {
-        transition: opacity .3s, transform .3s $transition-easing
-    }
-
-    &-enter,
-    &-leave,
-    &-leave-to {
-        opacity: 0;
-        transform: scale3d(0, 0, 1)
-    }
-}
-
-.rotate {
-    &-enter-active,
-    &-leave-active {
-        transition: opacity .3s, transform .3s $transition-easing;
-        transform-style: preserve-3d
-    }
-
-    &-enter,
-    &-leave,
-    &-leave-to {
-        opacity: 0;
-        transform: scale3d(0, 0, 1) rotate3d(0, 0, 1, 90deg)
-    }
-}
-
-.flip-right,
-.flip-left,
-.flip-up,
-.flip-down {
-    &-enter-active,
-    &-leave-active {
-        transition: transform .3s;
-        backface-visibility: hidden
-    }
-
-    &-enter-to,
-    &-leave {
-        transform: perspective(400px) rotate3d(1, 1, 0, 0deg)
-    }
-}
-
-.flip-right {
-    &-enter {
-        transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
-    }
-
-    &-leave-to {
-        transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
-    }
-}
-
-.flip-left {
-    &-enter {
-        transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
-    }
-
-    &-leave-to {
-        transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
-    }
-}
-
-.flip-up {
-    &-enter {
-        transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
-    }
-
-    &-leave-to {
-        transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
-    }
-}
-
-.flip-down {
-    &-enter {
-        transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
-    }
-
-    &-leave-to {
-        transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
-    }
-}
diff --git a/vue/full/src/asset/style/var.scss b/vue/full/src/asset/style/var.scss
index 3335c78..f92beec 100644
--- a/vue/full/src/asset/style/var.scss
+++ b/vue/full/src/asset/style/var.scss
@@ -1,7 +1,7 @@
 @import "~element-ui/packages/theme-chalk/src/common/var";
 
 //设定移动端的最大宽度，只能是number类型
-$max-mobile-width: 500px;
+$max-mobile-width: $--sm;
 
 //覆盖element颜色
 $--color-primary: #1890ff;
@@ -10,75 +10,16 @@ $--color-warning: #FF5722;
 $--color-danger: #F44336;
 $--color-info: #009688;
 
-//菜单中icon的大小
-$menu-icon-size: 14px;
-//菜单中icon和文字的距离
-$menu-icon-text-gap: 10px;
-//菜单的padding
-$menu-padding: $menu-icon-size + $menu-icon-text-gap;
-//暗色菜单的背景色
-$menu-background-dark: #304156;
-//暗色子级菜单的背景色
-$sub-menu-background-dark: darken($menu-background-dark, 5%);
-//暗色主菜单的背景色（用于双层侧边栏的主菜单和顶部导航栏）
-$root-menu-background-dark: #1F293D;
-//亮色菜单的文字颜色
-$menu-text-color-light: $--color-text-primary;
-//暗色菜单的文字颜色
-$menu-text-color-dark: rgba(255, 255, 255, .65);
-//亮色菜单的文字hover颜色
-$menu-text-hover-color-light: $--color-primary;
-//暗色菜单的文字hover颜色
-$menu-text-hover-color-dark: rgba(255, 255, 255, 1);
-
-//侧边栏宽度
-$aside-width: 208px;
-//侧边栏折叠时的宽度
-$aside-collapse-width: $menu-icon-size + $menu-padding * 2;
-
-//导航栏高度
-$nav-height: 48px;
-//导航栏的padding-left
-$navbar-padding-left: 12px;
-//亮色导航栏的功能项颜色
-$navbar-item-color-light: $menu-text-color-light;
-//暗色导航栏的功能项颜色
-$navbar-item-color-dark: rgba(255, 255, 255, .85);
-//亮色导航栏的功能项hover背景颜色
-$navbar-item-hover-color-light: rgba(255, 255, 255, .85);
-//暗色导航栏的功能项hover背景颜色
-$navbar-item-hover-color-dark: lighten($root-menu-background-dark, 5%);
-
-//多页签栏高度
-$tags-view-height: 32px;
-
-//页头高度，用于max-view-height
-$page-header-height: 44px;
-//页头的上下padding
-$page-header-padding: 12px;
-
-//路由页面的margin
-$page-view-margin: 24px;
-
-//页脚高度，用于max-view-height
-$page-footer-height: 64px;
-
-//暗色边框的颜色，用于nav-menu和侧边栏
-$--border-color-dark: darken($root-menu-background-dark, 5%);
-
 //dialog距离顶部的距离，用于<el-dialog>的top属性、<el-dialog>中滚动区域的最大高度
 $dialog-top: 100px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-    maxMobileWidth: $max-mobile-width;
     primary: $--color-primary;
     info: $--color-info;
     success: $--color-success;
     danger: $--color-danger;
     warning: $--color-warning;
-    pageViewMargin: $page-view-margin;
     dialogTop: $dialog-top;
-    menuPadding: $menu-padding;
 }
diff --git a/vue/full/src/component/CollapseCard/index.vue b/vue/full/src/component/CollapseCard/index.vue
index 1e00f7e..ae2d5f7 100644
--- a/vue/full/src/component/CollapseCard/index.vue
+++ b/vue/full/src/component/CollapseCard/index.vue
@@ -6,6 +6,7 @@
                 <i class="el-icon-arrow-up collapse-card-icon"/>
             </div>
         </template>
+
         <slot/>
     </el-card>
 </template>
diff --git a/vue/full/src/component/Upload/PictureCard.vue b/vue/full/src/component/Upload/CardList.vue
similarity index 99%
rename from vue/full/src/component/Upload/PictureCard.vue
rename to vue/full/src/component/Upload/CardList.vue
index 5b62b26..5f29e34 100644
--- a/vue/full/src/component/Upload/PictureCard.vue
+++ b/vue/full/src/component/Upload/CardList.vue
@@ -29,7 +29,7 @@
         </div>
 
         <div v-if="!hideTrigger" class="upload-file-trigger" @click="handleTriggerClick">
-            <i class="el-icon-plus"></i>
+            <i class="el-icon-plus"/>
             <input ref="input" type="file" :multiple="multiple" :accept="accept" @change="handleInputChange">
         </div>
     </div>
@@ -39,7 +39,7 @@
 import ajax from 'element-ui/packages/upload/src/ajax'
 
 export default {
-    name: "UploadPictureCard",
+    name: "UploadCardList",
 
     props: {
         //上传的地址
diff --git a/vue/full/src/component/Upload/Qiniu.vue b/vue/full/src/component/Upload/Qiniu.vue
index 2943226..65af246 100644
--- a/vue/full/src/component/Upload/Qiniu.vue
+++ b/vue/full/src/component/Upload/Qiniu.vue
@@ -1,5 +1,5 @@
 <template>
-    <upload-picture-card
+    <upload-card-list
         ref="upload"
         :uploaded-file-list="uploadedFileList"
         :limit="limit"
@@ -24,7 +24,7 @@
 * 非图片类型的文件使用kkFileView预览
 * success、remove事件中的file地址不带七牛云外链前缀
 * */
-import UploadPictureCard from "./PictureCard"
+import UploadCardList from "./CardList"
 import axios from 'axios'
 import {deleteUpload} from '@/api/file'
 import {file as fileConfig} from '@/config'
@@ -46,7 +46,7 @@ function getCoverImage(url, fileType) {
 export default {
     name: "QiniuUpload",
 
-    components: {UploadPictureCard},
+    components: {UploadCardList},
 
     props: {
         disabled: Boolean,
diff --git a/vue/full/src/component/checkbox/ColorCheckbox.vue b/vue/full/src/component/checkbox/ColorCheckbox.vue
deleted file mode 100644
index d9c796b..0000000
--- a/vue/full/src/component/checkbox/ColorCheckbox.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script type="text/jsx">
-import common from './common'
-
-export default {
-    name: "ColorCheckBox",
-
-    mixins: [common],
-
-    render() {
-        return (
-            <div class="color-checkbox" style={{backgroundColor: this.value}} on-click={this.click}>
-                {this.checked && <i class="el-icon-check"/>}
-            </div>
-        )
-    }
-}
-</script>
-
-<style>
-.color-checkbox {
-    width: 20px;
-    height: 20px;
-    margin: 5px;
-    border-radius: 2px;
-    cursor: pointer;
-    text-align: center;
-    font-weight: bold;
-    color: #ffffff;
-}
-</style>
diff --git a/vue/full/src/component/checkbox/Group.vue b/vue/full/src/component/checkbox/Group.vue
deleted file mode 100644
index 3e3c065..0000000
--- a/vue/full/src/component/checkbox/Group.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script type="text/jsx">
-export default {
-    name: "CheckboxGroup",
-
-    props: {value: String},
-
-    data: () => ({children: []}),
-
-    render() {
-        return <div class="checkbox-group">{this.$slots.default}</div>
-    }
-}
-</script>
-
-<style>
-.checkbox-group {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-}
-</style>
diff --git a/vue/full/src/component/checkbox/ImgCheckbox.vue b/vue/full/src/component/checkbox/ImgCheckbox.vue
deleted file mode 100644
index 1881266..0000000
--- a/vue/full/src/component/checkbox/ImgCheckbox.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script type="text/jsx">
-import common from './common'
-
-export default {
-    name: "ImgCheckBox",
-
-    mixins: [common],
-
-    props: {
-        img: String,
-        label: String
-    },
-
-    render() {
-        return (
-            <div class="img-checkbox" title={this.label} on-click={this.click}>
-                <img src={this.img}/>
-                {this.checked && <i class="el-icon-check"/>}
-            </div>
-        )
-    }
-}
-</script>
-
-<style lang="scss">
-@import "~@/asset/style/var";
-
-.img-checkbox {
-    width: 55px;
-    margin: 10px;
-    border-radius: 2px;
-    cursor: pointer;
-    position: relative;
-
-    .el-icon-check {
-        position: absolute;
-        color: $--color-primary;
-        font-weight: bold;
-        top: 25px;
-        right: 10px;
-    }
-}
-</style>
diff --git a/vue/full/src/component/menu/ContextMenu/index.vue b/vue/full/src/component/menu/ContextMenu/index.vue
deleted file mode 100644
index ea23e8c..0000000
--- a/vue/full/src/component/menu/ContextMenu/index.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script type="text/jsx">
-const Item = {
-    functional: true,
-
-    render(h, context) {
-        return <li class="context-menu-item" {...context.data}>{context.children}</li>
-    }
-}
-
-export default {
-    name: "ContextMenu",
-
-    components: {Item},
-
-    props: {
-        value: Boolean,
-        items: Array,
-        left: Number,
-        top: Number
-    },
-
-    data() {
-        return {
-            realLeft: '0px',
-            realTop: '0px'
-        }
-    },
-
-    watch: {
-        value(v) {
-            document.body[v ? 'addEventListener' : 'removeEventListener']('click', this.close)
-            v && this.$nextTick(this.autoAdapt)
-        },
-        left(v) {
-            v && this.autoAdaptLeft(v)
-        },
-        top(v) {
-            v && this.autoAdaptTop(v)
-        }
-    },
-
-    methods: {
-        close() {
-            this.$emit('input', false)
-        },
-        autoAdapt() {
-            this.autoAdaptTop(this.top)
-            this.autoAdaptLeft(this.left)
-        },
-        autoAdaptTop(v) {
-            if (!this.value) return
-
-            const elOffsetHeight = this.$el.offsetHeight
-
-            if (elOffsetHeight > document.body.clientHeight - v && v > elOffsetHeight) {
-                this.realTop = v - elOffsetHeight + 'px'
-            }
-            else this.realTop = v + 'px'
-        },
-        autoAdaptLeft(v) {
-            if (!this.value) return
-
-            const elOffsetWidth = this.$el.offsetWidth
-
-            if (elOffsetWidth > document.body.clientWidth - v) {
-                this.realLeft = v - elOffsetWidth + 'px'
-            }
-            else this.realLeft = v + 'px'
-        }
-    },
-
-    render() {
-        if (!Array.isArray(this.items)) return
-
-        const style = {left: this.realLeft, top: this.realTop}
-
-        return (
-            <ul v-show={this.value} class="context-menu" style={style}>
-                {this.items.map(i => (
-                    i && <item on-click={i.click}>{i.content}</item>
-                ))}
-            </ul>
-        )
-    }
-}
-</script>
-
-<style lang="scss">
-@import "~@/asset/style/var";
-
-.context-menu {
-    margin: 0;
-    background-color: $menu-background-dark;
-    z-index: 10;
-    position: fixed;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #ffffff;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-
-    &-item {
-        margin: 0;
-        padding: 7px 16px;
-        cursor: pointer;
-
-        &:hover {
-            color: $--color-primary;
-        }
-    }
-}
-</style>
diff --git a/vue/full/src/component/menu/NavMenu/index.vue b/vue/full/src/component/menu/NavMenu/index.vue
deleted file mode 100644
index f3f6c1d..0000000
--- a/vue/full/src/component/menu/NavMenu/index.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script type="text/jsx">
-import cssVar from '@/asset/style/var.scss'
-import Item from './item'
-import {isEmpty, deepClone, trim} from "@/util"
-
-const inlineIndent = parseFloat(cssVar.menuPadding)
-
-export default {
-    name: 'NavMenu',
-
-    props: {
-        //路由配置项组成的树形数组
-        menus: Array,
-
-        //垂直还是水平，在el-menu原效果上加了样式名
-        mode: {type: String, default: 'vertical'},
-
-        //主题，light 或 dark
-        theme: {type: String, default: 'light'},
-
-        //是否折叠
-        collapse: Boolean,
-
-        //折叠时的展开菜单是否显示父级
-        showParentOnCollapse: Boolean,
-
-        //搜索词
-        searchWord: String,
-
-        //能够显示图标的最大深度，不传 或 <0 则不作限制
-        showIconMaxDepth: {type: Number, default: 1},
-
-        //menus变化时是否使用过渡动画
-        switchTransition: Boolean,
-
-        //menus过渡动画名称
-        switchTransitionName: String
-    },
-
-    data() {
-        return {
-            //去除空格后的搜索词，不使用computed是为了第三方能直接响应式地修改数据
-            realSearchWord: ''
-        }
-    },
-
-    computed: {
-        //实际用于渲染的菜单数组
-        realMenus() {
-            return isEmpty(this.realSearchWord)
-                ? this.menus
-                : this.filterAfterSearch(deepClone(this.menus))
-        },
-
-        //是否使用切换动画
-        useSwitchTransition() {
-            return this.switchTransition && !isEmpty(this.switchTransitionName)
-        },
-
-        themeClass() {
-            return `el-menu--${this.theme}`
-        },
-        menuClass() {
-            return `el-menu--${this.mode} ${this.themeClass}`
-        }
-    },
-
-    watch: {
-        //搜索词去重
-        searchWord(v) {
-            this.realSearchWord = trim(v)
-        },
-
-        //搜索词改变时，展开高亮菜单
-        realSearchWord() {
-            this.$nextTick(this.expandAfterSearch)
-        }
-    },
-
-    methods: {
-        //根据搜索词过滤菜单
-        filterAfterSearch(menus) {
-            if (!menus) return undefined
-
-            return menus.filter(menu => {
-                //如果匹配，那么其子节点无需再判断
-                if (menu.meta.title.includes(this.realSearchWord)) {
-                    return true
-                }
-
-                const children = this.filterAfterSearch(menu.children)
-
-                if (children) menu.children = children
-
-                return children && children.length > 0
-            })
-        },
-
-        //根据查找结果展开菜单
-        expandAfterSearch() {
-            const menu = this.$refs['el-menu']
-
-            //清空搜索词时还原原本展开的菜单
-            if (isEmpty(this.realSearchWord)) {
-                menu.openedMenus = []
-                return this.$nextTick(menu.initOpenedMenu)
-            }
-
-            const {openedMenus, submenus} = menu
-            const expandMenus = [...new Set(this.getHighlightMenuParent(this.realMenus))]
-
-            //不调用el-menu的open方法是为了避免uniqueOpened
-            for (const {fullPath} of expandMenus) {
-                const sub = submenus[fullPath]
-
-                if (!sub || openedMenus.includes(sub.index)) continue
-
-                sub.indexPath.forEach(i => {
-                    !openedMenus.includes(i) && openedMenus.push(i)
-                })
-            }
-        },
-
-        //获取高亮菜单的上一级节点
-        getHighlightMenuParent(children, parent) {
-            const result = []
-
-            children.forEach(child => {
-                if (child.meta.title.includes(this.realSearchWord)) {
-                    parent && result.push(parent)
-                }
-
-                if (child.children) {
-                    result.push(...this.getHighlightMenuParent(child.children, child))
-                }
-            })
-
-            return result
-        }
-    },
-
-    render() {
-        let items = this.realMenus.map(m => (
-            <Item
-                menu={m}
-                popper-class={this.themeClass}
-                highlight={this.realSearchWord}
-                show-parent={this.showParentOnCollapse}
-                collapse={this.collapse}
-                inline-indent={inlineIndent}
-                show-icon-max-depth={this.showIconMaxDepth}
-            />
-        ))
-
-        if (this.useSwitchTransition) {
-            items = <transition-group name={this.switchTransitionName}>{items}</transition-group>
-        }
-
-        return (
-            <el-menu
-                ref="el-menu"
-                class={this.menuClass}
-                mode={this.mode}
-                collapse={this.collapse}
-                collapse-transition={false}
-                {...{attrs: this.$attrs, on: this.$listeners}}
-            >
-                {items}
-            </el-menu>
-        )
-    }
-}
-</script>
-
-<style lang="scss" src="./style.scss"></style>
diff --git a/vue/full/src/component/menu/NavMenu/item.vue b/vue/full/src/component/menu/NavMenu/item.vue
deleted file mode 100644
index 3e26f7d..0000000
--- a/vue/full/src/component/menu/NavMenu/item.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<script type="text/jsx">
-import {isEmpty} from "@/util"
-
-const MenuItemContent = {
-    functional: true,
-
-    props: {
-        icon: String,
-        title: String,
-        highlight: String
-    },
-
-    render(h, context) {
-        const {icon, title, highlight} = context.props
-        const content = isEmpty(highlight)
-            ? title
-            : getHighlightContent(h, title, highlight)
-
-        return [
-            <v-icon icon={icon}/>,
-            <span slot="title" class="menu-item-content">{content}</span>
-        ]
-    }
-}
-
-//获得高亮的菜单内容vnode
-function getHighlightContent(h, title, highlight) {
-    const start = title.indexOf(highlight)
-
-    if (start === -1) return title
-
-    const end = start + highlight.length
-
-    return [
-        title.substring(0, start),
-        <span class="menu-highlight-result">{title.substring(start, end)}</span>,
-        title.substring(end)
-    ]
-}
-
-//根据showIconMaxDepth、depth判断是否需要限制图标的显示
-function getIcon({icon, showIconMaxDepth, depth}) {
-    if (showIconMaxDepth == null || showIconMaxDepth < 0) {
-        return icon
-    }
-    return showIconMaxDepth < depth ? undefined : icon
-}
-
-//获取不需要嵌套展示的菜单
-function getOnlyChild(menu) {
-    const {children = [], meta: {alwaysShow} = {}} = menu
-
-    if (!children.length) return {...menu, children: undefined}
-
-    if (children.length === 1) return alwaysShow ? null : getOnlyChild(children[0])
-
-    return null
-}
-
-function renderSingleMenu(h, {index, inlineIndent, icon, title, highlight}) {
-    return (
-        <el-menu-item key={index} index={index} inline-indent={inlineIndent}>
-            <MenuItemContent icon={icon} title={title} highlight={highlight}/>
-        </el-menu-item>
-    )
-}
-
-function renderSubMenu(h, {index, inlineIndent, icon, title, popperClass, highlight, children}) {
-    return (
-        <el-submenu key={index} index={index} inline-indent={inlineIndent} popper-class={popperClass}>
-            <MenuItemContent slot="title" icon={icon} title={title} highlight={highlight}/>
-            {children}
-        </el-submenu>
-    )
-}
-
-function renderChildrenWithParentMenu(h, {icon, title, children}) {
-    return [
-        <div class="popover-menu__title el-menu-item">
-            <MenuItemContent icon={icon} title={title}/>
-        </div>,
-        <div class="el-menu el-menu--inline">{children}</div>
-    ]
-}
-
-function renderMenu(h, props) {
-    const {menu, inlineIndent, popperClass, highlight, showParent, collapse, showIconMaxDepth, depth = 1} = props
-
-    const onlyOneChild = getOnlyChild(menu)
-
-    const showSingle = onlyOneChild && !onlyOneChild.children
-
-    if (showSingle) {
-        const {fullPath, meta: {icon, title}} = onlyOneChild
-        return renderSingleMenu(h, {
-            index: fullPath,
-            inlineIndent,
-            icon: getIcon({icon, showIconMaxDepth, depth}),
-            title,
-            highlight
-        })
-    }
-
-    const {icon, title} = menu.meta
-
-    let children = menu.children.map(child => renderMenu(h, {...props, menu: child, depth: depth + 1}))
-
-    //这里弹出菜单如果包裹了<el-scrollbar>，则在触发mouseleave时，不会触发父菜单的mouseleave事件
-    if (collapse) {
-        //弹出菜单显示父级信息
-        if (showParent) {
-            children = renderChildrenWithParentMenu(h, {icon, title, children})
-        }
-    }
-
-    return renderSubMenu(h, {
-        index: menu.fullPath,
-        inlineIndent,
-        icon: getIcon({icon, showIconMaxDepth, depth}),
-        title,
-        popperClass,
-        highlight,
-        children
-    })
-}
-
-export default {
-    functional: true,
-
-    props: {
-        //菜单对象，即路由配置项
-        menu: Object,
-
-        //弹出菜单的自定义类名
-        popperClass: String,
-
-        //需要高亮的字符串
-        highlight: String,
-
-        //折叠时的展开菜单是否显示父级
-        showParent: Boolean,
-
-        //向左缩进的单位距离
-        inlineIndent: Number,
-
-        //是否为折叠状态
-        collapse: Boolean,
-
-        //能够显示图标的最大深度，不传 或 <0 则不作限制
-        showIconMaxDepth: Number
-    },
-
-    render(h, context) {
-        return renderMenu(h, context.props)
-    }
-}
-</script>
diff --git a/vue/full/src/component/menu/NavMenu/style.scss b/vue/full/src/component/menu/NavMenu/style.scss
deleted file mode 100644
index a1130cf..0000000
--- a/vue/full/src/component/menu/NavMenu/style.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@import "~@/asset/style/var";
-
-.el-menu {
-    //图标的大小
-    .icon {
-        font-size: $menu-icon-size;
-    }
-
-    //图标与文字的间隔
-    .icon + .menu-item-content {
-        margin-left: $menu-icon-text-gap;
-    }
-
-    //菜单的高亮关键字
-    .menu-highlight-result {
-        vertical-align: unset;
-        color: $--color-success;
-    }
-}
-
-//原始样式使用 '>' 可能导致侧边栏折叠时还会显示右侧箭头图标
-//此样式只对垂直状态生效
-.el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
-    display: none;
-}
-
-//hover时，菜单左侧图标放大（弹出菜单的父级不放大）
-.el-menu-item:not(.popover-menu__title),
-.el-submenu__title {
-    > .icon,
-    > .el-tooltip > .icon {
-        transition: transform .1s;
-    }
-
-    &:hover > .icon,
-    &:hover > .el-tooltip > .icon {
-        transform: scale(1.2);
-    }
-}
-
-//侧边栏垂直菜单
-.el-menu--vertical {
-    &.el-menu {
-        overflow-y: auto;
-    }
-
-    &.el-menu,
-    .el-menu {
-        //菜单文字
-        .el-menu-item,
-        .el-submenu__title {
-            > .menu-item-content {
-                text-overflow: ellipsis;
-                overflow: hidden;
-                //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
-                width: $aside-width - $menu-padding * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
-            }
-        }
-
-        //弹出菜单的父级
-        &.el-menu--popup .popover-menu__title {
-            cursor: auto;
-            border-bottom-width: 1px;
-            border-bottom-style: solid;
-        }
-    }
-}
-
-//顶部水平菜单
-.el-menu--horizontal {
-    //顶部菜单的顶级节点
-    &.el-menu {
-        //不显示折叠展开按钮
-        > .el-submenu > .el-submenu__title > .el-submenu__icon-arrow {
-            display: none;
-        }
-
-        //顶级节点的高度以及hover颜色
-        > .el-menu-item,
-        > .el-submenu > .el-submenu__title {
-            height: $nav-height;
-            line-height: $nav-height;
-
-            &:hover {
-                border-bottom: 2px solid $--color-primary;
-            }
-        }
-    }
-
-    &.el-menu,
-    .el-menu {
-        //菜单的文字以及hover颜色
-        .el-menu-item,
-        .el-submenu__title {
-            > span {
-                max-width: 100px;
-            }
-        }
-
-        //submenu的右侧箭头会稍微偏上，不懂为啥
-        .el-submenu__icon-arrow {
-            margin-top: -4px;
-        }
-    }
-}
-
-
-@import "./theme-light";
-@import "./theme-dark";
diff --git a/vue/full/src/component/menu/NavMenu/theme-dark.scss b/vue/full/src/component/menu/NavMenu/theme-dark.scss
deleted file mode 100644
index 0f6d3b8..0000000
--- a/vue/full/src/component/menu/NavMenu/theme-dark.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.el-menu--dark {
-    //侧边栏垂直菜单
-    &.el-menu--vertical {
-        &.el-menu,
-        .el-menu {
-            background-color: $menu-background-dark;
-
-            //菜单的文字以及hover颜色
-            .el-menu-item,
-            .el-submenu__title {
-                color: $menu-text-color-dark;
-
-                &:hover {
-                    color: $menu-text-hover-color-dark;
-                }
-            }
-
-            //子级菜单的背景颜色
-            &.el-menu--inline {
-                background-color: $sub-menu-background-dark;
-            }
-
-            //子级菜单内阴影
-            &.el-menu--inline {
-                box-shadow: inset 0 2px 8px darken($sub-menu-background-dark, 10%)
-            }
-
-            //设置了显示弹出菜单的父级
-            &.el-menu--popup .popover-menu__title {
-                color: $menu-text-hover-color-dark;
-                border-bottom-color: $--border-color-dark;
-            }
-        }
-    }
-
-    //顶部水平菜单
-    &.el-menu--horizontal {
-        &.el-menu,
-        .el-menu {
-            background-color: $root-menu-background-dark;
-
-            //菜单的文字以及hover颜色
-            .el-menu-item,
-            .el-submenu__title {
-                color: $menu-text-color-dark;
-
-                &:hover {
-                    color: $menu-text-hover-color-dark;
-                }
-            }
-        }
-
-        &.el-menu > .el-menu-item,
-        &.el-menu > .el-submenu > .el-submenu__title,
-        &.el-menu > .el-menu-item:hover,
-        &.el-menu > .el-submenu > .el-submenu__title:hover {
-            border-bottom: none;
-        }
-    }
-}
diff --git a/vue/full/src/component/menu/NavMenu/theme-light.scss b/vue/full/src/component/menu/NavMenu/theme-light.scss
deleted file mode 100644
index d27ebbe..0000000
--- a/vue/full/src/component/menu/NavMenu/theme-light.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.el-menu--light {
-    //侧边栏垂直菜单
-    &.el-menu--vertical {
-        &.el-menu,
-        .el-menu {
-            //菜单的文字以及hover颜色
-            .el-menu-item,
-            .el-submenu__title {
-                color: $menu-text-color-light;
-
-                &:hover {
-                    color: $menu-text-hover-color-light;
-                }
-            }
-
-            .el-menu-item::after {
-                position: absolute;
-                top: 10%;
-                right: 0;
-                height: 80%;
-                border-right: 3px solid $--color-primary;
-                opacity: 0;
-                transform: scaleY(0);
-                transition: transform .15s cubic-bezier(.645, .045, .355, 1);
-                content: "";
-            }
-
-            .el-menu-item.is-active {
-                &::before{
-                    position: absolute;
-                    top: 10%;
-                    left: 0;
-                    height: 80%;
-                    width: 100%;
-                    background-color: rgba($--color-primary, .1);
-                    content: "";
-                }
-
-                &::after {
-                    opacity: 1;
-                    transform: scaleY(1);
-                }
-            }
-
-            //弹出菜单的父级
-            &.el-menu--popup .popover-menu__title {
-                color: $menu-text-hover-color-light;
-                border-bottom-color: $--border-color-light;
-            }
-        }
-    }
-
-    //顶部水平菜单
-    &.el-menu--horizontal {
-        &.el-menu,
-        .el-menu {
-            //菜单的文字以及hover颜色
-            .el-menu-item,
-            .el-submenu__title {
-                color: $menu-text-color-light;
-
-                &:hover {
-                    color: $menu-text-hover-color-light;
-                }
-            }
-        }
-    }
-}
diff --git a/vue/full/src/config/index.js b/vue/full/src/config/index.js
index c875322..2f5c5ae 100644
--- a/vue/full/src/config/index.js
+++ b/vue/full/src/config/index.js
@@ -9,6 +9,9 @@ module.exports = {
     //页面标题、登录注册页的标题
     title: 'BiuBiuBiu~',
 
+    //logo地址
+    logo: `/static/img/logo.svg`,
+
     //全局axios的baseUrl、devServer的路由前缀
     apiPrefix: '/api',
 
diff --git a/vue/full/src/globalMethod/Guide/main.vue b/vue/full/src/globalMethod/Guide/main.vue
index 2d313df..d889c3f 100644
--- a/vue/full/src/globalMethod/Guide/main.vue
+++ b/vue/full/src/globalMethod/Guide/main.vue
@@ -87,7 +87,7 @@ export default {
 
     watch: {
         isActive(v) {
-            document.body.classList[v ? 'add' : 'remove']('overflow-hidden')
+            document.body.classList[v ? 'add' : 'remove']('guide-body-overflow-hidden')
         }
     },
 
diff --git a/vue/full/src/globalMethod/Guide/style.scss b/vue/full/src/globalMethod/Guide/style.scss
index bf86ba0..6c4447d 100644
--- a/vue/full/src/globalMethod/Guide/style.scss
+++ b/vue/full/src/globalMethod/Guide/style.scss
@@ -42,6 +42,10 @@
     }
 }
 
+.guide-body-overflow-hidden {
+    overflow: hidden !important;
+}
+
 #guide-stage {
     position: absolute;
     background-color: white;
diff --git a/vue/full/src/globalMethod/Verify/image/btn_move.png b/vue/full/src/globalMethod/Verify/image/btn_move.png
index b2462c3..0c4d596 100644
Binary files a/vue/full/src/globalMethod/Verify/image/btn_move.png and b/vue/full/src/globalMethod/Verify/image/btn_move.png differ
diff --git a/vue/full/src/globalMethod/Verify/image/btn_stop.png b/vue/full/src/globalMethod/Verify/image/btn_stop.png
index 2b5e1c4..cde4b3b 100644
Binary files a/vue/full/src/globalMethod/Verify/image/btn_stop.png and b/vue/full/src/globalMethod/Verify/image/btn_stop.png differ
diff --git a/vue/full/src/globalMethod/Verify/image/icon_close.png b/vue/full/src/globalMethod/Verify/image/icon_close.png
index f90375b..bd0f0ee 100644
Binary files a/vue/full/src/globalMethod/Verify/image/icon_close.png and b/vue/full/src/globalMethod/Verify/image/icon_close.png differ
diff --git a/vue/full/src/globalMethod/Verify/image/icon_info.png b/vue/full/src/globalMethod/Verify/image/icon_info.png
index 7869875..6b345e3 100644
Binary files a/vue/full/src/globalMethod/Verify/image/icon_info.png and b/vue/full/src/globalMethod/Verify/image/icon_info.png differ
diff --git a/vue/full/src/globalMethod/Verify/image/icon_refresh_bottom.png b/vue/full/src/globalMethod/Verify/image/icon_refresh_bottom.png
index 31fcba7..97fccd4 100644
Binary files a/vue/full/src/globalMethod/Verify/image/icon_refresh_bottom.png and b/vue/full/src/globalMethod/Verify/image/icon_refresh_bottom.png differ
diff --git a/vue/full/src/globalMethod/Verify/image/icon_refresh_top.png b/vue/full/src/globalMethod/Verify/image/icon_refresh_top.png
index ba994fe..d8d253e 100644
Binary files a/vue/full/src/globalMethod/Verify/image/icon_refresh_top.png and b/vue/full/src/globalMethod/Verify/image/icon_refresh_top.png differ
diff --git a/vue/full/src/globalMethod/Verify/image/loading.png b/vue/full/src/globalMethod/Verify/image/loading.png
index 1247e1b..4fe413b 100644
Binary files a/vue/full/src/globalMethod/Verify/image/loading.png and b/vue/full/src/globalMethod/Verify/image/loading.png differ
diff --git a/vue/full/src/globalMethod/Verify/image/track.png b/vue/full/src/globalMethod/Verify/image/track.png
index 2022115..0e8957b 100644
Binary files a/vue/full/src/globalMethod/Verify/image/track.png and b/vue/full/src/globalMethod/Verify/image/track.png differ
diff --git a/vue/full/src/globalMethod/Verify/main.vue b/vue/full/src/globalMethod/Verify/main.vue
index 2912535..a66bf27 100644
--- a/vue/full/src/globalMethod/Verify/main.vue
+++ b/vue/full/src/globalMethod/Verify/main.vue
@@ -18,7 +18,7 @@
                     </div>
                 </div>
 
-                <transition name="fade">
+                <transition name="el-fade-in">
                     <div v-show="image.loading" class="puzzle-image-loading">
                         <div class="puzzle-image-loading__icon"/>
                         <div class="puzzle-image-loading__text">加载中...</div>
@@ -34,7 +34,12 @@
                 <div class="slider-track">
                     <div class="slider-tip" :style="stat === 'ready' ? 'opacity: 1' : ''">拖动滑块完成拼图</div>
                 </div>
-                <div class="slider-btn" :style="sliderBtnStyle" @mousedown="moveStart" @touchstart="moveStart"/>
+                <div
+                    :class="{'slider-btn': true, 'is-move': stat === 'move'}"
+                    :style="sliderStyle"
+                    @mousedown="moveStart"
+                    @touchstart="moveStart"
+                />
             </div>
 
             <div class="puzzle-footer">
@@ -53,21 +58,17 @@
 </template>
 
 <script>
-import BtnStopImage from './image/btn_stop.png'
-import BtnMoveImage from './image/btn_move.png'
-
 /*
-* https://github.com/Kevin-269581661/vue-puzzle-verification
-* 网上搬的例子，实际开发建议用极验
+* 在https://github.com/Kevin-269581661/vue-puzzle-verification基础上改造了样式
 * */
 export default {
     name: "PuzzleVerify",
 
     props: {
-        //动画名称，具体请查看transition.scss
+        //动画名称
         transition: {
             type: String,
-            default: 'scale'
+            default: 'puzzle-scale'
         },
         // 画布图片的尺寸
         width: {
@@ -122,13 +123,6 @@ export default {
         resultTipClass() {
             const showResultTip = ['success', 'fail'].includes(this.stat)
             return ['verify-result', `verify-${this.stat}`, showResultTip ? 'show-result' : '']
-        },
-
-        sliderBtnStyle() {
-            return {
-                ...this.sliderStyle,
-                'background-image': `url(${this.stat === 'move' ? BtnMoveImage : BtnStopImage})`
-            }
         }
     },
 
diff --git a/vue/full/src/globalMethod/Verify/style.scss b/vue/full/src/globalMethod/Verify/style.scss
index 39316d8..96db9d7 100644
--- a/vue/full/src/globalMethod/Verify/style.scss
+++ b/vue/full/src/globalMethod/Verify/style.scss
@@ -152,6 +152,11 @@
             width: 25.38%;
             padding: 0 0 25.38% 0;
             cursor: pointer;
+            background-image: url(./image/btn_stop.png);
+
+            &.is-move {
+                background-image: url(./image/btn_move.png);
+            }
         }
     }
 
@@ -212,3 +217,21 @@
         }
     }
 }
+
+.puzzle-scale {
+    &-leave-active {
+        position: absolute
+    }
+
+    &-enter-active,
+    &-leave-active {
+        transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1)
+    }
+
+    &-enter,
+    &-leave,
+    &-leave-to {
+        opacity: 0;
+        transform: scale3d(0, 0, 1)
+    }
+}
diff --git a/vue/full/src/layout/component/Aside/component/MenuSearch.vue b/vue/full/src/layout/component/Aside/component/MenuSearch.vue
deleted file mode 100644
index 57c3b33..0000000
--- a/vue/full/src/layout/component/Aside/component/MenuSearch.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <div class="aside-search">
-        <el-input
-            v-model="value"
-            size="mini"
-            clearable
-            placeholder="搜索菜单"
-            prefix-icon="el-icon-search"
-            @input="search"
-        />
-    </div>
-</template>
-
-<script>
-import {debounce} from "@/util"
-
-export default {
-    name: "MenuSearch",
-
-    data: () => ({value: ''}),
-
-    methods: {
-        search(v) {
-            this.$emit('search', v)
-        }
-    },
-
-    created() {
-        this.search = debounce(this.search)
-    },
-
-    beforeDestroy() {
-        this.$emit('search', '')
-    }
-}
-</script>
-
-<style lang="scss">
-@import "~@/asset/style/var";
-
-//侧边栏折叠时不显示
-.collapse .aside-search {
-    display: none;
-}
-
-.aside-search {
-    margin: 12px 8px;
-}
-
-//暗色主题
-.dark .aside-search .el-input__inner {
-    border: none;
-    color: $--color-white;
-    background-color: lighten($menu-background-dark, 5%);
-}
-</style>
diff --git a/vue/full/src/layout/component/Aside/component/OnePartRoot.vue b/vue/full/src/layout/component/Aside/component/OnePartRoot.vue
deleted file mode 100644
index 8cd661f..0000000
--- a/vue/full/src/layout/component/Aside/component/OnePartRoot.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-<script type="text/jsx">
-import hamburgerMixin from '@/layout/mixin/hamburger'
-import menuMixin from "@/layout/mixin/menu"
-import menuSearchMixin from '@/layout/mixin/menuSearch'
-import {getters as appGetters} from "@/layout/store/app"
-import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
-import {getters as pageGetters} from "@/layout/store/page"
-import Logo from '@/layout/component/Logo'
-import NavMenu from '@/component/menu/NavMenu'
-import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util"
-import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu"
-
-export default {
-    name: "Sidebar",
-
-    mixins: [hamburgerMixin, menuMixin, menuSearchMixin],
-
-    components: {Logo, NavMenu},
-
-    data() {
-        return {
-            //鼠标是否在侧边栏外
-            mouseOutside: true
-        }
-    },
-
-    computed: {
-        isMobile: () => appGetters.isMobile,
-
-        //侧边栏菜单
-        menus: () => getSidebarMenus(),
-
-        //当是移动端或设置了侧边栏自动隐藏时将侧边栏用抽屉包裹
-        renderInDrawer() {
-            return this.isMobile || asideGetters.autoHide
-        },
-        //el-drawer的自定义类名
-        drawerClass() {
-            return this.isMobile || pageGetters.position !== 'top-bottom'
-                ? undefined
-                : 'drawer-behind-header'
-        },
-
-        //侧边栏的显隐状态，true显示、false隐藏
-        show() {
-            //store中要显示那就显示
-            if (asideGetters.show) return true
-
-            //移动端，false
-            if (this.isMobile) return false
-
-            //未设置侧边栏自动隐藏，false
-            if (!asideGetters.autoHide) return false
-
-            //鼠标在侧边栏内，true
-            if (!this.mouseOutside) return true
-
-            //侧边栏处于折叠状态 且 存在弹出的子菜单，true
-            return this.collapse && this.openedMenuNum > 0
-        },
-
-        //侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠
-        collapse() {
-            return asideGetters.collapse && !this.isMobile
-        },
-
-        //判断是否需要绑定鼠标移动的事件
-        shouldBindMouseMoveEvent() {
-            //如果是移动端，false
-            if (this.isMobile) return false
-
-            //如果未启用侧边栏自动隐藏，false
-            if (!asideGetters.autoHide) return false
-
-            //侧边栏为打开状态，false
-            if (this.show) return false
-
-            //鼠标在侧边栏外部，true
-            return this.mouseOutside
-        },
-
-        //是否需要显示logo
-        showLogo() {
-            return pageGetters.showLogo && (this.isMobile || pageGetters.position === 'left-right')
-        },
-
-        //是否需要使用侧边栏的切换动画
-        switchTransition() {
-            return !this.isMobile && appGetters.navMode !== 'aside'
-        },
-
-        //是否需要显示搜索框
-        renderMenuSearch() {
-            return !this.isMobile && asideGetters.search
-        },
-
-        className() {
-            return {'sidebar': true, 'collapse': this.collapse}
-        }
-    },
-
-    watch: {
-        '$route.path': {
-            immediate: true,
-            handler(v) {
-                //如果是redirect跳转，则跳过
-                if (v.startsWith('/redirect')) return
-
-                this.activeMenu = getActiveMenuByRoute(this.$route)
-
-                const menu = this.$_getElMenuInstance()
-                if (!menu) return
-                const item = menu.items[this.activeMenu]
-
-                //如果侧边栏中没有对应的激活菜单，则收起全部
-                if (!item) return menu.openedMenus = []
-
-                //由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发
-                this.onSelect(item.index, item.indexPath, item, false)
-
-                //仅当非抽屉模式下滚动至激活的菜单
-                !this.renderInDrawer && this.$nextTick(this.moveToCurrentMenu)
-            }
-        },
-
-        //切换至移动端时收起侧边栏
-        isMobile: {
-            immediate: true,
-            handler(v) {
-                v && asideMutations.close()
-            }
-        },
-
-        //抽屉模式下侧边栏显示时滚动至激活菜单
-        show(v) {
-            v && this.$nextTick(this.moveToCurrentMenu)
-        },
-
-        //添加或移除鼠标移动事件
-        shouldBindMouseMoveEvent: {
-            immediate: true,
-            handler(v) {
-                //尝试移除之前可能添加的事件
-                window.removeEventListener('mousemove', this.moveEvent)
-
-                v && window.addEventListener('mousemove', this.moveEvent)
-            }
-        }
-    },
-
-    methods: {
-        //开启侧边栏自动隐藏后的鼠标移动事件
-        moveEvent(e) {
-            //鼠标移动至屏幕左侧边缘时，标识鼠标在侧边栏内部
-            if (e.clientX <= 1) this.mouseOutside = false
-        },
-
-        //模拟选中菜单
-        onSelect(index, indexPath, item, jump = true) {
-            //开启手风琴模式时，激活没有子级的菜单时收起其它展开项
-            if (asideGetters.uniqueOpen && indexPath.length === 1) {
-                const menu = this.$_getElMenuInstance()
-                const opened = menu.openedMenus
-                opened.forEach(i => i !== index && menu.closeMenu(i))
-            }
-
-            jump && this.actionOnSelectMenu(index)
-
-            //抽屉模式下需要关闭抽屉
-            if (this.renderInDrawer && this.show) {
-                asideMutations.close()
-                this.mouseOutside = true
-            }
-        },
-
-        //渲染el-menu时监听其展开菜单
-        watchOpenedMenus() {
-            //尝试取消之前设置的监听
-            if (this.watchOpenedMenusCallback) {
-                this.watchOpenedMenusCallback()
-                this.watchOpenedMenusCallback = null
-            }
-
-            const menu = this.$_getElMenuInstance()
-            if (!menu) return
-
-            this.watchOpenedMenusCallback = menu.$watch('openedMenus', v => {
-                this.openedMenuNum = v.length
-            })
-        },
-
-        //滚动至当前激活的菜单
-        moveToCurrentMenu() {
-            moveToActiveMenuVertically(this.$_getElMenuInstance())
-        }
-    },
-
-    beforeDestroy() {
-        window.removeEventListener('mousemove', this.moveEvent)
-    },
-
-    render() {
-        if (this.menus.length <= 0) return
-
-        const aside = (
-            <div
-                class={this.className}
-                on-mouseleave={() => this.mouseOutside = true}
-                on-mouseenter={() => this.mouseOutside = false}
-            >
-                {this.showLogo && <logo show-title={!this.collapse}/>}
-
-                {this.renderMenuSearch && <menu-search on-search={this.handlerSearch}/>}
-
-                <nav-menu
-                    ref="nav-menu"
-                    menus={this.menus}
-                    theme={asideGetters.theme}
-                    collapse={this.collapse}
-                    default-active={this.activeMenu}
-                    unique-opened={asideGetters.uniqueOpen}
-                    show-parent-on-collapse={asideGetters.showParentOnCollapse}
-                    switch-transition={this.switchTransition}
-                    switch-transition-name="sidebar"
-                    on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}}
-                />
-
-                {!this.renderInDrawer && this.renderHamburger && <hamburger class="el-menu-item"/>}
-            </div>
-        )
-
-        if (this.renderInDrawer) {
-            return (
-                <el-drawer
-                    visible={this.show}
-                    with-header={false}
-                    custom-class={this.drawerClass}
-                    modal={this.isMobile} //设置自动隐藏时不使用遮罩
-                    direction="ltr"
-                    size="auto"
-                    on-close={asideMutations.close}
-                >
-                    {aside}
-                </el-drawer>
-            )
-        }
-
-        return aside
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Aside/component/TwoPartRoot.vue b/vue/full/src/layout/component/Aside/component/TwoPartRoot.vue
deleted file mode 100644
index 761135a..0000000
--- a/vue/full/src/layout/component/Aside/component/TwoPartRoot.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<script type="text/jsx">
-import menuMixin from "@/layout/mixin/menu"
-import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
-import {getters as asideGetters} from "@/layout/store/aside"
-import {getters as pageGetters} from "@/layout/store/page"
-import Logo from '@/layout/component/Logo'
-import {scrollIntoViewVertically} from "@/util/browser"
-
-const Item = {
-    functional: true,
-
-    props: {
-        title: String,
-        icon: String,
-        active: Boolean
-    },
-
-    render(h, context) {
-        const {title, icon, active} = context.props
-        const {click} = context.listeners
-
-        return (
-            <li
-                class={{'el-menu-item': true, 'is-active': active}}
-                on-click={click}
-            >
-                <v-icon icon={icon}/>
-                <span class="menu-item-content">{title}</span>
-            </li>
-        )
-    }
-}
-
-export default {
-    name: "RootSidebar",
-
-    mixins: [menuMixin],
-
-    components: {Logo, Item},
-
-    data() {
-        return {
-            //鼠标是否在外部，用于判断是否需要展开折叠
-            mouseOutside: true
-        }
-    },
-
-    computed: {
-        menus() {
-            return appGetters.menus.map(root => ({...root, children: undefined}))
-        },
-
-        //是否需要显示logo
-        showLogo() {
-            return pageGetters.showLogo && pageGetters.position === 'left-right'
-        },
-
-        containerClass() {
-            return {'root-sidebar': true, 'collapse': this.mouseOutside}
-        },
-
-        menuClass() {
-            return `el-menu el-menu--vertical el-menu--${asideGetters.theme}`
-        }
-    },
-
-    watch: {
-        //路由变化时设置高亮菜单
-        $route: {
-            immediate: true,
-            handler(to) {
-                const {path, matched} = to
-
-                //使用/redirect跳转 或 无匹配路由 时跳过
-                if (path.startsWith('/redirect') || matched.length === 0) {
-                    return
-                }
-
-                this.setActiveRootMenu(this.navMode, to)
-
-                //滚动至激活菜单
-                if (!this._isMounted) return
-                this.$nextTick(() => {
-                    scrollIntoViewVertically(
-                        this.$el.querySelector('.el-menu-item.is-active'),
-                        this.$el.querySelector('.el-menu.el-menu--vertical')
-                    )
-                })
-            }
-        }
-    },
-
-    methods: {
-        //设置当前激活的顶部菜单
-        setActiveRootMenu(navMode = this.navMode, {matched} = this.$route) {
-            const rootPath = matched[0].path || '/'
-            appMutations.activeRootMenu(rootPath)
-        },
-        onSelect(index) {
-            //点击相同菜单不刷新页面
-            if (index !== appGetters.activeRootMenu) {
-                this.actionOnSelectMenu(index)
-            }
-
-            //收起
-            this.mouseOutside = true
-        },
-    },
-
-    render() {
-        return (
-            <div class="root-sidebar-container">
-                <div
-                    class={this.containerClass}
-                    on-mouseleave={() => this.mouseOutside = true}
-                    on-mouseenter={() => this.mouseOutside = false}
-                >
-                    {this.showLogo && <logo show-title={!this.mouseOutside}/>}
-                    <ul class={this.menuClass}>
-                        {this.menus.map(({fullPath, meta: {title, icon}}) => (
-                            <item
-                                title={title}
-                                icon={icon}
-                                active={fullPath === appGetters.activeRootMenu}
-                                on-click={() => this.onSelect(fullPath)}
-                            />
-                        ))}
-                    </ul>
-                </div>
-            </div>
-        )
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Aside/component/TwoPartSub.vue b/vue/full/src/layout/component/Aside/component/TwoPartSub.vue
deleted file mode 100644
index c7cc450..0000000
--- a/vue/full/src/layout/component/Aside/component/TwoPartSub.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script type="text/jsx">
-import hamburgerMixin from '@/layout/mixin/hamburger'
-import menuMixin from "@/layout/mixin/menu"
-import menuSearchMixin from '@/layout/mixin/menuSearch'
-import {getters as appGetters} from "@/layout/store/app"
-import {getters as asideGetters} from "@/layout/store/aside"
-import NavMenu from "@/component/menu/NavMenu"
-import {getActiveMenuByRoute, getSidebarMenus} from "@/layout/util"
-import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu"
-
-export default {
-    name: "SubSidebar",
-
-    mixins: [hamburgerMixin, menuMixin, menuSearchMixin],
-
-    components: {NavMenu},
-
-    computed: {
-        //父级菜单
-        rootMenu() {
-            const active = appGetters.activeRootMenu
-            return appGetters.menus.find(i => i.fullPath === active)
-        },
-
-        //侧边栏菜单
-        menus: () => getSidebarMenus(),
-
-        //侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠
-        collapse() {
-            return asideGetters.collapse && !asideGetters.isMobile
-        },
-
-        className() {
-            return {'sub-sidebar': true, 'collapse': this.collapse}
-        }
-    },
-
-    watch: {
-        '$route.path': {
-            immediate: true,
-            handler(v) {
-                //如果是redirect跳转，则跳过
-                if (v.startsWith('/redirect')) return
-
-                this.activeMenu = getActiveMenuByRoute(this.$route)
-
-                const menu = this.$_getElMenuInstance()
-                if (!menu) return
-                const item = menu.items[this.activeMenu]
-
-                //如果侧边栏中没有对应的激活菜单，则收起全部
-                if (!item) return menu.openedMenus = []
-
-                //由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发
-                this.onSelect(item.index, item.indexPath, item, false)
-
-                //滚动至激活的菜单
-                this.$nextTick(this.moveToCurrentMenu)
-            }
-        }
-    },
-
-    methods: {
-        //模拟选中菜单
-        onSelect(index, indexPath, item, jump = true) {
-            //开启手风琴模式时，激活没有子级的菜单时收起其它展开项
-            if (asideGetters.uniqueOpen && indexPath.length === 1) {
-                const menu = this.$_getElMenuInstance()
-                const opened = menu.openedMenus
-                opened.forEach(i => i !== index && menu.closeMenu(i))
-            }
-
-            jump && this.actionOnSelectMenu(index)
-        },
-
-        //滚动至当前激活的菜单
-        moveToCurrentMenu() {
-            moveToActiveMenuVertically(this.$_getElMenuInstance())
-        }
-    },
-
-    render() {
-        if (this.menus.length <= 0) return
-
-        return (
-            <div class={this.className}>
-                <div class="sub-sidebar-title">
-                    {this.rootMenu && this.rootMenu.meta.title}
-                </div>
-
-                {asideGetters.search && <menu-search on-search={this.handlerSearch}/>}
-
-                <nav-menu
-                    menus={this.menus}
-                    theme={asideGetters.theme}
-                    collapse={this.collapse}
-                    default-active={this.activeMenu}
-                    unique-opened={asideGetters.uniqueOpen}
-                    show-parent-on-collapse={asideGetters.showParentOnCollapse}
-                    switch-transition
-                    switch-transition-name="sidebar"
-                    on-select={this.onSelect}
-                />
-
-                {this.renderHamburger && <hamburger class="el-menu-item"/>}
-            </div>
-        )
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Aside/index.vue b/vue/full/src/layout/component/Aside/index.vue
deleted file mode 100644
index 43d4420..0000000
--- a/vue/full/src/layout/component/Aside/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script type="text/jsx">
-import OnePart from './component/OnePartRoot'
-import TwoPartRoot from './component/TwoPartRoot'
-import TwoPartSub from './component/TwoPartSub'
-import {getters as appGetters} from "@/layout/store/app"
-import {getters as asideGetters} from "@/layout/store/aside"
-
-export default {
-    functional: true,
-
-    render() {
-        let children
-
-        //移动端只能使用抽屉模式的单层侧边栏
-        if (appGetters.isMobile) {
-            children = <OnePart/>
-        }
-        else {
-            switch (appGetters.navMode) {
-                case 'mix':
-                case 'aside':
-                    children = <OnePart/>
-                    break
-                case 'aside-two-part':
-                    children = [<TwoPartRoot/>, <TwoPartSub/>]
-            }
-        }
-
-        return <aside class={`aside ${asideGetters.theme}`}>{children}</aside>
-    }
-}
-</script>
-
-<style lang="scss" src="./style.scss"></style>
diff --git a/vue/full/src/layout/component/Aside/style.scss b/vue/full/src/layout/component/Aside/style.scss
deleted file mode 100644
index f5603b5..0000000
--- a/vue/full/src/layout/component/Aside/style.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-@import "~@/asset/style/var";
-@import "~@/asset/style/mixin.scss";
-
-.aside {
-    display: flex;
-    z-index: 11;
-
-    //移动端下侧边栏抽屉不能设置z-index，否则会被el-drawer的遮罩遮住
-    @include mobile {
-        z-index: auto !important;
-    }
-
-    //单层和双层侧边栏
-    .sidebar,
-    .root-sidebar,
-    .sub-sidebar {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: $aside-width;
-        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-        transition: all 0.2s;
-
-        //折叠状态
-        &.collapse {
-            width: $aside-collapse-width;
-
-            //隐藏菜单文字
-            .menu-item-content,
-            .sub-sidebar-title {
-                display: none;
-            }
-        }
-    }
-
-    //垂直菜单占满剩余空间
-    .el-menu--vertical {
-        flex: 1;
-    }
-
-    //底部汉堡包
-    .hamburger {
-        border-top-width: 1px;
-        border-top-style: solid;
-    }
-}
-
-//页面为上下结构时，侧边栏的抽屉模式需要扣除导航栏的高度
-.el-drawer.drawer-behind-header {
-    top: $nav-height;
-}
-
-
-/* 双侧侧边栏开始 */
-
-.root-sidebar-container {
-    position: relative;
-    width: $aside-collapse-width;
-    height: 100%;
-}
-
-.root-sidebar {
-    position: absolute;
-    overflow: hidden;
-    z-index: 1;
-    box-shadow: none !important;
-    border-right-width: 1px;
-    border-right-style: solid;
-}
-
-.sub-sidebar-title {
-    height: $nav-height;
-    line-height: $nav-height;
-    padding-left: $menu-padding;
-    font-size: 16px;
-}
-
-/* 双侧侧边栏结束 */
-
-
-/* 侧边栏切换动画开始 */
-
-.sidebar-enter-active {
-    transition: all 0.2s;
-}
-
-.sidebar-enter,
-.sidebar-leave-active {
-    opacity: 0;
-    transform: translateY(30px) skewY(10deg)
-}
-
-.sidebar-leave-active {
-    position: absolute;
-}
-
-/* 侧边栏切换动画结束 */
-
-
-@import "theme-light";
-@import "theme-dark";
diff --git a/vue/full/src/layout/component/Aside/theme-dark.scss b/vue/full/src/layout/component/Aside/theme-dark.scss
deleted file mode 100644
index c2b181c..0000000
--- a/vue/full/src/layout/component/Aside/theme-dark.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.aside.dark {
-    &,
-    > .el-drawer__wrapper .el-drawer__body {
-        background-color: $menu-background-dark;
-    }
-
-    .root-sidebar,
-    .root-sidebar > .el-menu--vertical.el-menu {
-        background-color: $root-menu-background-dark;
-    }
-
-    .root-sidebar {
-        border-right-color: $--border-color-dark;
-    }
-
-    .sub-sidebar-title {
-        color: $--color-white;
-    }
-
-    .hamburger {
-        border-top-color: $--border-color-dark;
-
-        i {
-            color: $menu-text-color-dark;
-        }
-    }
-}
diff --git a/vue/full/src/layout/component/Aside/theme-light.scss b/vue/full/src/layout/component/Aside/theme-light.scss
deleted file mode 100644
index a6e0e78..0000000
--- a/vue/full/src/layout/component/Aside/theme-light.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.aside.light {
-    .root-sidebar {
-        background-color: $--color-white;
-        border-right-color: $--border-color-light;
-    }
-
-    .hamburger {
-        border-top-color: $--border-color-light;
-
-        i {
-            color: $menu-text-color-light;
-        }
-    }
-}
diff --git a/vue/full/src/layout/component/Footer/index.vue b/vue/full/src/layout/component/Footer/index.vue
new file mode 100644
index 0000000..74a2ab5
--- /dev/null
+++ b/vue/full/src/layout/component/Footer/index.vue
@@ -0,0 +1,11 @@
+<template functional>
+    <div class="copyright">
+        Copyright © 2020 - <a href="https://github.com/toesbieya" target="_blank">toesbieya</a>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Footer"
+}
+</script>
diff --git a/vue/full/src/layout/component/Footer/style.scss b/vue/full/src/layout/component/Footer/style.scss
new file mode 100644
index 0000000..37f8167
--- /dev/null
+++ b/vue/full/src/layout/component/Footer/style.scss
@@ -0,0 +1,9 @@
+.page-footer > .copyright {
+    color: $--color-text-secondary;
+    font-size: 14px;
+
+    > a:hover {
+        color: $--color-primary;
+        text-decoration: underline;
+    }
+}
diff --git a/vue/full/src/layout/component/Hamburger.vue b/vue/full/src/layout/component/Hamburger.vue
deleted file mode 100644
index 6812e6e..0000000
--- a/vue/full/src/layout/component/Hamburger.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script type="text/jsx">
-import {getters as appGetters} from "@/layout/store/app"
-import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
-
-export default {
-    name: 'Hamburger',
-
-    render() {
-        //考虑侧边栏可能是抽屉的情况
-        const collapsed = appGetters.isMobile ? asideGetters.show : !asideGetters.collapse
-        const className = `hamburger ${collapsed ? 'collapsed' : ''}`
-
-        return (
-            <div
-                class={className}
-                title={`${collapsed ? '折叠' : '展开'}侧边栏`}
-                on-click={asideMutations.switch}
-            >
-                <i class="el-icon-s-unfold"/>
-            </div>
-        )
-    }
-}
-</script>
-
-<style>
-.hamburger.collapsed > i {
-    transform: rotate(180deg);
-}
-</style>
diff --git a/vue/full/src/layout/component/Logo.vue b/vue/full/src/layout/component/Logo.vue
deleted file mode 100644
index 2f55314..0000000
--- a/vue/full/src/layout/component/Logo.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script type="text/jsx">
-import {title} from '@/config'
-
-export default {
-    name: 'Logo',
-
-    functional: true,
-
-    props: {showTitle: Boolean},
-
-    render(h, context) {
-        const {showTitle} = context.props
-
-        const logoClass = {'logo-container': true, 'no-title': !showTitle}
-
-        return (
-            <div class={logoClass}>
-                <router-link class="logo-link" to="/">
-                    <img src={`${process.env.BASE_URL}static/img/logo.svg`}/>
-                    {showTitle && <h1>{title}</h1>}
-                </router-link>
-            </div>
-        )
-    }
-}
-</script>
-
-<style lang="scss">
-@import "~@/asset/style/var";
-
-$logoSize: 30px;
-
-.logo-container {
-    width: 100%;
-    height: $nav-height;
-    line-height: $nav-height;
-    padding: 0 $menu-padding;
-
-    .logo-link {
-        display: block;
-        height: 100%;
-
-        > img {
-            display: inline-block;
-            height: $logoSize;
-            vertical-align: middle;
-
-            & + h1 {
-                margin-left: 12px;
-            }
-        }
-
-        > h1 {
-            display: inline-block;
-            margin: 0;
-            color: $--color-primary;
-            font-weight: 600;
-            line-height: $nav-height;
-            font-size: 18px;
-            vertical-align: middle;
-        }
-    }
-
-    &.no-title {
-        padding-left: ($aside-collapse-width - $logoSize) / 2;
-    }
-}
-
-.dark .logo-container .logo-link > h1 {
-    color: #ffffff;
-}
-</style>
diff --git a/vue/full/src/layout/component/Navbar/component/HeadMenu.vue b/vue/full/src/layout/component/Navbar/component/HeadMenu.vue
deleted file mode 100644
index c3e9cb1..0000000
--- a/vue/full/src/layout/component/Navbar/component/HeadMenu.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script type="text/jsx">
-/**
- * 顶部菜单，参考了ant design的响应式设计
- */
-import menuMixin from "@/layout/mixin/menu"
-import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
-import NavMenu from "@/component/menu/NavMenu"
-import NavMenuItem from "@/component/menu/NavMenu/item"
-import {getActiveMenuByRoute} from "@/layout/util"
-import {isDom} from "@/util/browser"
-
-export default {
-    name: "HeadMenu",
-
-    mixins: [menuMixin],
-
-    components: {NavMenu, NavMenuItem},
-
-    props: {
-        //是否在只有一个顶部菜单时仍然渲染
-        alwaysShow: Boolean,
-
-        //主题由父组件控制
-        theme: String
-    },
-
-    data() {
-        return {
-            //最后一个不被隐藏的顶部菜单的数组下标
-            //为undefined时，说明不需要隐藏菜单，为-1时，说明需要隐藏全部菜单
-            lastVisibleIndex: undefined,
-
-            //用于生成el-submenu的key
-            seed: 0
-        }
-    },
-
-    computed: {
-        navMode: () => appGetters.navMode,
-
-        menus() {
-            if (appGetters.isMobile) return []
-            switch (this.navMode) {
-                case 'aside':
-                    return []
-                case 'head' :
-                    return appGetters.menus
-                case 'mix':
-                    return appGetters.menus.map(root => ({...root, children: undefined}))
-            }
-        },
-
-        //实际用于渲染的菜单数组
-        realMenus() {
-            const {lastVisibleIndex, menus} = this
-
-            //不需要隐藏菜单
-            if (lastVisibleIndex === undefined) {
-                return menus
-            }
-
-            const fullPath = `_${this.seed}`
-
-            //隐藏全部菜单
-            if (lastVisibleIndex === -1) {
-                return [{fullPath, meta: {icon: 'el-icon-menu'}, children: menus}]
-            }
-
-            const visible = menus.slice(0, lastVisibleIndex + 1)
-            const hidden = menus.slice(lastVisibleIndex + 1)
-
-            visible.push({fullPath, meta: {title: '...'}, children: hidden})
-
-            return visible
-        }
-    },
-
-    watch: {
-        //路由变化时设置高亮菜单
-        $route: {
-            immediate: true,
-            handler(to) {
-                const {path, matched} = to
-                //使用/redirect跳转 或 无匹配路由 时跳过
-                if (path.startsWith('/redirect') || matched.length === 0) {
-                    return
-                }
-                this.setActiveMenu(this.navMode, to)
-            }
-        },
-
-        //切换导航模式时重新设置高亮菜单
-        navMode: {
-            immediate: true,
-            handler(mode) {
-                this.setActiveMenu(mode)
-            }
-        },
-
-        //变动时修改种子，避免组件不更新
-        lastVisibleIndex() {
-            this.seed++
-        }
-    },
-
-    methods: {
-        setActiveMenu(navMode = this.navMode, {path, meta, matched} = this.$route) {
-            //设置当前激活的顶部菜单
-            const rootPath = matched[0].path || '/'
-            appMutations.activeRootMenu(rootPath)
-
-            //只有在混合导航模式下才将当前激活的顶部菜单认为是当前菜单
-            if (navMode === 'mix') {
-                this.activeMenu = rootPath
-            }
-            //否则按照路由配置项设置
-            else this.activeMenu = getActiveMenuByRoute({path, meta})
-        },
-        onSelect(index) {
-            //混合导航模式下，点击相同菜单不刷新页面
-            if (this.navMode === 'mix' && index === appGetters.activeRootMenu) {
-                return
-            }
-            this.actionOnSelectMenu(index)
-        },
-
-        //获取el-menu的dom
-        getMenuEl() {
-            return this.$el
-        },
-        //获取初始菜单的总宽度，只在mounted时调用一次
-        setChildrenWidth() {
-            const ul = this.getMenuEl()
-            if (!isDom(ul)) return
-
-            const menuItemNodes = ul.children
-            if (!menuItemNodes || menuItemNodes.length === 0) return
-
-            //'更多'菜单的宽度，由于不考虑自定义，所以直接写死
-            this.overflowedIndicatorWidth = 50
-            this.menuItemSizes = Array.from(menuItemNodes).map(i => i.getBoundingClientRect().width)
-            this.originalTotalWidth = this.menuItemSizes.reduce((acc, cur) => acc + cur, 0)
-        },
-
-        resize() {
-            const width = this.getMenuEl().getBoundingClientRect().width
-
-            let lastVisibleIndex = undefined
-
-            //如果初始菜单的总宽度超出容器宽度
-            if (this.originalTotalWidth > width) {
-                lastVisibleIndex = -1
-
-                //得到满足总宽度不超出容器宽度的最大菜单下标
-                let currentSumWidth = 0
-                for (const liWidth of this.menuItemSizes) {
-                    currentSumWidth += liWidth
-                    if (currentSumWidth + this.overflowedIndicatorWidth > width) {
-                        break
-                    }
-                    lastVisibleIndex += 1
-                }
-            }
-
-            this.lastVisibleIndex = lastVisibleIndex
-        },
-        createResizeObserver() {
-            //菜单未渲染时，移除之前的observer
-            if (!isDom(this.getMenuEl())) {
-                if (this.resizeObserver) {
-                    this.resizeObserver.disconnect()
-                    this.resizeObserver = null
-                }
-                return
-            }
-
-            //如果已创建observer，则返回
-            if (this.resizeObserver) return
-
-            this.resizeObserver = new ResizeObserver(this.resize)
-            this.resizeObserver.observe(this.getMenuEl())
-
-            this.$once('hook:beforeDestroy', () => {
-                this.resizeObserver && this.resizeObserver.disconnect()
-            })
-        }
-    },
-
-    mounted() {
-        this.setChildrenWidth()
-        this.createResizeObserver()
-    },
-
-    render() {
-        if (this.menus.length <= 0 || this.menus.length === 1 && !this.alwaysShow) {
-            return
-        }
-
-        return (
-            <nav-menu
-                menus={this.realMenus}
-                mode="horizontal"
-                theme={this.theme}
-                default-active={this.activeMenu}
-                on-select={this.onSelect}
-            />
-        )
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Navbar/index.vue b/vue/full/src/layout/component/Navbar/index.vue
deleted file mode 100644
index 0be9479..0000000
--- a/vue/full/src/layout/component/Navbar/index.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script type="jsx">
-import {mapState} from 'vuex'
-import hamburgerMixin from '@/layout/mixin/hamburger'
-import Bell from "./component/Bell"
-import HeadMenu from "./component/HeadMenu"
-import Logo from "@/layout/component/Logo"
-import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
-import {getters as navbarGetters} from "@/layout/store/navbar"
-import {getters as pageGetters} from "@/layout/store/page"
-import {elConfirm} from "@/util/message"
-import {refreshPage} from "@/util/route"
-
-export default {
-    name: 'navbar',
-
-    mixins: [hamburgerMixin],
-
-    components: {Bell, HeadMenu, Logo},
-
-    data() {
-        return {
-            guideSteps: [
-                {
-                    element: '.setting-btn.navbar-item',
-                    content: '这是个性设置按钮，可以根据自己喜好进行一些设置',
-                },
-                {
-                    element: '.navbar .el-dropdown.navbar-item',
-                    content: '这是用户中心',
-                },
-                {
-                    element: '.tags-view-container',
-                    content: `<p>这是tab栏，可以右键tab页进行相关操作</p>
-                              <p>ctrl + ← → 可以进行tab页的左右切换</p>
-                              <p>当tab过多时通过鼠标滚轮来滚动</p>
-                              <p>双击可以关闭</p>`,
-                },
-            ]
-        }
-    },
-
-    computed: {
-        ...mapState('user', ['avatar', 'name', 'prepareLogout']),
-
-        //渲染导航栏logo的条件
-        //①桌面端
-        //②设置了显示logo
-        //③导航模式为顶部导航或页面为上下结构
-        renderLogo() {
-            return !appGetters.isMobile
-                && pageGetters.showLogo
-                && (appGetters.navMode === 'head' || pageGetters.position === 'top-bottom')
-        },
-
-        //渲染顶部导航菜单的条件
-        //①桌面端
-        //②导航模式为顶部导航或混合导航
-        renderHeadMenu() {
-            return !appGetters.isMobile && ['head', 'mix'].includes(appGetters.navMode)
-        },
-
-        className() {
-            return `navbar ${navbarGetters.theme}`
-        }
-    },
-
-    methods: {
-        command(command) {
-            switch (command) {
-                case 'user':
-                    const path = '/user'
-                    this.$route.path !== path && this.$router.push(path)
-                    break
-                case 'guide':
-                    this.$guide(this.guideSteps)
-                    break
-                case 'logout':
-                    if (!this.prepareLogout) {
-                        elConfirm('确认退出?')
-                            .then(() => this.$store.dispatch('user/logout'))
-                    }
-                    break
-            }
-        },
-
-        clickRefreshBtn() {
-            refreshPage()
-        },
-
-        openSettingDrawer() {
-            appMutations.showSettingDrawer(true)
-        }
-    },
-
-    render() {
-        return (
-            <nav class={this.className}>
-                {this.renderLogo && <logo show-title/>}
-
-                {this.renderHamburger && <hamburger class="navbar-item navbar-icon"/>}
-
-                <div style="flex: 1">
-                    {this.renderHeadMenu && <head-menu always-show theme={navbarGetters.theme}/>}
-                </div>
-
-                <div>
-                    <bell class="navbar-item"/>
-
-                    <div
-                        class="navbar-item"
-                        title="刷新"
-                        on-click={this.clickRefreshBtn}
-                    >
-                        <i class="el-icon-refresh-right navbar-icon"/>
-                    </div>
-
-                    <div
-                        class="setting-btn navbar-item"
-                        title="个性设置"
-                        on-click={this.openSettingDrawer}
-                    >
-                        <i class="el-icon-s-operation navbar-icon"/>
-                    </div>
-
-                    <el-dropdown class="navbar-item" on-command={this.command}>
-                        <div class="avatar-wrapper">
-                            <el-avatar size={30} src={this.avatar} icon="el-icon-user-solid"/>
-                            <span class="hidden-xs">{this.name}</span>
-                        </div>
-                        <el-dropdown-menu
-                            slot="dropdown"
-                            class={navbarGetters.theme}
-                            visible-arrow={false}
-                        >
-                            <el-dropdown-item icon="el-icon-user" command="user">
-                                个人中心
-                            </el-dropdown-item>
-                            <el-dropdown-item class="hidden-xs" icon="el-icon-guide" command="guide">
-                                新手指引
-                            </el-dropdown-item>
-                            <el-dropdown-item icon="el-icon-switch-button" command="logout">
-                                退出登录
-                            </el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                </div>
-            </nav>
-        )
-    }
-}
-</script>
-
-<style lang="scss" src="./style.scss"></style>
diff --git a/vue/full/src/layout/component/Navbar/style.scss b/vue/full/src/layout/component/Navbar/style.scss
deleted file mode 100644
index f77d547..0000000
--- a/vue/full/src/layout/component/Navbar/style.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "~@/asset/style/var";
-
-.navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    height: $nav-height;
-    padding-left: $navbar-padding-left;
-    z-index: 10;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-    transition: all .2s;
-
-    > div {
-        display: flex;
-        flex-wrap: nowrap;
-        height: 100%;
-    }
-
-    .navbar-icon {
-        font-size: 18px;
-    }
-
-    .navbar-item {
-        display: flex;
-        align-items: center;
-        padding: 0 8px;
-        cursor: pointer;
-    }
-
-    .logo-container {
-        width: auto;
-        min-width: $aside-width - $navbar-padding-left;
-        padding-left: $menu-padding - $navbar-padding-left;
-    }
-
-    .avatar-wrapper {
-        display: flex;
-        align-items: center;
-        height: 100%;
-
-        span {
-            margin-right: 5px;
-            font-size: 18px;
-        }
-    }
-}
-
-@import "theme-light";
-@import "theme-dark";
diff --git a/vue/full/src/layout/component/Navbar/theme-dark.scss b/vue/full/src/layout/component/Navbar/theme-dark.scss
deleted file mode 100644
index 4cd9a22..0000000
--- a/vue/full/src/layout/component/Navbar/theme-dark.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.navbar.dark {
-    background-color: $root-menu-background-dark;
-
-    .navbar-item {
-        color: $navbar-item-color-dark;
-
-        &:hover {
-            background-color: $navbar-item-hover-color-dark;
-        }
-    }
-}
-
-//暗色主题的下拉菜单
-.dark.el-dropdown-menu {
-    background-color: $root-menu-background-dark;
-    border: none;
-
-    .el-dropdown-menu__item {
-        color: $menu-text-color-dark;
-
-        &:hover,
-        &:focus {
-            background-color: unset;
-            color: $menu-text-hover-color-dark;
-        }
-    }
-}
diff --git a/vue/full/src/layout/component/Navbar/theme-light.scss b/vue/full/src/layout/component/Navbar/theme-light.scss
deleted file mode 100644
index 26b9c63..0000000
--- a/vue/full/src/layout/component/Navbar/theme-light.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.navbar.light {
-    background-color: $--color-white;
-
-    .navbar-item {
-        color: $navbar-item-color-light;
-
-        &:hover {
-            background-color: $navbar-item-hover-color-light;
-        }
-    }
-}
diff --git a/vue/full/src/layout/component/Navbar/component/Bell.vue b/vue/full/src/layout/component/NotifyBell/index.vue
similarity index 55%
rename from vue/full/src/layout/component/Navbar/component/Bell.vue
rename to vue/full/src/layout/component/NotifyBell/index.vue
index 026b407..22ba734 100644
--- a/vue/full/src/layout/component/Navbar/component/Bell.vue
+++ b/vue/full/src/layout/component/NotifyBell/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-badge :hidden="hidden" class="bell-badge" is-dot title="消息提醒" @click.native="jump">
+    <el-badge :hidden="hidden" class="notify-bell-badge" is-dot title="消息提醒" @click.native="jump">
         <i class="el-icon-bell navbar-icon"/>
     </el-badge>
 </template>
@@ -8,7 +8,7 @@
 import {refreshPage} from "@/util/route"
 
 export default {
-    name: "Bell",
+    name: "NotifyBell",
 
     computed: {
         hidden() {
@@ -20,9 +20,7 @@ export default {
         jump() {
             const target = '/message/user'
 
-            this.$route.path === target
-                ? refreshPage()
-                : this.$router.push(target)
+            this.$route.path === target ? refreshPage() : this.$router.push(target)
         }
     },
 
@@ -31,11 +29,3 @@ export default {
     }
 }
 </script>
-
-<style>
-.bell-badge .el-badge__content {
-    top: 15px !important;
-    right: 10px !important;
-    border: none;
-}
-</style>
diff --git a/vue/full/src/layout/component/NotifyBell/style.scss b/vue/full/src/layout/component/NotifyBell/style.scss
new file mode 100644
index 0000000..17ac33f
--- /dev/null
+++ b/vue/full/src/layout/component/NotifyBell/style.scss
@@ -0,0 +1,5 @@
+.notify-bell-badge .el-badge__content {
+    top: 15px !important;
+    right: 10px !important;
+    border: none;
+}
diff --git a/vue/full/src/layout/component/Page/component/BackToTop.vue b/vue/full/src/layout/component/Page/component/BackToTop.vue
deleted file mode 100644
index 08f411d..0000000
--- a/vue/full/src/layout/component/Page/component/BackToTop.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script type="text/jsx">
-export default {
-    functional: true,
-
-    render() {
-        return (
-            <el-backtop target=".page-main .scroll-container" visibility-height={400} bottom={66}>
-                <v-icon icon="el-icon-top"/>
-            </el-backtop>
-        )
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Page/component/KeepRouterViewAlive.vue b/vue/full/src/layout/component/Page/component/KeepRouterViewAlive.vue
deleted file mode 100644
index d454420..0000000
--- a/vue/full/src/layout/component/Page/component/KeepRouterViewAlive.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script>
-import {isEmpty} from "@/util"
-import {getRouterViewCacheKey} from "@/layout/util"
-
-const KEY = '_routerViewKey'
-
-function getFirstComponentChild(children) {
-    if (Array.isArray(children)) {
-        return children.find(c => !isEmpty(c) && (!isEmpty(c.componentOptions) || c.isComment && c.asyncFactory))
-    }
-}
-
-function removeCache(cache, key) {
-    const cached = cache[key]
-    cached && cached.componentInstance && cached.componentInstance.$destroy()
-    delete cache[key]
-}
-
-function getCacheKey(route, componentOptions) {
-    if (KEY in componentOptions) return componentOptions[KEY]
-
-    const key = getRouterViewCacheKey(route)
-
-    if (key) componentOptions[KEY] = key
-
-    return key
-}
-
-export default {
-    name: 'keep-router-view-alive',
-
-    abstract: true,
-
-    props: {include: Array},
-
-    watch: {
-        include: {
-            deep: true,
-            handler(val) {
-                const {cache, $route} = this
-                for (const [k, v] of Object.entries(cache)) {
-                    const cacheKey = getCacheKey($route, v.componentOptions)
-                    if (!val || !val.includes(cacheKey)) {
-                        removeCache(cache, k)
-                    }
-                }
-            }
-        }
-    },
-
-    created() {
-        this.cache = Object.create(null)
-    },
-
-    beforeDestroy() {
-        for (const key of Object.keys(this.cache)) {
-            removeCache(this.cache, key)
-        }
-    },
-
-    render() {
-        const slot = this.$slots.default
-        const vnode = getFirstComponentChild(slot)
-
-        let componentOptions = vnode && vnode.componentOptions
-
-        if (componentOptions) {
-            //忽略<transition/>组件
-            const child = componentOptions.tag === 'transition' ? componentOptions.children[0] : vnode
-            componentOptions = child && child.componentOptions
-
-            if (componentOptions) {
-                const key = getCacheKey(this.$route, componentOptions)
-                const {include, cache} = this
-
-                if (include && !include.includes(key)) {
-                    return vnode
-                }
-
-                if (cache[key]) {
-                    child.componentInstance = cache[key].componentInstance
-                }
-                else cache[key] = child
-
-                child.data.keepAlive = true
-            }
-        }
-
-        return vnode || (slot && slot[0])
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Page/component/PageFooter.vue b/vue/full/src/layout/component/Page/component/PageFooter.vue
deleted file mode 100644
index ad019b2..0000000
--- a/vue/full/src/layout/component/Page/component/PageFooter.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template functional>
-    <footer class="page-footer">
-        <div class="copyright">
-            Copyright © 2020 - <a href="https://github.com/toesbieya" target="_blank">toesbieya</a>
-        </div>
-    </footer>
-</template>
-
-<script>
-export default {
-    name: "PageFooter"
-}
-</script>
-
-<style lang="scss">
-@import "~@/asset/style/var";
-
-.page-footer {
-    height: $page-footer-height;
-    padding: $page-view-margin;
-    text-align: center;
-
-    .copyright {
-        color: #808695;
-        font-size: 14px;
-    }
-}
-</style>
diff --git a/vue/full/src/layout/component/Page/component/PageHeader.vue b/vue/full/src/layout/component/Page/component/PageHeader.vue
deleted file mode 100644
index 0872fad..0000000
--- a/vue/full/src/layout/component/Page/component/PageHeader.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <div class="page-header">
-        <span class="page-header-title">{{ title }}</span>
-
-        <el-breadcrumb>
-            <el-breadcrumb-item v-for="(item,index) in data" :key="item.path">
-                <span :class="{'no-redirect': index !== data.length - 1}">{{ item.meta.title }}</span>
-            </el-breadcrumb-item>
-        </el-breadcrumb>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "PageHeader",
-
-    data: () => ({data: [], title: ''}),
-
-    watch: {
-        $route: {
-            immediate: true,
-            handler(to) {
-                const {path, meta: {title}, matched} = to
-                if (!path.startsWith('/redirect')) {
-                    this.title = title
-                    this.data = matched.filter(item => item.meta.title)
-                }
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "~@/asset/style/var";
-
-.page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    font-size: 14px;
-    height: $page-header-height;
-    padding: $page-header-padding $page-view-margin $page-header-padding $page-view-margin;
-
-    > .el-breadcrumb .no-redirect {
-        color: $--color-text-secondary;
-        cursor: text;
-    }
-
-    &-title {
-        color: $--color-text-primary;
-        font-weight: 600;
-        font-size: 18px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    // 页头渲染时页面顶部margin为0
-    & + .page-view {
-        margin-top: 0 !important;
-    }
-}
-</style>
diff --git a/vue/full/src/layout/component/Page/component/PageView.vue b/vue/full/src/layout/component/Page/component/PageView.vue
deleted file mode 100644
index 68fe63d..0000000
--- a/vue/full/src/layout/component/Page/component/PageView.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script type="text/jsx">
-import KeepRouterViewAlive from "./KeepRouterViewAlive"
-
-export default {
-    name: "PageView",
-
-    functional: true,
-
-    props: {include: Array, transitionName: String, cacheable: Boolean},
-
-    render(h, context) {
-        const {include, transitionName, cacheable} = context.props
-
-        let view = (
-            <transition name={transitionName} mode="out-in">
-                <router-view/>
-            </transition>
-        )
-
-        if (cacheable) {
-            view = <KeepRouterViewAlive include={include}>{view}</KeepRouterViewAlive>
-        }
-
-        return <div class="page-view">{view}</div>
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Page/component/TagsView/ScrollPanel.vue b/vue/full/src/layout/component/Page/component/TagsView/ScrollPanel.vue
deleted file mode 100644
index 7c14ce7..0000000
--- a/vue/full/src/layout/component/Page/component/TagsView/ScrollPanel.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <div class="tags-view-wrapper" @wheel="handleScroll">
-        <slot/>
-    </div>
-</template>
-
-<script>
-import {scrollTo} from "@/util/browser"
-
-export default {
-    name: 'ScrollPanel',
-
-    props: {
-        between: {type: Number, default: 4}
-    },
-
-    methods: {
-        handleScroll(e) {
-            const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
-            const {scrollLeft, scrollWidth, clientWidth} = this.$el
-            if (eventDelta > 0 && scrollLeft === 0
-                || eventDelta < 0 && scrollWidth <= scrollLeft + clientWidth) {
-                return
-            }
-            this.smoothScroll(-eventDelta)
-        },
-
-        smoothScroll(val) {
-            if (this.rAF) {
-                window.cancelAnimationFrame(this.rAF)
-                this.rAf = null
-            }
-
-            this.rAf = scrollTo(this.$el, this.$el.scrollLeft + val, {direction: 'left', duration: 100})
-        },
-
-        moveToTarget(currentTag, tagInstances) {
-            const {offsetWidth: containerWidth, scrollWidth, scrollLeft} = this.$el
-
-            if (containerWidth >= scrollWidth) return
-
-            let firstTag = null
-            let lastTag = null
-
-            // find first tag and last tag
-            if (tagInstances.length > 0) {
-                firstTag = tagInstances[0]
-                lastTag = tagInstances[tagInstances.length - 1]
-            }
-
-            if (firstTag === currentTag) {
-                return this.scrollLeft(0)
-            }
-            if (lastTag === currentTag) {
-                return this.scrollLeft(scrollWidth - containerWidth)
-            }
-
-            // find preTag and nextTag
-            const currentIndex = tagInstances.findIndex(item => item === currentTag)
-            const prevTag = tagInstances[currentIndex - 1]
-            const nextTag = tagInstances[currentIndex + 1]
-
-            // the tag's offsetLeft after of nextTag
-            const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + this.between
-
-            // the tag's offsetLeft before of prevTag
-            const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - this.between
-
-            if (afterNextTagOffsetLeft > scrollLeft + containerWidth) {
-                this.scrollLeft(afterNextTagOffsetLeft - containerWidth)
-            }
-            else if (beforePrevTagOffsetLeft < scrollLeft) {
-                this.scrollLeft(beforePrevTagOffsetLeft)
-            }
-        },
-
-        scrollLeft(val) {
-            this.$el.scrollTo({left: val, behavior: 'smooth'})
-        }
-    }
-}
-</script>
diff --git a/vue/full/src/layout/component/Page/component/TagsView/index.vue b/vue/full/src/layout/component/Page/component/TagsView/index.vue
deleted file mode 100644
index 5ebe93a..0000000
--- a/vue/full/src/layout/component/Page/component/TagsView/index.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<script type="text/jsx">
-import shortcutMixin from '@/layout/mixin/tagsViewShortcut'
-import decideRouterTransitionMixin from '@/layout/mixin/decideRouterTransition'
-import persistenceMixin from '@/layout/mixin/tagsViewPersistent'
-import {getters as appGetters} from "@/layout/store/app"
-import {getters as tagsViewGetters, mutations as tagsViewMutations} from "@/layout/store/tagsView"
-import ContextMenu from "@/component/menu/ContextMenu"
-import ScrollPanel from './ScrollPanel'
-import {refreshPage} from "@/util/route"
-
-export default {
-    mixins: [shortcutMixin, decideRouterTransitionMixin, persistenceMixin],
-
-    components: {ContextMenu, ScrollPanel},
-
-    data() {
-        return {
-            contextmenu: {
-                show: false,
-                top: 0,
-                left: 0,
-            },
-            selectedTag: {}
-        }
-    },
-
-    computed: {
-        visitedViews: () => tagsViewGetters.visitedViews,
-
-        menus: () => appGetters.menus,
-
-        contextMenuItems() {
-            return [
-                {content: '刷新', click: this.refreshSelectedTag},
-                this.isAffix(this.selectedTag)
-                    ? undefined
-                    : {
-                        content: '关闭',
-                        click: () => this.closeSelectedTag(this.selectedTag)
-                    },
-                {content: '关闭其他', click: this.closeOthersTags},
-                {content: '关闭全部', click: this.closeAllTags}
-            ]
-        }
-    },
-
-    watch: {
-        $route(to) {
-            this.addTag(to)
-            this.$nextTick(this.moveToCurrentTag)
-        }
-    },
-
-    methods: {
-        //判断页签是否激活，考虑redirect刷新的情况
-        isActive({path}) {
-            const {path: routePath} = this.$route
-            return routePath === path || routePath === `/redirect${path}`
-        },
-        isAffix(tag) {
-            return tag.meta && tag.meta.affix
-        },
-
-        initTags() {
-            //获取所有需要固定显示的页签
-            function getAffixTags(menus) {
-                const tags = []
-                menus.forEach(({name, fullPath, children, meta}) => {
-                    if (meta && meta.title && meta.affix) {
-                        tags.push({
-                            //注意，此处的fullPath并不是$route.fullPath，而是路由树拼接后的全路径
-                            fullPath,
-                            path: fullPath,
-                            name,
-                            meta: {...meta}
-                        })
-                    }
-                    if (children) {
-                        const tempTags = getAffixTags(children)
-                        tempTags.length && tags.push(...tempTags)
-                    }
-                })
-                return tags
-            }
-
-            //添加所有固定显示的页签
-            for (const tag of getAffixTags(this.menus)) {
-                tagsViewMutations.addTagOnly(tag)
-            }
-
-            //将当前路由对象添加为页签
-            this.addTag(this.$route)
-        },
-        //将具有meta.title的路由对象添加为tab页
-        addTag(to) {
-            to.meta.title && tagsViewMutations.addTagAndCache(to)
-        },
-
-        //横向滚动条移动至当前tab
-        moveToCurrentTag() {
-            //获取所有页签的componentInstance
-            const tagInstances = this.$refs.scrollPanel.$children
-            const tag = tagInstances.find(i => this.isActive(i.to))
-            tag && this.$refs.scrollPanel.moveToTarget(tag, tagInstances)
-        },
-
-        /**
-         * 右键菜单选项
-         * 刷新所选、关闭所选、关闭其他、关闭所有
-         */
-        refreshSelectedTag() {
-            if (!this.selectedTag) return
-            tagsViewMutations.delCacheOnly(this.selectedTag)
-            this.$nextTick(() => refreshPage(this.selectedTag))
-        },
-        closeSelectedTag(view) {
-            if (this.isAffix(view)) return
-            tagsViewMutations.delTagAndCache(view)
-            this.isActive(view) && this.gotoLastView()
-        },
-        closeOthersTags() {
-            tagsViewMutations.delOtherTagAndCache(this.selectedTag)
-            //当前选中的页签不是当前路由时，跳转到选中页签的地址
-            if (this.selectedTag.path !== this.$route.path) {
-                return this.$router.push(this.selectedTag)
-            }
-        },
-        closeAllTags() {
-            tagsViewMutations.delAllTagAndCache()
-            this.gotoLastView()
-        },
-
-        gotoLastView() {
-            if (this.visitedViews.length === 0) {
-                return this.$router.push('/')
-            }
-            const latest = this.visitedViews[this.visitedViews.length - 1]
-            //只有当页签路径与当前路由路径不同时才跳转，否则刷新
-            if (this.$route.path !== latest.path) {
-                this.$router.push(latest.path)
-            }
-            else refreshPage()
-        },
-
-        openContextMenu(e, tag) {
-            e.preventDefault()
-
-            const contextMenuWidth = 105 //右键菜单的假定宽度
-            const {left: elLeft, width: elWidth} = this.$el.getBoundingClientRect()
-            const maxLeft = elWidth + elLeft - contextMenuWidth
-            const left = e.clientX
-
-            this.contextmenu.left = (left > maxLeft ? maxLeft : left) + 15
-            this.contextmenu.top = e.clientY
-            this.contextmenu.show = true
-
-            this.selectedTag = tag
-        },
-
-        renderTags() {
-            return this.visitedViews.map(tag => {
-                const {path, query, fullPath, meta: {title}} = tag
-                const active = this.isActive(tag), affix = this.isAffix(tag)
-                const closeSelectedTag = (e, tag) => {
-                    e.preventDefault()
-                    this.closeSelectedTag(tag)
-                }
-                return (
-                    <router-link
-                        key={path}
-                        class={{'tags-view-item': true, active}}
-                        to={{path, query, fullPath}}
-                        v-on:contextmenu_native={e => this.openContextMenu(e, tag)}
-                        v-on:dblclick_native={e => closeSelectedTag(e, tag)}
-                    >
-                        <span>{title}</span>
-                        {!affix && <i class="el-icon-close" on-click={e => closeSelectedTag(e, tag)}/>}
-                    </router-link>
-                )
-            })
-        }
-    },
-
-    mounted() {
-        this.initTags()
-    },
-
-    render() {
-        return (
-            <div class="tags-view-container">
-                <scroll-panel ref="scrollPanel" class="tags-view-wrapper">
-                    {this.renderTags()}
-                </scroll-panel>
-
-                <context-menu
-                    v-model={this.contextmenu.show}
-                    items={this.contextMenuItems}
-                    left={this.contextmenu.left}
-                    top={this.contextmenu.top}
-                />
-            </div>
-        )
-    }
-}
-</script>
-
-<style lang="scss" src="./style.scss"></style>
diff --git a/vue/full/src/layout/component/Page/component/TagsView/style.scss b/vue/full/src/layout/component/Page/component/TagsView/style.scss
deleted file mode 100644
index eb3c3ef..0000000
--- a/vue/full/src/layout/component/Page/component/TagsView/style.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import "~@/asset/style/var";
-
-.tags-view-container {
-    height: $tags-view-height;
-    box-shadow: inset 0 0 3px 2px hsla(0, 0%, 39.2%, .1);
-
-    .tags-view-wrapper {
-        height: 100%;
-        white-space: nowrap;
-        overflow-x: auto;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-
-        .tags-view-item {
-            $margin: 4px;
-            $border-width: 1px;
-
-            display: inline-block;
-            cursor: pointer;
-            height: #{$tags-view-height - $margin * 2};
-            line-height: #{$tags-view-height - $margin * 2 - $border-width * 2};
-            color: $--color-text-secondary;
-            background-color: #ffffff;
-            border-radius: 3px;
-            border: $border-width solid $--border-color-base;
-            padding: 0 12px;
-            font-size: 12px;
-            margin: $margin;
-            user-select: none;
-
-            &:first-of-type {
-                margin-left: 15px;
-            }
-
-            &:last-of-type {
-                margin-right: 15px;
-            }
-
-            &::before {
-                content: '';
-                position: relative;
-                background-color: #e8eaec;
-                display: inline-block;
-                width: 12px;
-                height: 12px;
-                border-radius: 50%;
-                top: 1px;
-                margin-right: 5px;
-            }
-
-            &.active {
-                color: $--color-primary;
-
-                &::before {
-                    background-color: $--color-primary;
-                }
-            }
-
-            .el-icon-close {
-                border-radius: 50%;
-                font-size: 14px;
-                margin-left: 10px;
-            }
-        }
-    }
-}
diff --git a/vue/full/src/layout/component/Page/index.vue b/vue/full/src/layout/component/Page/index.vue
deleted file mode 100644
index 634855a..0000000
--- a/vue/full/src/layout/component/Page/index.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script type="text/jsx">
-import {getters as pageGetters} from "@/layout/store/page"
-import {getters as tagsViewGetters} from "@/layout/store/tagsView"
-import BackToTop from "./component/BackToTop"
-import PageHeader from "./component/PageHeader"
-import PageView from "./component/PageView"
-import PageFooter from "./component/PageFooter"
-import TagsView from './component/TagsView'
-
-export default {
-    name: 'Page',
-
-    components: {BackToTop, PageHeader, PageView, PageFooter, TagsView},
-
-    computed: {
-        renderPageHeader() {
-            return pageGetters.showPageHeader && this.$route.meta.pageHeader !== false
-        },
-        pageClass() {
-            return {
-                'scroll-container': true,
-                'has-page-header': this.renderPageHeader,
-                'has-page-footer': true
-            }
-        }
-    },
-
-    render() {
-        const {transition, showIframe, iframeList, currentIframe} = pageGetters
-        const {cachedViews, enabled} = tagsViewGetters
-
-        return (
-            <main class="page-main">
-                {enabled && <tags-view/>}
-
-                <div v-show={!showIframe} class={this.pageClass}>
-                    {this.renderPageHeader && <page-header/>}
-
-                    <page-view
-                        include={cachedViews}
-                        transition-name={transition.curr}
-                        cacheable={enabled}
-                    />
-
-                    <page-footer/>
-                </div>
-
-                {iframeList.map(src => (
-                    <iframe
-                        v-show={showIframe && src === currentIframe}
-                        id={src}
-                        key={src}
-                        src={src}
-                        frameborder="0"
-                        height="100%"
-                        width="100%"
-                    />
-                ))}
-
-                {pageGetters.showBackToTop && <back-to-top/>}
-            </main>
-        )
-    }
-}
-</script>
-
-<style lang="scss" src="./style.scss"></style>
diff --git a/vue/full/src/layout/component/Page/style.scss b/vue/full/src/layout/component/Page/style.scss
deleted file mode 100644
index e7c743d..0000000
--- a/vue/full/src/layout/component/Page/style.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "~@/asset/style/var";
-
-.page-main {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    position: relative;
-    overflow: hidden;
-    background-color: #f0f2f5;
-
-    > .scroll-container {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        overflow-y: overlay;
-        overflow-x: inherit;
-
-        > .page-view {
-            margin: $page-view-margin;
-            flex: 1;
-        }
-    }
-}
diff --git a/vue/full/src/layout/component/SettingDrawer/component/checkbox/ColorCheckbox.vue b/vue/full/src/layout/component/SettingDrawer/component/checkbox/ColorCheckbox.vue
new file mode 100644
index 0000000..6b02081
--- /dev/null
+++ b/vue/full/src/layout/component/SettingDrawer/component/checkbox/ColorCheckbox.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="color-checkbox" :style="{'background-color': value}" @click="click">
+        <i v-if="checked" class="el-icon-check"/>
+    </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+    name: "ColorCheckBox",
+
+    mixins: [mixin]
+}
+</script>
diff --git a/vue/full/src/layout/component/SettingDrawer/component/checkbox/Group.vue b/vue/full/src/layout/component/SettingDrawer/component/checkbox/Group.vue
new file mode 100644
index 0000000..2292365
--- /dev/null
+++ b/vue/full/src/layout/component/SettingDrawer/component/checkbox/Group.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="checkbox-group">
+        <slot/>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CheckboxGroup",
+
+    props: {value: String},
+
+    data: () => ({children: []})
+}
+</script>
diff --git a/vue/full/src/layout/component/SettingDrawer/component/checkbox/ImgCheckbox.vue b/vue/full/src/layout/component/SettingDrawer/component/checkbox/ImgCheckbox.vue
new file mode 100644
index 0000000..9f5963e
--- /dev/null
+++ b/vue/full/src/layout/component/SettingDrawer/component/checkbox/ImgCheckbox.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="img-checkbox" :title="label" @click="click">
+        <img :src="img"/>
+        <i v-if="checked" class="el-icon-check"/>
+    </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+    name: "ImgCheckBox",
+
+    mixins: [mixin],
+
+    props: {
+        img: String,
+        label: String
+    }
+}
+</script>
diff --git a/vue/full/src/component/checkbox/common.js b/vue/full/src/layout/component/SettingDrawer/component/checkbox/mixin.js
similarity index 100%
rename from vue/full/src/component/checkbox/common.js
rename to vue/full/src/layout/component/SettingDrawer/component/checkbox/mixin.js
diff --git a/vue/full/src/layout/component/SettingDrawer/component/checkbox/style.scss b/vue/full/src/layout/component/SettingDrawer/component/checkbox/style.scss
new file mode 100644
index 0000000..5c33195
--- /dev/null
+++ b/vue/full/src/layout/component/SettingDrawer/component/checkbox/style.scss
@@ -0,0 +1,34 @@
+@import "~@/asset/style/var";
+
+.checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.color-checkbox {
+    width: 20px;
+    height: 20px;
+    margin: 5px;
+    border-radius: 2px;
+    cursor: pointer;
+    text-align: center;
+    font-weight: bold;
+    color: #ffffff;
+}
+
+.img-checkbox {
+    width: 55px;
+    margin: 10px;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+
+    .el-icon-check {
+        position: absolute;
+        color: $--color-primary;
+        font-weight: bold;
+        top: 25px;
+        right: 10px;
+    }
+}
diff --git a/vue/full/src/layout/component/SettingDrawer.vue b/vue/full/src/layout/component/SettingDrawer/index.vue
similarity index 90%
rename from vue/full/src/layout/component/SettingDrawer.vue
rename to vue/full/src/layout/component/SettingDrawer/index.vue
index 612f55a..28ee53e 100644
--- a/vue/full/src/layout/component/SettingDrawer.vue
+++ b/vue/full/src/layout/component/SettingDrawer/index.vue
@@ -1,10 +1,10 @@
 <template>
     <el-drawer
-        :visible="value"
+        :visible="appGetters.showSettingDrawer"
         :with-header="false"
         append-to-body
         size="288px"
-        @close="$emit('input', false)"
+        @close="close"
     >
         <div class="drawer-container">
             <el-divider>导航模式</el-divider>
@@ -124,14 +124,21 @@
 </template>
 
 <script>
-import CheckboxGroup from "@/component/checkbox/Group"
-import ColorCheckbox from "@/component/checkbox/ColorCheckbox"
-import ImgCheckbox from "@/component/checkbox/ImgCheckbox"
-import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
-import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
-import {getters as navbarGetters, mutations as navbarMutations} from "@/layout/store/navbar"
-import {getters as pageGetters, mutations as pageMutations} from "@/layout/store/page"
-import {getters as tagsViewGetters, mutations as tagsViewMutations} from "@/layout/store/tagsView"
+import CheckboxGroup from "./component/checkbox/Group"
+import ColorCheckbox from "./component/checkbox/ColorCheckbox"
+import ImgCheckbox from "./component/checkbox/ImgCheckbox"
+import {
+    appGetters,
+    appMutations,
+    asideGetters,
+    asideMutations,
+    navbarGetters,
+    navbarMutations,
+    pageGetters,
+    pageMutations,
+    tagsViewGetters,
+    tagsViewMutations
+} from "el-admin-layout"
 import {mergeObj} from "@/util"
 import {getLocalPersonalSettings, setLocalPersonalSettings} from "@/util/storage"
 
@@ -140,8 +147,6 @@ export default {
 
     components: {CheckboxGroup, ColorCheckbox, ImgCheckbox},
 
-    props: {value: Boolean},
-
     data() {
         return {
             appGetters, asideGetters, navbarGetters, pageGetters, tagsViewGetters,
@@ -201,6 +206,10 @@ export default {
     },
 
     methods: {
+        close() {
+            appMutations.showSettingDrawer(false)
+        },
+
         //将此处的设置项数据同步到layout中的store
         syncLayoutStore() {
             const {app, page, aside, navbar, tagsView} = this.setting
@@ -303,22 +312,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss" scoped>
-@import "~@/asset/style/var";
-
-.drawer-container {
-    padding: 24px;
-    font-size: 14px;
-    line-height: 1.5;
-    word-wrap: break-word;
-
-    .drawer-item {
-        display: flex;
-        justify-content: space-between;
-        color: $--color-text-regular;
-        font-size: 14px;
-        padding: 12px 0;
-    }
-}
-</style>
diff --git a/vue/full/src/layout/component/SettingDrawer/style.scss b/vue/full/src/layout/component/SettingDrawer/style.scss
new file mode 100644
index 0000000..70eef94
--- /dev/null
+++ b/vue/full/src/layout/component/SettingDrawer/style.scss
@@ -0,0 +1,17 @@
+@import "~@/asset/style/var";
+@import "./component/checkbox/style";
+
+.drawer-container {
+    padding: 24px;
+    font-size: 14px;
+    line-height: 1.5;
+    word-wrap: break-word;
+
+    .drawer-item {
+        display: flex;
+        justify-content: space-between;
+        color: $--color-text-regular;
+        font-size: 14px;
+        padding: 12px 0;
+    }
+}
diff --git a/vue/full/src/layout/index.vue b/vue/full/src/layout/index.vue
index 6518ef5..fdd3d5c 100644
--- a/vue/full/src/layout/index.vue
+++ b/vue/full/src/layout/index.vue
@@ -1,93 +1,146 @@
+<template>
+    <el-admin-layout :navbar-props="navbarProps" :page-props="pageProps"/>
+</template>
+
 <script type="text/jsx">
-import offlineMixin from './mixin/offline'
-import VAside from './component/Aside'
-import VNavbar from './component/Navbar'
-import VPage from './component/Page'
+import Vue from 'vue'
+import config from "@/config"
+import ElAdminLayout, {setIconRenderer, appMutations} from 'el-admin-layout'
+import Footer from './component/Footer'
+import NotifyBell from './component/NotifyBell'
 import SettingDrawer from './component/SettingDrawer'
-import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
-import {getters as pageGetters} from "@/layout/store/page"
-import {getters as tagsViewGetters} from "@/layout/store/tagsView"
+import offlineMixin from './mixin/offline'
+import tagsViewPersistent from './mixin/tagsViewPersistent'
+import tagsViewShortcut from './mixin/tagsViewShortcut'
+import {elConfirm} from "@/util/message"
+
+//设置一些基础信息
+appMutations.title(config.title)
+appMutations.logo(config.logo)
+
+//设置图标渲染方式
+setIconRenderer((h, data) => <v-icon {...data}/>)
 
 export default {
-    name: 'Layout',
+    name: "Layout",
 
-    mixins: [offlineMixin],
+    mixins: [offlineMixin, tagsViewPersistent, tagsViewShortcut],
 
-    components: {VAside, VNavbar, VPage, SettingDrawer},
+    components: {ElAdminLayout, NotifyBell, SettingDrawer},
+
+    data() {
+        return {
+            guideSteps: [
+                {
+                    element: '.setting-btn.navbar-item',
+                    content: '这是个性设置按钮，可以根据自己喜好进行一些设置',
+                },
+                {
+                    element: '.navbar .el-dropdown.navbar-item',
+                    content: '这是用户中心',
+                },
+                {
+                    element: '.tags-view-container',
+                    content: `<p>这是tab栏，可以右键tab页进行相关操作</p>
+                              <p>ctrl + ← → 可以进行tab页的左右切换</p>
+                              <p>当tab过多时通过鼠标滚轮来滚动</p>
+                              <p>双击可以关闭</p>`,
+                },
+            ]
+        }
+    },
 
     computed: {
-        isLeftRight() {
-            return pageGetters.position === 'left-right'
-        },
-        renderAside() {
-            return appGetters.isMobile || ['aside', 'aside-two-part', 'mix'].includes(appGetters.navMode)
-        },
-        wrapperClass() {
+        navbarProps() {
+            const userInfo = this.$store.state.user
             return {
-                'app-wrapper': true,
-                'flex-column': !this.isLeftRight
+                user: {
+                    avatar: userInfo.avatar,
+                    name: userInfo.name
+                },
+                userDropdownItems: [
+                    {
+                        icon: 'el-icon-user',
+                        command: 'user-center',
+                        content: '用户中心',
+                        handler: this.toUserCenter
+                    },
+                    {
+                        icon: 'el-icon-guide',
+                        command: 'guide',
+                        content: '新手指引',
+                        hideOnMobile: true,
+                        handler: this.startGuide
+                    },
+                    {
+                        icon: 'el-icon-switch-button',
+                        command: 'logout',
+                        content: '退出登录',
+                        handler: this.logout
+                    }
+                ],
+                renderCustomActions: this.renderNavbarActions
             }
         },
-        containerClass() {
-            return [
-                'main-container',
-                'has-nav',
-                `nav-mode-${appGetters.navMode}`,
-                this.isLeftRight && 'flex-column',
-                tagsViewGetters.enabled && 'has-tags-view'
-            ]
+
+        pageProps() {
+            return {
+                renderFooter: () => <Footer/>
+            }
         }
     },
 
     methods: {
-        closeSettingDrawer() {
-            appMutations.showSettingDrawer(false)
+        toUserCenter() {
+            const path = '/user'
+            this.$route.path !== path && this.$router.push(path)
+        },
+        startGuide() {
+            this.$guide(this.guideSteps)
+        },
+        logout() {
+            if (this.$store.state.user.prepareLogout) {
+                return
+            }
+
+            elConfirm('确认退出?').then(() => this.$store.dispatch('user/logout'))
+        },
+
+        openSettingDrawer() {
+            appMutations.showSettingDrawer(true)
+        },
+
+        renderNavbarActions(defaultActions) {
+            const customActions = [
+                <notify-bell class="navbar-item"/>,
+                <div
+                    class="setting-btn navbar-item"
+                    title="个性设置"
+                    on-click={this.openSettingDrawer}
+                >
+                    <i class="el-icon-s-operation navbar-icon"/>
+                </div>
+            ]
+
+            return customActions.concat(defaultActions)
         }
     },
 
-    render() {
-        const aside = this.renderAside && <v-aside/>
-
-        return (
-            <section class={this.wrapperClass}>
-                {this.isLeftRight ? aside : <v-navbar/>}
-
-                <section class={this.containerClass}>
-                    {this.isLeftRight ? <v-navbar/> : aside}
-                    <v-page/>
-                </section>
-
-                <setting-drawer
-                    value={appGetters.showSettingDrawer}
-                    on-input={this.closeSettingDrawer}
-                />
-            </section>
-        )
-    }
-}
-</script>
-
-<style lang="scss">
-.app-wrapper.flex-column,
-.main-container.flex-column {
-    flex-direction: column;
-}
+    //提前创建设置抽屉，避免初始化同步设置数据时导致layout重新渲染
+    beforeCreate() {
+        const Drawer = Vue.extend(SettingDrawer)
+        const instance = new Drawer().$mount()
+        document.body.appendChild(instance.$el)
+        this.$_settingDrawerInstance = instance
+    },
 
-.app-wrapper {
-    display: flex;
-    height: 100%;
-    width: 100%;
-
-    > .main-container {
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-    }
-
-    //左右结构时，侧边栏z-index需大于导航栏
-    //上下结构时，侧边栏z-index需小于导航栏
-    &.flex-column .aside {
-        z-index: 9;
-    }
+    //销毁时清除设置抽屉
+    beforeDestroy() {
+        if (this.$_settingDrawerInstance) {
+            this.$_settingDrawerInstance.$destroy()
+            this.$_settingDrawerInstance.$el.remove()
+            delete this.$_settingDrawerInstance
+        }
+    },
 }
-</style>
+</script>
diff --git a/vue/full/src/layout/mixin/decideRouterTransition.js b/vue/full/src/layout/mixin/decideRouterTransition.js
deleted file mode 100644
index e0666b7..0000000
--- a/vue/full/src/layout/mixin/decideRouterTransition.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import {getters as pageGetters, mutations as pageViewMutations} from "@/layout/store/page"
-
-export default {
-    watch: {
-        $route(to, from) {
-            this.decideRouteTransition(to, from)
-        }
-    },
-
-    methods: {
-        //根据访问的tab页的左右顺序来确定路由动画
-        decideRouteTransition(to, from) {
-            const {next, prev} = pageGetters.transition
-
-            let transitionName = prev
-
-            //这里认为页签数量不会太多，所以为了可读性使用两次循环查找
-            const fromIndex = this.visitedViews.findIndex(i => i.path === from.path)
-            const toIndex = this.visitedViews.findIndex(i => i.path === to.path)
-
-            //新开tab也认为顺序高于上一个tab
-            if (toIndex === -1 || fromIndex < toIndex) {
-                transitionName = next
-            }
-
-            pageViewMutations.transition({curr: transitionName})
-        },
-    }
-}
diff --git a/vue/full/src/layout/mixin/hamburger.js b/vue/full/src/layout/mixin/hamburger.js
deleted file mode 100644
index f798b00..0000000
--- a/vue/full/src/layout/mixin/hamburger.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Hamburger from '@/layout/component/Hamburger'
-import {getters as appGetters} from "@/layout/store/app"
-import {getters as asideGetters} from "@/layout/store/aside"
-import {getSidebarMenus} from "@/layout/util"
-
-/**
- * 汉堡包的渲染条件混入
- */
-
-export default {
-    components: {Hamburger},
-
-    computed: {
-        //渲染汉堡包的条件
-        //①侧边栏有菜单
-        //②移动端 或
-        //③桌面端且汉堡包位置正确（侧边栏引入则需要是aside，反之需要是head）
-        //④桌面端且是双层侧边栏导航
-        //⑤桌面端且是侧边栏导航或混合导航时，未设置侧边栏自动隐藏
-        renderHamburger() {
-            if (getSidebarMenus().length <= 0) return false
-
-            const isMobile = appGetters.isMobile,
-                correctPosition =
-                    asideGetters.hamburgerPosition === (this.$options.name === 'navbar' ? 'head' : 'aside'),
-                correctMode =
-                    ['aside', 'mix'].includes(appGetters.navMode) && !asideGetters.autoHide
-                    || appGetters.navMode === 'aside-two-part'
-
-            return isMobile || correctPosition && correctMode
-        }
-    }
-}
diff --git a/vue/full/src/layout/mixin/menu.js b/vue/full/src/layout/mixin/menu.js
deleted file mode 100644
index a811c23..0000000
--- a/vue/full/src/layout/mixin/menu.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * 顶部菜单和侧边栏菜单的公共混入
- */
-import {mutations as tagsViewMutations} from "@/layout/store/tagsView"
-import {refreshPage} from "@/util/route"
-import {isExternal} from "@/util/validate"
-import {findComponentByTag} from "@/util/vue"
-
-export default {
-    data() {
-        return {
-            //当前激活的菜单的fullPath
-            //之所以手动维护是因为el-menu在点击后就会设置activeIndex
-            activeMenu: '',
-
-            //用于判断鼠标是否在弹出菜单内
-            openedMenuNum: 0
-        }
-    },
-
-    methods: {
-        //点击菜单后的动作
-        actionOnSelectMenu(fullPath, refreshWhenSame = true) {
-            //外部链接时打开新窗口
-            if (isExternal(fullPath)) {
-                window.open(fullPath)
-                return this.resetActiveMenu()
-            }
-
-            //触发的菜单路径是当前路由时，根据参数判断是否进行刷新
-            if (this.$route.path === fullPath) {
-                if (!refreshWhenSame) return
-                tagsViewMutations.delCacheOnly(this.$route)
-                this.$nextTick(() => refreshPage())
-            }
-            else this.$router.push(fullPath)
-        },
-
-        //由于侧边栏菜单数组更新后，el-menu不一定会更新（当数组中不存在单级菜单时）
-        //所以手动更新el-menu的当前高亮菜单
-        resetActiveMenu() {
-            const menu = this.$_getElMenuInstance()
-            menu && menu.updateActiveIndex(this.activeMenu)
-        },
-
-        //获取el-menu实例
-        //目前被侧边栏和双层侧边栏的主菜单使用
-        $_getElMenuInstance() {
-            if (!this.$_elMenuInstance) {
-                this.$_elMenuInstance = findComponentByTag(this, 'el-menu')
-            }
-
-            return this.$_elMenuInstance
-        }
-    }
-}
diff --git a/vue/full/src/layout/mixin/menuSearch.js b/vue/full/src/layout/mixin/menuSearch.js
deleted file mode 100644
index ccdf1ba..0000000
--- a/vue/full/src/layout/mixin/menuSearch.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * 侧边栏搜索框混入
- */
-import MenuSearch from '@/layout/component/Aside/component/MenuSearch'
-import {trim} from "@/util"
-import {findComponentByTag} from "@/util/vue"
-
-export default {
-    components: {MenuSearch},
-
-    methods: {
-        $_getNavMenuInstance() {
-            if (!this.$_navMenuInstance) {
-                this.$_navMenuInstance = findComponentByTag(this, 'nav-menu')
-            }
-
-            return this.$_navMenuInstance
-        },
-
-        handlerSearch(v) {
-            this.$_getNavMenuInstance().realSearchWord = trim(v)
-        }
-    }
-}
diff --git a/vue/full/src/layout/mixin/tagsViewPersistent.js b/vue/full/src/layout/mixin/tagsViewPersistent.js
index 2ddc36c..492f108 100644
--- a/vue/full/src/layout/mixin/tagsViewPersistent.js
+++ b/vue/full/src/layout/mixin/tagsViewPersistent.js
@@ -4,7 +4,7 @@
  * 页签变化时写入本地存储
  */
 
-import {getters as tagsViewGetters, mutations as tagsViewMutations} from "@/layout/store/tagsView"
+import {tagsViewGetters, tagsViewMutations} from "el-admin-layout"
 import {debounce} from "@/util"
 import {getTagsView, setTagsView} from "@/util/storage"
 
@@ -27,7 +27,7 @@ export default {
                 if (!v) return setTagsView()
 
                 //启用时先存储一次（仅在mounted后，否则此时页签数据不完整）
-                this._isMounted && this.persistentTagsView(this.visitedViews)
+                this._isMounted && this.persistentTagsView(tagsViewGetters.visitedViews)
 
                 this.watchVisitedViewsCallback = this.$watch('visitedViews', this.persistentTagsView)
             }
diff --git a/vue/full/src/layout/mixin/tagsViewShortcut.js b/vue/full/src/layout/mixin/tagsViewShortcut.js
index f6b0a5d..358d414 100644
--- a/vue/full/src/layout/mixin/tagsViewShortcut.js
+++ b/vue/full/src/layout/mixin/tagsViewShortcut.js
@@ -4,7 +4,7 @@
  * ctrl + ←，上一个页签
  */
 
-import {getters as tagsViewGetters} from "@/layout/store/tagsView"
+import {tagsViewGetters} from "el-admin-layout"
 
 export default {
     computed: {
@@ -28,20 +28,36 @@ export default {
     methods: {
         //上一个页签
         gotoViewFront() {
-            if (this.visitedViews.length <= 1) return
-            let index = this.visitedViews.findIndex(view => view.path === this.$route.path)
+            const views = tagsViewGetters.visitedViews
+
+            if (views.length <= 1) return
+
+            let index = views.findIndex(view => view.path === this.$route.path)
+
             if (index < 0) return
-            if (index === 0) index = this.visitedViews.length
-            return this.$router.push({path: this.visitedViews[index - 1].path})
+
+            if (index === 0) {
+                index = views.length
+            }
+
+            return this.$router.push({path: views[index - 1].path})
         },
 
         //下一个页签
         gotoViewBehind() {
-            if (this.visitedViews.length <= 1) return
-            let index = this.visitedViews.findIndex(view => view.path === this.$route.path)
+            const views = tagsViewGetters.visitedViews
+
+            if (views.length <= 1) return
+
+            let index = views.findIndex(view => view.path === this.$route.path)
+
             if (index < 0) return
-            if (index + 1 > this.visitedViews.length - 1) index = -1
-            return this.$router.push({path: this.visitedViews[index + 1].path})
+
+            if (index + 1 > views.length - 1) {
+                index = -1
+            }
+
+            return this.$router.push({path: views[index + 1].path})
         },
 
         //快捷键监听
diff --git a/vue/full/src/layout/store/app.js b/vue/full/src/layout/store/app.js
deleted file mode 100644
index 28a1d94..0000000
--- a/vue/full/src/layout/store/app.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import Vue from 'vue'
-import {debounce, isEmpty} from "@/util"
-import {isMobile} from "@/util/browser"
-import {createGetters, createMutations} from "@/util/observable"
-
-const state = {
-    //区分pc和移动端
-    isMobile: isMobile(),
-
-    //设置抽屉的显隐
-    //放这里的原因是navbar可能会重新渲染，从而导致抽屉的重新渲染
-    showSettingDrawer: false,
-
-    //当前激活的顶部菜单的fullPath
-    activeRootMenu: '',
-
-    //所有的树形菜单，每个元素为顶部菜单，顶部菜单的子级（如果有）为侧边栏菜单
-    menus: [],
-
-    //导航模式，'aside'、'aside-two-part'、'head'、'mix'
-    navMode: 'mix'
-}
-
-const store = Vue.observable(state)
-
-export const getters = createGetters(store)
-
-export const mutations = {
-    ...createMutations(store),
-
-    menus(v) {
-        sort(v)
-        store.menus = v
-    }
-}
-
-//菜单排序
-function sort(routes) {
-    if (!Array.isArray(routes) || routes.length === 0) {
-        return
-    }
-
-    //菜单排序值的空值处理
-    const getSortValue = item => {
-        const sort = deepGetSortValue(item)
-        return isEmpty(sort) ? 10000 : sort
-    }
-
-    //获取菜单的排序值
-    const deepGetSortValue = item => {
-        const {children = [], meta: {hidden, sort} = {}} = item
-
-        if (hidden) return null
-
-        if (!isEmpty(sort)) return sort
-
-        //如果只有一个子节点，那么取子节点的排序值
-        if (children.length === 1) {
-            return deepGetSortValue(children[0])
-        }
-
-        return null
-    }
-
-    //对根节点排序
-    routes.sort((pre, next) => {
-        pre = getSortValue(pre)
-        next = getSortValue(next)
-        if (pre < next) return -1
-        if (pre === next) return 0
-        return 1
-    })
-
-    //对每一个根节点的子级排序
-    routes.forEach(route => {
-        const {children} = route
-        children && children.length && sort(children)
-    })
-}
-
-window.addEventListener('resize', debounce(() => {
-    !document.hidden && mutations.isMobile(isMobile())
-}))
diff --git a/vue/full/src/layout/store/aside.js b/vue/full/src/layout/store/aside.js
deleted file mode 100644
index b39f84f..0000000
--- a/vue/full/src/layout/store/aside.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * 侧边栏的响应式数据
- */
-import Vue from 'vue'
-import {bindThis} from "@/util"
-import {createGetters, createMutations} from "@/util/observable"
-import {getters as appGetters} from "./app"
-
-const state = {
-    //抽屉模式时的显隐
-    show: false,
-
-    //主题，light 或 dark
-    theme: 'light',
-
-    //手风琴效果
-    uniqueOpen: true,
-
-    //是否折叠
-    collapse: false,
-
-    //折叠时显示上级
-    showParentOnCollapse: false,
-
-    //自动隐藏
-    autoHide: false,
-
-    //汉堡包的位置，aside 或 head
-    hamburgerPosition: 'aside',
-
-    //是否显示搜索框
-    search: true
-}
-
-const store = Vue.observable(state)
-
-export const getters = createGetters(store)
-
-export const mutations = bindThis({
-    ...createMutations(store),
-
-    /*移动端或设置了侧边栏自动隐藏时打开关闭抽屉，否则展开折叠*/
-    open() {
-        if (appGetters.isMobile || store.autoHide) {
-            store.show = true
-        }
-        else store.collapse = false
-    },
-    close() {
-        if (appGetters.isMobile || store.autoHide) {
-            store.show = false
-        }
-        else store.collapse = true
-    },
-    //切换侧边栏的状态
-    switch(action) {
-        switch (action) {
-            case 'open':
-                return this.open()
-            case 'close':
-                return this.close()
-            default :
-                let open = true
-                if (appGetters.isMobile) {
-                    open = !store.show
-                }
-                else open = store.collapse
-                return open ? this.open() : this.close()
-        }
-    }
-})
diff --git a/vue/full/src/layout/store/navbar.js b/vue/full/src/layout/store/navbar.js
deleted file mode 100644
index c804ee4..0000000
--- a/vue/full/src/layout/store/navbar.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Vue from 'vue'
-import {createGetters, createMutations} from "@/util/observable"
-
-const state = {
-    //主题，light 或 dark
-    theme: 'light',
-}
-
-const store = Vue.observable(state)
-
-export const getters = createGetters(store)
-
-export const mutations = createMutations(store)
diff --git a/vue/full/src/layout/store/page.js b/vue/full/src/layout/store/page.js
deleted file mode 100644
index 97a61d8..0000000
--- a/vue/full/src/layout/store/page.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * 路由页面的响应式数据
- */
-import Vue from 'vue'
-import {bindThis} from "@/util"
-import {createGetters, createMutations} from "@/util/observable"
-
-const state = {
-    //路由过渡动画
-    transition: {
-        //当未启用多页签时的路由动画
-        default: 'el-fade-in-linear',
-        //要访问的tab顺序高于上一个访问的tab时的路由动画
-        next: 'left-out',
-        //要访问的tab顺序不高于上一个访问的tab时的路由动画
-        prev: 'right-out',
-        //当前使用的路由动画
-        curr: 'el-fade-in-linear'
-    },
-
-    /*iframe的控制*/
-    showIframe: false,
-    currentIframe: '',
-    iframeList: [],
-
-    //是否显示侧边栏或顶部导航栏的logo
-    showLogo: true,
-    //分层结构，上下（'top-bottom'）、左右（'left-right'）
-    position: 'left-right',
-    //是否显示页头
-    showPageHeader: true,
-    //是否显示返回顶部按钮
-    showBackToTop: true
-}
-
-const store = Vue.observable(state)
-
-export const getters = createGetters(store)
-
-export const mutations = bindThis({
-    ...createMutations(store),
-
-    //修改transition时使用Object.assign
-    transition(obj) {
-        Object.assign(store.transition, obj)
-    },
-
-    addIframe(src) {
-        !store.iframeList.includes(src) && store.iframeList.push(src)
-    },
-    delIframe(src) {
-        const index = store.iframeList.findIndex(i => i === src)
-        index > -1 && store.iframeList.splice(index, 1)
-    },
-    openIframe({src}) {
-        store.showIframe = true
-        store.currentIframe = src
-        this.addIframe(src)
-    },
-    closeIframe({src, del}) {
-        store.showIframe = false
-        store.currentIframe = ''
-        del && this.delIframe(src)
-    }
-})
diff --git a/vue/full/src/layout/store/tagsView.js b/vue/full/src/layout/store/tagsView.js
deleted file mode 100644
index de31a2d..0000000
--- a/vue/full/src/layout/store/tagsView.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * 多页签的响应式数据
- */
-import Vue from 'vue'
-import {getters as pageGetters, mutations as pageMutations} from "@/layout/store/page"
-import {getRouterViewCacheKey} from "@/layout/util"
-import {bindThis} from "@/util"
-import {createGetters, createMutations} from "@/util/observable"
-
-const state = {
-    //是否启用
-    enabled: true,
-    //是否启用快捷键切换功能
-    shortcut: true,
-    //是否将页签持久化到sessionStorage
-    persistent: true,
-
-    //显示的页签，vue-router的routeConfig对象数组
-    visitedViews: [],
-
-    //缓存的页签，用于<keep-router-view-alive/>:include
-    cachedViews: []
-}
-
-const store = Vue.observable(state)
-
-export const getters = createGetters(store)
-
-export const mutations = bindThis({
-    ...createMutations(store),
-
-    /**
-     * 多页签的启用/停用
-     * 停用时会移除所有缓存，并且重置路由过渡动画
-     * @param v 启用为true，停用为false
-     */
-    enabled(v) {
-        store.enabled = v
-
-        if (!v) {
-            pageMutations.transition({curr: pageGetters.transition.default})
-            this.delAllTagAndCache()
-        }
-    },
-
-    /**
-     * 在页签栏上添加一个页签，path已存在的不会重复添加，调用时需要保证meta.title有值
-     * @param view {routeConfig}
-     */
-    addTagOnly(view) {
-        const {name, path, fullPath, meta} = view
-
-        if (store.visitedViews.some(v => v.path === path)) {
-            return
-        }
-
-        store.visitedViews.push({name, path, fullPath, meta: {...meta}})
-    },
-
-    /**
-     * 将传入的routeConfig加入<keep-router-view-alive>的缓存中
-     * 以下调用无效：设置了不缓存、是iframe页、未设置唯一标识、已缓存
-     * @param view {routeConfig}
-     */
-    addCacheOnly(view) {
-        const {noCache, iframe, usePathKey, useFullPathKey} = view.meta || {}
-
-        if (noCache || iframe || !view.name && !usePathKey && !useFullPathKey) {
-            return
-        }
-
-        const key = getRouterViewCacheKey(view)
-
-        if (store.cachedViews.includes(key)) {
-            return
-        }
-
-        store.cachedViews.push(key)
-    },
-
-    /**
-     * 同时调用{@link #addTagOnly}、{@link #addCacheOnly}
-     * @param view {routeConfig}
-     */
-    addTagAndCache(view) {
-        this.addTagOnly(view)
-        this.addCacheOnly(view)
-    },
-
-    /**
-     * 根据path从页签栏中移除一个页签
-     * @param view {path}，routeConfig
-     */
-    delTagOnly(view) {
-        const index = store.visitedViews.findIndex(i => i.path === view.path)
-        index > -1 && store.visitedViews.splice(index, 1)
-    },
-
-    /**
-     * 删除<keep-router-view-alive>对应的缓存
-     * @param view {routeConfig}
-     */
-    delCacheOnly(view) {
-        const key = getRouterViewCacheKey(view)
-        const index = store.cachedViews.indexOf(key)
-        index > -1 && store.cachedViews.splice(index, 1)
-    },
-
-    /**
-     * 同时调用{@link #delTagOnly}、{@link #delCacheOnly}，移除iframe页
-     * @param view {routeConfig}
-     */
-    delTagAndCache(view) {
-        this.delTagOnly(view)
-        this.delCacheOnly(view)
-
-        const iframe = view.meta && view.meta.iframe
-        iframe && pageMutations.delIframe(iframe)
-    },
-
-    /**
-     * 从页签栏上移除除了routeConfig以外的所有非固定页签
-     * 并且从<keep-router-view-alive>中移除除了routeConfig以外的所有缓存
-     * @param view {routeConfig}
-     */
-    delOtherTagAndCache(view) {
-        const visitedViews = store.visitedViews.filter(v => v.meta.affix || v.path === view.path)
-        const key = store.cachedViews.find(key => key === getRouterViewCacheKey(view))
-
-        store.visitedViews = visitedViews
-        store.cachedViews = key ? [key] : []
-    },
-
-    /**
-     * 从页签栏上移除所有非固定页签，并且移除<keep-router-view-alive>的所有缓存
-     */
-    delAllTagAndCache() {
-        store.visitedViews = store.visitedViews.filter(tag => tag.meta && tag.meta.affix)
-        store.cachedViews = []
-    }
-})
diff --git a/vue/full/src/layout/style.scss b/vue/full/src/layout/style.scss
new file mode 100644
index 0000000..f89fa8f
--- /dev/null
+++ b/vue/full/src/layout/style.scss
@@ -0,0 +1,8 @@
+@import "~el-admin-layout/src/style";
+@import "~el-admin-layout/src/style/maxViewHeight";
+
+@import "./component/Footer/style";
+@import "./component/NotifyBell/style";
+@import "./component/SettingDrawer/style";
+
+
diff --git a/vue/full/src/layout/util.js b/vue/full/src/layout/util.js
deleted file mode 100644
index e50283a..0000000
--- a/vue/full/src/layout/util.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {getters as appGetters} from "@/layout/store/app"
-
-//获取路由页面缓存所需的key
-export function getRouterViewCacheKey({name, path, fullPath, meta = {}}) {
-    const {usePathKey, useFullPathKey} = meta
-    return usePathKey ? path : useFullPathKey ? fullPath : name
-}
-
-//获取侧边栏的菜单，如果是双层侧边栏导航时，获取的是子菜单
-export function getSidebarMenus() {
-    const menus = appGetters.menus
-
-    if (!Array.isArray(menus)) {
-        return []
-    }
-
-    //移动端时，侧边栏只会按侧边栏导航模式渲染
-    if (appGetters.isMobile) {
-        return menus
-    }
-
-    switch (appGetters.navMode) {
-        case 'aside':
-            return menus
-        case 'head':
-            return []
-        case 'aside-two-part':
-        case 'mix':
-            const root = menus.find(i => i.path === appGetters.activeRootMenu)
-            return root ? root.children || [] : []
-        default:
-            return []
-    }
-}
-
-//根据路由获取当前激活的菜单
-export function getActiveMenuByRoute({path, meta}) {
-    return meta.activeMenu || path
-}
diff --git a/vue/full/src/layout/布局设计.md b/vue/full/src/layout/布局设计.md
deleted file mode 100644
index fa848e7..0000000
--- a/vue/full/src/layout/布局设计.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# 布局设计
-
-## 导航模式
-
-### 桌面端
-
-1.侧边栏导航：侧边栏菜单为完整菜单，顶部菜单不渲染
-
-2.顶部导航：侧边栏菜单不渲染，顶部菜单为完整菜单
-
-3.混合导航：顶部菜单为完整菜单的所有根节点，侧边栏菜单为当前激活的顶部菜单的子级
-
-4.双层侧边栏导航：侧边栏分为最左侧的根节点栏、二级子菜单，顶部菜单不渲染
-
-### 移动端
-
-1.侧边栏导航：侧边栏菜单为完整菜单，顶部菜单不渲染，侧边栏为抽屉模式
-
-2.顶部导航：设置无效，效果等同于侧边栏导航
-
-3.混合导航：设置无效，效果等同于侧边栏导航
-
-4.双层侧边栏导航：设置无效，效果等同于侧边栏导航
-
-## 侧边栏
-
-### 桌面端
-
-未设置自动隐藏时，折叠状态依据用户设置
-设置了自动隐藏时，折叠状态无效，侧边栏为抽屉模式
-
-当导航模式为*双层侧边栏导航*时，以下设置无效：
-- 折叠
-- 折叠时显示父级
-- 自动隐藏
-
-### 移动端
-
-侧边栏只能为抽屉模式
diff --git a/vue/full/src/router/define.js b/vue/full/src/router/define.js
index eeec943..d825d6b 100644
--- a/vue/full/src/router/define.js
+++ b/vue/full/src/router/define.js
@@ -1,4 +1,4 @@
-import Layout from "@/layout/index"
+import Layout from "@/layout"
 import Redirect from "@/view/_app/redirect"
 import Login from "@/view/_app/login/index"
 import Page403 from "@/view/_app/403"
diff --git a/vue/full/src/router/guardian/iframe.js b/vue/full/src/router/guardian/iframe.js
index 0bacebd..13df8a6 100644
--- a/vue/full/src/router/guardian/iframe.js
+++ b/vue/full/src/router/guardian/iframe.js
@@ -1,4 +1,4 @@
-import {mutations as pageMutations} from "@/layout/store/page"
+import {pageMutations} from "el-admin-layout"
 
 const beforeEach = (to, from, next) => {
     //从iframe页面离开时，判断是否需要删除iframe
diff --git a/vue/full/src/router/util.js b/vue/full/src/router/util.js
index d81b344..062f75c 100644
--- a/vue/full/src/router/util.js
+++ b/vue/full/src/router/util.js
@@ -1,4 +1,4 @@
-import Layout from '@/layout'
+import Layout from "@/layout"
 import SkeletonPage from '@/view/_common/SkeletonPage'
 import Page500 from '@/view/_app/500'
 import {isEmpty} from "@/util"
diff --git a/vue/full/src/store/module/resource.js b/vue/full/src/store/module/resource.js
index d492b44..132179c 100644
--- a/vue/full/src/store/module/resource.js
+++ b/vue/full/src/store/module/resource.js
@@ -1,6 +1,6 @@
 import path from 'path'
 import {route as routeConfig} from '@/config'
-import {mutations as appMutations} from "@/layout/store/app"
+import {appMutations} from "el-admin-layout"
 import {addDynamicRoutes} from '@/router'
 import {getDynamicRoutes} from '@/router/define'
 import {str2routeConfig, metaExtend} from "@/router/util"
diff --git a/vue/full/src/store/module/user.js b/vue/full/src/store/module/user.js
index 20f89a0..bdcd885 100644
--- a/vue/full/src/store/module/user.js
+++ b/vue/full/src/store/module/user.js
@@ -2,7 +2,7 @@ import {createMutations} from "@/store/util"
 import {emptyOrDefault} from "@/util"
 import {autoCompleteUrl} from "@/util/file" //此处存在循环引用？
 import {getUser, setUser} from "@/util/storage"
-import {mutations as tagsViewMutations} from "@/layout/store/tagsView"
+import {tagsViewMutations} from "el-admin-layout"
 import {login, logout} from '@/api/account'
 
 //刷新时从本地存储中获取用户信息
diff --git a/vue/full/src/util/browser.js b/vue/full/src/util/browser.js
index f23c986..6202b5d 100644
--- a/vue/full/src/util/browser.js
+++ b/vue/full/src/util/browser.js
@@ -1,26 +1,4 @@
-import cssVar from '@/asset/style/var.scss'
-
-const maxMobileWidth = parseFloat(cssVar.maxMobileWidth)
-
-/**
- * 根据body宽度判断是否为移动端，是则返回true
- *
- * @return {boolean}
- */
-export function isMobile() {
-    const rect = document.body.getBoundingClientRect()
-    return rect.width <= maxMobileWidth
-}
-
-/**
- * 判断是否为dom元素，是则返回true
- *
- * @param obj
- * @return {boolean}
- */
-export function isDom(obj) {
-    return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'
-}
+export {isMobile} from "el-admin-layout/src/util"
 
 /**
  * 获取元素的内宽（扣除左右padding后）
@@ -132,34 +110,6 @@ export function loadExternalResource(url, type = 'js') {
     })
 }
 
-/**
- * 将dom按最小距离垂直地滚动至视窗内
- * 比如dom在视窗下，那么会滚动到视窗底部
- *
- * @param child {HTMLElement}          需要滚动的dom
- * @param parent {HTMLElement|Window}  包含child的容器
- */
-export function scrollIntoViewVertically(child, parent = window) {
-    const {scrollTop, scrollHeight, offsetHeight: containerHeight} = parent
-
-    //当菜单高度不足以滚动时跳过
-    if (scrollHeight <= containerHeight) return
-
-    const elHeight = child.offsetHeight, between = getTopDistance(child, parent)
-
-    //计算需要滚动的距离，undefined说明不需要滚动
-    let distance
-
-    if (between < 0) distance = between
-    else if (between + elHeight > containerHeight) {
-        distance = between + elHeight - containerHeight
-    }
-
-    if (distance !== undefined) {
-        parent.scrollTo({top: scrollTop + distance, behavior: 'smooth'})
-    }
-}
-
 /**
  * 平滑滚动至指定的位置
  *
@@ -180,7 +130,7 @@ export function scrollTo(el, position, options) {
         el = el()
     }
 
-    if (!isDom(el)) return
+    if (!el) return
 
     const toTop = direction === 'top'
     const elPosition = getScroll(el, toTop)
diff --git a/vue/full/src/util/element-ui/elMenu.js b/vue/full/src/util/element-ui/elMenu.js
deleted file mode 100644
index 29eaa6e..0000000
--- a/vue/full/src/util/element-ui/elMenu.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import {scrollIntoViewVertically} from "@/util/browser"
-
-/**
- * 将当前激活的菜单移动到视窗中（仅限垂直菜单）
- *
- * @param menu el-menu实例
- */
-export function moveToActiveMenuVertically(menu) {
-    if (!menu) return
-
-    const cur = menu.activeIndex
-    if (!cur) return
-
-    const curInstance = menu.items[cur]
-    if (!curInstance) return
-
-    let el = curInstance.$el
-
-    //当侧边栏折叠时，需要滚动至可视区域的元素是激活菜单的最顶层父节点
-    if (menu.collapse) {
-        let rootParent = curInstance
-        while (rootParent.$parent.$options.componentName !== 'ElMenu') {
-            rootParent = rootParent.$parent
-        }
-        el = rootParent.$el
-    }
-
-    /*
-    * 这里考虑了菜单展开时的200ms动画时间
-    * 为什么不分情况讨论？比如当subMenu已经是展开状态时，无需延时滚动
-    * 但这种情况无法判断，因为这时menu.openedMenus已经包含了subMenu，无论subMenu之前是否展开
-    * 所以统一延时300ms
-    * */
-    window.setTimeout(() => scrollIntoViewVertically(el, menu.$el), 300)
-}
diff --git a/vue/full/src/util/index.js b/vue/full/src/util/index.js
index 56773e6..0aae132 100644
--- a/vue/full/src/util/index.js
+++ b/vue/full/src/util/index.js
@@ -1,12 +1,6 @@
-/**
- * 判断是否为空值，undefined、null、'' 都视为空值
- *
- * @param str         不定参数
- * @return {boolean}  若为空值，返回true，否则返回false
- */
-export function isEmpty(...str) {
-    return str.some(i => i === undefined || i === null || i === '')
-}
+import {isEmpty, getInitialValue, debounce, bindThis, deepClone} from "el-admin-layout/src/util"
+
+export {isEmpty, getInitialValue, debounce, bindThis, deepClone}
 
 /**
  * 当传入空值时，返回默认值
@@ -33,21 +27,6 @@ export function replaceAll(str, substr, replacement) {
     return str.replace(new RegExp(substr, 'gm'), replacement)
 }
 
-/**
- * 根据传入值的类型，返回基础起始值
- *
- * @param v
- * @return {boolean|{}|string|*[]|number|null}
- */
-export function getInitialValue(v) {
-    if (v === undefined || v === null) return null
-    if (typeof v === 'string') return ''
-    if (typeof v === 'boolean') return false
-    if (typeof v === 'number') return 0
-    if (typeof v === 'object') return {}
-    if (Array.isArray(v)) return []
-}
-
 /**
  * 简单重置对象属性，遇到对象时会递归重置
  * 重置方法使用{@link #getInitialValue}
@@ -135,51 +114,6 @@ export function timeFormat(fmt, date = new Date()) {
     return fmt
 }
 
-/**
- * 防抖
- *
- * @param func {function}      原函数
- * @param wait {number}        防抖间隔，单位毫秒
- * @param immediate {boolean}  是否立即执行一次
- * @return {function}          经过防抖包装后的函数
- */
-export function debounce(func, wait = 100, immediate = false) {
-    let timeout, args, context, timestamp, result
-
-    const later = function () {
-        // 据上一次触发时间间隔
-        const last = new Date().getTime() - timestamp
-
-        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
-        if (last < wait && last > 0) {
-            timeout = window.setTimeout(later, wait - last)
-        }
-        else {
-            timeout = null
-            // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
-            if (!immediate) {
-                result = func.apply(context, args)
-                if (!timeout) context = args = null
-            }
-        }
-    }
-
-    return function () {
-        context = this
-        args = arguments
-        timestamp = new Date().getTime()
-        const callNow = immediate && !timeout
-        // 如果延时不存在，重新设定延时
-        if (!timeout) timeout = window.setTimeout(later, wait)
-        if (callNow) {
-            result = func.apply(context, args)
-            context = args = null
-        }
-
-        return result
-    }
-}
-
 export function throttle(func, delay = 100) {
     let timeoutID
     let lastExec = 0
@@ -232,38 +166,3 @@ export function waitUntilSuccess(success, callback, interval = 1000, maxTryTime
         fun = window.setInterval(check, interval)
     })
 }
-
-//将传入对象的所有函数的this绑定为其自身
-export function bindThis(obj, root = obj) {
-    if (!obj || typeof obj !== 'object') return
-
-    Object.entries(obj).forEach(([k, v]) => {
-        if (typeof v === 'function') {
-            obj[k] = v.bind(root)
-        }
-        bindThis(v, root)
-    })
-
-    return obj
-}
-
-export function deepClone(source) {
-    if (source === null || typeof source !== 'object' || source instanceof Promise) {
-        return source
-    }
-
-    if (Array.isArray(source)) {
-        return source.map(i => deepClone(i))
-    }
-    else {
-        return Object.keys(source).reduce((obj, key) => {
-            obj[key] = deepClone(source[key])
-            return obj
-        }, {})
-    }
-}
-
-//有空值判断的trim
-export function trim(str) {
-    return isEmpty(str) ? str : str.trim()
-}
diff --git a/vue/full/src/util/observable.js b/vue/full/src/util/observable.js
deleted file mode 100644
index 7176ad6..0000000
--- a/vue/full/src/util/observable.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {getInitialValue} from "@/util"
-
-//为Vue.observer返回的对象设置getter
-export function createGetters(store) {
-    const getters = Object.create({})
-    Object.defineProperties(
-        getters,
-        Object.keys(store).reduce((obj, key) => {
-            obj[key] = {
-                enumerable: true,
-                get() {
-                    return store[key]
-                }
-            }
-            return obj
-        }, {})
-    )
-    return getters
-}
-
-//为Vue.observer返回的对象设置mutation
-export function createMutations(store, all = false) {
-    const keys = Object.keys(store)
-    const obj = {}
-    keys.forEach(key => {
-        obj[key] = v => store[key] = v
-    })
-    if (all) {
-        obj['$all'] = v => {
-            keys.forEach(key => {
-                store[key] = v && v[key] || getInitialValue(store[key])
-            })
-        }
-    }
-    return obj
-}
diff --git a/vue/full/src/util/route.js b/vue/full/src/util/route.js
index 4e94bba..53a4df4 100644
--- a/vue/full/src/util/route.js
+++ b/vue/full/src/util/route.js
@@ -1,33 +1,18 @@
 /**
  * 路由控制工具类
  */
-
-import {isEmpty} from "@/util"
-import {isString} from "@/util/validate"
-import router from '@/router'
-import {mutations as tagsViewMutations} from "@/layout/store/tagsView"
+import router from "@/router"
+import {refreshPage as refreshLayoutPage, closeCurrentPage} from "el-admin-layout/src/util"
 
 /**
  * 路由刷新
  *
- * @param route {string|route} 需要刷新的路由，不传时为当前路由，如果是字符串时请确保以'/'开头
- * @param replace {boolean}    是否使用replace进行跳转
+ * @param route               需要刷新的路由对象，不传时为当前路由
+ * @param replace {boolean}   是否使用replace进行跳转
  * @return {Promise}          返回vue-router跳转的结果
  */
-export function refreshPage(route = router.currentRoute, replace = true) {
-    const target = `/redirect${isString(route) ? route : route.fullPath}`
-    return router[replace ? 'replace' : 'push'](target)
+export function refreshPage(route = router.currentRoute, replace) {
+    return refreshLayoutPage(route, router, replace)
 }
 
-/**
- * 关闭当前页，如果传入next则跳转到next页面
- *
- * @param next {string|route}   跳转的目标页面，作为第一个参数传入vue-router.replace
- * @return {undefined|Promise}  仅在next有值时，返回vue-router.replace的结果
- */
-export function closeCurrentPage(next) {
-    tagsViewMutations.delTagAndCache(router.currentRoute)
-    if (!isEmpty(next)) {
-        return router.replace(next)
-    }
-}
+export {closeCurrentPage}
diff --git a/vue/full/src/view/_common/DetailPage/style.scss b/vue/full/src/view/_common/DetailPage/style.scss
index 5de86b0..23203c4 100644
--- a/vue/full/src/view/_common/DetailPage/style.scss
+++ b/vue/full/src/view/_common/DetailPage/style.scss
@@ -1,4 +1,5 @@
 @import "~@/asset/style/var";
+@import "~el-admin-layout/src/style/var";
 @import "~@/asset/style/mixin.scss";
 
 .detail-page {
diff --git a/vue/full/src/view/_common/SkeletonPage/style.scss b/vue/full/src/view/_common/SkeletonPage/style.scss
index aaa2b99..59b2b9e 100644
--- a/vue/full/src/view/_common/SkeletonPage/style.scss
+++ b/vue/full/src/view/_common/SkeletonPage/style.scss
@@ -1,4 +1,4 @@
-@import "~@/asset/style/var";
+@import "~el-admin-layout/src/style/var";
 
 .skeleton-page-wrapper {
     margin: $page-view-margin;
diff --git a/vue/full/src/view/admin/message/user/indexPage.vue b/vue/full/src/view/admin/message/user/indexPage.vue
index bf5498b..1abfff2 100644
--- a/vue/full/src/view/admin/message/user/indexPage.vue
+++ b/vue/full/src/view/admin/message/user/indexPage.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import {getters as appGetters} from "@/layout/store/app"
+import {appGetters} from "el-admin-layout"
 import MessageStream from './MessageStream'
 
 export default {
diff --git a/vue/full/src/view/admin/system/category/component/List.vue b/vue/full/src/view/admin/system/category/component/List.vue
index f104a8a..59a6e07 100644
--- a/vue/full/src/view/admin/system/category/component/List.vue
+++ b/vue/full/src/view/admin/system/category/component/List.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import ContextMenu from "@/component/menu/ContextMenu"
+import {ContextMenu} from "el-admin-layout"
 import CategoryTree from '@/component/biz/CategoryTree'
 import {add, del, getAll} from "@/api/system/category"
 import {isEmpty, waitUntilSuccess} from '@/util'
diff --git a/vue/full/src/view/admin/system/department/indexPage.vue b/vue/full/src/view/admin/system/department/indexPage.vue
index eac8e16..c8536f2 100644
--- a/vue/full/src/view/admin/system/department/indexPage.vue
+++ b/vue/full/src/view/admin/system/department/indexPage.vue
@@ -48,7 +48,7 @@
  * 详情见iview-admin
  * https://admin.iviewui.com/component/org_tree_page
  */
-import ContextMenu from "@/component/menu/ContextMenu"
+import {ContextMenu} from "el-admin-layout"
 import EditDialog from "./component/EditDialog"
 import OrgTreeView from "./component/OrgTreeView"
 import ZoomControl from './component/ZoomControl'
diff --git a/vue/full/vue.config.js b/vue/full/vue.config.js
index 46871a2..a8980e8 100644
--- a/vue/full/vue.config.js
+++ b/vue/full/vue.config.js
@@ -18,7 +18,7 @@ module.exports = {
     runtimeCompiler: true,
     lintOnSave: false,
     productionSourceMap: settings.isDev,
-    parallel: true,
+    transpileDependencies: ['el-admin-layout'],
     devServer: {
         port: process.env.port || 8079,
         contentBasePublicPath: settings.contextPath,