diff --git a/README.md b/README.md
index 2678c0a1..692557b6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <p align="center">
   <a href="http://www.layui.com">
-    <img src="https://images.gitee.com/uploads/images/2021/1213/173638_d6911839_4835367.png" alt="layui" width="360">
+    <img src="https://images.gitee.com/uploads/images/2022/0104/135039_3f41c467_4835367.png" alt="layui" width="360">
   </a>
 </p>
 
@@ -70,18 +70,19 @@ createApp(App).use(Layui).mount('#app')
 
 ### 使用趋势
 
-[![Giteye chart](https://images.gitee.com/uploads/images/2021/1222/233241_e13a5449_4835367.png)](https://giteye.net/chart/5ZQ67WWS)
+[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/5ZQ67WWS.png)](https://giteye.net/chart/5ZQ67WWS)
 
 ### 贡献代码
 
-> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？  
-> 好的，姑且就这样认为吧。
+> 在人的尺度里，世界既无始也无终，唯一的信仰是，总有人认得你站在暴风雪里的样子。  
 
 [![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
 
 ## 交流群
 
-![输入图片说明](https://images.gitee.com/uploads/images/2021/1008/090410_8b349271_4835367.png 'QQ图片20211008090242.png')
+| QQ | 微信 |
+|----|----|
+| <img src="https://images.gitee.com/uploads/images/2021/1008/090410_8b349271_4835367.png" width="180px" />  | <img src="https://images.gitee.com/uploads/images/2022/0103/195713_7e626723_4835367.png" width="180px" /> |
 
 ## 相关
 
diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
index 1ab24bb4..91525a7d 100644
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -12,9 +12,13 @@
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-menu-item title="目录" id="7">
-        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
+        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
+        <lay-menu-item title="菜单三" id="10">
+            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
+        </lay-menu-item>
     </lay-menu-item> 
   </lay-menu>
 </template>
@@ -52,9 +56,13 @@ export default {
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-menu-item title="目录" id="7">
-        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
+        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
+        <lay-menu-item title="菜单三" id="10">
+            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
+        </lay-menu-item>
     </lay-menu-item> 
   </lay-menu>
 </template>
diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index 9f6d7a35..bc93ea2b 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -8,9 +8,9 @@
 
 <template>
   <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
-  <lay-modal title="基础使用" v-model="visible1">
+  <lay-layer title="基础使用" v-model="visible1">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -41,9 +41,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
-  <lay-modal title="允许拖动" v-model="visible2">
+  <lay-layer title="允许拖动" v-model="visible2">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -74,9 +74,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
-  <lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
+  <lay-layer title="放大缩小" v-model="visible3" move="true" maxmin="true">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -107,9 +107,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
-  <lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
+  <lay-layer title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -140,9 +140,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
-  <lay-modal title="拉伸尺寸" resize="true" v-model="visible8" move="true">
+  <lay-layer title="拉伸尺寸" resize="true" v-model="visible8" move="true">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -173,7 +173,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
+  <lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
 </template>
 
 <script>
@@ -206,9 +206,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
-  <lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
+  <lay-layer title="定义操作" v-model="visible6" move="true" :btn="btn6">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -244,9 +244,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
-  <lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
+  <lay-layer title="开启遮盖" move="true" shade="false" v-model="visible7">
     内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -329,6 +329,7 @@ export default {
 | content         | 内容          | --                         |
 | shade           | 开启遮盖      | --                         |
 | shadeClose      | 遮盖点击关闭  | --                         |
+| shadeOpacity    | 遮盖层透明度  | `0.1`                         |
 | zIndex          | 自定义层级    | --                         |
 | type            | 类型          | `1: component` `2: iframe` |
 | closeBtn        | 显示关闭      | true                       |
@@ -336,6 +337,8 @@ export default {
 | btnAlign        | 按钮布局      | `l` `r` `c`                |
 | anim            | 入场动画      | `0` `-` `6`                |
 | isOutAnim       | 关闭动画      | `true` `false`             |
+| success            | 显示回调   | --                |
+| end       | 关闭回调      | --             |
 
 :::
 
diff --git a/example/docs/zh-CN/components/skeleton.md b/example/docs/zh-CN/components/skeleton.md
index 0ba342ae..fff07bf1 100644
--- a/example/docs/zh-CN/components/skeleton.md
+++ b/example/docs/zh-CN/components/skeleton.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index dc62b91e..daf62e5b 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,7 +11,22 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
-  <ul> 
+    <ul> 
+      <a name="0-3-2"> </a> 
+      <li> 
+        <h3>0.3.2 <span class="layui-badge-rim">2022-01-03</span></h3> 
+        <ul> 
+          <li>[新增] skeleton 骨架屏组件。</li>
+          <li>[重构] tooltip 内部 popper 组件，支持移动到 tooltip 内部。</li>
+          <li>[增强] layer 部分函数 msg open confirm 等, content 支持 VNode 类型。</li>
+          <li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
+          <li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
+          <li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
+          <li>[升级] layer-vue 1.2.4。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
       <a name="0-3-1"> </a> 
       <li> 
         <h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3> 
diff --git a/example/src/components/LayAnchor.vue b/example/src/components/LayAnchor.vue
index 61e304c3..d32891b6 100644
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -2,29 +2,30 @@
   <aside :class="classAside">
     <div class="lay-aside-top">
       <lay-button
-        @click="handlerBtnClick()"
         type="primary"
         size="xs"
         :class="classAsideBtn"
+        @click="handlerBtnClick()"
       >
         <lay-icon :type="iconType" size="40"> </lay-icon>
       </lay-button>
     </div>
     <lay-scroll
-      class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar" >
+      class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar"
+    >
       <ul>
         <li
-          v-for="(item, index) in anchorsComput"
+          v-for="(anchor, index) in anchorList"
           :key="index"
           class="lay-aside-list"
-          :class="{ active: index === curridx }"
-          @click="curridx = index"
+          :class="{ active: index === activeIndex }"
+          @click.prevent="handlerListItemClick(index, anchor)"
         >
           <a
-            :href="`#${item}`"
+            :href="`#${anchor}`"
             class="lay-aside-link"
-            :class="{ active: index === curridx }"
-            >{{ item }}</a
+            :class="{ active: index === activeIndex }"
+            >{{ anchor }}</a
           >
         </li>
       </ul>
@@ -32,41 +33,138 @@
   </aside>
 </template>
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
 const props = defineProps<{
   anchors?: Array<string> | string;
   currIndex: number;
-  show: boolean | string;
+  show: boolean;
 }>();
 
-let curridx = ref(props.currIndex);
-const show = ref(props.show);
-const iconType = ref("layui-icon-right");
-const anchor = props.anchors;
+let activeIndex = ref<number>(0);
+const show = ref<boolean>(props.show);
+const iconType = ref<string>("layui-icon-right");
+const anchors: string | string[] | undefined = props.anchors;
+/**滚动条高度 */
+const scrollTop = ref<number>(0);
+/**要监听的滚动元素 */
+const scrollRefEl = shallowRef<HTMLElement | undefined>(undefined);
+/**折叠动画 */
+let enableAnimation = false;
 
-const anchorsComput = computed(() => {
-  return typeof anchor === "string" ? anchor?.split(",") : anchor;
+const anchorList = computed(() => {
+  return typeof anchors === "string" ? anchors?.split(",") : anchors;
 });
 
 const classAside = computed(() => [
   "lay-aside",
+  { "lay-aside-animation": enableAnimation },
   { "lay-aside-collapse": !show.value },
 ]);
 
-const classAsideBtn = computed(() => [
-  "lay-aside-collapse-btn",
-  { "lay-aside-collapse-btn-collapse": !show.value },
-]);
+const classAsideBtn = computed(() => {
+  let classBtn = [];
+  if (enableAnimation) {
+    classBtn = [
+      "lay-aside-collapse-btn",
+      "lay-aside-animation",
+      { "lay-aside-collapse-btn-collapse": !show.value }
+    ];
+  } else { 
+    classBtn = [
+      "lay-aside-collapse-btn",
+      { "lay-aside-collapse-btn-collapse": !show.value }
+    ];
+
+    enableAnimation = true;
+  }
+  return classBtn;
+});
 
 const handlerBtnClick = () => {
   show.value = !show.value;
+}
+
+const handlerListItemClick = (index: number, id: string) => {
+  activeIndex.value = index;
+  scrollToTitle(id);
+}
+
+/**锚点标签跟随滚动高亮 */
+const handlerScroll = () => {
+  // 距离顶部 90 改变 activeIndex
+  scrollTop.value = getScrollTop(scrollRefEl.value) + 90;
+  anchorList.value?.forEach((item, index) => {
+    const elOffsetTop = document.getElementById(item)?.offsetTop;
+    if (elOffsetTop) {
+      if (index === 0 && scrollTop.value < elOffsetTop) {
+        activeIndex.value = 0;
+      } else if (scrollTop.value >= elOffsetTop) {
+        activeIndex.value = index;
+      }
+    }
+  });
+}
+
+const handlerCollapse = () => {
   iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+  // @ts-ignore
+  scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
+    ? "180px"
+    : "0px";
+}
+
+watch(show, () => {
+  handlerCollapse();
+});
+
+onMounted(() => {
+  // @ts-ignore TODO 封装 hooks
+  scrollRefEl.value = document.querySelector(".layui-body");
+  if (!scrollRefEl.value) {
+    throw new Error(`scroll element is not existed: ".layui-body"`);
+  }
+  scrollRefEl.value.scrollTop = 0;
+  scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
+  // 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
+  // @ts-ignore
+  show.value = scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
+  enableAnimation = show.value;
+});
+
+/**获取滚动高度 */
+const getScrollTop = (el: HTMLElement | undefined): number => {
+  return el
+    ? el.scrollTop
+    : window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0;
+}
+/**平滑滚动 */
+const scrollToTitle = (id: string): void => {
+  document.getElementById(id)?.scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+    inline: "nearest",
+  });
+}
+
+const throttle = (func: Function, wait: number) => {
+  var timer: any = null;
+  return (...args: any) => {
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null;
+        func.apply(this, args);
+      }, wait);
+    }
+  };
 };
 </script>
 <style lang="less" scoped>
-.layui-side-scroll-bar{
-  overflow-y: scroll; 
+.layui-side-scroll-bar {
+  overflow-y: scroll;
   max-width: 156px;
 }
 .layui-side-scroll::-webkit-scrollbar {
@@ -81,10 +179,16 @@ const handlerBtnClick = () => {
   padding: 0 25px;
   background-color: #ffffff;
   border-left: 1px solid rgb(229 230 235);
-  transition: right 200ms;
+  transition: none;
+  -webkit-transition: none;
   height: calc(100% - 60px);
 }
 
+.lay-aside-collapse {
+  right: -180px;
+  opacity: 0.7;
+}
+
 .lay-aside-top {
   height: 29px;
 }
@@ -102,14 +206,6 @@ const handlerBtnClick = () => {
   border-radius: 2px;
   cursor: pointer;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
-  &:hover {
-    background-color: #f6f6f6 !important;
-    color: #5fb878;
-  }
-  &:active {
-    background-color: #f6f6f6 !important;
-    color: #89d89f;
-  }
 }
 .lay-aside-list {
   position: relative;
@@ -122,15 +218,16 @@ const handlerBtnClick = () => {
     background-color: #f6f6f6 !important;
     color: #5fb878;
   }
-}
-.active {
-  background-color: #f6f6f6 !important;
-  color: #5fb878 !important;
-}
-
-.lay-aside-collapse {
-  right: -180px;
-  opacity: 0.7;
+  &:active {
+    background-color: #f6f6f6 !important;
+    color: #89d89f;
+  }
+  &.active {
+    background-color: #f6f6f6 !important;
+    * {
+      color: #5fb878 !important;
+    }
+  }
 }
 
 .lay-aside-collapse-btn {
@@ -148,14 +245,20 @@ const handlerBtnClick = () => {
   border-bottom-left-radius: 4px;
   border: rgb(229 230 235) 1px solid;
   border-right: none;
-  transition: right 200ms;
   box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+  transition: none;
+  -webkit-transition: none;
   &:hover {
     background-color: #e2e2e2;
   }
 }
 .lay-aside-collapse-btn-collapse {
-  right:0px;
+  right: 0px;
+}
+
+.lay-aside-animation {
+  transition: right 200ms;
+  -webkit-transition: right 200ms;
 }
 
 @media screen and (max-width: 768px) {
@@ -171,8 +274,8 @@ const handlerBtnClick = () => {
   .lay-aside-list {
     max-width: 68px;
   }
-  .layui-side-scroll-bar{
+  .layui-side-scroll-bar {
     max-width: 68px;
-  }   
+  }
 }
 </style>
diff --git a/example/src/components/LayTableBox.vue b/example/src/components/LayTableBox.vue
index 00f0806e..bae6cef6 100644
--- a/example/src/components/LayTableBox.vue
+++ b/example/src/components/LayTableBox.vue
@@ -5,9 +5,9 @@
 </template>
 <style>
 .lay-table-box table {
-  width: 100%; /*表格宽度*/
-  border-collapse: collapse; /*使用单一线条的边框*/
-  empty-cells: show; /*单元格无内容依旧绘制边框*/
+  width: 100%; 
+  border-collapse: collapse; 
+  empty-cells: show;
   border-right: 1px solid whitesmoke;
   border-left: 1px solid whitesmoke;
   border-radius: 4px;
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index a50c7634..b94a11b6 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.1 </a>
+          <a href="javascript:void(0)"> 0.3.2 </a>
         </li>
       </ul>
     </lay-header>
diff --git a/example/src/plugin/common-plugins.ts b/example/src/plugin/common-plugins.ts
index 53be4718..7b4e0839 100644
--- a/example/src/plugin/common-plugins.ts
+++ b/example/src/plugin/common-plugins.ts
@@ -37,4 +37,4 @@ const plugins = [
   }),
 ] as any
 
-export default plugins
+export default plugins
\ No newline at end of file
diff --git a/example/src/plugin/create-anchor.ts b/example/src/plugin/create-anchor.ts
index 1856b733..d0d9fe3d 100644
--- a/example/src/plugin/create-anchor.ts
+++ b/example/src/plugin/create-anchor.ts
@@ -2,12 +2,9 @@ import container from "markdown-it-container";
 import type Token from "markdown-it/lib/token";
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string;
-  }
-];
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
+]
 
 export default function createContainer(
   klass: string,
diff --git a/example/src/plugin/create-block.ts b/example/src/plugin/create-block.ts
index 92871d35..78c2db80 100644
--- a/example/src/plugin/create-block.ts
+++ b/example/src/plugin/create-block.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
diff --git a/example/src/plugin/create-comment.ts b/example/src/plugin/create-comment.ts
index d882be0a..995e2eaa 100644
--- a/example/src/plugin/create-comment.ts
+++ b/example/src/plugin/create-comment.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -27,4 +24,4 @@ export default function createContainer(
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/create-describe.ts b/example/src/plugin/create-describe.ts
index f3933538..15ad156c 100644
--- a/example/src/plugin/create-describe.ts
+++ b/example/src/plugin/create-describe.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -28,4 +25,4 @@ export default function createContainer(
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/create-table.ts b/example/src/plugin/create-table.ts
index 0e22dc25..ba80f38c 100644
--- a/example/src/plugin/create-table.ts
+++ b/example/src/plugin/create-table.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -28,4 +25,4 @@ export default function createContainer(
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/create-title.ts b/example/src/plugin/create-title.ts
index ba5f5410..35dfa2b9 100644
--- a/example/src/plugin/create-title.ts
+++ b/example/src/plugin/create-title.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -23,11 +20,11 @@ export default function createContainer(
         if (token.nesting === 1) {
           return `<lay-field id="${info || defaultTitle}" title="${
             info || defaultTitle
-          }" style="margin-top:20px;margin-bottom: 20px;">`
+          }" style="margin-top:21px;margin-bottom: 20px;">`
         } else {
           return '</lay-field>\n'
         }
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/snippet.ts b/example/src/plugin/snippet.ts
index 5b77117b..72b5c9d0 100644
--- a/example/src/plugin/snippet.ts
+++ b/example/src/plugin/snippet.ts
@@ -19,13 +19,8 @@ export default (md: MarkdownIt): void => {
     }
     const start = pos + 3
     const end = state.skipSpacesBack(max, pos)
-    const rawPath = state.src
-      .slice(start, end)
-      .trim()
-      .replace(/^@/, process.cwd())
-    const content = fs.existsSync(rawPath)
-      ? fs.readFileSync(rawPath).toString()
-      : 'Not found: ' + rawPath
+    const rawPath = state.src.slice(start, end).trim().replace(/^@/, process.cwd())
+    const content = fs.existsSync(rawPath) ? fs.readFileSync(rawPath).toString() : 'Not found: ' + rawPath
     const meta = rawPath.replace(rawPath, '')
     state.line = startLine + 1
     const token = state.push('fence', 'code', 0)
@@ -36,4 +31,4 @@ export default (md: MarkdownIt): void => {
     return true
   }
   md.block.ruler.before('fence', 'snippet', parser)
-}
+}
\ No newline at end of file
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 652ad3be..746ed43d 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -1,373 +1,362 @@
-import BaseLayout from "../layouts/Layout.vue";
-import Component from "../view/component.vue";
-import Hooks from "../view/hooks.vue";
-import Guide from "../view/guide.vue";
-import Index from "../view/index.vue";
-import Ecology from "../view/ecology.vue";
+import BaseLayout from '../layouts/Layout.vue'
+import Component from '../view/component.vue'
+import Hooks from '../view/hooks.vue'
+import Guide from '../view/guide.vue'
+import Index from '../view/index.vue'
+import Ecology from '../view/ecology.vue'
 
 const zhCN = [
   {
-    path: "/",
-    redirect: "/zh-CN/index",
+    path: '/',
+    redirect: '/zh-CN/index',
     component: BaseLayout,
-    meta: { title: "首页" },
+    meta: { title: '首页' },
     children: [
       {
-        path: "/zh-CN/index",
+        path: '/zh-CN/index',
         component: Index,
-        meta: { title: "指南" },
+        meta: { title: '指南' },
       },
       {
-        path: "/zh-CN/ecology",
+        path: '/zh-CN/ecology',
         component: Ecology,
-        meta: { title: "生态" },
+        meta: { title: '生态' },
       },
       {
-        path: "/zh-CN/guide",
-        redirect: "/zh-CN/guide/introduce",
+        path: '/zh-CN/guide',
+        redirect: '/zh-CN/guide/introduce',
         component: Guide,
-        meta: { title: "指南" },
+        meta: { title: '指南' },
         children: [
           {
-            path: "/zh-CN/guide/introduce",
-            component: () => import("../../docs/zh-CN/guide/introduce.md"),
-            meta: { title: "介绍" },
+            path: '/zh-CN/guide/introduce',
+            component: () => import('../../docs/zh-CN/guide/introduce.md'),
+            meta: { title: '介绍' },
           },
           {
-            path: "/zh-CN/guide/getStarted",
-            component: () => import("../../docs/zh-CN/guide/getStarted.md"),
-            meta: { title: "安装" },
+            path: '/zh-CN/guide/getStarted',
+            component: () => import('../../docs/zh-CN/guide/getStarted.md'),
+            meta: { title: '安装' },
           },
           {
-            path: "/zh-CN/guide/changelog",
-            component: () => import("../../docs/zh-CN/guide/changelog.md"),
-            meta: { title: "更新" },
+            path: '/zh-CN/guide/changelog',
+            component: () => import('../../docs/zh-CN/guide/changelog.md'),
+            meta: { title: '更新' },
           },
           {
-            path: "/zh-CN/guide/problem",
-            component: () => import("../../docs/zh-CN/guide/problem.md"),
-            meta: { title: "问题" },
+            path: '/zh-CN/guide/problem',
+            component: () => import('../../docs/zh-CN/guide/problem.md'),
+            meta: { title: '问题' },
           },
           {
-            path: "/zh-CN/guide/member",
-            component: () => import("../../docs/zh-CN/guide/member.md"),
-            meta: { title: "团队" },
+            path: '/zh-CN/guide/member',
+            component: () => import('../../docs/zh-CN/guide/member.md'),
+            meta: { title: '团队' },
           },
           {
-            path: "/zh-CN/guide/norms",
-            component: () => import("../../docs/zh-CN/guide/norms.md"),
-            meta: { title: "规范" },
+            path: '/zh-CN/guide/norms',
+            component: () => import('../../docs/zh-CN/guide/norms.md'),
+            meta: { title: '规范' },
           },
           {
-            path: "/zh-CN/guide/theme",
-            component: () => import("../../docs/zh-CN/guide/theme.md"),
-            meta: { title: "主题" },
+            path: '/zh-CN/guide/theme',
+            component: () => import('../../docs/zh-CN/guide/theme.md'),
+            meta: { title: '主题' },
           },
           {
-            path: "/zh-CN/guide/sponsor",
-            component: () => import("../../docs/zh-CN/guide/sponsor.md"),
-            meta: { title: "赞助" },
+            path: '/zh-CN/guide/sponsor',
+            component: () => import('../../docs/zh-CN/guide/sponsor.md'),
+            meta: { title: '赞助' },
           },
         ],
       },
       {
-        path: "/zh-CN/components",
-        redirect: "/zh-CN/components/color",
+        path: '/zh-CN/components',
+        redirect: '/zh-CN/components/color',
         component: Component,
-        meta: { title: "组件" },
+        meta: { title: '组件' },
         children: [
           {
-            path: "/zh-CN/components/step",
-            component: () => import("../../docs/zh-CN/components/step.md"),
-            meta: { title: "分步" },
+            path: '/zh-CN/components/skeleton',
+            component: () => import('../../docs/zh-CN/components/skeleton.md'),
+            meta: { title: '骨架屏' },
           },
           {
-            path: "/zh-CN/components/skeleton",
-            component: () => import("../../docs/zh-CN/components/skeleton.md"),
-            meta: { title: "骨架屏" },
+            path: '/zh-CN/components/layout',
+            component: () => import('../../docs/zh-CN/components/layout.md'),
+            meta: { title: '布局' },
           },
           {
-            path: "/zh-CN/components/layout",
-            component: () => import("../../docs/zh-CN/components/layout.md"),
-            meta: { title: "布局" },
+            path: '/zh-CN/components/color',
+            component: () => import('../../docs/zh-CN/components/color.md'),
+            meta: { title: '颜色' },
           },
           {
-            path: "/zh-CN/components/color",
-            component: () => import("../../docs/zh-CN/components/color.md"),
-            meta: { title: "颜色" },
+            path: '/zh-CN/components/container',
+            component: () => import('../../docs/zh-CN/components/container.md'),
+            meta: { title: '容器' },
           },
           {
-            path: "/zh-CN/components/container",
-            component: () => import("../../docs/zh-CN/components/container.md"),
-            meta: { title: "容器" },
-          },
-          {
-            path: "/zh-CN/components/breadcrumb",
+            path: '/zh-CN/components/breadcrumb',
             component: () =>
-              import("../../docs/zh-CN/components/breadcrumb.md"),
-            meta: { title: "面包屑" },
+              import('../../docs/zh-CN/components/breadcrumb.md'),
+            meta: { title: '面包屑' },
           },
           {
-            path: "/zh-CN/components/button",
-            component: () => import("../../docs/zh-CN/components/button.md"),
-            meta: { title: "按钮" },
+            path: '/zh-CN/components/button',
+            component: () => import('../../docs/zh-CN/components/button.md'),
+            meta: { title: '按钮' },
           },
           {
-            path: "/zh-CN/components/icon",
-            component: () => import("../../docs/zh-CN/components/icon.md"),
-            meta: { title: "图标" },
+            path: '/zh-CN/components/icon',
+            component: () => import('../../docs/zh-CN/components/icon.md'),
+            meta: { title: '图标' },
           },
           {
-            path: "/zh-CN/components/panel",
-            component: () => import("../../docs/zh-CN/components/panel.md"),
-            meta: { title: "面板" },
+            path: '/zh-CN/components/panel',
+            component: () => import('../../docs/zh-CN/components/panel.md'),
+            meta: { title: '面板' },
           },
           {
-            path: "/zh-CN/components/animation",
-            component: () => import("../../docs/zh-CN/components/animation.md"),
-            meta: { title: "动画" },
+            path: '/zh-CN/components/animation',
+            component: () => import('../../docs/zh-CN/components/animation.md'),
+            meta: { title: '动画' },
           },
           {
-            path: "/zh-CN/components/card",
-            component: () => import("../../docs/zh-CN/components/card.md"),
-            meta: { title: "卡片" },
+            path: '/zh-CN/components/card',
+            component: () => import('../../docs/zh-CN/components/card.md'),
+            meta: { title: '卡片' },
           },
           {
-            path: "/zh-CN/components/grid",
-            component: () => import("../../docs/zh-CN/components/grid.md"),
-            meta: { title: "栅格" },
+            path: '/zh-CN/components/grid',
+            component: () => import('../../docs/zh-CN/components/grid.md'),
+            meta: { title: '栅格' },
           },
           {
-            path: "/zh-CN/components/form",
-            component: () => import("../../docs/zh-CN/components/form.md"),
-            meta: { title: "表单" },
+            path: '/zh-CN/components/form',
+            component: () => import('../../docs/zh-CN/components/form.md'),
+            meta: { title: '表单' },
           },
           {
-            path: "/zh-CN/components/badge",
-            component: () => import("../../docs/zh-CN/components/badge.md"),
-            meta: { title: "徽章" },
+            path: '/zh-CN/components/badge',
+            component: () => import('../../docs/zh-CN/components/badge.md'),
+            meta: { title: '徽章' },
           },
           {
-            path: "/zh-CN/components/block",
-            component: () => import("../../docs/zh-CN/components/block.md"),
-            meta: { title: "辅助" },
+            path: '/zh-CN/components/block',
+            component: () => import('../../docs/zh-CN/components/block.md'),
+            meta: { title: '辅助' },
           },
           {
-            path: "/zh-CN/components/line",
-            component: () => import("../../docs/zh-CN/components/line.md"),
-            meta: { title: "分割" },
+            path: '/zh-CN/components/line',
+            component: () => import('../../docs/zh-CN/components/line.md'),
+            meta: { title: '分割' },
           },
           {
-            path: "/zh-CN/components/progress",
-            component: () => import("../../docs/zh-CN/components/progress.md"),
-            meta: { title: "进度" },
+            path: '/zh-CN/components/progress',
+            component: () => import('../../docs/zh-CN/components/progress.md'),
+            meta: { title: '进度' },
           },
           {
-            path: "/zh-CN/components/menu",
-            component: () => import("../../docs/zh-CN/components/menu.md"),
-            meta: { title: "菜单" },
+            path: '/zh-CN/components/menu',
+            component: () => import('../../docs/zh-CN/components/menu.md'),
+            meta: { title: '菜单' },
           },
           {
-            path: "/zh-CN/components/timeline",
-            component: () => import("../../docs/zh-CN/components/timeline.md"),
-            meta: { title: "时间线" },
+            path: '/zh-CN/components/timeline',
+            component: () => import('../../docs/zh-CN/components/timeline.md'),
+            meta: { title: '时间线' },
           },
           {
-            path: "/zh-CN/components/collapse",
-            component: () => import("../../docs/zh-CN/components/collapse.md"),
-            meta: { title: "折叠面板" },
+            path: '/zh-CN/components/collapse',
+            component: () => import('../../docs/zh-CN/components/collapse.md'),
+            meta: { title: '折叠面板' },
           },
           {
-            path: "/zh-CN/components/table",
-            component: () => import("../../docs/zh-CN/components/table.md"),
-            meta: { title: "表格" },
+            path: '/zh-CN/components/table',
+            component: () => import('../../docs/zh-CN/components/table.md'),
+            meta: { title: '表格' },
           },
           {
-            path: "/zh-CN/components/avatar",
-            component: () => import("../../docs/zh-CN/components/avatar.md"),
-            meta: { title: "头像" },
+            path: '/zh-CN/components/avatar',
+            component: () => import('../../docs/zh-CN/components/avatar.md'),
+            meta: { title: '头像' },
           },
           {
-            path: "/zh-CN/components/field",
-            component: () => import("../../docs/zh-CN/components/field.md"),
-            meta: { title: "字段" },
+            path: '/zh-CN/components/field',
+            component: () => import('../../docs/zh-CN/components/field.md'),
+            meta: { title: '字段' },
           },
           {
-            path: "/zh-CN/components/empty",
-            component: () => import("../../docs/zh-CN/components/empty.md"),
-            meta: { title: "空" },
+            path: '/zh-CN/components/empty',
+            component: () => import('../../docs/zh-CN/components/empty.md'),
+            meta: { title: '空' },
           },
           {
-            path: "/zh-CN/components/rate",
-            component: () => import("../../docs/zh-CN/components/rate.md"),
-            meta: { title: "评分" },
+            path: '/zh-CN/components/rate',
+            component: () => import('../../docs/zh-CN/components/rate.md'),
+            meta: { title: '评分' },
           },
           {
-            path: "/zh-CN/components/dropdown",
-            component: () => import("../../docs/zh-CN/components/dropdown.md"),
-            meta: { title: "下拉" },
+            path: '/zh-CN/components/dropdown',
+            component: () => import('../../docs/zh-CN/components/dropdown.md'),
+            meta: { title: '下拉' },
           },
           {
-            path: "/zh-CN/components/tab",
-            component: () => import("../../docs/zh-CN/components/tab.md"),
-            meta: { title: "选项卡" },
+            path: '/zh-CN/components/tab',
+            component: () => import('../../docs/zh-CN/components/tab.md'),
+            meta: { title: '选项卡' },
           },
           {
-            path: "/zh-CN/components/iconPicker",
+            path: '/zh-CN/components/iconPicker',
             component: () =>
-              import("../../docs/zh-CN/components/iconPicker.md"),
-            meta: { title: "图标选择" },
+              import('../../docs/zh-CN/components/iconPicker.md'),
+            meta: { title: '图标选择' },
           },
           {
-            path: "/zh-CN/components/tree",
-            component: () => import("../../docs/zh-CN/components/tree.md"),
-            meta: { title: "树形组件" },
+            path: '/zh-CN/components/tree',
+            component: () => import('../../docs/zh-CN/components/tree.md'),
+            meta: { title: '树形组件' },
           },
           {
-            path: "/zh-CN/components/page",
-            component: () => import("../../docs/zh-CN/components/page.md"),
-            meta: { title: "分页" },
+            path: '/zh-CN/components/page',
+            component: () => import('../../docs/zh-CN/components/page.md'),
+            meta: { title: '分页' },
           },
           {
-            path: "/zh-CN/components/transfer",
-            component: () => import("../../docs/zh-CN/components/transfer.md"),
-            meta: { title: "穿梭框" },
+            path: '/zh-CN/components/transfer',
+            component: () => import('../../docs/zh-CN/components/transfer.md'),
+            meta: { title: '穿梭框' },
           },
           {
-            path: "/zh-CN/components/checkbox",
-            component: () => import("../../docs/zh-CN/components/checkbox.md"),
-            meta: { title: "复选框" },
+            path: '/zh-CN/components/checkbox',
+            component: () => import('../../docs/zh-CN/components/checkbox.md'),
+            meta: { title: '复选框' },
           },
           {
-            path: "/zh-CN/components/radio",
-            component: () => import("../../docs/zh-CN/components/radio.md"),
-            meta: { title: "单选框" },
+            path: '/zh-CN/components/radio',
+            component: () => import('../../docs/zh-CN/components/radio.md'),
+            meta: { title: '单选框' },
           },
           {
-            path: "/zh-CN/components/input",
-            component: () => import("../../docs/zh-CN/components/input.md"),
-            meta: { title: "输入框" },
+            path: '/zh-CN/components/input',
+            component: () => import('../../docs/zh-CN/components/input.md'),
+            meta: { title: '输入框' },
           },
           {
-            path: "/zh-CN/components/inputNumber",
+            path: '/zh-CN/components/inputNumber',
+            component: () => import('../../docs/zh-CN/components/inputNumber.md'),
+            meta: { title: '数字输入框' },
+          },
+          {
+            path: '/zh-CN/components/textarea',
+            component: () => import('../../docs/zh-CN/components/textarea.md'),
+            meta: { title: '文本域' },
+          },
+          {
+            path: '/zh-CN/components/switch',
+            component: () => import('../../docs/zh-CN/components/switch.md'),
+            meta: { title: '开关' },
+          },
+          {
+            path: '/zh-CN/components/slider',
+            component: () => import('../../docs/zh-CN/components/slider.md'),
+            meta: { title: '滑块' },
+          },
+          {
+            path: '/zh-CN/components/carousel',
+            component: () => import('../../docs/zh-CN/components/carousel.md'),
+            meta: { title: '轮播' },
+          },
+          {
+            path: '/zh-CN/components/select',
+            component: () => import('../../docs/zh-CN/components/select.md'),
+            meta: { title: '下拉选择' },
+          },
+          {
+            path: '/zh-CN/components/colorPicker',
             component: () =>
-              import("../../docs/zh-CN/components/inputNumber.md"),
-            meta: { title: "数字输入框" },
+              import('../../docs/zh-CN/components/colorPicker.md'),
+            meta: { title: '颜色选择器' },
+          },{
+            path: '/zh-CN/components/layer',
+            component: () => import('../../docs/zh-CN/components/layer.md'),
+            meta: { title: '简介' },
           },
           {
-            path: "/zh-CN/components/textarea",
-            component: () => import("../../docs/zh-CN/components/textarea.md"),
-            meta: { title: "文本域" },
+            path: '/zh-CN/components/tooltip',
+            component: () => import('../../docs/zh-CN/components/tooltip.md'),
+            meta: { title: '文字提示' },
           },
           {
-            path: "/zh-CN/components/switch",
-            component: () => import("../../docs/zh-CN/components/switch.md"),
-            meta: { title: "开关" },
+            path: '/zh-CN/components/modal',
+            component: () => import('../../docs/zh-CN/components/modal.md'),
+            meta: { title: '弹层' },
+          },{
+            path: '/zh-CN/components/load',
+            component: () => import('../../docs/zh-CN/components/load.md'),
+            meta: { title: '加载' },
+          },{
+            path: '/zh-CN/components/confirm',
+            component: () => import('../../docs/zh-CN/components/confirm.md'),
+            meta: { title: '询问' },
+          },{
+            path: '/zh-CN/components/msg',
+            component: () => import('../../docs/zh-CN/components/msg.md'),
+            meta: { title: '信息' },
+          },{
+            path: '/zh-CN/components/backtop',
+            component: () => import('../../docs/zh-CN/components/backtop.md'),
+            meta: { title: '返回顶部' },
           },
           {
-            path: "/zh-CN/components/slider",
-            component: () => import("../../docs/zh-CN/components/slider.md"),
-            meta: { title: "滑块" },
-          },
-          {
-            path: "/zh-CN/components/carousel",
-            component: () => import("../../docs/zh-CN/components/carousel.md"),
-            meta: { title: "轮播" },
-          },
-          {
-            path: "/zh-CN/components/select",
-            component: () => import("../../docs/zh-CN/components/select.md"),
-            meta: { title: "下拉选择" },
-          },
-          {
-            path: "/zh-CN/components/colorPicker",
-            component: () =>
-              import("../../docs/zh-CN/components/colorPicker.md"),
-            meta: { title: "颜色选择器" },
-          },
-          {
-            path: "/zh-CN/components/layer",
-            component: () => import("../../docs/zh-CN/components/layer.md"),
-            meta: { title: "简介" },
-          },
-          {
-            path: "/zh-CN/components/tooltip",
-            component: () => import("../../docs/zh-CN/components/tooltip.md"),
-            meta: { title: "文字提示" },
-          },
-          {
-            path: "/zh-CN/components/modal",
-            component: () => import("../../docs/zh-CN/components/modal.md"),
-            meta: { title: "弹层" },
-          },
-          {
-            path: "/zh-CN/components/load",
-            component: () => import("../../docs/zh-CN/components/load.md"),
-            meta: { title: "加载" },
-          },
-          {
-            path: "/zh-CN/components/confirm",
-            component: () => import("../../docs/zh-CN/components/confirm.md"),
-            meta: { title: "询问" },
-          },
-          {
-            path: "/zh-CN/components/msg",
-            component: () => import("../../docs/zh-CN/components/msg.md"),
-            meta: { title: "信息" },
-          },
-          {
-            path: "/zh-CN/components/backtop",
-            component: () => import("../../docs/zh-CN/components/backtop.md"),
-            meta: { title: "返回顶部" },
-          },
-          {
-            path: "/zh-CN/components/countup",
-            component: () => import("../../docs/zh-CN/components/countup.md"),
-            meta: { title: "数字滚动" },
+            path: '/zh-CN/components/countup',
+            component: () => import('../../docs/zh-CN/components/countup.md'),
+            meta: { title: '数字滚动' },
           },
         ],
       },
       {
-        path: "/zh-CN/hooks",
-        redirect: "/zh-CN/hooks/useStarted",
+        path: '/zh-CN/hooks',
+        redirect: '/zh-CN/hooks/useStarted',
         component: Hooks,
-        meta: { title: "hooks" },
+        meta: { title: 'hooks' },
         children: [
           {
-            path: "/zh-CN/hooks/useStarted",
-            component: () => import("../../docs/zh-CN/hooks/useStarted.md"),
-            meta: { title: "useStarted" },
-          },
-          {
-            path: "/zh-CN/hooks/useClickOutside",
+            path: '/zh-CN/hooks/useStarted',
             component: () =>
-              import("../../docs/zh-CN/hooks/useClickOutside.md"),
-            meta: { title: "useClickOutside" },
+              import('../../docs/zh-CN/hooks/useStarted.md'),
+            meta: { title: 'useStarted' },
           },
           {
-            path: "/zh-CN/hooks/useFullScreen",
-            component: () => import("../../docs/zh-CN/hooks/useFullScreen.md"),
-            meta: { title: "useFullScreen" },
+            path: '/zh-CN/hooks/useClickOutside',
+            component: () =>
+              import('../../docs/zh-CN/hooks/useClickOutside.md'),
+            meta: { title: 'useClickOutside' },
           },
           {
-            path: "/zh-CN/hooks/useMove",
-            component: () => import("../../docs/zh-CN/hooks/useMove.md"),
-            meta: { title: "useMove" },
+            path: '/zh-CN/hooks/useFullScreen',
+            component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
+            meta: { title: 'useFullScreen' },
           },
           {
-            path: "/zh-CN/hooks/useState",
-            component: () => import("../../docs/zh-CN/hooks/useState.md"),
-            meta: { title: "useState" },
+            path: '/zh-CN/hooks/useMove',
+            component: () => import('../../docs/zh-CN/hooks/useMove.md'),
+            meta: { title: 'useMove' },
+          },          {
+            path: '/zh-CN/hooks/useState',
+            component: () => import('../../docs/zh-CN/hooks/useState.md'),
+            meta: { title: 'useState' },
           },
           {
-            path: "/zh-CN/hooks/useBoolean",
-            component: () => import("../../docs/zh-CN/hooks/useBoolean.md"),
-            meta: { title: "useBoolean" },
+            path: '/zh-CN/hooks/useBoolean',
+            component: () => import('../../docs/zh-CN/hooks/useBoolean.md'),
+            meta: { title: 'useBoolean' },
           },
         ],
       },
     ],
   },
-];
+]
 
-export default zhCN;
+export default zhCN
\ No newline at end of file
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index 0d1a3e66..7fdcb70d 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -37,7 +37,13 @@
       </lay-scroll>
     </lay-side>
     <lay-body>
-      <div style="padding: 20px; margin-right: 180px">
+      <div
+        style="
+          padding: 20px;
+          margin-right: 180px;
+          transition: margin 240ms 60ms;
+        "
+      >
         <router-view />
       </div>
     </lay-body>
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index 604cf4d6..dd84852c 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.1</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.2</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
@@ -34,7 +34,7 @@
               >更新日志</router-link
             ></span
           >
-          <span>下载量：<em class="site-showdowns">2324</em></span>
+          <span>下载量：<em class="site-showdowns">3124</em></span>
         </div>
       </div>
       <div class="site-banner-other">
@@ -44,7 +44,7 @@
           rel="nofollow"
           class="site-star"
         >
-          <i class="layui-icon"></i> Star <cite id="getStars">521</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">544</cite>
         </a>
         <a
           href="https://gitee.com/layui-vue"
diff --git a/package.json b/package.json
index 50e65466..ad94b6b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "author": "sleeprite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -28,13 +28,12 @@
     "build:example": "vite build example",
     "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
     "lint:prettier": "prettier --write  'src/**/*'",
-    "publish": "npm run build && npm publish --access=public",
     "commit": "git cz"
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.2",
-    "@layui/layer-vue": "^1.2.2",
+    "@layui/layer-vue": "^1.2.4",
     "async-validator": "^4.0.7",
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",
diff --git a/src/css/layui.css b/src/css/layui.css
index b7120770..8600b0dd 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -2844,6 +2844,25 @@ body .layui-table-tips .layui-layer-content {
   color: #5fb878;
 }
 
+.layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
+  top: 0px;
+  left: 106px;
+}
+
+.layui-nav .layui-show.layui-anim-upbit .layui-nav-item {
+  display: block;
+  height: 40px;
+  line-height: 40px;
+}
+
+.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this {
+  background-color: whitesmoke;
+}
+
+.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this:after {
+  display: none;
+}
+
 .layui-nav {
   position: relative;
   padding: 0 20px;
@@ -2868,7 +2887,7 @@ body .layui-table-tips .layui-layer-content {
 
 .layui-nav .layui-nav-item a {
   display: block;
-  padding: 0 20px;
+  padding: 0 30px;
   color: #fff;
   color: rgba(255, 255, 255, 0.7);
   -webkit-transition: all 0.3s;
@@ -2881,7 +2900,7 @@ body .layui-table-tips .layui-layer-content {
   left: 0;
   top: 0;
   width: 0;
-  height: 5px;
+  height: 3px;
   background-color: #5fb878;
   transition: all 0.2s;
   -webkit-transition: all 0.2s;
@@ -2917,7 +2936,7 @@ body .layui-table-tips .layui-layer-content {
 .layui-nav .layui-nav-more {
   position: absolute;
   top: 0;
-  right: 3px;
+  right: 8px;
   left: auto !important;
   margin-top: 0;
   font-size: 12.5px !important;
@@ -2988,13 +3007,13 @@ body .layui-table-tips .layui-layer-content {
 .layui-nav-tree .layui-nav-item {
   display: block;
   width: 100%;
-  line-height: 40px;
+  line-height: 42px;
 }
 
 .layui-nav-tree .layui-nav-item a {
   position: relative;
-  height: 46px;
-  line-height: 46px;
+  height: 42px;
+  line-height: 42px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
diff --git a/src/index.ts b/src/index.ts
index 1ebbc37b..9244f1a9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,7 @@ import "@layui/layer-vue/lib/index.css";
 import "@layui/icons-vue/lib/index.css";
 import { layer } from "@layui/layer-vue";
 
-import LayModal from "./module/layer/modal/index";
+import LayLayer from "./module/layer/index";
 import LayBacktop from "./module/backTop/index";
 import LayAvatar from "./module/avatar/index";
 import LayRadio from "./module/radio/index";
@@ -40,7 +40,6 @@ import LayContainer from "./module/container/index";
 import LayCountUp from "./module/countUp/index";
 import LayMenu from "./module/menu/index";
 import LayMenuItem from "./module/menuItem/index";
-import LayMenuChildItem from "./module/menuChildItem/index";
 import LayCheckbox from "./module/checkbox/index";
 import LayCheckboxGroup from "./module/checkboxGroup/index";
 import LayForm from "./module/form/index";
@@ -103,7 +102,6 @@ const components: Record<string, IDefineComponent> = {
   LayContainer,
   LayMenu,
   LayMenuItem,
-  LayMenuChildItem,
   LayCheckbox,
   LayForm,
   LayBreadcrumb,
@@ -130,7 +128,7 @@ const components: Record<string, IDefineComponent> = {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayModal,
+  LayLayer,
   LayTooltip,
   LayInputNumber,
   LaySkeleton,
@@ -184,7 +182,6 @@ export {
   LayContainer,
   LayMenu,
   LayMenuItem,
-  LayMenuChildItem,
   LayCheckbox,
   LayForm,
   LayBreadcrumb,
@@ -211,7 +208,7 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayModal,
+  LayLayer
 };
 
 export { layer };
diff --git a/src/module/layer/README.md b/src/module/layer/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/module/layer/index.ts b/src/module/layer/index.ts
new file mode 100644
index 00000000..04e153df
--- /dev/null
+++ b/src/module/layer/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import { LayLayer } from "@layui/layer-vue";
+import type { IDefineComponent } from "../type/index";
+
+LayLayer.install = (app: App) => {
+  app.component(LayLayer.name || "LayLayer", LayLayer);
+};
+
+export default LayLayer as IDefineComponent;
diff --git a/src/module/layer/modal/index.ts b/src/module/layer/modal/index.ts
deleted file mode 100644
index d2d1dc0f..00000000
--- a/src/module/layer/modal/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import { LayModal } from "@layui/layer-vue";
-import type { IDefineComponent } from "../../type/index";
-
-LayModal.install = (app: App) => {
-  app.component(LayModal.name || "LayModal", LayModal);
-};
-
-export default LayModal as IDefineComponent;
diff --git a/src/module/menuChildItem/index.ts b/src/module/menuChildItem/index.ts
deleted file mode 100644
index b7fcf188..00000000
--- a/src/module/menuChildItem/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
-
-Component.install = (app: App) => {
-  app.component(Component.name || "LayMenuChildItem", Component);
-};
-
-export default Component as IDefineComponent;
diff --git a/src/module/menuChildItem/index.vue b/src/module/menuChildItem/index.vue
deleted file mode 100644
index ebae31d8..00000000
--- a/src/module/menuChildItem/index.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <dd :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()">
-    <slot v-if="slots.title" name="title"></slot>
-    <a v-else href="javascript:void(0)">
-      {{ title }}
-    </a>
-  </dd>
-</template>
-
-<script setup name="LayMenuChildItem" lang="ts">
-import { defineProps, inject, Ref, useSlots } from "vue";
-
-const slots = useSlots();
-
-const props = defineProps<{
-  id: string;
-  title: string;
-}>();
-
-const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
-
-const selectHandle = function () {
-  selectedKey.value = props.id;
-};
-</script>