diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json
index ba14cd1..4fb1842 100644
--- a/vue-admin-wonderful-next/package.json
+++ b/vue-admin-wonderful-next/package.json
@@ -6,7 +6,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "element-plus": "^v1.0.1-beta.20",
+    "element-plus": "^v1.0.1-beta.23",
     "mitt": "^2.1.0",
     "sortablejs": "^1.10.2",
     "vue": "^3.0.5",
diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue
index de035a9..d75c68a 100644
--- a/vue-admin-wonderful-next/src/App.vue
+++ b/vue-admin-wonderful-next/src/App.vue
@@ -9,7 +9,7 @@ export default {
   name: "app",
   setup() {
     onBeforeMount(() => {
-      setIconfont(["//at.alicdn.com/t/font_2298093_8wsrw2zw3rg.css"]);
+      setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
     });
   },
 };
diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts
index 0f3ed89..1bc9ba2 100644
--- a/vue-admin-wonderful-next/src/router/index.ts
+++ b/vue-admin-wonderful-next/src/router/index.ts
@@ -7,16 +7,14 @@ const staticRoutes: Array<RouteRecordRaw> = [
         component: () => import('/@/views/layout/index.vue'),
         redirect: '/home',
         meta: {
-            title: '首页',
-            index: 0
+            title: '首页'
         },
         children: [{
             path: '/home',
             name: 'home',
             component: () => import('/@/views/home/index.vue'),
             meta: {
-                title: '首页',
-                index: 0
+                title: '首页'
             }
         },
         {
@@ -24,8 +22,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
             name: 'docs',
             component: () => import('/@/views/docs/index.vue'),
             meta: {
-                title: '文档',
-                index: 1
+                title: '文档'
             }
         },
         {
@@ -33,8 +30,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
             name: 'docs1',
             component: () => import('/@/views/docs copy 1/index.vue'),
             meta: {
-                title: '文档1',
-                index: 2
+                title: '文档1'
             }
         },
         {
@@ -42,8 +38,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
             name: 'docs2',
             component: () => import('/@/views/docs copy 2/index.vue'),
             meta: {
-                title: '文档2',
-                index: 3
+                title: '文档2'
             }
         },
         {
@@ -51,8 +46,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
             name: 'docs3',
             component: () => import('/@/views/docs copy 3/index.vue'),
             meta: {
-                title: '文档3',
-                index: 4
+                title: '文档3'
             }
         }]
     },
diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts
index 91c9751..7d0b1b8 100644
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/vue-admin-wonderful-next/src/store/index.ts
@@ -30,7 +30,9 @@ export interface RootStateTypes {
         isGrayscale: boolean,
         isInvert: boolean,
         isWartermark: boolean,
-        wartermarkText: string
+        wartermarkText: string,
+        tagsStyle: string,
+        animation: string
     }
 }
 
diff --git a/vue-admin-wonderful-next/src/theme/common/transition.scss b/vue-admin-wonderful-next/src/theme/common/transition.scss
index 59c98a6..e23f4d2 100644
--- a/vue-admin-wonderful-next/src/theme/common/transition.scss
+++ b/vue-admin-wonderful-next/src/theme/common/transition.scss
@@ -22,6 +22,16 @@
 .slide-left-leave-to {
   @extend .slide-right-enter-from;
 }
+.opacitys-enter-active,
+.opacitys-leave-active {
+  will-change: transform;
+  transition: all 0.3s ease;
+  position: absolute;
+}
+.opacitys-enter-from,
+.opacitys-leave-to {
+  opacity: 0;
+}
 
 /* Breadcrumb 面包屑过渡动画
 ------------------------------- */
diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss
index 9f64499..b8ff7d9 100644
--- a/vue-admin-wonderful-next/src/theme/element.scss
+++ b/vue-admin-wonderful-next/src/theme/element.scss
@@ -11,6 +11,9 @@
     color: set-color(primary-light-3);
   }
 }
+.el-button--text:active {
+  color: set-color(primary-light-3);
+}
 // default
 .el-button--default:hover,
 .el-button--default:focus {
@@ -20,6 +23,9 @@
 .el-button--default.is-plain:focus {
   @include Button(primary, whites, primary-light-1);
 }
+.el-button--default:active {
+  @include Button(primary, whites, primary-light-1);
+}
 // primary
 .el-button--primary {
   @include Button(whites, primary, primary);
@@ -41,6 +47,10 @@
 .el-button--primary.is-disabled:hover {
   @include Button(whites, primary-light-7, primary-light-7);
 }
+.el-button--primary.is-active,
+.el-button--primary:active {
+  @include Button(whites, primary, primary);
+}
 // success
 .el-button--success {
   @include Button(whites, success, success);
@@ -56,6 +66,10 @@
     @include Button(whites, success, success);
   }
 }
+.el-button--success.is-active,
+.el-button--success:active {
+  @include Button(whites, success, success);
+}
 // info
 .el-button--info {
   @include Button(whites, info, info);
@@ -71,6 +85,10 @@
     @include Button(whites, info, info);
   }
 }
+.el-button--info.is-active,
+.el-button--info:active {
+  @include Button(whites, info, info);
+}
 // warning
 .el-button--warning {
   @include Button(whites, warning, warning);
@@ -86,6 +104,10 @@
     @include Button(whites, warning, warning);
   }
 }
+.el-button--warning.is-active,
+.el-button--warning:active {
+  @include Button(whites, warning, warning);
+}
 // danger
 .el-button--danger {
   @include Button(whites, danger, danger);
@@ -101,6 +123,10 @@
     @include Button(whites, danger, danger);
   }
 }
+.el-button--danger.is-active,
+.el-button--danger:active {
+  @include Button(whites, danger, danger);
+}
 
 /* Link 文字链接
 ------------------------------- */
diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts
index 8d8b54b..c0def4d 100644
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts
@@ -27,5 +27,7 @@ export default {
     isGrayscale: false,
     isInvert: false,
     isWartermark: false,
-    wartermarkText: 'small@小柒'
+    wartermarkText: 'small@小柒',
+    tagsStyle: 'tagsStyleOne',
+    animation: 'slideRight'
 }
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/docs/index.vue b/vue-admin-wonderful-next/src/views/docs/index.vue
index 822eeaf..b54b130 100644
--- a/vue-admin-wonderful-next/src/views/docs/index.vue
+++ b/vue-admin-wonderful-next/src/views/docs/index.vue
@@ -1,3 +1,3 @@
 <template>
-  docs
+  <p v-for="v in 100" :key="v">docs</p>
 </template>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/layout/component/main.vue b/vue-admin-wonderful-next/src/views/layout/component/main.vue
index a9160ea..2cc46b5 100644
--- a/vue-admin-wonderful-next/src/views/layout/component/main.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue
@@ -3,7 +3,7 @@
     <el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}"
       ref="layoutScrollbarRef">
       <router-view v-slot="{ Component }">
-        <transition :name="transitionName" mode="out-in">
+        <transition :name="setTransitionName" mode="out-in">
           <div :key="key">
             <keep-alive>
               <component :is="Component" />
@@ -25,7 +25,7 @@ import {
   getCurrentInstance,
   watch,
 } from "vue";
-import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import { useRoute } from "vue-router";
 import { useStore } from "/@/store/index.ts";
 import Footer from "/@/views/layout/footer/index.vue";
 export default defineComponent({
@@ -39,14 +39,19 @@ export default defineComponent({
       transitionName: "slide-right",
       headerHeight: "84px",
     });
+    const setTransitionName = computed(() => {
+      let { animation } = store.state.themeConfig;
+      if (animation === "slideRight")
+        return (state.transitionName = "slide-right");
+      else if (animation === "slideLeft")
+        return (state.transitionName = "slide-left");
+      else if (animation === "opacitys")
+        return (state.transitionName = "opacitys");
+    });
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
     const key = computed(() => route.path);
-    onBeforeRouteUpdate((to, from) => {
-      state.transitionName =
-        to.meta.index > from.meta.index ? "slide-right" : "slide-left";
-    });
     watch(store.state.themeConfig, (val) => {
       state.headerHeight = val.isTagsview ? "84px" : "50px";
       if (val.isFixedHeaderChange !== val.isFixedHeader) {
@@ -55,6 +60,7 @@ export default defineComponent({
     });
     return {
       getThemeConfig,
+      setTransitionName,
       key,
       ...toRefs(state),
     };
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
index 421f7e8..ce196e4 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
@@ -182,20 +182,21 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-select placeholder="请选择" size="mini" style="width:90px;">
-              <el-option label="风格1" value="风格1"></el-option>
-              <el-option label="风格2" value="风格2"></el-option>
-              <el-option label="风格3" value="风格3"></el-option>
+            <el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;">
+              <el-option label="风格1" value="tagsStyleOne"></el-option>
+              <el-option label="风格2" value="tagsStyleTwo"></el-option>
+              <el-option label="风格3" value="tagsStyleThree"></el-option>
+              <el-option label="风格4" value="tagsStyleFour"></el-option>
             </el-select>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15 mb26">
           <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-select placeholder="请选择" size="mini" style="width:90px;">
-              <el-option label="slide-right" value="slide-right"></el-option>
-              <el-option label="slide-right" value="slide-right"></el-option>
-              <el-option label="slide-right" value="slide-right"></el-option>
+            <el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
+              <el-option label="slideRight" value="slideRight"></el-option>
+              <el-option label="slideLeft" value="slideLeft"></el-option>
+              <el-option label="opacitys" value="opacitys"></el-option>
             </el-select>
           </div>
         </div>
@@ -488,6 +489,8 @@ export default defineComponent({
       .el-circular {
         border-radius: 2px;
         overflow: hidden;
+        border: 1px solid transparent;
+        transition: all 0.3s ease-in-out;
       }
       .drawer-layout-active {
         border: 1px solid;
@@ -495,6 +498,7 @@ export default defineComponent({
       }
       .layout-tips-warp,
       .layout-tips-warp-active {
+        transition: all 0.3s ease-in-out;
         position: absolute;
         left: 50%;
         top: 50%;
@@ -504,6 +508,7 @@ export default defineComponent({
         border-radius: 100%;
         padding: 4px;
         .layout-tips-box {
+          transition: inherit;
           width: 30px;
           height: 30px;
           z-index: 9;
@@ -511,6 +516,7 @@ export default defineComponent({
           border-color: var(--color-primary-light-4);
           border-radius: 100%;
           .layout-tips-txt {
+            transition: inherit;
             position: relative;
             top: 5px;
             font-size: 12px;
@@ -540,6 +546,26 @@ export default defineComponent({
           }
         }
       }
+      &:hover {
+        .el-circular {
+          transition: all 0.3s ease-in-out;
+          border: 1px solid;
+          border-color: var(--color-primary);
+        }
+        .layout-tips-warp {
+          transition: all 0.3s ease-in-out;
+          border-color: var(--color-primary);
+          .layout-tips-box {
+            transition: inherit;
+            border-color: var(--color-primary);
+            .layout-tips-txt {
+              transition: inherit;
+              color: var(--color-primary) !important;
+              background-color: #e9eef3 !important;
+            }
+          }
+        }
+      }
     }
   }
   .copy-config {
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
index 7c1f59e..10924da 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
@@ -4,7 +4,7 @@
       <i class="el-icon-search" title="菜单搜索"></i>
     </div>
     <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
-      <i class="el-icon-setting" title="布局配置"></i>
+      <i class="icon-skin iconfont" title="布局配置"></i>
     </div>
     <div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" title="消息"></i></div>
     <div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
index ca5f60b..481c523 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
     <Scroll ref="scrollRef">
-      <ul class="layout-navbars-tagsview-ul">
+      <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
         <li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
           @contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
           :ref="el => { if (el) tagsRefs[k] = el }">
@@ -9,8 +9,9 @@
           <span>{{v.name}}</span>
           <template v-if="isActive(v.path)">
             <i class="el-icon-refresh-right ml5"></i>
-            <i class="el-icon-close layout-navbars-tagsview-ul-li-icon"></i>
+            <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"></i>
           </template>
+          <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"></i>
         </li>
       </ul>
     </Scroll>
@@ -58,6 +59,14 @@ export default {
         { id: 1, name: "文档3", path: "/docs3" },
       ],
     });
+    const setTagsStyle = computed(() => {
+      let { tagsStyle } = store.state.themeConfig;
+      if (tagsStyle === "tagsStyleTwo") return "layout-navbars-tagsview-ul-two";
+      else if (tagsStyle === "tagsStyleThree")
+        return "layout-navbars-tagsview-ul-three";
+      else if (tagsStyle === "tagsStyleFour")
+        return "layout-navbars-tagsview-ul-four";
+    });
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
@@ -110,6 +119,7 @@ export default {
       contextmenuRef,
       scrollRef,
       getThemeConfig,
+      setTagsStyle,
       ...toRefs(state),
     };
   },
@@ -141,6 +151,8 @@ export default {
       padding: 0 15px;
       margin-right: 5px;
       border-radius: 2px;
+      position: relative;
+      z-index: 3;
       cursor: pointer;
       justify-content: space-between;
       &:hover {
@@ -165,6 +177,12 @@ export default {
           background-color: var(--color-primary-light-3);
         }
       }
+      .layout-icon-active {
+        display: block;
+      }
+      .layout-icon-three {
+        display: none;
+      }
     }
     .is-active {
       color: #ffffff;
@@ -172,5 +190,122 @@ export default {
       border-color: var(--color-primary);
     }
   }
+  // 风格2
+  &-ul-two {
+    .layout-navbars-tagsview-ul-li {
+      height: 34px !important;
+      line-height: 34px !important;
+      border: none !important;
+      .layout-navbars-tagsview-ul-li-iconfont {
+        display: none;
+      }
+      .layout-icon-active {
+        display: none;
+      }
+      .layout-icon-three {
+        display: block;
+      }
+    }
+    .is-active {
+      background: none !important;
+      color: var(--color-primary) !important;
+      border-bottom: 2px solid !important;
+      border-color: var(--color-primary) !important;
+      border-radius: 0 !important;
+    }
+  }
+  // 风格3
+  &-ul-three {
+    .layout-navbars-tagsview-ul-li {
+      height: 34px !important;
+      line-height: 34px !important;
+      border: 1px solid #e6e6e6 !important;
+      border-top: none !important;
+      border-left: none !important;
+      border-radius: 0 !important;
+      margin-right: 0 !important;
+      &:first-of-type {
+        border-left: 1px solid #e6e6e6 !important;
+      }
+      .layout-icon-active {
+        display: none;
+      }
+      .layout-icon-three {
+        display: block;
+      }
+    }
+    .is-active {
+      background: white !important;
+      color: var(--color-primary) !important;
+      border-bottom: 1px solid !important;
+      border-bottom-color: var(--color-primary) !important;
+    }
+  }
+  // 风格4
+  &-ul-four {
+    .layout-navbars-tagsview-ul-li {
+      margin-right: 0 !important;
+      border: none !important;
+      position: relative;
+      border-radius: 0 !important;
+      .layout-icon-active {
+        display: none;
+      }
+      .layout-icon-three {
+        display: block;
+      }
+      &:hover {
+        background: none !important;
+      }
+    }
+    .is-active {
+      border-top-left-radius: 8px !important;
+      border-top-right-radius: 8px !important;
+      position: relative;
+      z-index: 1;
+      span {
+        position: relative;
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0px;
+          width: 10px;
+          height: 10px;
+          background: var(--color-primary);
+          z-index: 1;
+        }
+        &::before {
+          left: -36px;
+        }
+        &::after {
+          right: -51px;
+        }
+      }
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 1px;
+        width: 10px;
+        height: 10px;
+        background: white;
+        z-index: 2;
+      }
+      &::before {
+        left: -10px;
+        transform: rotate(-4deg);
+        border-bottom-right-radius: 10px;
+      }
+      &::after {
+        right: -10px;
+        transform: rotate(4deg) !important;
+        border-bottom-left-radius: 10px;
+      }
+      &:hover {
+        background: var(--color-primary) !important;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/login/index.vue b/vue-admin-wonderful-next/src/views/login/index.vue
index e00e3f1..b9d2e9a 100644
--- a/vue-admin-wonderful-next/src/views/login/index.vue
+++ b/vue-admin-wonderful-next/src/views/login/index.vue
@@ -73,8 +73,8 @@ export default {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) translate3d(0, 0, 0);
-    background-color: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 2px 12px 0 var(--color-primary-light-7);
+    background-color: rgba(255, 255, 255, 0.99);
+    box-shadow: 0 2px 12px 0 var(--color-primary-light-5);
     border-radius: 4px;
     transition: height 0.2s linear;
     height: 480px;