diff --git a/README.en.md b/README.en.md
index f9b81ba8..691c3685 100644
--- a/README.en.md
+++ b/README.en.md
@@ -7,7 +7,7 @@
   <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
 </p>  
 
-**[🔶 Explore the docs »](http://layui-vue.pearadmin.com)**
+**[🔶 Explore the docs »](http://www.layui-vue.com)**
 
 An enterprise-class UI components based on Layui and Vue.
 
@@ -73,14 +73,6 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
   <img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
 </a>
 
-## Backers 
-
-Thank you to all our backers! 🙏 [[Become a backers](https://opencollective.com/layui-vue#backer)]
-
-## Sponsors 
-
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/layui-vue#sponsor)]
-
-## Open Source Licence
+## Licence
 
 Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
\ No newline at end of file
diff --git a/README.md b/README.md
index 3ea2a45d..691c3685 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-## 介绍
+## Introduction
 
 <p>  
   <a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/v/@layui/layui-vue.svg?sanitize=true" alt="Version"></a>
@@ -7,15 +7,15 @@
   <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
 </p>  
 
-**[🔶 Explore the docs »](http://layui-vue.pearadmin.com)**
+**[🔶 Explore the docs »](http://www.layui-vue.com)**
 
-layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.
+An enterprise-class UI components based on Layui and Vue.
 
 **Run with code Sandbox.**
 
 [![Edit layui-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/11mvy)
 
-## 特性
+## Features
 
 A few of the things you can do with layui vue:
 
@@ -25,9 +25,9 @@ A few of the things you can do with layui vue:
 * Support theme customization
 * Support internationalization
 
-## 安装
+## Get Started
 
-使用 npm 安装.
+Use npm to install.
 
 ```bash
 npm i @layui/layui-vue
@@ -43,7 +43,7 @@ import '@layui/layui-vue/lib/index.css'
 createApp(App).use(layui).mount('#app')
 ```
 
-我们在[主页](http://layui-vue.pearadmin.com)上有不少例子，这是让您入门的第一个：
+We have several examples on the [website](http://layui-vue.pearadmin.com). Here is the first one to get you started:
 
 ```
 <template>
@@ -53,19 +53,19 @@ createApp(App).use(layui).mount('#app')
 </template>
 ```
 
-## 反馈
+## Feedback
 
 Feel free to send us feedback on [file an issue](https://github.com/layui-vue/layui-vue/issues/new). Feature requests are always welcome. If you wish to contribute, please take a quick look at the [guidelines](./CONTRIBUTING.md)!
 
 If there's anything you'd like to chat about, please feel free to join our [Gitter chat](https://gitter.im/layui-vue/community)!
 
-## 构建
+## Build Process
 
 - `build` Packaged component library
 
 Please take a look at the [contributing guidelines](./CONTRIBUTING.md) for a detailed process on how to build your application as well as troubleshooting information.
 
-## 贡献
+## Contributors
 
 This project follows the [all-contributors](https://github.com/layui-vue/layui-vue/graphs/contributors) specification and is brought to you by these [awesome contributors](https://github.com/layui-vue/layui-vue/graphs/contributors).
 
@@ -73,14 +73,6 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
   <img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
 </a>
 
-## 支持 
-
-Thank you to all our backers! 🙏 [[Become a backers](https://opencollective.com/layui-vue#backer)]
-
-## 赞助 
-
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/layui-vue#sponsor)]
-
-## 开源
+## Licence
 
 Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
index 795c69f8..433e6d32 100644
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -111,7 +111,7 @@ export default {
 <template>
 <ul class="layui-row site-doc-color site-doc-necolor">
       <li class="layui-col-md12">
-        <div style="background-color: @global-neutral-color-1;">
+        <div style="background-color: #FAFAFA;">
           <p>#FAFAFA</p><p>
         </p></div>
       </li>
diff --git a/example/docs/zh-CN/components/countup.md b/example/docs/zh-CN/components/countup.md
index 2e8adc86..f5422cd9 100644
--- a/example/docs/zh-CN/components/countup.md
+++ b/example/docs/zh-CN/components/countup.md
@@ -7,8 +7,8 @@
 ::: demo
 
 <template>
-  <h1 style="padding:20px 15px">
-      <lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
+  <h1 style="padding:20px 15px; font-family: sans-serif">
+      <lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
   </h1>
 </template>
 
@@ -17,9 +17,9 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    const countVal = 2862.9888;
+
     return {
-      
+
     }
   }
 }
@@ -38,14 +38,14 @@ export default {
   <br/>
   <!-- 属性 -->
   <lay-card style="width:200px;height:120px;display:inline-block;">
-    <h1 style="padding:20px 15px">
+    <h1 style="padding:20px 15px; font-family: sans-serif">
       <lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
     </h1>
   </lay-card>
   <!-- 插槽 -->
   <lay-card style="width:200px;height:120px;display:inline-block;">
     <h1 style="padding:20px 15px">
-      <lay-count-up :end-val="18" :duration="1">
+      <lay-count-up :end-val="18" :duration="2000">
         <template #prefix>
           <span style="font-size:75%">雷雨&nbsp</span>
         </template>
@@ -84,15 +84,18 @@ export default {
 
 | 属性          | 描述                                                         | 类型           | 默认值 | 可选值         |
 | ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
+| startVal      | 起始值                                                     | number         | `0`    | —             |
 | endVal        | 显示的值                                                     | number         | `0`    | —             |
+| decimal       | 小数点                                                    | string         | `.`    | —             |
 | decimalPlaces | 小数位数                                                     | number         | `0`    | —             |
-| useGrouping   | 使用千位分隔符                                               | boolean        | `true` | `true` `false` |
+| useGrouping   | 是否使用千位分隔符                                               | boolean        | `true` | `true` `false` |
 | separator     | 分隔符                                                       | string         | `,`    | —             |
-| useEasing     | 使用动画                                                     | boolean        | `true` | `true` `false` |
-| duration      | 动画持续时间                                                 | number         | `2`    | —             |
+| autoplay     | 是否自动播放                                                     | boolean        | `true` | `true` `false` |
+| useEasing     | 是否使用动画                                                     | boolean        | `true` | `true` `false` |
+| easingFn      | 动画类型                                                 | Array \| Function \| string         | `easeInOutCubic`    | —             |
+| duration      | 动画持续时间,单位: ms                                                 | number         | `2000`    | —             |
 | prefix        | 前缀                                                         | string         | —    | —             |
 | suffix        | 后缀                                                         | string         | —     | —             |
-| option        | 选项，用于多实例的总体设置，<br>props会覆盖option的属性，使用更灵活 | CountUpOptions | —     | 参见[CountUpOptions](#opts)   |
 
 :::
 
@@ -108,23 +111,45 @@ export default {
 
 :::
 
-::: title Count Up Options 属性
+::: title Count Up 动画类型
 ::: 
 
-::: table
-
-| 属性          | 描述                                                         | 类型           | 默认值 | 可选值         |
-| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
-| startVal      | 开始值                                                      | number         | `0`    | —             |
-| decimalPlaces | 小数位数                                                     | number         | `0`    | —             |
-| useGrouping   | 使用千位分隔符                                               | boolean        | `true` | `true` `false` |
-| separator     | 分隔符                                                       | string         | `,`    | —             |
-| useEasing     | 使用动画                                                     | boolean        | `true` | `true` `false` |
-| duration      | 动画持续时间                                                 | number         | `2`    | —             |
-| prefix        | 前缀                                                         | string         | —    | —             |
-| suffix        | 后缀                                                         | string         | —     | —             |   |
-
+::: describe 可使用贝塞尔曲线定义动画
 :::
 
+```
+easingFn: [0.75, 0, 0.25, 1]
+```
+
+::: describe 也可以使用自定义函数
+:::
+
+```
+const easeOutElastic = (n) => {
+  return n === 0
+    ? 0
+    : n === 1
+      ? 1
+      : (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
+}
+
+easingFn: easeOutElastic
+```
+
+::: describe 通过以下字符串快速设置动画类型
+:::
+
+```
+easeInSine    easeOutSine    easeInOutSine
+easeInQuad    easeOutQuad    easeInOutQuad
+easeInCubic   easeOutCubic   easeInOutCubic
+easeInQuart   easeOutQuart   easeInOutQuart
+easeInQuint   easeOutQuint   easeInOutQuint
+easeInExpo    easeOutExpo    easeInOutExpo
+easeInCirc    easeOutCirc    easeInOutCirc
+easeInBack    easeOutBack    easeInOutBack
+linear
+```
+
 ::: previousNext countUp
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/load.md b/example/docs/zh-CN/components/load.md
index 5f935de3..2e2a3794 100644
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 页面正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
index 4b28ba70..fcbe8aff 100644
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -14,20 +14,22 @@
 
 <template>
   <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
-    <lay-menu-item title="首页" id="1"></lay-menu-item>
-    <lay-menu-item title="用户" id="2"></lay-menu-item>
-    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单1" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单2" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单3" id="10">
-            <lay-menu-item title="菜单3-1" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
-            <lay-sub-menu title="菜单3-3" id="13">
-              <lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item> 
-              <lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
-              <lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
-          </lay-sub-menu>
+    <lay-menu-item id="1">首页</lay-menu-item>
+    <lay-menu-item id="2">首页</lay-menu-item>
+    <lay-menu-item id="3">首页</lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">首页</lay-menu-item> 
+        <lay-menu-item id="9">首页</lay-menu-item>
+        <lay-sub-menu title="菜单" id="10">
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">首页</lay-menu-item> 
+            <lay-menu-item id="12">首页</lay-menu-item>
+            <lay-menu-item id="13">首页</lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -58,16 +60,22 @@ export default {
 
 <template>
   <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
-    <lay-menu-item title="首页" id="1"></lay-menu-item>
-    <lay-menu-item title="用户" id="2"></lay-menu-item>
-    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+    <lay-menu-item id="1">首页</lay-menu-item>
+    <lay-menu-item id="2">首页</lay-menu-item>
+    <lay-menu-item id="3">首页</lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">首页</lay-menu-item> 
+        <lay-menu-item id="9">首页</lay-menu-item>
         <lay-sub-menu 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>
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">首页</lay-menu-item> 
+            <lay-menu-item id="12">首页</lay-menu-item>
+            <lay-menu-item id="13">首页</lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -99,16 +107,22 @@ export default {
 
 <template>
   <lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
-    <lay-menu-item title="首页" id="1"></lay-menu-item>
-    <lay-menu-item title="用户" id="2"></lay-menu-item>
-    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
-        <lay-sub-menu 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 id="1">首页</lay-menu-item>
+    <lay-menu-item id="2">首页</lay-menu-item>
+    <lay-menu-item id="3">首页</lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">首页</lay-menu-item> 
+        <lay-menu-item id="9">首页</lay-menu-item>
+        <lay-sub-menu id="10">
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">首页</lay-menu-item> 
+            <lay-menu-item id="12">首页</lay-menu-item>
+            <lay-menu-item id="13">首页</lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -140,16 +154,44 @@ export default {
 
 <template>
   <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
-    <lay-menu-item title="首页" id="1"></lay-menu-item>
-    <lay-menu-item title="用户" id="2"></lay-menu-item>
-    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+    <lay-menu-item id="1">
+      <template #title>
+        菜单
+      </template>
+    </lay-menu-item>
+    <lay-menu-item id="2">
+      <template #title>
+        菜单
+      </template>
+    </lay-menu-item>
+    <lay-menu-item id="3">
+      <template #title>
+        菜单
+      </template>
+    </lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          目录
+        </template>
+        <lay-menu-item id="8">
+          菜单
+        </lay-menu-item> 
+        <lay-menu-item id="9">
+          菜单
+        </lay-menu-item>
         <lay-sub-menu 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>
+            <template #title>
+              目录
+            </template>
+            <lay-menu-item id="11">
+              菜单
+            </lay-menu-item> 
+            <lay-menu-item id="12">
+              菜单
+            </lay-menu-item>
+            <lay-menu-item id="13">
+              菜单
+            </lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -241,19 +283,107 @@ export default {
   <br/>
   <br/>
   <lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
-    <lay-menu-item title="首页" id="1"></lay-menu-item>
-    <lay-menu-item title="用户" id="2"></lay-menu-item>
-    <lay-menu-item title="角色" id="3"></lay-menu-item> 
+    <lay-menu-item id="1">
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+    </lay-menu-item>
+    <lay-menu-item id="2">
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+    </lay-menu-item>
+    <lay-menu-item id="3">
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+    </lay-menu-item> 
     <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单1" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单2" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单3" id="10">
-            <lay-menu-item title="菜单3-1" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
-            <lay-sub-menu title="菜单3-3" id="13">
-              <lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item> 
-              <lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
-              <lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">
+                  <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+        </lay-menu-item> 
+        <lay-menu-item id="9">
+                  <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+        </lay-menu-item>
+        <lay-sub-menu id="10">
+            <template #icon>
+              <lay-icon type="layui-icon-home"></lay-icon> 
+            </template>
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">
+                      <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+            </lay-menu-item> 
+            <lay-menu-item id="12">
+                      <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+            </lay-menu-item>
+            <lay-sub-menu id="13">
+              <template #icon>
+                <lay-icon type="layui-icon-home"></lay-icon> 
+              </template>
+              <template #title>
+              首页
+              </template>
+              <lay-menu-item id="14">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item> 
+              <lay-menu-item id="15">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item>
+              <lay-menu-item id="16">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item>
           </lay-sub-menu>
         </lay-sub-menu>
     </lay-sub-menu> 
@@ -287,13 +417,13 @@ export default {
 
 ::: table
 
-| 属性                | 描述   | 备注 |
-| ------------------- | ------ | ---- |
-| v-model:selectedKey | 选中项 | --   |
-| v-model:openKeys    | 打开项 | --   |
-| theme    | 菜单主题 | `dark` `light`   |
-| inverted    | 特殊的激活样式 | `true` `false`  |
-| level    | 菜单层级 | `true` `false`  |
+| 属性                | 描述           | 备注           |
+| ------------------- | -------------- | -------------- |
+| v-model:selectedKey | 选中项         | --             |
+| v-model:openKeys    | 打开项         | --             |
+| theme               | 菜单主题       | `dark` `light` |
+| inverted            | 特殊的激活样式 | `true` `false` |
+| level               | 菜单层级       | `true` `false` |
 
 :::
 
diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index bafd995a..91609ccd 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -16,6 +16,7 @@
 <script>
 import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+
 export default {
   setup() {
     const visible1 = ref(false)
@@ -158,7 +159,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
+  <lay-layer title="加载 Iframe 内容" :area="['500px','400px']" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
 </template>
 
 <script>
diff --git a/example/docs/zh-CN/components/msg.md b/example/docs/zh-CN/components/msg.md
index 82bf790f..6fbd3cfb 100644
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 全局展示操作反馈信息。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 8bcc5b57..3fcbbf06 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,6 +11,23 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
+      <ul> 
+      <a name="0-3-9"></a> 
+      <li> 
+        <h3>0.3.9 <span class="layui-badge-rim">2022-03-08</span></h3> 
+        <ul> 
+          <li>[重构] count-up 组件。</li>
+          <li>[新增] algolia 文档搜索引擎。</li>
+          <li>[新增] theme 主题 neutral 辅色配置。</li>
+          <li>[新增] menuItem 与 subMenu 组件 title 与 icon 插槽。</li>
+          <li>[新增] menu 菜单 collapse 属性, 支持折叠。</li>
+          <li>[修复] menu 菜单 inverted 跟随主题配置。</li>
+          <li>[删除] menuItem 菜单项 title 属性。</li>
+          <li>[删除] subMenu 菜单集 title 属性。</li>
+          <li>[升级] layer-vue 1.3.8 版本。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="0-3-8"> </a> 
       <li> 
diff --git a/example/docs/zh-CN/guide/getStarted.md b/example/docs/zh-CN/guide/getStarted.md
index 4fdff3c3..1fa791b9 100644
--- a/example/docs/zh-CN/guide/getStarted.md
+++ b/example/docs/zh-CN/guide/getStarted.md
@@ -5,21 +5,21 @@
 
 <p>
   <a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
-    <img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="110" style="border-radius:12px;">
+    <img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="105" style="border-radius:12px;">
   </a>
-  <span style="font-size:30px;color:#e2e2e2;margin:30px;">+</span>
+  <span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
   <a href="http://layui-vue.pearadmin.com">
-    <img src="https://qn.antdv.com/vue.png" alt="layui" width="110" style="border-radius:12px;">
+    <img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:12px;">
   </a>
-  <span style="font-size:30px;color:#e2e2e2;margin:30px;">=</span>
+  <span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
   <a href="http://layui-vue.pearadmin.com">
-    <img src="../../../src/assets/logo.jpg" alt="layui" width="110" style="border-radius:12px;">
+    <img src="../../../src/assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
   </a>
 </p>
 
 <br>
 
-::: describe 使用 (npm, yarn, pnpm) 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite
+::: describe 使用 npm 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite rollup.
 :::
 
 ```
diff --git a/example/docs/zh-CN/guide/introduce.md b/example/docs/zh-CN/guide/introduce.md
index 172208a0..5c2b687d 100644
--- a/example/docs/zh-CN/guide/introduce.md
+++ b/example/docs/zh-CN/guide/introduce.md
@@ -3,7 +3,7 @@
 
 <p>
   <a href="http://layui-vue.pearadmin.com">
-    <img src="../../../src/assets/logo-new.png" alt="layui" width="400">
+    <img src="../../../src/assets/logo-new.png" alt="layui" width="440">
   </a>
 </p>
 
@@ -14,7 +14,7 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
 :::
 
 <lay-timeline>
-  <lay-timeline-item title="2021年，layui vue 孵化" simple></lay-timeline-item>
+  <lay-timeline-item title="2021年，layui-vue 首个版本发布" simple></lay-timeline-item>
   <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
   <lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
   <lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
diff --git a/example/docs/zh-CN/guide/member.md b/example/docs/zh-CN/guide/member.md
index e8fe543b..73baeaf0 100644
--- a/example/docs/zh-CN/guide/member.md
+++ b/example/docs/zh-CN/guide/member.md
@@ -145,7 +145,7 @@
 ::: title 社区伙伴
 :::
 
-::: block
+::: quote
 在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
 :::
 
diff --git a/example/src/components/LaySearch.vue b/example/src/components/LaySearch.vue
index 26445a71..25562356 100644
--- a/example/src/components/LaySearch.vue
+++ b/example/src/components/LaySearch.vue
@@ -1,124 +1,40 @@
 <template>
-  <select :name="name" lay-verify="required" />
-  <div
-    class="layui-unselect layui-form-select layui-search"
-    :class="[openState ? 'layui-form-selected' : '']"
-    @click="open"
-    style="margin-left: 20px"
-  >
-    <div class="layui-select-title">
-      <input
-        type="text"
-        placeholder="Search"
-        class="layui-input layui-unselect"
-        :value="name"
-        style="
-          background: rgba(255, 255, 255, 0.05);
-          border: none;
-          color: rgba(255, 255, 255, 0.7);
-          width: 196px;
-          height: 34px;
-        "
-        @input="change"
-      /><i class="layui-edge"></i>
-    </div>
-    <dl class="layui-anim layui-anim-upbit" style="">
-      <dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
-      <dd
-        v-for="data in menus"
-        v-else
-        :key="data"
-        :value="name"
-        class="layui-select-tips"
-        @click="jump(data)"
-      >
-        {{ data.title }}
-      </dd>
-    </dl>
-  </div>
+  <div id="docsearch"></div>
 </template>
 
 <script setup name="LaySelect" lang="ts">
-import { ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { Recordable } from '../../../src/types'
+// @ts-ignore
+import docsearch from "@docsearch/js";
+import { onMounted } from "vue";
+import "@docsearch/css";
 
-const props = defineProps<{
-  datas?: Recordable[]
-}>()
-
-const route = useRoute()
-const router = useRouter()
-
-const openState = ref(false)
-const menus = ref(props.datas)
-const name = ref('')
-
-const open = function () {
-  openState.value = !openState.value
-}
-
-const jump = function (data: any) {
-  name.value = data.title
-  router.push(data.path)
-}
-
-const change = function (e: any) {
-  name.value = e.target.value
-  if (e.target.value === '') {
-    menus.value = props.datas
-  } else {
-    menus.value = searchList(e.target.value, props.datas)
-  }
-}
-
-const searchList = function (str: string, container: any) {
-  var newList = []
-  var startChar = str.charAt(0)
-  var strLen = str.length
-  for (var i = 0; i < container.length; i++) {
-    var obj = container[i]
-    var isMatch = false
-    for (var p in obj) {
-      if (typeof obj[p] == 'function') {
-        obj[p]()
-      } else {
-        var curItem = ''
-        if (obj[p] != null) {
-          curItem = obj[p]
-        }
-        for (var j = 0; j < curItem.length; j++) {
-          if (curItem.charAt(j) == startChar) {
-            if (curItem.substring(j).substring(0, strLen) == str) {
-              isMatch = true
-              break
-            }
-          }
-        }
-      }
-    }
-    if (isMatch) {
-      newList.push(obj)
-    }
-  }
-  return newList
-}
+onMounted(() => {
+  docsearch({
+    container: "#docsearch",
+    appId: "Y8NT7MICRP",
+    apiKey: "fb23e7bbc001828e56c50d66e6be26b2",
+    indexName: "indexName"
+  });
+});
 </script>
 
 <style>
-.layui-search .layui-anim::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+
+.DocSearch-Button {
+  outline: none;
+  box-shadow: none;
 }
-.layui-search .layui-anim::-webkit-scrollbar-corner {
-  background: #f6f6f6;
+
+.DocSearch-Button .DocSearch-Search-Icon, 
+.DocSearch-Button-Placeholder {
+  color: whitesmoke;
 }
-.layui-search .layui-anim::-webkit-scrollbar-thumb {
-  background: #e6e6e6;
-  border-radius: 2px;
+
+:root {
+  --docsearch-logo-color: var(--global-primary-color);
+  --docsearch-primary-color: var(--global-primary-color) ;
+  --docsearch-searchbox-background: rgba(255, 255, 255, 0.05);
+  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.05);
+  --docsearch-container-background: rgba(0, 0, 0, 0.1);;
 }
-.layui-search .layui-anim::-webkit-scrollbar-track {
-  background: white;
-  border-radius: 2px;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/example/src/plugin/usePlayground.ts b/example/src/plugin/usePlayground.ts
index 8607789a..9dcdc716 100644
--- a/example/src/plugin/usePlayground.ts
+++ b/example/src/plugin/usePlayground.ts
@@ -59,8 +59,7 @@ export const usePlayGround = (source: string, convertSetupSugar: boolean) => {
   }
 
   const encoded = utoa(JSON.stringify(originCode))
-  const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
-  //const link = `http://localhost:3001/layui-vue-playground/#${encoded}`
+  const link = `https://layui-vue.gitee.io/sandbox-vue/#${encoded}`
   return {
     code,
     encoded,
diff --git a/example/src/view/extend.vue b/example/src/view/extend.vue
index 586a59fa..5cbf0769 100644
--- a/example/src/view/extend.vue
+++ b/example/src/view/extend.vue
@@ -13,7 +13,7 @@
         <ul class="layui-row layui-col-space6">
           <li class="layui-col-sm12">
             <div class="alone">
-              <a href="https://gitee.com/layui-vue/layer-vue" target="_blank"
+              <a href="http://layer.layui-vue.com" target="_blank"
                 >layer - vue<cite>通用型弹出层组件</cite></a
               >
             </div>
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index 60f1f1b4..eca93cb3 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -1,20 +1,20 @@
 <template>
-  <div
-    style="
-      margin-top: 60px;
-      background-color: whitesmoke;
-      height: 100%;
-      width: 100%;
-    "
+  <div class="site-container"
   >
     <div class="site-banner">
       <div class="site-banner-main">
         <div class="site-zfj site-zfj-anim">
-          <img src="../assets/logo.jpg" style="width: 200px;border-radius: 10px;box-shadow: 2px 0 6px rgb(0 21 41 / 35%);" />
+          <img
+            src="../assets/logo.jpg"
+            style="width: 220px; border-radius: 10px"
+          />
         </div>
         <div class="layui-anim site-desc site-desc-anim">
           <p class="web-font-desc">layui - vue</p>
-          <cite>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.</cite>
+          <cite
+            >layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件
+            库.</cite
+          >
         </div>
         <div class="site-download">
           <router-link class="layui-inline site-down" to="/zh-CN/guide"
@@ -109,15 +109,18 @@
   </div>
 </template>
 <style>
+.site-container {
+  margin-top: 60px;
+  background-color: whitesmoke;
+  height: 100%;
+  width: 100%;
+}
 .site-banner {
   position: relative;
   height: 600px;
   text-align: center;
   overflow: hidden;
   background-color: #393d49;
-  background-image: url(../assets/background.svg);
-  background-repeat: no-repeat;
-  background-size: 100%;
 }
 .site-banner-bg {
   background-position: center 0;
diff --git a/example/src/view/material.vue b/example/src/view/material.vue
index ade203fb..7fd1b2fc 100644
--- a/example/src/view/material.vue
+++ b/example/src/view/material.vue
@@ -9,35 +9,17 @@
   <div class="layui-container" style="width: 80%">
     <div class="layui-row layui-col-space16">
       <div class="layui-col layui-col-md6">
-        <div class="project-list-item">
-          <img
-            class="project-list-item-cover"
-            src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png"
-          />
-
-          <div class="project-list-item-body">
-            <h2>Sandbox</h2>
-            <div class="project-list-item-text layui-text">
-              生命就像一盒巧克力，结果往往出人意料。
-            </div>
-            <div class="project-list-item-desc">
-              <span class="time">几秒前</span>
-              <div class="ew-head-list"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-            <div class="layui-col layui-col-md6">
-        <div class="project-list-item">
+        <a href="https://github.com/scopewu/qrcode.vue">
+          <div class="project-list-item">
           <img
             class="project-list-item-cover"
             src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
           />
 
           <div class="project-list-item-body">
-            <h2>Sandbox</h2>
+            <h2>Qrcode.vue</h2>
             <div class="project-list-item-text layui-text">
-              没有锚的船当然也可以航行，只是紧张充满你的一生。
+              A Vue.js component to generate qrcode。
             </div>
             <div class="project-list-item-desc">
               <span class="time">几秒前</span>
@@ -45,21 +27,39 @@
             </div>
           </div>
         </div>
+        </a>
+      </div>
+      <div class="layui-col layui-col-md6">
+        <a href="https://github.com/rstacruz/nprogress">
+          <div class="project-list-item">
+          <img
+            class="project-list-item-cover"
+            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
+          />
+
+          <div class="project-list-item-body">
+            <h2>Nprogress</h2>
+            <div class="project-list-item-text layui-text">
+              For slim progress bars like on YouTube, Medium。
+            </div>
+            <div class="project-list-item-desc">
+              <span class="time">几秒前</span>
+              <div class="ew-head-list"></div>
+            </div>
+          </div>
+        </div>
+        </a>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-</script>
-
 <style>
 .alone-banner {
   margin-top: 60px;
   height: 190px;
   text-align: center;
   font-weight: 300;
-  background-color: #009688;
   color: #fff;
 }
 .alone-banner h1 {
diff --git a/package.json b/package.json
index f55e887e..3f5c3e29 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.9-alpha.2",
+  "version": "0.3.9-alpha.4",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -37,10 +37,9 @@
   },
   "dependencies": {
     "@layui/icons-vue": "^1.0.7",
-    "@layui/layer-vue": "^1.3.5",
+    "@layui/layer-vue": "^1.3.8",
     "@vueuse/core": "^7.6.2",
     "async-validator": "^4.0.7",
-    "countup.js": "^2.0.8",
     "evtd": "^0.2.3",
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
diff --git a/src/component/backTop/index.vue b/src/component/backTop/index.vue
index ef2c86a5..7b4efac5 100644
--- a/src/component/backTop/index.vue
+++ b/src/component/backTop/index.vue
@@ -5,7 +5,15 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, shallowRef, withDefaults, computed, onMounted } from "vue";
+import {
+  ref,
+  shallowRef,
+  withDefaults,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import { useThrottle } from "@vueuse/core";
 import LayIcon from "../icon/index";
 import "./index.less";
 
@@ -186,6 +194,13 @@ onMounted(() => {
   scrollTarget.value = getScrollTarget();
   scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
 });
+
+onBeforeUnmount(() => {
+  scrollTarget.value?.removeEventListener(
+    "scroll",
+    throttle(handleScroll, 300)
+  );
+});
 </script>
 
 <template>
diff --git a/src/component/button/index.less b/src/component/button/index.less
index f0b72c67..311428ec 100644
--- a/src/component/button/index.less
+++ b/src/component/button/index.less
@@ -56,7 +56,7 @@
 }
 
 .layui-btn-primary {
-  border-color: @global-neutral-color-3;
+  border-color: @button-border-color;
   background: 0 0;
   color: #666;
 }
@@ -113,4 +113,4 @@
   color: #d2d2d2 !important;
   cursor: not-allowed !important;
   opacity: 1;
-}
+}
\ No newline at end of file
diff --git a/src/component/countUp/index.vue b/src/component/countUp/index.vue
index 4e37574e..4d48fd59 100644
--- a/src/component/countUp/index.vue
+++ b/src/component/countUp/index.vue
@@ -1,9 +1,3 @@
-<template>
-  <slot name="prefix"></slot>
-  <span ref="counterRef" style="font-family: sans-serif" />
-  <slot name="suffix"></slot>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayCountUp",
@@ -11,77 +5,103 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { CountUp } from "countup.js";
-import type { CountUpOptions } from "countup.js";
+import { computed, onMounted, Ref, ref, watch } from "vue";
+import { TransitionPresets, useTransition } from "@vueuse/core";
 
 export interface LayCountupProps {
+  startVal?: number; // 起始值
   endVal?: number; //显示的值
+  decimal?: string; // 小数点
   decimalPlaces?: number; // 小数位数
   useGrouping?: boolean; // 是否使用千位分隔符
   separator?: string; // 千位分隔符
+  autoplay?: boolean; //是否自动播放
   useEasing?: boolean; // 使用动画
+  easingFn?: any; //动画类型
   duration?: number; // 动画持续时间
   prefix?: string; // 前缀
   suffix?: string; // 后缀
-  option?: CountUpOptions; // 选项
 }
 
 const props = withDefaults(defineProps<LayCountupProps>(), {
+  startVal: 0,
   endVal: 0,
-  option: () => {
-    return {};
-  },
+  decimal: ".",
+  decimalPlaces: 0,
+  useGrouping: true,
+  separator: ",",
+  autoplay: true,
+  useEasing: true,
+  easingFn: TransitionPresets.easeInOutCubic,
+  duration: 2000,
+  prefix: "",
+  suffix: "",
 });
 
-const counterRef = ref<HTMLDivElement | null>(null);
-const instance = ref<CountUp | null>(null);
-const {
-  decimalPlaces,
-  useGrouping,
-  separator,
-  useEasing,
-  duration,
-  prefix,
-  suffix,
-} = props;
-const defaultOptions: CountUpOptions = {
-  startVal: 0, // 开始数字
-  decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
-  useEasing: useEasing ? useEasing : true, // 使用缓动动画
-  duration: duration ? duration : 2, // 动画持续时间
-  useGrouping: useGrouping ? useGrouping : true, // 是否使用千位分隔符
-  separator: separator ? separator : ",", // 千位分隔符
-  decimal: ".", // 小数点分隔符
-  prefix: prefix ? prefix : "", // 前缀
-  suffix: suffix ? suffix : "", // 后缀
+let localStartVal: Ref<number> = ref(props.startVal);
+const isNumber = (val: string) => !isNaN(parseFloat(val));
+
+/**
+ * from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue
+ * @description 格式化数字
+ * @param num 要格式化的数字
+ * @returns 格式化后的数字
+ */
+const formatNumber = (num: number | string): string => {
+  if (typeof num != "number") return "0";
+  num = num.toFixed(props.decimalPlaces);
+  num += "";
+  const x = num.split(".");
+  let x1 = x[0];
+  const x2 = x.length > 1 ? props.decimal + x[1] : "";
+  const rgx = /(\d+)(\d{3})/;
+  if (props.separator && !isNumber(props.separator)) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, "$1" + props.separator + "$2");
+    }
+  }
+  return props.prefix + x1 + x2 + props.suffix;
+};
+
+const printVal = useTransition(localStartVal, {
+  delay: 0,
+  duration: props.duration,
+  disabled: !props.useEasing,
+  transition:
+    typeof props.easingFn === "string"
+      ? TransitionPresets[props.easingFn]
+      : props.easingFn,
+});
+
+const displayValue = computed(() => formatNumber(printVal.value));
+
+const start = function () {
+  localStartVal.value = props.endVal;
 };
 
 watch(
   () => props.endVal,
   () => {
-    update(props.endVal);
+    if (props.autoplay) {
+      localStartVal.value = props.endVal;
+    }
   }
 );
 
 onMounted(() => {
-  createCounter();
+  if (props.autoplay) {
+    start();
+  }
 });
 
-const createCounter = () => {
-  if (!counterRef.value) return;
-  const opts: CountUpOptions = Object.assign(defaultOptions, props.option);
-  instance.value = new CountUp(counterRef?.value, props.endVal, opts);
-  start();
-};
-
-const start = () => {
-  if (!instance.value) return;
-  instance?.value.start();
-};
-
-const update = (newEndVal: number) => {
-  if (!instance.value) return;
-  instance?.value.update(newEndVal);
-};
+defineExpose({
+  start,
+});
 </script>
+
+<template>
+  <slot name="prefix"></slot>
+  <!-- <span style="font-family: sans-serif" /> -->
+  <span>{{ displayValue }}</span>
+  <slot name="suffix"></slot>
+</template>
diff --git a/src/component/formItem/cnValidateMessage.ts b/src/component/formItem/cnValidateMessage.ts
index 1313ce0a..6a0b2ad3 100644
--- a/src/component/formItem/cnValidateMessage.ts
+++ b/src/component/formItem/cnValidateMessage.ts
@@ -29,7 +29,7 @@ export default {
     len: "%s必须是长度为%s个字符",
     min: "%s最小长度为%s个字符",
     max: "%s最长%s个字符",
-    range: "%s字符长度需要在%s和%s直接",
+    range: "%s字符长度需要在%s和%s之间",
   },
   number: {
     len: "%s长度必须为%s",
diff --git a/src/component/fullscreen/index.vue b/src/component/fullscreen/index.vue
index fa9a5ee0..3ce85fa1 100644
--- a/src/component/fullscreen/index.vue
+++ b/src/component/fullscreen/index.vue
@@ -20,10 +20,6 @@ export interface LayFullscreenProps {
   immersive?: boolean;
   position?: string;
   zIndex?: string;
-  // top?: string;
-  // left?: string;
-  // width?: string;
-  // height?: string;
 }
 
 const props = withDefaults(defineProps<LayFullscreenProps>(), {
@@ -182,11 +178,6 @@ const styleLayFullscreen = function (
 ) {
   el.style.position = isRemove ? "" : props.position || "";
   el.style.zIndex = isRemove ? "" : props.zIndex || "";
-  // 实验内容
-  // el.style.top = isRemove ? "" : (props.top || "");
-  // el.style.left = isRemove ? "" : (props.left || "");
-  // el.style.width = isRemove ? "" : (props.width || "");
-  // el.style.height = isRemove ? "" : (props.height || "");
 };
 
 const activeEl = computed(() => (targetEl.value = props.target));
diff --git a/src/component/layer/index.ts b/src/component/layer/index.ts
deleted file mode 100644
index dfa979b1..00000000
--- a/src/component/layer/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { App } from "vue";
-import { LayLayer } from "@layui/layer-vue";
-
-LayLayer.install = (app: App) => {
-  app.component(LayLayer.name, LayLayer);
-};
-
-export default LayLayer;
diff --git a/src/component/menu/index.less b/src/component/menu/index.less
index 0e61832c..f398ce7b 100644
--- a/src/component/menu/index.less
+++ b/src/component/menu/index.less
@@ -159,7 +159,6 @@
   text-align: center;
 }
 
-//
 .layui-nav.layui-nav-collapse {
   width: 60px;
   span {
@@ -170,11 +169,10 @@
   }
 }
 
-
-
 .layui-nav-tree {
-  width: 200px;
   padding: 0;
+  width: 200px;
+  transition: all .3s;
 }
 
 .layui-nav-tree .layui-nav-item {
@@ -190,7 +188,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  padding: 5px 30px 5px 30px;
+  padding: 5px 23px 5px 23px;
 }
 
 .layui-nav-tree .layui-nav-item * {
@@ -205,6 +203,10 @@
   padding: 5px 0;
 }
 
+.layui-nav-tree .layui-nav-item span {
+  margin-left: 3px;
+}
+
 .layui-nav-tree .layui-nav-bar {
   width: 5px;
   height: 0;
@@ -322,7 +324,7 @@
 }
 
 .layui-nav-tree.inverted .layui-this > a {
-  padding: 5px 24px 5px 24px;
+  padding: 5px 17px 5px 17px;
 }
 
 .layui-nav-tree.level {
diff --git a/src/component/menu/index.vue b/src/component/menu/index.vue
index 3f95d0dd..27445f72 100644
--- a/src/component/menu/index.vue
+++ b/src/component/menu/index.vue
@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, provide } from "vue";
+import { computed, provide, ref, watch } from "vue";
 import "./index.less";
 
 export interface LayMenuProps {
@@ -30,14 +30,17 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   collapse: false,
 });
 
+let oldOpenKeys = ref<string[]>([]);
+
 const isTree = computed(() => props.tree);
+const isCollapse = computed(() => props.collapse);
 
 const openKeys = computed({
   get() {
     return props.openKeys;
   },
   set(val) {
-    emit("update:selectedKey", val);
+    emit("update:openKeys", val);
   },
 });
 
@@ -50,9 +53,25 @@ const selectedKey = computed({
   },
 });
 
+watch(
+  () => props.collapse,
+  () => {
+    if (props.collapse) {
+      // 删除所有打开
+      oldOpenKeys.value = props.openKeys;
+      emit("update:openKeys", []);
+    } else {
+      // 赋值所有打开
+      emit("update:openKeys", oldOpenKeys.value);
+    }
+  },
+  { immediate: true }
+);
+
 provide("isTree", isTree);
 provide("selectedKey", selectedKey);
 provide("openKeys", openKeys);
+provide("isCollapse", isCollapse);
 </script>
 
 <template>
diff --git a/src/component/menuItem/index.vue b/src/component/menuItem/index.vue
index 99f777d7..a29b979e 100644
--- a/src/component/menuItem/index.vue
+++ b/src/component/menuItem/index.vue
@@ -27,8 +27,15 @@ const selectHandle = function () {
     @click="selectHandle()"
   >
     <a href="javascript:void(0)">
-      <slot v-if="slots.default"></slot>
-      <span v-else>{{ title }}</span>
+      <i v-if="slots.icon">
+        <slot name="icon"></slot>
+      </i>
+      <span v-if="slots.title">
+        <slot name="title"></slot>
+      </span>
+      <span v-else>
+        <slot></slot>
+      </span>
     </a>
   </li>
 </template>
diff --git a/src/component/subMenu/index.vue b/src/component/subMenu/index.vue
index e20dda83..5d91a1a9 100644
--- a/src/component/subMenu/index.vue
+++ b/src/component/subMenu/index.vue
@@ -28,6 +28,7 @@ const props = defineProps<LaySubMenuProps>();
 const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
 
 const isOpen = computed(() => {
   return openKeys.value.includes(props.id);
@@ -43,10 +44,12 @@ watch(isOpen, () => {
 });
 
 const openHandle = function () {
-  if (openKeys.value.includes(props.id)) {
-    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
-  } else {
-    openKeys.value.push(props.id);
+  if (!isCollapse.value) {
+    if (openKeys.value.includes(props.id)) {
+      openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+    } else {
+      openKeys.value.push(props.id);
+    }
   }
 };
 
@@ -84,8 +87,12 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
     :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
   >
     <a href="javascript:void(0)" @click="openHandle()">
-      <slot v-if="slots.title" name="title"></slot>
-      <span v-else>{{ title }}</span>
+      <i>
+        <slot v-if="slots.icon" name="icon"></slot>
+      </i>
+      <span>
+        <slot v-if="slots.title" name="title"></slot>
+      </span>
       <i
         :class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
         class="layui-icon layui-icon-down layui-nav-more"
diff --git a/src/index.ts b/src/index.ts
index aebcfe42..81496622 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,10 +3,10 @@ import type { App, Component } from "vue";
 import "./theme/index.less";
 import "@layui/layer-vue/lib/index.css";
 import "@layui/icons-vue/lib/index.css";
-import { layer, useLayer } from "@layui/layer-vue";
+import { layer } from "@layui/layer-vue";
+import layerInstall from "@layui/layer-vue";
 import i18n from "./language";
 
-import LayLayer from "./component/layer/index";
 import LayBacktop from "./component/backTop/index";
 import LayAvatar from "./component/avatar/index";
 import LayAvatarList from "./component/avatarList/index";
@@ -140,7 +140,6 @@ const components: Record<string, Component> = {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayLayer,
   LayTooltip,
   LayInputNumber,
   LaySkeleton,
@@ -161,6 +160,7 @@ const install = (app: App, options?: InstallOptions): void => {
     app.component(item.name || key, item);
   }
   app.use(i18n);
+  app.use(layerInstall);
 };
 
 export {
@@ -223,7 +223,6 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayLayer,
   LayTooltip,
   LayInputNumber,
   LaySkeleton,
@@ -238,6 +237,6 @@ export {
   LayConfigProvider,
 };
 
-export { layer, useLayer };
+export { layer };
 
 export default { install };
diff --git a/src/theme/index.less b/src/theme/index.less
index aec1541d..4a9fac95 100644
--- a/src/theme/index.less
+++ b/src/theme/index.less
@@ -3492,4 +3492,4 @@ body .layui-util-face .layui-layer-content {
 .layui-anim-fadeout {
   -webkit-animation-name: layui-fadeout;
   animation-name: layui-fadeout;
-}
+}
\ No newline at end of file