From 34e352b25cb06e434fd702c37c4c701aa9a394c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 27 Jun 2022 17:04:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(layer):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/document-layer/index.html             |   2 +-
 package/document-layer/{ => src}/App.vue      |   0
 .../document-layer/src/components/LayCode.vue |  40 +-
 .../document-layer/src/document/zh-CN/demo.md | 406 ++++++++++++++++
 .../document-layer/src/document/zh-CN/help.md |   0
 .../src/document/zh-CN/index.md               | 439 ------------------
 .../document-layer/{ => src}/entry-client.ts  |   0
 .../document-layer/{ => src}/entry-server.ts  |   0
 package/document-layer/src/layouts/Layout.vue |  25 +-
 package/document-layer/{ => src}/main.ts      |  16 +-
 package/document-layer/src/router/zh-CN.ts    |  15 +-
 package/document-layer/tsconfig.json          |  19 +
 package/layer/src/component/index.vue         |  11 +-
 13 files changed, 478 insertions(+), 495 deletions(-)
 rename package/document-layer/{ => src}/App.vue (100%)
 create mode 100644 package/document-layer/src/document/zh-CN/demo.md
 create mode 100644 package/document-layer/src/document/zh-CN/help.md
 rename package/document-layer/{ => src}/entry-client.ts (100%)
 rename package/document-layer/{ => src}/entry-server.ts (100%)
 rename package/document-layer/{ => src}/main.ts (56%)
 create mode 100644 package/document-layer/tsconfig.json

diff --git a/package/document-layer/index.html b/package/document-layer/index.html
index e544e5fc..6c0fc6f3 100644
--- a/package/document-layer/index.html
+++ b/package/document-layer/index.html
@@ -21,6 +21,6 @@
     <div id="app">
       <!--app-html-->
     </div>
-    <script type="module" src="./entry-client.ts"></script>
+    <script type="module" src="./src/entry-client.ts"></script>
   </body>
 </html>
diff --git a/package/document-layer/App.vue b/package/document-layer/src/App.vue
similarity index 100%
rename from package/document-layer/App.vue
rename to package/document-layer/src/App.vue
diff --git a/package/document-layer/src/components/LayCode.vue b/package/document-layer/src/components/LayCode.vue
index 5ae046c0..1d55a410 100644
--- a/package/document-layer/src/components/LayCode.vue
+++ b/package/document-layer/src/components/LayCode.vue
@@ -1,49 +1,19 @@
 <template>
   <div class="lay-code">
     <div id="source" class="source">
-      <slot />
+      <slot ></slot>
       <div v-if="$slots.description" class="description">
-        <slot name="description" />
+        <slot name="description" ></slot>
       </div>
     </div>
     <div ref="meta" class="meta">
       <div class="language-html">
-        <slot name="code" />
+        <slot name="code" ></slot>
       </div>
     </div>
     <div :class="{ 'is-fixed': isFixContorl }" class="control">
-      <i class="layui-icon layui-icon-file btn" @click="copy"
-        ><svg
-          t="1646244236057"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="5505"
-          width="18"
-          height="18"
-        >
-          <path
-            d="M768 682.666667V170.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v512a85.333333 85.333333 0 0 0 85.333334 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333zM170.666667 170.666667h512v512H170.666667z m682.666666 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 0 85.333333 85.333334h426.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z"
-            p-id="5506"
-          ></path></svg
-      ></i>
-      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"
-        ><svg
-          t="1646244296040"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="7127"
-          width="18"
-          height="18"
-        >
-          <path
-            d="M217.301333 414.933333a21.333333 21.333333 0 0 1-1.066666-30.165333l29.098666-31.232a21.333333 21.333333 0 0 1 30.165334-1.024l236.117333 220.16 236.16-220.16a21.333333 21.333333 0 0 1 30.122667 1.024l29.098666 31.232a21.333333 21.333333 0 0 1-1.024 30.165333L541.738667 661.333333l-13.44 14.421334a21.290667 21.290667 0 0 1-16.725334 6.741333 21.290667 21.290667 0 0 1-16.64-6.741333l-13.44-14.506667z"
-            p-id="7128"
-          ></path></svg
-      ></i>
+      <i class="layui-icon layui-icon-file btn" @click="copy"></i>
+      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"></i>
     </div>
   </div>
 </template>
diff --git a/package/document-layer/src/document/zh-CN/demo.md b/package/document-layer/src/document/zh-CN/demo.md
new file mode 100644
index 00000000..44a2c243
--- /dev/null
+++ b/package/document-layer/src/document/zh-CN/demo.md
@@ -0,0 +1,406 @@
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>消息</legend>
+</fieldset>
+
+::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数`msg`为消息内容, 第二参数`options`为可选配置, 常用于配置`time`超时时间等。
+
+<template>
+    <button @click="msg">普通消息</button>
+    <button @click="success">成功消息</button>
+    <button @click="failure">失败消息</button>
+    <button @click="warm">警告消息</button>
+    <button @click="info">锁定消息</button>
+</template>
+
+<script>
+import { layer } from  "../../../../layer/src/index"
+
+const msg = function() {
+    layer.msg("普通消息", { time: 1000 })
+}
+
+const success = function() {
+    layer.msg("成功消息", { time: 1000, icon: 1})
+}
+
+const failure = function() {
+    layer.msg("失败消息", { time: 1000, icon: 2})
+}
+
+const warm = function() {
+    layer.msg("警告消息", { time: 1000, icon: 3})
+}
+
+const info = function() {
+    layer.msg("疑问消息", { time: 1000, icon: 4})
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>确认</legend>
+</fieldset>
+
+::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数`msg`为文本消息, 第二个参数`options`为选项配置, 你可以使用`options`的`btn`属性定义操作。
+
+<template>
+    <button @click="openConfirm1">确认框</button>
+    <button @click="openConfirm2">询问框</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const openConfirm1 = function() {
+    layer.confirm("layui-vue 1.0.0 已经发布")
+}
+
+const openConfirm2 = function() {
+    layer.confirm("你如何看待 layui-vue 的发布", 
+    {btn:
+        [
+            {text:'站着看', callback: function(id){layer.close(id);}},
+            {text:'坐着看', callback: function(id){layer.close(id);}}
+        ]
+    })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>加载</legend>
+</fieldset>
+
+::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数`type`为加载动画样式, 第二个参数`options`为可选配置, 常用于设置`time`加载时长`shade`遮盖层等。
+
+<template>
+    <button @click="load1">加载1</button>
+    <button @click="load2">加载2</button>
+    <button @click="load3">加载3</button>
+    <button @click="load4">加载4</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const load1 = function() {
+    layer.load(0, {time: 2000})
+}
+
+const load2 = function() {
+    layer.load(1, {time: 2000})
+}
+
+const load3 = function() {
+    layer.load(2, {time: 2000})
+}
+
+const load4 = function() {
+    layer.msg("加载中...",{icon: 16, time: 2000})
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>模态</legend>
+</fieldset>
+
+::: demo 通过 layer.open(option) 创建模态窗, 目前支持`iframe` `page`等类型, 你可以使用`options`选项开启`Resize` `Offset`等更多特性。
+
+<template>
+    <lay-row :space="30" >
+        <lay-col :span="24">
+            <button @click="open">小试牛刀</button>
+            <button @click="openSize">指定尺寸</button>
+            <button @click="openOffset">指定位置</button>
+            <button @click="openIframe">远程窗体</button>
+            <button @click="openHtml">代码片段</button>
+        </lay-col>
+        <lay-col :span="24">
+            <button @click="openVNode">虚拟节点</button>
+            <button @click="openMaxmin">缩小放大</button>
+            <button @click="openResize">尺寸拉伸</button>
+            <button @click="openIndex">设置层级</button>
+            <button @click="openAreaAuto">内容适应</button>
+        </lay-col>
+    </lay-row>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const open = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        content: "内容"
+    })    
+}
+
+const openSize = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        area: ['400px','400px'],
+        content: "内容"
+    })     
+}
+
+const openOffset = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        offset: ['100px','100px'],
+        content: "内容"
+    })
+}
+
+const openIframe = function() {
+    layer.open({
+        type: 2,
+        title: "标题",
+        resize: true,
+        area: ['500px','500px'],
+        content: "http://layui-vue.pearadmin.com"
+    })
+}
+
+const openHtml = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        isHtmlFragment: true,
+        content: "<p style='color:red;'>内容</p>"
+    })
+}
+
+const openVNode = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        content: h('button', { style: 'margin: 10px;' },'按钮')
+    })
+}
+
+const openMaxmin = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        maxmin: true,
+        content: "内容"
+    })
+}
+
+const openResize = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        resize: true,
+        content: "内容"
+    })    
+}
+
+const openIndex = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        zIndex: 999,
+        content: "设置层级"
+    })
+}
+
+const openAreaAuto = function(){
+    layer.open({
+        type:1,
+        title:"area:auto",
+        isHtmlFragment:true,
+        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
+    })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>抽屉</legend>
+</fieldset>
+
+::: demo 通过 layer.drawer(options) 创建抽屉层, `options`选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用`offset`选项来设置方向。
+<template>
+    <button @click="openTop">上</button>
+    <button @click="openBottom">下</button>
+    <button @click="openLeft">左</button>
+    <button @click="openRight">右</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const openTop = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "t"
+    })
+}
+
+const openBottom = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "b"
+    })
+}
+
+const openLeft = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "l"
+    })
+}
+
+const openRight = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "r"
+    })
+}
+</script>
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>图片</legend>
+</fieldset>
+
+::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
+
+<template>
+    <button @click="signleImg">图片查看</button>
+    <button @click="signleImg2">图片标题</button>
+    <button @click="groupImg">图片分组</button>
+</template>
+
+<script>
+import { layer } from  "../../../../layer/src/index"
+
+const signleImg = function() {
+    layer.photos("/src/assets/logo.jpg")
+}
+const signleImg2 = function() {
+    layer.photos({
+      imgList:[{src:'/src/assets/logo.jpg',alt:'layer for vue'}]
+    })
+}
+const groupImg = function() {
+  layer.photos({
+    imgList:[
+      { src:'http://www.pearadmin.com/assets/images/un8.svg', alt:'图片1'},
+      { src:'http://www.pearadmin.com/assets/images/un32.svg', alt:'图片2'}
+    ]
+  })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>销毁</legend>
+</fieldset>
+
+::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
+
+<template>
+    <button @click="open">打开</button>
+    <button @click="close">销毁</button>
+    <button @click="closeAll">销毁全部</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index";
+
+let id = null;
+
+const open = function() {
+    id = layer.open({
+        title: "标题",
+        content: "内容",
+        shade: false
+    })
+}
+
+const close = function() {
+    layer.close(id);
+}
+
+const closeAll = function() {
+    layer.closeAll();
+}
+</script>
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>通讯</legend>
+</fieldset>
+
+::: demo 👉 查看 [Children1.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children1.vue), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
+
+<template>
+  <button @click="openComponent1">数据</button>
+  <input type="text" v-model="data.remark" />
+</template>
+
+<script setup>
+import { reactive, h, resolveComponent } from 'vue'
+import { layer } from  "../../../../layer/src/index"
+
+const data = reactive({
+    remark: "信息"
+})
+const ChildrenOne = resolveComponent('Children1')
+const openComponent1 = () => {
+  layer.open({
+    title: '标题',
+    content: h(ChildrenOne, { data }),
+    shade: false,
+  })
+}
+</script>
+
+:::
+
+::: demo 👉 查看 [Children2.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children2.vue), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。 
+
+<template>
+  <button @click="openComponent2">事件</button>
+  <input type="text" v-model="numb" />
+</template>
+
+<script setup>
+import { reactive, h, resolveComponent, ref } from 'vue'
+import { layer } from  "../../../../layer/src/index"
+
+const prop = reactive({})
+const numb = ref(1000)  
+const ChildrenTwo = resolveComponent('Children2')
+
+const openComponent2 = () => {
+  layer.open({
+    title: '标题',
+    content: h(ChildrenTwo, { 
+      prop, 
+      onAdd(res){
+        numb.value = numb.value + 1;
+      }, onSub(res) {
+        numb.value = numb.value - 1;
+      }
+      }),
+  })
+}
+</script>
+
+:::
diff --git a/package/document-layer/src/document/zh-CN/help.md b/package/document-layer/src/document/zh-CN/help.md
new file mode 100644
index 00000000..e69de29b
diff --git a/package/document-layer/src/document/zh-CN/index.md b/package/document-layer/src/document/zh-CN/index.md
index 34612f2c..60f2eb79 100644
--- a/package/document-layer/src/document/zh-CN/index.md
+++ b/package/document-layer/src/document/zh-CN/index.md
@@ -69,445 +69,6 @@ const changeVisible = () => {
 }
 </script>
 ```
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>消息</legend>
-</fieldset>
-
-::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数`msg`为消息内容, 第二参数`options`为可选配置, 常用于配置`time`超时时间等。
-
-<template>
-    <button @click="msg">普通消息</button>
-    <button @click="success">成功消息</button>
-    <button @click="failure">失败消息</button>
-    <button @click="warm">警告消息</button>
-    <button @click="info">锁定消息</button>
-</template>
-
-<script>
-import { layer } from  "../../../../layer/src/index"
-
-const msg = function() {
-    layer.msg("普通消息", { time: 1000 })
-}
-
-const success = function() {
-    layer.msg("成功消息", { time: 1000, icon: 1})
-}
-
-const failure = function() {
-    layer.msg("失败消息", { time: 1000, icon: 2})
-}
-
-const warm = function() {
-    layer.msg("警告消息", { time: 1000, icon: 3})
-}
-
-const info = function() {
-    layer.msg("疑问消息", { time: 1000, icon: 4})
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>加载</legend>
-</fieldset>
-
-::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数`type`为加载动画样式, 第二个参数`options`为可选配置, 常用于设置`time`加载时长`shade`遮盖层等。
-
-<template>
-    <button @click="load1">加载1</button>
-    <button @click="load2">加载2</button>
-    <button @click="load3">加载3</button>
-    <button @click="load4">加载4</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const load1 = function() {
-    layer.load(0, {time: 2000})
-}
-
-const load2 = function() {
-    layer.load(1, {time: 2000})
-}
-
-const load3 = function() {
-    layer.load(2, {time: 2000})
-}
-
-const load4 = function() {
-    layer.msg("加载中...",{icon: 16, time: 2000})
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>模态</legend>
-</fieldset>
-
-::: demo 通过 layer.open(option) 创建模态窗, 目前支持`iframe` `page`等类型, 你可以使用`options`选项开启`Resize` `Offset`等更多特性。
-
-<template>
-    <button @click="open">小试牛刀</button>
-    <button @click="openSize">指定尺寸</button>
-    <button @click="openOffset">指定位置</button>
-    <button @click="openIframe">远程窗体</button>
-    <button @click="openHtml">HTML</button>
-    <button @click="openVNode">vNode</button>
-    <button @click="openMaxmin">缩小放大</button>
-    <button @click="openResize">尺寸拉伸</button>
-    <button @click="openIndex">设置层级</button>
-    <button @click="openAreaAuto">内容自撑开</button>
-    <button @click="openBtns">自定义按钮组</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const open = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        content: "内容"
-    })    
-}
-
-const openSize = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        area: ['400px','400px'],
-        content: "内容"
-    })     
-}
-
-const openOffset = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        offset: ['100px','100px'],
-        content: "内容"
-    })
-}
-
-const openIframe = function() {
-    layer.open({
-        type: 2,
-        title: "标题",
-        resize: true,
-        area: ['500px','500px'],
-        content: "http://layui-vue.pearadmin.com"
-    })
-}
-
-const openHtml = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        isHtmlFragment: true,
-        content: "<p style='color:red;'>内容</p>"
-    })
-}
-
-const openVNode = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        content: h('button', { style: 'margin: 10px;' },'按钮')
-    })
-}
-
-const openMaxmin = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        maxmin: true,
-        content: "内容"
-    })
-}
-
-const openResize = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        resize: true,
-        content: "内容"
-    })    
-}
-
-const openIndex = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        zIndex: 666,
-        content: "设置层级"
-    })
-}
-
-const openAreaAuto = function(){
-    layer.open({
-        type:1,
-        title:"area:auto",
-        isHtmlFragment:true,
-        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
-    })
-}
-
-const openBtns = function(){
-    layer.open({
-        type:1,
-        title:"自定义按钮",
-        btn:[{text:"第一个按钮",callback:function(){
-            console.log("第一个按钮被点击");
-        }},{text:"第二个按钮",callback:function(){
-            console.log("第二个按钮被点击");
-        }}]
-    })
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>询问</legend>
-</fieldset>
-
-::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数`msg`为文本消息, 第二个参数`options`为选项配置, 你可以使用`options`的`btn`属性定义操作。
-
-<template>
-    <button @click="openConfirm1">确认框</button>
-    <button @click="openConfirm2">询问框</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const openConfirm1 = function() {
-    layer.confirm("layui-vue 1.0.0 已经发布")
-}
-
-const openConfirm2 = function() {
-    layer.confirm("你如何看待 layui-vue 的发布", {btn: [{text:'站着看', callback: function(){
-        layer.msg("有点意思");
-    }},{text:'坐着看', callback: function(){
-        layer.msg("无聊");
-    }}]})
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>抽屉</legend>
-</fieldset>
-
-::: demo 通过 layer.drawer(options) 创建抽屉层, `options`选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用`offset`选项来设置方向。
-<template>
-    <button @click="openTop">上</button>
-    <button @click="openBottom">下</button>
-    <button @click="openLeft">左</button>
-    <button @click="openRight">右</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const openTop = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "t"
-    })
-}
-
-const openBottom = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "b"
-    })
-}
-
-const openLeft = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "l"
-    })
-}
-
-const openRight = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "r"
-    })
-}
-</script>
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>图片层</legend>
-</fieldset>
-
-::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
-
-<template>
-    <button @click="signleImg">快速预览一张图片</button>
-    <button @click="signleImg2">单张图片带文字描述</button>
-    <button @click="groupImg">图片组</button>
-</template>
-
-<script>
-import { layer } from  "../../../../layer/src/index"
-
-const signleImg = function() {
-    layer.photos("/src/assets/logo.jpg")
-}
-const signleImg2 = function() {
-    layer.photos({
-      imgList:[ {src:'/src/assets/logo.jpg',alt:'layer for vue'}]
-    })
-}
-const groupImg = function() {
-  layer.photos({
-    imgList:[
-      { src:'http://www.pearadmin.com/assets/images/un8.svg', alt:'图片1'},
-      { src:'http://www.pearadmin.com/assets/images/un32.svg', alt:'图片2'}
-    ]
-  })
-}
-</script>
-
-:::
-
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>通讯</legend>
-</fieldset>
-
-::: demo 👉 查看 [Children1.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children1.vue), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
-
-<template>
-  <button @click="openComponent1">数据</button>
-  <input type="text" v-model="data.remark" />
-</template>
-
-<script setup>
-import { reactive, h, resolveComponent } from 'vue'
-import { layer } from  "../../../../layer/src/index"
-
-const data = reactive({
-    remark: "信息"
-})
-const ChildrenOne = resolveComponent('Children1')
-const openComponent1 = () => {
-  layer.open({
-    title: '标题',
-    content: h(ChildrenOne, { data }),
-    shade: false,
-  })
-}
-</script>
-
-:::
-
-::: demo 👉 查看 [Children2.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children2.vue), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。 
-
-<template>
-  <button @click="openComponent2">事件</button>
-  <input type="text" v-model="numb" />
-</template>
-
-<script setup>
-import { reactive, h, resolveComponent } from 'vue'
-import { layer } from  "../../../../layer/src/index"
-
-const prop = reactive({})
-const numb = ref(1000)  
-const ChildrenTwo = resolveComponent('Children2')
-
-const openComponent2 = () => {
-  layer.open({
-    title: '标题',
-    content: h(ChildrenTwo, { 
-      prop, 
-      onAdd(res){
-        numb.value = numb.value + 1;
-      }, onSub(res) {
-        numb.value = numb.value - 1;
-      }
-      }),
-  })
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>销毁</legend>
-</fieldset>
-
-::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
-
-<template>
-    <button @click="open">打开</button>
-    <button @click="close">销毁</button>
-    <button @click="closeAll">销毁全部</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index";
-
-let id = null;
-
-const open = function() {
-    id = layer.open({
-        title: "标题",
-        content: "内容",
-        shade: false
-    })
-}
-
-const close = function() {
-    layer.close(id);
-}
-
-const closeAll = function() {
-    layer.closeAll();
-}
-</script>
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>组件</legend>
-</fieldset>
-
-::: demo 我们提供了一些核心函数来创建弹出层, 但在一些复杂的应用场景中, `lay-layer`是一个更好的选择。
-
-<template>
-  <button @click="changeVisible">{{ visible ? '隐藏':'显示' }}</button>
-  <lay-layer title="标题" v-model="visible" :area="['300px','300px']">
-    content
-  </lay-layer>
-</template>
-
-<script setup>
-import { ref, reactive, h } from 'vue'
-import { layer } from  "../../../../layer/src/index"
-
-const visible = ref(false)
-const changeVisible = () => {
-  visible.value = !visible.value;
-}
-</script>
-
-:::
-
 <fieldset class="layui-elem-field layui-field-title">
     <legend>选项</legend>
 </fieldset>
diff --git a/package/document-layer/entry-client.ts b/package/document-layer/src/entry-client.ts
similarity index 100%
rename from package/document-layer/entry-client.ts
rename to package/document-layer/src/entry-client.ts
diff --git a/package/document-layer/entry-server.ts b/package/document-layer/src/entry-server.ts
similarity index 100%
rename from package/document-layer/entry-server.ts
rename to package/document-layer/src/entry-server.ts
diff --git a/package/document-layer/src/layouts/Layout.vue b/package/document-layer/src/layouts/Layout.vue
index 1818d392..4a8567a6 100644
--- a/package/document-layer/src/layouts/Layout.vue
+++ b/package/document-layer/src/layouts/Layout.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="markdown-body light-scheme">
+<lay-scroll height="100%">
+   <div class="markdown-body light-scheme">
     <div class="alone-header">
       <img class="alone-logo" src="../assets/logo.png" />
       <a
@@ -28,20 +29,34 @@
       <div class="layui-main">
         <img src="../assets/logo.jpg" />
         <h1>layer vue</h1>
-        <p>首 选 的 弹 出 层 解 决 方 案 ⭐</p>
+        <p>首 选 的 函 数 式 弹 出 层 解 决 方 案 ⭐</p>
       </div>
     </div>
-    <br />
     <div class="layui-container" style="width: 80%; margin-left: 10%">
+      <lay-tab type="brief" v-model="active">
+        <lay-tab-item title="入门" id="/zh-CN/index"></lay-tab-item>
+        <lay-tab-item title="示例" id="/zh-CN/demo"></lay-tab-item>
+        <lay-tab-item title="帮助" id="/zh-CN/help"></lay-tab-item>
+      </lay-tab>
       <router-view></router-view>
     </div>
   </div>
+</lay-scroll>
 </template>
 
 <script setup>
 import config from "../../../layer/package.json";
+import { useRouter } from "vue-router";
+import { ref, watch } from "vue";
 
 const version = config.version;
+
+const active = ref("/zh-CN/index");
+const router = useRouter();
+
+watch(active, (val) => {
+  router.push(val);
+})
 </script>
 
 <style>
@@ -116,4 +131,8 @@ body {
   border-top: 1px solid #eee;
   border-style: solid;
 }
+
+.layui-tab-content {
+  padding: 0!important;
+}
 </style>
diff --git a/package/document-layer/main.ts b/package/document-layer/src/main.ts
similarity index 56%
rename from package/document-layer/main.ts
rename to package/document-layer/src/main.ts
index 9ffa044e..e4ab404d 100644
--- a/package/document-layer/main.ts
+++ b/package/document-layer/src/main.ts
@@ -1,12 +1,13 @@
 import Layout from "./App.vue";
 import { App, createApp as _createApp } from "vue";
-import { createRouter } from "./src/router/index";
+import { createRouter } from "./router/index";
 import { Router } from "vue-router";
-import LayCode from "./src/components/LayCode.vue";
-import Children1 from "./src/components/Children1.vue";
-import Children2 from "./src/components/Children2.vue";
-import layer from "../layer/src/index";
-import "./src/assets/css/index.css";
+import LayCode from "./components/LayCode.vue";
+import Children1 from "./components/Children1.vue";
+import Children2 from "./components/Children2.vue";
+import layui from "../../component/src/index";
+import layer from "../../layer/src/index";
+import "./assets/css/index.css";
 
 export function createApp(): {
   app: App<Element>;
@@ -16,6 +17,7 @@ export function createApp(): {
   const router = createRouter();
 
   app
+    .use(layui)
     .use(layer)
     .use(router)
     .component("LayCode", LayCode)
@@ -23,4 +25,4 @@ export function createApp(): {
     .component("Children2", Children2);
 
   return { app, router };
-}
+}
\ No newline at end of file
diff --git a/package/document-layer/src/router/zh-CN.ts b/package/document-layer/src/router/zh-CN.ts
index 32a20ff3..8882f63a 100644
--- a/package/document-layer/src/router/zh-CN.ts
+++ b/package/document-layer/src/router/zh-CN.ts
@@ -10,11 +10,20 @@ const zhCN = [
       {
         path: "/zh-CN/index",
         component: () => import("../document/zh-CN/index.md"),
-
-        meta: { title: "指南" },
+        meta: { title: "入门" },
+      },
+      {
+        path: "/zh-CN/demo",
+        component: () => import("../document/zh-CN/demo.md"),
+        meta: { title: "示例" },
+      },
+      {
+        path: "/zh-CN/help",
+        component: () => import("../document/zh-CN/help.md"),
+        meta: { title: "帮助" },
       },
     ],
   },
 ];
 
-export default zhCN;
+export default zhCN;
\ No newline at end of file
diff --git a/package/document-layer/tsconfig.json b/package/document-layer/tsconfig.json
new file mode 100644
index 00000000..f7c932aa
--- /dev/null
+++ b/package/document-layer/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "module": "esnext",
+      "target": "es2015",
+      "moduleResolution": "Node",
+      "strict": true,
+      "allowJs": true,
+      "resolveJsonModule": true,
+      "declaration": true,
+      "emitDeclarationOnly": true,
+      "esModuleInterop": true,
+      "declarationDir": "types",
+      "jsx": "preserve",
+      "lib": ["ESNext","DOM"]
+    },
+    "include": ["src/**/*","shims-vue.d.ts"],
+    "exclude": ["node_modules"]
+}
\ No newline at end of file
diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue
index e7e8cae2..33153753 100644
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -159,25 +159,22 @@ const _l: Ref<string> = ref(offset.value[1]);
  * <p>
  */
 const firstOpenDelayCalculation = function () {
-  nextTick(async () => {
+  nextTick( async () => {
     area.value = getArea(layero.value);
     if (type == 4) {
       area.value = calculateDrawerArea(props.offset, props.area);
     }
     if (type == 5) {
       // @ts-ignore
-      area.value = await calculatePhotosArea(
-        props.imgList[props.startIndex].src,
-        props
-      );
+      area.value = await calculatePhotosArea(props.imgList[props.startIndex].src, props);
     }
     offset.value = calculateOffset(props.offset, area.value, props.type);
     w.value = area.value[0];
     h.value = area.value[1];
-    t.value = offset.value[0];
-    l.value = offset.value[1];
     _w.value = area.value[0];
     _l.value = area.value[1];
+    t.value = offset.value[0];
+    l.value = offset.value[1];
     _t.value = offset.value[0];
     _l.value = offset.value[1];
     supportMove();