slider - 增加step

example/docs/zh-CN/components/animation.md

@@ -71,6 +71,113 @@ export default {
   }
 }
 </script>
+<style>
+.site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.site-doc-icon li .doc-icon-name,
+.site-doc-icon li .doc-icon-code {
+  color: #c2c2c2;
+}
+
+.site-doc-icon li .doc-icon-fontclass {
+  height: 40px;
+  line-height: 20px;
+  padding: 0 5px;
+  font-size: 13px;
+  color: #333;
+}
+
+.site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.site-doc-icon li .layui-icon {
+  display: inline-block;
+  font-size: 32px;
+}
+
+.site-doc-color {
+  margin: 15px 0;
+}
+
+.site-doc-necolor li div {
+  border-radius: 0;
+  color: #000 !important;
+}
+
+.site-doc-color li div {
+  padding: 20px 10px;
+  color: #fff;
+  text-align: center;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.site-doc-bgcolor li {
+  padding: 20px 10px;
+}
+.anim .site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.anim .site-doc-icon li {
+  width: 50%;
+}
+
+.anim .site-doc-anim li {
+  height: auto;
+}
+
+.anim .site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.anim .site-doc-icon li .layui-anim {
+  width: 125px;
+  height: 125px;
+  line-height: 125px;
+  margin: 0 auto 10px;
+  text-align: center;
+  background-color: #009688;
+  cursor: pointer;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.anim .site-doc-icon li .code {
+  white-space: nowrap;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/avatar.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-avatar` 标签, 创建头像
 
 <template>
   <lay-avatar :src="src"></lay-avatar>

example/docs/zh-CN/components/backtop.md

@@ -11,6 +11,9 @@
   <lay-backtop></lay-backtop>
 </template>
 
+<script>
+</script>
+
 :::
 
 :::title 自定义
@@ -35,7 +38,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/badge.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-badge` 标签, 创建徽章
 
 <template>
     <lay-badge type="dot"></lay-badge>&nbsp;

example/docs/zh-CN/components/button.md

@@ -12,7 +12,6 @@
   <lay-button type="normal">百搭按钮</lay-button>
   <lay-button type="warm">暖色按钮</lay-button>
   <lay-button type="danger">警告按钮</lay-button>
-  <lay-button type="disabled">禁用按钮</lay-button>
 </template>
 
 <script>
@@ -60,7 +59,7 @@ export default {
 ::: title 按钮尺寸
 :::
 
-::: demo 传入 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
+::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
 
 <template>
   <lay-button type="primary" size="lg">原始按钮</lay-button>
@@ -88,7 +87,7 @@ export default {
 ::: title 流式按钮
 :::
 
-::: demo 传入 `size` 属性, 创建最大化按钮
+::: demo 使用 `fluid` 属性, 创建最大化按钮
 
 <template>
   <lay-button type="primary" fluid>最大化按钮</lay-button>
@@ -114,7 +113,7 @@ export default {
 ::: title 圆角按钮
 :::
 
-::: demo 传入 `radius` 属性，创建圆角按钮
+::: demo 使用 `radius` 属性，创建圆角按钮
 
 <template>
   <lay-button type="primary" radius>原始按钮</lay-button>
@@ -234,7 +233,7 @@ export default {
 ::: title 加载按钮
 :::
 
-::: demo 传入 `loading` 属性, 控制按钮的加载状态
+::: demo 使用 `loading` 属性, 控制按钮的加载状态
 
 <template>
   <lay-button-container>

example/docs/zh-CN/components/card.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-card` 标签, 创建卡片组件
 
 <template>
 <div class="card-container">

example/docs/zh-CN/components/checkbox.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
 
 <template>
   <lay-form>

example/docs/zh-CN/components/confirm.md

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -39,7 +39,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/drawer.md

@@ -0,0 +1,175 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible" title="标题">内容</lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible = ref(false)
+
+    const changeVisible = function() {
+        visible.value = !visible.value;
+    }
+
+    return {
+        visible,
+        changeVisible
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 抽屉嵌套
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible1" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible1" title="标题">
+      <lay-button @click="changeVisible2" type="primary" style="margin:10px;">打开</lay-button>
+      <lay-layer type="drawer" area="200px" v-model="visible2" title="标题">
+      内容
+      </lay-layer>
+  </lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible1 = ref(false)
+
+    const changeVisible1 = function() {
+        visible1.value = !visible1.value;
+    }
+
+    const visible2 = ref(false)
+
+    const changeVisible2 = function() {
+        visible2.value = !visible2.value;
+    }
+
+    return {
+        visible1,
+        visible2,
+        changeVisible1,
+        changeVisible2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 函数调用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="openDrawer" type="primary">调用</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "@layui/layer-vue"
+
+export default {
+  setup() {
+
+    const openDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容"
+        })
+    }
+
+    return {
+        openDrawer
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 不同方向
+:::
+
+::: demo
+
+<template>
+    <lay-button @click="openTopDrawer" type="primary">上</lay-button>
+    <lay-button @click="openBottomDrawer" type="primary">下</lay-button>
+    <lay-button @click="openLeftDrawer" type="primary">左</lay-button>
+    <lay-button @click="openRightDrawer" type="primary">右</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "@layui/layer-vue"
+
+export default {
+  setup() {
+
+    const openTopDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "t"
+        })
+    }
+
+    const openBottomDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "b"
+        })
+    }
+
+    const openLeftDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "l"
+        })
+    }
+
+    const openRightDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "r"
+        })
+    }
+
+    return {
+        openTopDrawer,
+        openBottomDrawer,
+        openLeftDrawer,
+        openRightDrawer,
+    }
+  }
+}
+</script>
+
+:::

example/docs/zh-CN/components/exception.md

@@ -0,0 +1,145 @@
+::: anchor
+:::
+
+::: title 401
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="401" title="401" describe="暂无相关权限">
+      <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 403
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="403" title="403" describe="暂无相关权限">
+      <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 404
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="404" title="404" describe="跳转页面失败">
+    <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 500
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="500" title="500" describe="服务发生错误">
+      <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Exception 属性
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| title | 标题 | --     |
+| status | 状态 | `403` `404` `500` |
+| describe | 描述信息 | -- |
+
+:::
+
+::: title Exception 插槽
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| action | 操作 | --     |
+
+:::
+
+::: comment
+:::
+
+::: previousNext field
+:::

example/docs/zh-CN/components/grid.md

@@ -105,6 +105,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 
@@ -136,6 +149,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/icon.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-icon` 标签, 创建图标组件
 
 <template>
   <lay-icon type="layui-icon-face-smile"></lay-icon>
@@ -27,7 +27,7 @@ export default {
 ::: title 图标颜色
 :::
 
-::: demo
+::: demo 使用 `color` 属性设置颜色
 
 <template>
   <lay-icon type="layui-icon-face-smile" color="red"></lay-icon> &nbsp;
@@ -55,7 +55,7 @@ export default {
 ::: title 图标尺寸
 :::
 
-::: demo
+::: demo 使用 `size` 属性设置尺寸
 
 <template>
   <lay-icon type="layui-icon-star" size="26px" color="red"></lay-icon>

example/docs/zh-CN/components/input.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-input` 标签, 创建输入框
 
 <template>
   <lay-input v-model="data1"></lay-input>

example/docs/zh-CN/components/inputNumber.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-input-number` 标签, 创建数字输入框
 
 <template>
   <lay-input-number v-model="data"></lay-input-number>

example/docs/zh-CN/components/layout.md

@@ -7,7 +7,7 @@
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-body>content</lay-body>
     <lay-footer>footer</lay-footer>
@@ -27,21 +27,21 @@ export default {
 </script>
 
 <style>
-.lay-code .layui-footer,
-.lay-code .layui-header {
+.example .layui-footer,
+.example .layui-header {
   line-height: 60px;
   text-align: center;
   background: #87ca9a;
   color: white;
 }
-.lay-code .layui-side {
+.example .layui-side {
   display: flex;
   background: #77c38c;
   align-items: center;
   justify-content: center;
   color: white;
 }
-.lay-code .layui-body {
+.example .layui-body {
   display: flex;
   background: #5FB878;
   align-items: center;
@@ -58,7 +58,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>left</lay-side>
     <lay-body>content</lay-body>
     <lay-side>right</lay-side>
@@ -76,6 +76,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -85,7 +108,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-layout>
       <lay-side>side</lay-side>
@@ -105,6 +128,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -114,7 +160,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>side</lay-side>
     <lay-layout>
       <lay-header>header</lay-header>
@@ -123,7 +169,7 @@ export default {
     </lay-layout>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-layout>
       <lay-header>header</lay-header>
       <lay-body>body</lay-body>
@@ -132,7 +178,7 @@ export default {
     <lay-side>side</lay-side>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -143,7 +189,7 @@ export default {
     <lay-footer>Footer</lay-footer>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -166,6 +212,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/load.md

@@ -16,7 +16,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -54,7 +54,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -85,7 +85,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/menu.md

@@ -12,12 +12,12 @@
     <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 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-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -52,12 +52,94 @@ export default {
     <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 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-sub-menu>
+    </lay-sub-menu> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const openKeys = ref(["7"])
+    const selectedKey = ref("5")
+
+    return {
+      openKeys,
+      selectedKey
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 反转样式
+:::
+
+::: demo
+
+<template>
+  <lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :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-sub-menu>
+    </lay-sub-menu> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const openKeys = ref(["7"])
+    const selectedKey = ref("5")
+
+    return {
+      openKeys,
+      selectedKey
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 切换主题
+:::
+
+::: demo
+
+<template>
+  <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys" :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-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -90,17 +172,29 @@ export default {
 <template>
   <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
     <lay-menu-item id="1">
-      <router-link to="">首页</router-link>
+      <router-link to="">
+        <lay-icon type="layui-icon-home"></lay-icon> 
+        首页
+      </router-link>
     </lay-menu-item>
     <lay-sub-menu id="7">
         <template v-slot:title> 
-          <router-link to="">目录</router-link>
+          <router-link to="">
+            <lay-icon type="layui-icon-home"></lay-icon> 
+            目录
+          </router-link>
         </template>
         <lay-menu-item id="8">
-            <router-link to="">菜单一</router-link>
+            <router-link to="">
+              <lay-icon type="layui-icon-home"></lay-icon> 
+              菜单
+            </router-link>
         </lay-menu-item> 
         <lay-menu-item id="9">
-            <router-link to="">菜单二</router-link>
+            <router-link to="">
+              <lay-icon type="layui-icon-home"></lay-icon> 
+              菜单
+            </router-link>
         </lay-menu-item>
     </lay-sub-menu> 
   </lay-menu>
@@ -136,6 +230,9 @@ export default {
 | ------------------- | ------ | ---- |
 | v-model:selectedKey | 选中项 | --   |
 | v-model:openKeys    | 打开项 | --   |
+| theme    | 菜单主题 | `dark` `light`   |
+| inverted    | 特殊的激活样式 | `true` `false`  |
+| level    | 菜单层级 | `true` `false`  |
 
 :::
 
@@ -187,4 +284,4 @@ export default {
 :::
 
 ::: previousNext nav
-:::
+:::

example/docs/zh-CN/components/modal.md

@@ -28,7 +28,7 @@ export default {
     return {
         visible1
     };
-  },
+  }
 };
 </script>
 
@@ -61,7 +61,7 @@ export default {
     return {
         visible2
     };
-  },
+  }
 };
 </script>
 
@@ -94,7 +94,7 @@ export default {
     return {
         visible3
     };
-  },
+  }
 };
 </script>
 
@@ -127,7 +127,7 @@ export default {
     return {
         visible4
     };
-  },
+  }
 };
 </script>
 
@@ -160,7 +160,7 @@ export default {
     return {
         visible8
     };
-  },
+  }
 };
 </script>
 
@@ -193,7 +193,7 @@ export default {
         type5,
         visible5
     };
-  },
+  }
 };
 </script>
 
@@ -231,7 +231,7 @@ export default {
         btn6,
         visible6
     };
-  },
+  }
 };
 </script>
 
@@ -264,7 +264,7 @@ export default {
     return {
         visible7
     };
-  },
+  }
 };
 </script>
 
@@ -283,7 +283,7 @@ export default {
 
 <script>
 import { ref, watch } from "vue";
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 import { useRoute, useRouter } from "vue-router";
 export default {
   setup() {
@@ -307,7 +307,7 @@ export default {
         close,
         closeAll
     };
-  },
+  }
 };
 </script>
 

example/docs/zh-CN/components/msg.md

@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
 
     const openMsg = function() {
-        layer.msg("普通消息", { time: 1000 })
+        layer.msg("普通消息", { time: 100000 })
     }
     return {
         openMsg
@@ -42,13 +42,13 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
 
     const openSuccess = function() {
-        layer.msg("成功消息", { icon : 1, time: 1000})
+        layer.msg("成功消息", { icon : 1, time: 100000})
     }
 
     const openFailure = function() {

example/docs/zh-CN/components/page.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-page` 标签, 创建分页
 
 <template>
   <lay-page :limit="limit" 	@limit="limit = $event" :total="total" :show-page="showPage"></lay-page>

example/docs/zh-CN/components/panel.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-panel` 标签, 创建面板组件
 
 <template>
   <lay-panel><div style="padding: 30px;">面板</div></lay-panel>

example/docs/zh-CN/components/radio.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-radio` 标签, 创建一个单选框
 
 <template>
   <lay-form>

example/docs/zh-CN/components/rate.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-rate` 标签, 创建评分组件
 
 <template>
   <lay-rate v-model="all1"></lay-rate>

example/docs/zh-CN/components/result.md

@@ -0,0 +1,79 @@
+::: anchor
+:::
+
+::: title 成功
+:::
+
+::: demo 使用 `lay-result` 标签, 创建一个结果页面
+
+<template>
+  <lay-result></lay-result>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 失败
+:::
+
+::: demo 使用 `lay-result` 标签, 创建一个结果页面
+
+<template>
+  <lay-result status="failure"></lay-result>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Result 属性
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| title | 标题 | --     |
+| status | 状态 | `success` `failure` |
+| describe | 描述信息 | -- |
+
+:::
+
+::: title Result 插槽
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| content | 内容 | --     |
+| action | 操作 | --     |
+
+:::
+
+::: comment
+:::
+
+::: previousNext field
+:::

example/docs/zh-CN/components/select.md

@@ -46,7 +46,6 @@ export default {
 import { ref } from 'vue'
 
 export default {
-  name:'selectChange',
   setup() {
     const value = ref(null);
     var i = 1;

example/docs/zh-CN/components/skeleton.md

@@ -5,7 +5,7 @@
 :::
 
 
-::: demo
+::: demo 使用 `lay-skeleton` 标签, 创建骨架屏
 
 <template>
 <div>

example/docs/zh-CN/components/slider.md

@@ -4,7 +4,7 @@
 ::: title 横向
 :::
 
-::: demo
+::: demo 使用 `lay-slider` 标签, 创建滑块
 
 <template>
   <lay-slider v-model="value1" :disabled="false"></lay-slider>

example/docs/zh-CN/components/splitPanel.md

@@ -0,0 +1,118 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 300px">
+        <lay-split-panel-item>A</lay-split-panel-item>
+        <lay-split-panel-item>B</lay-split-panel-item>
+        <lay-split-panel-item>C</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 自定义比例
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 300px">
+        <lay-split-panel-item :space="30">1</lay-split-panel-item>
+        <lay-split-panel-item :space="20">2</lay-split-panel-item>
+        <lay-split-panel-item :space="50">3</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 垂直布局
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
+        <lay-split-panel-item>1</lay-split-panel-item>
+        <lay-split-panel-item>2</lay-split-panel-item>
+        <lay-split-panel-item>3</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 组合用法
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 600px;">
+        <lay-split-panel-item :space="60">
+            <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
+                <lay-split-panel-item :space="40">1</lay-split-panel-item>
+                <lay-split-panel-item :space="40">2</lay-split-panel-item>
+            </lay-split-panel>
+        </lay-split-panel-item>
+        <lay-split-panel-item :space="40">2</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title splitPanel属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
+| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50  |
+:::
+
+::: title splitPanelItem属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 |
+:::
+
+
+::: comment
+:::
+
+::: previousNext splitPanel
+:::

example/docs/zh-CN/components/switch.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-switch` 标签, 创建开关
 
 <template>
   <lay-switch v-model="active1"></lay-switch>

example/docs/zh-CN/components/tab.md

@@ -130,15 +130,15 @@ export default {
 
 :::
 
-::: title 控制是否关闭
+::: title 关闭前置
 :::
 
 ::: demo
 
 <template>
   <lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
-    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
-    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
+    <lay-tab-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
+    <lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
     <lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
     <lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
     <lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
@@ -178,15 +178,14 @@ export default {
 
 :::
 
-
 ::: title 嵌套循环
 :::
 
 ::: demo
 
 <template>
-  <lay-tab type="card" v-model="current6" @change="change6">
-    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
+  <lay-tab type="card" allow-close v-model="current6" @change="change6">
+    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
       内容{{a.id}}
     </lay-tab-item>
   </lay-tab>
@@ -204,12 +203,11 @@ export default {
     }
 
     const arr = ref([
-      {id:'1', title:'选项一'},
-      {id:'2', title:'选项二'}
+      {id:'1', title:'选项一', closable: false},
+      {id:'2', title:'选项二'},
+      {id:'3', title:'选项三'}
     ])
 
-    arr.value.push({id:'3', title:'选项三'})
-
     return {
       current6,
       arr
@@ -225,13 +223,13 @@ export default {
 
 ::: table
 
-| 属性        | 描述     | 可选值         |
-| ----------- | -------- | -------------- |
-| v-model     | 当前激活 | --             |
-| type        | 主题样式 | --             |
-| allow-close | 允许关闭 | `true` `false` |
-| before-close  | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭   |
-| before-leave  | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换   |
+| 属性         | 描述                                 | 可选值                                    |
+| ------------ | ------------------------------------ | ----------------------------------------- |
+| v-model      | 当前激活                             | --                                        |
+| type         | 主题样式                             | --                                        |
+| allow-close  | 允许关闭                             | `true` `false`                            |
+| before-close | `Function`关闭之前的回调钩子函数     | 参数(`id`), `return false` 表示不进行关闭 |
+| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
 
 :::
 
@@ -247,8 +245,21 @@ export default {
 
 :::
 
+::: title Tab Item 属性
+:::
+
+::: table
+
+| 属性     | 描述     | 可选值 |
+| -------- | -------- | ------ |
+| id       | 唯一标识 | --     |
+| title    | 头部标题 | --     |
+| closable | 允许关闭 | --     |
+
+:::
+
 ::: comment
 :::
 
 ::: previousNext tab
-:::
+:::

example/docs/zh-CN/components/table.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-table` 标签, 创建表格
 
 <template>
   <lay-table :columns="columns" :dataSource="dataSource">

example/docs/zh-CN/components/textarea.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-textarea` 标签, 创建文本域
 
 <template>
   <lay-textarea placeholder="请输入描述" v-model="data1"></lay-textarea>

example/docs/zh-CN/components/transfer.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-transfer` 标签, 创建穿梭框
 
 <template>
   <lay-transfer :dataSource="dataSource1"></lay-transfer>

example/docs/zh-CN/guide/changelog.md

@@ -11,15 +11,48 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
-      <ul> 
+    <ul> 
+      <a name="0-3-6"> </a> 
+      <li> 
+        <h3>0.3.6 <span class="layui-badge-rim">2022-02-02</span></h3> 
+        <ul> 
+          <li>[新增] result 结果组件, 提供 success error 通用状态页。</li>
+          <li>[新增] exception 异常组件, 提供 403, 404, 500 通用异常页。</li>
+          <li>[新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。</li>
+          <li>[新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。</li>
+          <li>[新增] menu 组件 theme 属性, 可选值 light 和 dark。</li>
+          <li>[修复] table 组件 header 不随 body 滚动。</li>
+          <li>[升级] vue 3.2.29 版本。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="0-3-5"> </a> 
+      <li> 
+        <h3>0.3.5 <span class="layui-badge-rim">2022-01-24</span></h3> 
+        <ul> 
+          <li>[新增] split-panel 分割面板, 高度灵活的布局组件。</li>
+          <li>[新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。</li>
+          <li>[修复] tab-item 组件 closable 属性警告, 兼容 string 类型。</li>
+          <li>[修复] dropdown 下拉菜单 content 显示位置问题。</li>
+          <li>[升级] icons-vue 1.0.3 版本。</li>
+          <li>[升级] layer-vue 1.3.1 版本。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
       <a name="0-3-4"> </a> 
       <li> 
-        <h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3> 
+        <h3>0.3.4 <span class="layui-badge-rim">2022-01-19</span></h3> 
         <ul> 
           <li>[新增] avatar-list 头像列表组件。</li>
-          <li>[修复] button 按钮 disabled 为 true 时, 仍触发 click 事件。</li>
-          <li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
-          <li>[升级] vite 2.7.10。</li>        
+          <li>[新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。</li>
+          <li>[修复] button 按钮 disabled 为 true 时, 触发 click 事件。</li>
+          <li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li> 
+          <li>[修复] layout 组件 side 因 flex 布局宽度不固定。</li>
+          <li>[优化] layer 的 children slot 渲染机制。</li>
+          <li>[升级] layer-vue 1.2.5 版本。</li>
+          <li>[升级] vue 3.2.27 版本。</li>   
         </ul> 
       </li>
     </ul>
@@ -50,7 +83,7 @@
           <li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
           <li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
           <li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
-          <li>[升级] layer-vue 1.2.4。</li>
+          <li>[升级] layer-vue 1.2.4 版本。</li>
         </ul> 
       </li>
     </ul>
@@ -68,7 +101,7 @@
           <li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
           <li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>  
           <li>[集成] eslint, prettier 规范插件 。</li>  
-          <li>[升级] icons-vue 1.0.2。</li>  
+          <li>[升级] icons-vue 1.0.2 版本。</li>  
         </ul> 
       </li>
     </ul>
@@ -87,7 +120,7 @@
           <li>[修复] layer 弹层 v-model 切换状态后, 让其保持 area 与 offset 状态。</li>
           <li>[修复] transfer 穿梭框组件按钮样式, 使其增加减少操作按钮对齐。</li>
           <li>[修复] tree 树开启 checkbox 时, 无法选中的问题。</li>
-          <li>[升级] layer-vue 1.2.2。</li>      
+          <li>[升级] layer-vue 1.2.2 版本。</li>      
         </ul> 
       </li>
     </ul>

example/docs/zh-CN/guide/getStarted.md

@@ -1,18 +1,23 @@
 ::: title 快速上手
 :::
 
-<br>
-
-::: describe 1. 使用 npm 下载
-:::
-
 ```
 npm install @layui/layui-vue --save
 ```
+:::describe 或
+:::
+```
+yarn add @layui/layui-vue --save
+```
+:::describe 或
+:::
+```
+pnpm install @layui/layui-vue --save
+```
 
 <br>
 
-::: describe 2. 在 main.ts 中依赖
+::: title 全局注册
 :::
 
 ```js
@@ -26,7 +31,27 @@ createApp(App).use(Layui).mount('#app')
 
 <br>
 
-::: describe 3. 在 index.vue 使用
+::: title 按需引入
+:::
+
+```js
+import App from './App.vue'
+import { createApp } from 'vue'
+import { LayButton, LayTable } from '@layui/layui-vue'
+import '@layui/layui-vue/es/button/index.css';
+import '@layui/layui-vue/es/table/index.css';
+
+var app = createApp(App).
+
+app.component("LayButton", LayButton);
+app.component("LayTable", LayTable);
+
+app.mount('#app')
+```
+<br>
+
+
+::: title 基础示例
 :::
 
 ```html
@@ -41,5 +66,3 @@ createApp(App).use(Layui).mount('#app')
   <lay-footer>pearadmin.com</lay-footer>
 </lay-layout>
 ```
-
-- 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)

example/docs/zh-CN/guide/member.md

@@ -129,7 +129,7 @@
             莫名点
         </lay-col>
         <lay-col md="8">
-            焦点：skeleton step
+            焦点：skeleton step splitPanel
         </lay-col>
         <lay-col md="4">
             地点：中国 上海

example/src/components/LayCode.vue

@@ -2,18 +2,19 @@
   <div class="lay-code">
     <div id="source" class="source">
       <slot />
-    </div>
-    <div ref="meta" class="meta">
       <div v-if="$slots.description" class="description">
         <slot name="description" />
       </div>
+    </div>
+    <div ref="meta" class="meta">
       <div class="language-html">
         <slot name="code" />
       </div>
     </div>
     <div :class="{ 'is-fixed': isFixContorl }" class="control">
-      <i class="layui-icon layui-icon-file" @click="copy" />
-      <i class="layui-icon layui-icon-fonts-code" @click="toggle" />
+      <i class="layui-icon layui-icon-play btn" @click="onPlayground" title="在 Playground 中打开" />
+      <i class="layui-icon layui-icon-file btn" @click="copy" title="复制代码" />
+      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"  title="查看代码"/>
     </div>
   </div>
 </template>
@@ -22,6 +23,8 @@
 import { layer } from '@layui/layer-vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
+import { usePlayGround } from '../plugin/usePlayground'
+
 const meta = ref<HTMLElement>({} as HTMLElement)
 const isFixContorl = ref(false)
 const codeAreaHeight = ref(0)
@@ -32,6 +35,15 @@ const toggle = function () {
   show.value = !show.value
 }
 
+const onPlayground = function(){
+  const foundCodes = meta.value.getElementsByClassName('language-html')
+  const foundCode = foundCodes[0];
+  const text = foundCode.textContent || "";
+  
+  const { link } = usePlayGround(text)
+  window.open(link)
+}
+
 const copy = function () {
   const foundCodes = meta.value.getElementsByClassName('language-html')
   const foundCode = foundCodes[0];
@@ -121,6 +133,7 @@ function handleScroll() {
 }
 .lay-code .source {
   padding: 24px;
+  padding-bottom:15px;
 }
 .lay-code .meta {
   padding: 0 10px;
@@ -129,9 +142,10 @@ function handleScroll() {
   overflow: hidden;
   transition: height 0.2s;
 }
-.lay-code .meta .description {
+.lay-code .source .description {
   padding: 20px;
-  margin: 10px 0;
+  margin: 20px 0;
+  margin-bottom: 0px;
   border: 1px solid whitesmoke;
   box-sizing: border-box;
   background: var(--c-bg);
@@ -140,11 +154,11 @@ function handleScroll() {
   color: var(--c-text-light-1);
   word-break: break-word;
 }
-.lay-code .meta .description p {
+.lay-code .source .description p {
   margin: 0 !important;
   line-height: 26px !important;
 }
-.lay-code .meta .description code {
+.lay-code .source .description code {
   display: inline-block;
   padding: 1px 5px;
   margin: 0 4px;
@@ -155,6 +169,7 @@ function handleScroll() {
   line-height: 18px;
   color: var(--c-text-light);
 }
+
 .lay-code .control {
   height: 44px;
   box-sizing: border-box;
@@ -186,4 +201,7 @@ function handleScroll() {
   padding-left: 10px;
   padding-right: 10px;
 }
+.btn:hover::before {
+  color: #5FB878;
+}
 </style>

example/src/layouts/Layout.vue

@@ -30,20 +30,26 @@
         class="layui-nav layui-layout-right"
         style="margin-top: 0px; margin-bottom: 0px"
       >
+        <li class="layui-nav-item">
+          <a
+            href="https://layui-vue.gitee.io/layui-vue-playground"
+            target="_blank"
+          >
+            <lay-icon type="layui-icon-util" size="15px"></lay-icon>
+          </a>
+        </li>
         <li class="layui-nav-item">
           <a href="https://gitee.com/layui-vue">
             <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
           </a>
         </li>
         <li class="layui-nav-item">
-          <a
-            href="https://gitee.com/layui-vue/layui-vue/issues"
-          >
+          <a href="https://gitee.com/layui-vue/layui-vue/issues">
             <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.4 </a>
+          <a href="javascript:void(0)"> 0.3.6 </a>
         </li>
       </ul>
     </lay-header>
@@ -51,307 +57,47 @@
   </lay-layout>
 </template>
 <script>
-import { ref, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import menu from "../view/utils/menus";
 export default {
   setup() {
-    const route = useRoute()
-    const router = useRouter()
-    const currentPath = ref('/zh-CN/guide')
+    const route = useRoute();
+    const router = useRouter();
+    const currentPath = ref("/zh-CN/guide");
+    const theme = ref(false);
+
+    const menus = [];
+
+    menu.forEach((m) => {
+      m.children.forEach((c) => {
+        menus.push(c);
+      });
+    });
 
     watch(
       () => route.path,
       (val) => {
-        currentPath.value = val
+        currentPath.value = val;
       },
       {
         immediate: true,
         deep: true,
       }
-    )
-
-    const menus = [
-      {
-        id: 1,
-        title: '介绍',
-        subTitle: 'introduce',
-        path: '/zh-CN/guide/introduce',
-      },
-      {
-        id: 2,
-        title: '安装',
-        subTitle: 'get started',
-        path: '/zh-CN/guide/getStarted',
-      },
-      {
-        id: 3,
-        title: '更新',
-        subTitle: 'change log',
-        path: '/zh-CN/guide/changelog',
-      },
-      {
-        id: 4,
-        title: '布局',
-        subTitle: 'layout',
-        path: '/zh-CN/components/layout',
-      },
-      {
-        id: 5,
-        title: '容器',
-        subTitle: 'container',
-        path: '/zh-CN/components/container',
-      },
-      {
-        id: 6,
-        title: '按钮',
-        subTitle: 'button',
-        path: '/zh-CN/components/button',
-      },
-      {
-        id: 7,
-        title: '图标',
-        subTitle: 'iconfont',
-        path: '/zh-CN/components/icon',
-      },
-      {
-        id: 8,
-        title: '面板',
-        subTitle: 'panel',
-        path: '/zh-CN/components/panel',
-      },
-      {
-        id: 9,
-        title: '卡片',
-        subTitle: 'card',
-        path: '/zh-CN/components/card',
-      },
-      {
-        id: 10,
-        title: '动画',
-        subTitle: 'animation',
-        path: '/zh-CN/components/animation',
-      },
-      {
-        id: 11,
-        title: '栅格',
-        subTitle: 'grid',
-        path: '/zh-CN/components/grid',
-      },
-      {
-        id: 12,
-        title: '表单',
-        subTitle: 'form',
-        path: '/zh-CN/components/form',
-      },
-      {
-        id: 13,
-        title: '徽章',
-        subTitle: 'badge',
-        path: '/zh-CN/components/badge',
-      },
-      {
-        id: 14,
-        title: '区块',
-        subTitle: 'block',
-        path: '/zh-CN/components/block',
-      },
-      {
-        id: 15,
-        title: '分割',
-        subTitle: 'line',
-        path: '/zh-CN/components/line',
-      },
-      {
-        id: 16,
-        title: '菜单',
-        subTitle: 'nav',
-        path: '/zh-CN/components/menu',
-      },
-      {
-        id: 17,
-        title: '面包屑',
-        subTitle: 'breadcrumb',
-        path: '/zh-CN/components/breadcrumb',
-      },
-      {
-        id: 18,
-        title: '进度',
-        subTitle: 'progress',
-        path: '/zh-CN/components/progress',
-      },
-      {
-        id: 19,
-        title: '时间线',
-        subTitle: 'timeline',
-        path: '/zh-CN/components/timeline',
-      },
-      {
-        id: 20,
-        title: '颜色',
-        subTitle: 'color',
-        path: '/zh-CN/components/color',
-      },
-      {
-        id: 21,
-        title: '折叠面板',
-        subTitle: 'collapse',
-        path: '/zh-CN/components/collapse',
-      },
-      {
-        id: 22,
-        title: '表格',
-        subTitle: 'table',
-        path: '/zh-CN/components/table',
-      },
-      {
-        id: 23,
-        title: '头像',
-        subTitle: 'avatar',
-        path: '/zh-CN/components/avatar',
-      },
-      {
-        id: 24,
-        title: '字段',
-        subTitle: 'field',
-        path: '/zh-CN/components/field',
-      },
-      {
-        id: 25,
-        title: '空',
-        subTitle: 'empty',
-        path: '/zh-CN/components/empty',
-      },
-      {
-        id: 26,
-        title: '评分',
-        subTitle: 'rate',
-        path: '/zh-CN/components/rate',
-      },
-      {
-        id: 27,
-        title: '下拉菜单',
-        subTitle: 'dropdown',
-        path: '/zh-CN/components/dropdown',
-      },
-      {
-        id: 28,
-        title: '选项卡',
-        subTitle: 'tab',
-        path: '/zh-CN/components/tab',
-      },
-      {
-        id: 29,
-        title: '图标选择',
-        subTitle: 'iconPicker',
-        path: '/zh-CN/components/iconPicker',
-      },
-      {
-        id: 29,
-        title: '分页',
-        subTitle: 'page',
-        path: '/zh-CN/components/page',
-      },
-      {
-        id: 30,
-        title: '树形组件',
-        subTitle: 'tree',
-        path: '/zh-CN/components/tree',
-      },
-      {
-        id: 31,
-        title: '穿梭框',
-        subTitle: 'transfer',
-        path: '/zh-CN/components/transfer',
-      },
-      {
-        id: 32,
-        title: '复选框',
-        subTitle: 'checkbox',
-        path: '/zh-CN/components/checkbox',
-      },
-      {
-        id: 33,
-        title: '单选框',
-        subTitle: 'radio',
-        path: '/zh-CN/components/radio',
-      },
-      {
-        id: 34,
-        title: '输入框',
-        subTitle: 'input',
-        path: '/zh-CN/components/input',
-      }, 
-      {
-        id: 341,
-        title: '数字输入框',
-        subTitle: 'inputNumber',
-        path: '/zh-CN/components/inputNumber',
-      },
-      {
-        id: 35,
-        title: '文本域',
-        subTitle: 'textarea',
-        path: '/zh-CN/components/textarea',
-      },
-      {
-        id: 36,
-        title: '开关',
-        subTitle: 'switch',
-        path: '/zh-CN/components/switch',
-      },
-      {
-        id: 37,
-        title: '滑块',
-        subTitle: 'slider',
-        path: '/zh-CN/components/slider',
-      },
-      {
-        id: 38,
-        title: '轮播',
-        subTitle: 'carousel',
-        path: '/zh-CN/components/carousel',
-      },
-      {
-        id: 39,
-        title: '下拉选择',
-        subTitle: 'select',
-        path: '/zh-CN/components/select',
-      },
-      {
-        id: 40,
-        title: '颜色选择器',
-        subTitle: 'colorPicker',
-        path: '/zh-CN/components/colorPicker',
-      }, {
-        id: 41,
-        title: '文字提示',
-        subTitle: 'tooltip',
-        path: '/zh-CN/components/tooltip',
-      }, {
-        id: 42,
-        title: '返回顶部',
-        subTitle: 'backtop',
-        path: '/zh-CN/components/backtop',
-      },
-      {
-        id: 43,
-        title: '数字滚动',
-        subTitle: 'countup',
-        path: '/zh-CN/components/countup',
-      },
-    ]
+    );
 
     const handleClick = function (menu) {
-      router.push(menu.path)
-    }
+      router.push(menu.path);
+    };
 
     return {
       menus,
+      theme,
       currentPath,
       handleClick,
-    }
+    };
   },
-}
+};
 </script>
 <style>
 .layui-layout-document > .layui-header {

example/src/plugin/usePlayground.ts

@@ -0,0 +1,85 @@
+const scriptRe = /<script[^>]*>([\s\S]*)<\/script>/;
+const exportDefaultRe = /export\s*default\s*\{([\s\S]*)\}\;?\s*<\/script>/;
+const setupRe = /setup\s*\(\)\s*\{([\s\S]*)return\s*\{([\s\S]*)\}\;?\s*\}\;?/;
+const layerRe = /import\s?\{\s?layer\s?\}\s?from\s?[\"|\']\@layui\/layer-vue[\"|\']/;
+
+// danger: 以下字符串拼接代码不可改动缩进或换行,否则会影响 URI hash 解码后代码的排版
+const MAIN_FILE_NAME = 'App.vue';
+// 用于全局引入 layui
+const SETUP_CODE = `import { setupLayuiVue } from './layui-vue.js'
+setupLayuiVue()`;
+
+/**
+ * √方案一:转换为setup语法糖 
+ * 方案二:和文档代码保持一致,仅在 setup() 中添加 setupLayuiVue(),全局引入 layui
+ * 方案三:<script> 和 <script setup> 标签同时存在,文档中的代码都在<script>中, <script setup>仅用来设置 layui
+ * @param source 
+ * @returns 
+ */
+export const usePlayGround = (source: string) => {
+  const decodeCode = source;
+  const result = decodeCode.match(scriptRe)
+  
+  // 替换 script 标签
+  // $1 正则第一个括号匹配的内容
+  let code: string
+  if (result) {
+    code = decodeCode.replace(
+      scriptRe,
+      `<script lang="ts" setup>
+${SETUP_CODE}
+$1
+</script>`
+    )
+  } else {
+    code = `${decodeCode}
+<script lang="ts" setup>
+${SETUP_CODE}
+</script>
+`
+  }
+
+  // 去除 export default,保留其中的内容
+  const exportDefaultResult = code.match(exportDefaultRe)
+  if(exportDefaultResult){
+    code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+`</script>`)))
+     // console.log("export",code);
+  }
+  // 去除 setup 函数,保留其中的内容
+  const setupResult = code.match(setupRe)
+  if(setupResult){
+    code = code.replace(setupRe,trimBr(setupResult[1]))
+     // console.log("setup",code);
+  }
+  // TODO 这是临时方案,需要在 playground 中支持 @layui/layer-vue
+  // 替换 layer 引入语句  
+  if(code.match(layerRe)){
+    code = code.replace(layerRe,`import { layer } from "@layui/layui-vue"`)
+     // console.log("layer",code);
+  }
+  const originCode = {
+    [MAIN_FILE_NAME]: code,
+  }
+
+  const encoded = utoa(JSON.stringify(originCode))
+  const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
+  return {
+    encoded,
+    link,
+  }
+}
+
+//编码
+function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)));
+}
+
+// 去除字符串两端的空白行
+function trimBr(str: string): string{
+  return str.replace(/(^[\r\n]*)|([\r\n]*$)/,"")
+}
+
+// 去除字符串两端的空格 
+function trim(str: string): string { 
+return str.replace(/(^\s*)|(\s*$)/g, ""); 
+} 

example/src/router/zh-CN.ts

@@ -76,6 +76,12 @@ const zhCN = [
         component: Component,
         meta: { title: "组件" },
         children: [
+          {
+            path: "/zh-CN/components/splitPanel",
+            component: () =>
+              import("../../docs/zh-CN/components/splitPanel.md"),
+            meta: { title: "分割面板" },
+          },
           {
             path: "/zh-CN/components/skeleton",
             component: () => import("../../docs/zh-CN/components/skeleton.md"),
@@ -315,6 +321,11 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/components/msg.md"),
             meta: { title: "信息" },
           },
+          {
+            path: "/zh-CN/components/drawer",
+            component: () => import("../../docs/zh-CN/components/drawer.md"),
+            meta: { title: "抽屉" },
+          },
           {
             path: "/zh-CN/components/backtop",
             component: () => import("../../docs/zh-CN/components/backtop.md"),
@@ -325,6 +336,15 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/components/countup.md"),
             meta: { title: "数字滚动" },
           },
+          {
+            path: "/zh-CN/components/exception",
+            component: () => import("../../docs/zh-CN/components/exception.md"),
+            meta: { title: "异常" },
+          },          {
+            path: "/zh-CN/components/result",
+            component: () => import("../../docs/zh-CN/components/result.md"),
+            meta: { title: "结果" },
+          },
         ],
       },
       {

example/src/view/index.vue

@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.4</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.6</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
@@ -34,7 +34,7 @@
               >更新日志</router-link
             ></span
           >
-          <span>下载量：<em class="site-showdowns">3124</em></span>
+          <span>下载量：<em class="site-showdowns">4680</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">544</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">612</cite>
         </a>
         <a
           href="https://gitee.com/layui-vue"

example/src/view/utils/menus.ts

@@ -303,6 +303,18 @@ const menus = [
         subTitle: "splitPanel",
         path: "/zh-CN/components/splitPanel",
       },
+      {
+        id: 100,
+        title: "异常",
+        subTitle: "exception",
+        path: "/zh-CN/components/exception",
+      },      
+      {
+        id: 100,
+        title: "结果",
+        subTitle: "result",
+        path: "/zh-CN/components/result",
+      },
     ],
   },
   {
@@ -333,6 +345,12 @@ const menus = [
         subTitle: "msg",
         path: "/zh-CN/components/msg",
       },
+      {
+        id: 94,
+        title: "抽屉",
+        subTitle: "drawer",
+        path: "/zh-CN/components/drawer",
+      },
     ],
   },
 ];

example/vite.config.ts

@@ -5,8 +5,8 @@ import plugins from './src/plugin/common-plugins'
 export default defineConfig({
   resolve: {
     alias: {
-      '/@src': path.resolve(__dirname, '../src'),
+      '/@src': path.resolve(__dirname, './src'),
     },
   },
   plugins,
-})
+})