合并

2022-04-03 20:22:33 +08:00 · 2022-04-03 20:22:33 +08:00 · 71c9de04f1
commit 71c9de04f1
parent f8fb05de41 4c653112a2
46 changed files with 1077 additions and 518 deletions
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@ -16,51 +16,51 @@
  <div class="anim">
    <ul class="layui-border-box site-doc-icon site-doc-anim">
      <li style="height:auto">
-        <div class="layui-anim layui-anim-down">顶部往下滑入</div>
+        <div class="layui-anim layui-anim-down" @click="replay">顶部往下滑入</div>
        <div class="code">layui-anim-down</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-downbit">微微往下滑入</div>
+        <div class="layui-anim layui-anim-downbit" @click="replay">微微往下滑入</div>
        <div class="code">layui-anim-downbit</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-up">底部往上滑入</div>
+        <div class="layui-anim layui-anim-up" @click="replay">底部往上滑入</div>
        <div class="code">layui-anim-up</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-upbit">微微往上滑入</div>
+        <div class="layui-anim layui-anim-upbit" @click="replay">微微往上滑入</div>
        <div class="code">layui-anim-upbit</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-scale">平滑放大</div>
+        <div class="layui-anim layui-anim-scale" @click="replay">平滑放大</div>
        <div class="code">layui-anim-scale</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-scaleSpring">弹簧式放大</div>
+        <div class="layui-anim layui-anim-scaleSpring" @click="replay">弹簧式放大</div>
        <div class="code">layui-anim-scaleSpring</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-scalesmall">平滑放小</div>
+        <div class="layui-anim layui-anim-scalesmall" @click="replay">平滑放小</div>
        <div class="code">layui-anim-scalesmall</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-scalesmall-spring">弹簧式放小</div>
+        <div class="layui-anim layui-anim-scalesmall-spring" @click="replay">弹簧式放小</div>
        <div class="code">layui-anim-scalesmall-spring</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-fadein">渐现</div>
+        <div class="layui-anim layui-anim-fadein" @click="replay">渐现</div>
        <div class="code">layui-anim-fadein</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-fadeout">渐隐</div>
+        <div class="layui-anim layui-anim-fadeout" @click="replay">渐隐</div>
        <div class="code">layui-anim-fadeout</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-rotate">360度旋转</div>
+        <div class="layui-anim layui-anim-rotate" @click="replay">360度旋转</div>
        <div class="code">layui-anim-rotate</div>
      </li>
      <li style="height:auto">
-        <div class="layui-anim layui-anim-rotate layui-anim-loop">循环动画</div>
+        <div class="layui-anim layui-anim-rotate layui-anim-loop" @click="replay">循环动画</div>
        <div class="code">追加：layui-anim-loop</div>
      </li>
    </ul>
@ -72,7 +72,16 @@ import { ref } from 'vue'

 export default {
  setup() {
+    const replay = (e) => {
+      const el = e.currentTarget;
+      const targetClass = el.classList[1];
+      el.classList.remove(targetClass);
+      setTimeout(() => {
+        el.classList.add(targetClass);
+      },100) 
+    }
    return {
+      replay
    }
  }
 }
@ -102,7 +111,5 @@ export default {

 :::

- 
-
 ::: previousNext animation
 :::
--- a/example/docs/zh-CN/components/avatar.md
+++ b/example/docs/zh-CN/components/avatar.md
@ -135,7 +135,5 @@ export default {

 :::

- 
-
 ::: previousNext avatar
 :::
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@ -37,7 +37,7 @@ export default {
 ::: title 简约按钮
 :::

-::: demo 使用 `border` 属性设置边框主题
+::: demo 使用 `border` 属性设置边框颜色

 <template>
  <lay-button>原始按钮</lay-button>
--- a/example/docs/zh-CN/components/card.md
+++ b/example/docs/zh-CN/components/card.md
@ -217,7 +217,7 @@ export default {
 | default | 默认插槽 | --     |
 | header  | 头部插槽 | --     |
 | body    | 内容插槽 | --     |
-
+| extra   | 扩展插槽 | --     |
 :::

 
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@ -116,7 +116,69 @@ export default {

 :::

- 
+::: title 时间选择
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker type="time" v-model="endTime5"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime5 = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime5
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 年月选择
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker type="yearmonth" v-model="endTime6"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime6 = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime6
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Date Picker 属性
+:::
+
+::: table
+
+| 属性          | 描述                                                         | 类型           | 默认值 | 可选值         |
+| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
+| v-model      | 当前时间                                                     | `string`         | --    | —             |
+| type        | 选择类型                                                   | `string`         | `date`    | `date` `datetime` `year` `month` `time` `yearmonth`             |
+
+:::

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/empty.md
+++ b/example/docs/zh-CN/components/empty.md
@ -53,6 +53,33 @@ export default {

 :::

+::: title 扩展插槽
+:::
+
+::: demo
+
+<template>
+  <lay-empty description="刷新试试">
+    <template #extra>
+      <lay-button>刷新页面</lay-button>
+    </template> 
+  </lay-empty>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Empty 属性
 :::

@ -64,7 +91,16 @@ export default {

 :::

- 
+::: title Empty 插槽
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| extra | 扩展插槽 | --     |
+
+:::

 ::: previousNext empty
 :::
--- a/example/docs/zh-CN/components/exception.md
+++ b/example/docs/zh-CN/components/exception.md
@ -14,7 +14,7 @@

 <template>
  <lay-exception status="401" title="401" describe="暂无相关权限">
-      <template #action>
+      <template #extra>
        <lay-button>刷新</lay-button>
        <lay-button type="primary">返回</lay-button>
    </template>
@ -42,7 +42,7 @@ export default {

 <template>
  <lay-exception status="403" title="403" describe="暂无相关权限">
-      <template #action>
+      <template #extra>
        <lay-button>刷新</lay-button>
        <lay-button type="primary">返回</lay-button>
    </template>
@ -70,7 +70,7 @@ export default {

 <template>
  <lay-exception status="404" title="404" describe="跳转页面失败">
-    <template #action>
+    <template #extra>
        <lay-button>刷新</lay-button>
        <lay-button type="primary">返回</lay-button>
    </template>
@ -99,7 +99,7 @@ export default {

 <template>
  <lay-exception status="500" title="500" describe="服务发生错误">
-      <template #action>
+      <template #extra>
        <lay-button>刷新</lay-button>
        <lay-button type="primary">返回</lay-button>
    </template>
@ -140,7 +140,7 @@ export default {

 | 属性        | 描述     | 可选值 |
 | ----------- | -------- | ------ |
-| action | 操作 | --     |
+| extra | 操作 | --     |

 :::

--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@ -116,7 +116,7 @@ npm install @layui/icons-vue

 <template>
  <ul class="site-doc-icon">
-    <li v-for="(layIcon, index) of LayIconList" @click="copyIconClass(layIcon.class)">
+    <li v-for="(layIcon, index) of LayIconList" @click="copy(layIcon.class)">
        <i :class="[`layui-icon ${layIcon.class}`]"></i>
        <div class="doc-icon-name">{{ layIcon.name }}</div>
        <div class="doc-icon-code">&amp;#x{{ iconsUnicode[index] }};</div>
@ -133,7 +133,7 @@ npm install @layui/icons-vue

  const iconsUnicode = reactive([]);

-  function copyIconClass(iconClass) {
+  function copy(iconClass) {
    const { isSupported, copy, copied } = useClipboard()
    const permissionWrite = usePermission('clipboard-write')
    if (isSupported && permissionWrite.value === 'granted') {
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@ -311,12 +311,12 @@ export default {
 | zIndex          | 自定义层级    | --                         |
 | type            | 类型          | `1: component` `2: iframe` |
 | closeBtn        | 显示关闭      | true                       |
-| btn             | 按钮          |                            |
+| btn             | 按钮 格式:{text:"",callback:function(){}} | --    |
 | btnAlign        | 按钮布局      | `l` `r` `c`                |
 | anim            | 入场动画      | `0` `-` `6`                |
 | isOutAnim       | 关闭动画      | `true` `false`             |
 | success            | 显示回调   | --                |
-| end       | 关闭回调      | --             |
+| close       | 关闭回调      | --             |

 :::

--- a/example/docs/zh-CN/components/result.md
+++ b/example/docs/zh-CN/components/result.md
@ -53,6 +53,34 @@ export default {

 :::

+::: title 完整
+:::
+
+::: demo 使用 `lay-result` 标签, 创建一个结果页面
+
+<template>
+  <lay-result status="failure">
+    <template #extra>
+      <lay-button type="primary">再来一次</lay-button>
+      <lay-button >返回首页</lay-button>
+    </template>
+  </lay-result>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Result 属性
 :::

@ -74,7 +102,7 @@ export default {
 | 属性        | 描述     | 可选值 |
 | ----------- | -------- | ------ |
 | content | 内容 | --     |
-| action | 操作 | --     |
+| extra | 扩展 | --     |

 :::

--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@ -146,6 +146,32 @@ export default {

 :::

+::: title 自定义值
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active6" onswitch-value="dark"  unswitch-value="light"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active6 = ref('dark')
+
+    return {
+        active6
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Switch 属性
 :::

@ -156,8 +182,10 @@ export default {
 | name          | 原生 name 属性 | --             |
 | v-model       | 是否启用       | `true` `false` |
 | disabled      | 禁用           | `true` `false` |
-| active-text   | 启用描述       | `启动`         |
-| inactive-text | 禁用描述       | `禁用`         |
+| onswitch-text | 启用描述       | `启动`        |
+| unswitch-text | 禁用描述       | `禁用`         |
+| onswitch-value | 启用值       | `true`        |
+| unswitch-value | 禁用值       | `false`         |

 :::

@ -173,6 +201,16 @@ export default {
 :::

 
+::: title Switch 插槽
+:::
+
+::: table
+
+| 属性   | 描述     | 参数           |
+| ------ | -------- | ---------------- |
+| onswitch-icon | 启用图标 | -- |
+| unswitch-icon | 禁用图标 | -- |
+:::

 ::: previousNext switch
 :::
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@ -111,6 +111,44 @@ export default {
  }
 }
 </script>
+:::
+
+::: title 水平方向
+:::
+
+::: demo
+
+<template>
+    <lay-timeline direction="horizontal">
+        <lay-timeline-item title="2015年" >2015年，layui 孵化</lay-timeline-item>
+        <lay-timeline-item title="2016年" >2016年，layui 首个版本发布</lay-timeline-item>
+        <lay-timeline-item title="2017年" >layui里程碑版本1.0发布</lay-timeline-item>
+        <lay-timeline-item title="2021年" >layui里程碑版本2.0发布</lay-timeline-item>
+    </lay-timeline>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Timeline 属性
+:::
+
+::: table
+
+| 属性        | 描述   | 可选值 |
+|-----------|------|-----|
+| direction | 排列方向 | `horizontal` `vertical`  |

 :::

@ -119,10 +157,10 @@ export default {

 ::: table

-|        |          |     |
-| ------ | -------- | --- |
+| 属性     | 描述   | 可选值 |
+|--------|------|-----|
 | simple | 简单模式 | --  |
-| title  | 标题     | --  |
+| title  | 标题   | --  |

 :::

@ -131,9 +169,9 @@ export default {

 ::: table

-|        |          |     |
-| ------ | -------- | --- |
-| dot | 节点 | --  |
+| 插槽名 | 描述  |     |
+|-----|-----| --- |
+| dot | 节点  | --  |

 :::

--- a/example/docs/zh-CN/components/tree.md
+++ b/example/docs/zh-CN/components/tree.md
@ -238,6 +238,7 @@ function handleClick(node) {
 | onlyIconControl                  | 是否仅允许节点左侧图标控制展开收缩       | false           |
 | showLine                         | 是否开启连接线                           | true            |
 | checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点         | []              |
+| collapse-transition              | 是否开启展示收起动画                     | false           |

 :::

@ -253,7 +254,6 @@ function handleClick(node) {
 | children            | 子节点         | []              |
 | disabled            | 该节点是否禁用     | false           |
 | spread              | 该节点是否展开     | false           |
-| collapse-transition | 是否开启展示收起动画  | false           |

 :::

--- a/example/docs/zh-CN/components/upload.md
+++ b/example/docs/zh-CN/components/upload.md
@ -106,13 +106,13 @@ export default {

 :::

-::: title 自定义预览
+::: title 自定义预览/上传禁用
 :::

-::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
+::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互,使用  `disabled` 添加上传禁用

 <template>
-  <lay-upload @done="getUploadFile2">
+  <lay-upload @done="getUploadFile2" :disabled="true">
    <template #preview>
      <div class="easy-wrap">
        <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
@ -141,6 +141,47 @@ export default {

 :::

+::: title 提供默认剪裁功能
+
+::: demo 使用 `lay-upload` 标签, 添加 `cut` 开启 选择文件后剪裁功能
+
+<template>
+  <lay-upload @cutdone="getCutDone" @cutcancel="getCutCancel" :cut="true" :multiple="false" @done="getFileDone">
+    <template #preview>
+      <div class="easy-wrap" v-if="cutUrl">
+        <img :src="cutUrl"/>
+      </div>
+    </template>
+  </lay-upload>
+</template>
+
+<script>
+import { ref } from 'vue'
+export default {
+  setup() {
+    const cutUrl = ref("");
+    const getCutDone=(res)=>{
+      console.log("getCutDone",res);
+      cutUrl.value = res.msg;
+    };
+    const getCutCancel=(res)=>{
+      console.log("getCutCancel",res);
+    };
+    const getFileDone=(res)=>{
+      console.log("getFileDone",res);
+    };
+    return {
+      getCutDone,
+      getCutCancel,
+      getFileDone,
+      cutUrl
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Upload 属性
 :::

@ -157,6 +198,9 @@ export default {
 | multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean  | false  | -- |
 | number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number  | `0(不限制)`  | -- |
 | drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean  | true  | -- |
+| disabled | 设置文件禁用 | boolean  | false  | -- |
+| cut | 是否开启选择图片后检测,设置true可开启 | boolean  | false  | -- |
+| cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object  | { layerOption,copperOption }  | -- |

 :::

@ -182,7 +226,8 @@ export default {
 | before | 上传事务开启前的回调 | --   |
 | done | 上传事务结束的回调 | --   |
 | error | 上传事务中出现错误的回调 | --   |
-
+| cutdown | 剪裁完成 | --   |
+| cutclose | 剪裁取消 | --   |
 :::


--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@ -10,22 +10,47 @@
 ::: demo
 <template>
 <lay-timeline>
-  <lay-timeline-item title="0.4.0">
-    <ul> 
-      <a name="0-4-5"> </a> 
+  <lay-timeline-item title="1.0.x">
+  <ul> 
+      <a name="1-0-1"> </a> 
      <li> 
-        <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
+        <h3>1.0.1 <span class="layui-badge-rim">2022-04-03</span></h3> 
        <ul>
-          <li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
-          <li>[修复] transfer 组件 showSearch 属性类型警告。</li>
+          <li>[新增] upload 组件 cut cutOptions 属性, 支持上传裁剪。</li>
+          <li>[新增] timeline 组件 direction 属性, 支持垂直与水平布局。</li>
+          <li>[新增] config-proivder 组件 global-dark-background-color 夜间模式背景颜色变量。</li>
+          <li>[新增] config-proivder 组件 global-dark-text-color 夜间模式文字颜色变量。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-0-0"> </a> 
+      <li> 
+        <h3>1.0.0 <span class="layui-badge-rim">2022-04-02</span></h3> 
+        <ul>
+          <li>[重要] 修订 version 为 1.0.0。</li>
+          <li>[新增] empty 组件 extra 插槽, 支持扩展内容。</li>
+          <li>[新增] result 组件 extra 插槽, 支持扩展内容。</li>
+          <li>[新增] exception 组件 extra 插槽, 支持扩展内容。</li>
+          <li>[新增] switch 组件 onswitch-value 属性, 默认为 true。</li>
+          <li>[新增] switch 组件 unswitch-value 属性, 默认为 false。</li>
+          <li>[新增] date-picker 组件 time 属性, 支持 时 分 秒 选择。</li>
+          <li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
+          <li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
+          <li>[修复] date-picker 组件 type 属性为 time 时, v-model 默认不生效。</li>
+          <li>[修复] date-picker 组件 12 小时制为 24 小时制。</li>
+          <li>[修复] transfer 组件 showSearch 属性类型警告。</li>              
          <li>[修复] upload 组件 number 属性必填警告。</li>
          <li>[修复] variable 全局变量重复导入的问题。</li>
          <li>[修复] menu 组件 openKeys 属性失效。</li>
+          <li>[支持] animation 点击演示。</li>
          <li>[支持] icon 列表复制。</li>
          <li>[支持] 夜间模式。</li>
        </ul> 
      </li>
    </ul>
+  </lay-timeline-item>
+  <lay-timeline-item title="0.4.x">
    <ul> 
      <a name="0-4-4"> </a> 
      <li> 
--- a/example/docs/zh-CN/guide/dark.md
+++ b/example/docs/zh-CN/guide/dark.md
@ -1,10 +1,13 @@
 ::: title 夜间模式
 :::

-::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。
+::: describe 默认情况下, 网站主题为日间模式。
 :::

-```
+::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
+:::
+
+```vue
 <template>
    <lay-config-provider :theme="theme">
        <App />
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@ -10,6 +10,7 @@
        <lay-icon :type="iconType" size="40"> </lay-icon>
      </lay-button>
    </div>
+    <lay-scroll :scrollWidth="0">
      <ul>
        <li
          v-for="(anchor, index) in anchorList"
@ -26,6 +27,7 @@
          >
        </li>
      </ul>
+    </lay-scroll>
  </aside>
 </template>
 <script setup lang="ts">
--- a/example/src/components/LaySearch.vue
+++ b/example/src/components/LaySearch.vue
@ -34,6 +34,18 @@ onMounted(() => {
  --docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
  --docsearch-container-background: rgba(0, 0, 0, 0.1);
+  --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);
+}
+.DocSearch-Button{
+  width: 150px;
+  border-radius: 50px;
+}
+.DocSearch-Button-Container {
+  padding-left: 2px;
+}
+
+.DocSearch-Button-Placeholder {
+  padding-left: 8px;
 }

 .DocSearch-Button,
@ -55,4 +67,8 @@ onMounted(() => {
 .DocSearch-Button-Placeholder {
  color: rgba(0, 0, 0, 0.6);
 }
+
+.DocSearch-Button-Keys {
+  display: none;
+}
 </style>
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@ -14,18 +14,18 @@
          class="layui-nav layui-layout-left"
          style="margin-top: 0px; margin-bottom: 0px"
        >
-          <li class="layui-nav-item">
+          <li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/index') }">
            <router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
          </li>
-          <li class="layui-nav-item">
+          <li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/guide') }">
            <router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
          </li>
-          <li class="layui-nav-item">
+          <li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/components') }">
            <router-link to="/zh-CN/components">
              {{ t("nav.components") }}
            </router-link>
          </li>
-          <li class="layui-nav-item">
+          <li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/resources') }">
            <router-link to="/zh-CN/resources">
              {{ t("nav.resources") }}
            </router-link>
@ -109,7 +109,15 @@
                  <lay-color-picker
                    v-model="themeVariable['--global-neutral-color-8']"
                  ></lay-color-picker>
-                  <lay-button fluid>导 出 配 置</lay-button>
+                  <lay-color-picker
+                    v-model="themeVariable['--global-dark-text-color']"
+                  ></lay-color-picker
+                  >&nbsp;
+                  <lay-color-picker
+                    v-model="themeVariable['--global-dark-background-color']"
+                  ></lay-color-picker>
+
+                  <lay-button fluid="true">导 出 配 置</lay-button>
                </div>
              </template>
            </lay-dropdown>
@ -140,8 +148,10 @@
          <li class="layui-nav-item">
            <a href="javascript:void(0)">
              <lay-switch
-                v-model="isDark"
+                v-model="theme"
                class="switch"
+                onswitch-value="dark"
+                unswitch-value="light"
                onswitch-color="rgba(255, 255, 255, 0.05)"
                unswitch-color="rgba(255, 255, 255, 0.05)"
              >
@ -216,7 +226,6 @@ import menu from "../view/utils/menus";
 import { useI18n } from "vue-i18n";
 import zh_CN from "../locales/zh_CN.ts";
 import en_US from "../locales/en_US.ts";
-import { getLayuiVueVersion }  from "../../../src/utils/getLayuiVueVersion.ts"

 export default {
  setup() {
@ -224,13 +233,14 @@ export default {
    const route = useRoute();
    const router = useRouter();
    const locale = ref("zh_CN");
-    const currentPath = ref("/zh-CN/guide");
-    const isDark = ref(false);
    const locales = [
      { name: "zh_CN", locale: zh_CN, merge: true },
      { name: "en_US", locale: en_US, merge: true },
    ];
-    const theme = ref("light");
+    let isDark = (localStorage.getItem('layui-vue-theme-dark') !== "false") ||
+                 window.matchMedia('prefers-color-scheme: dark').matches;
+    
+    const theme = ref(isDark ? "dark":"light");
    const themeVariable = ref({
      "--global-primary-color": "#009688",
      "--global-normal-color": "#1e9fff",
@ -246,30 +256,32 @@ export default {
      "--global-neutral-color-6": "#d2d2d2",
      "--global-neutral-color-7": "#cccccc",
      "--global-neutral-color-8": "#c2c2c2",
+      "--global-dark-text-color": "#FFFFFFc9",
+      "--global-dark-background-color": "#22272E",
    });

    const menus = [];
-
+    const currentPath = ref("/zh-CN/guide");
+    watch(
+      () => route.path,
+      (val) => {
+        currentPath.value = val;
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
    menu.forEach((m) => {
      m.children.forEach((c) => {
        menus.push(c);
      });
    });

-    const latestVer = getLayuiVueVersion();
    const layuiVueVersion = computed(() => 
-      latestVer.value 
-      ?? import.meta.env.LAYUI_VUE_VERSION
+       import.meta.env.LAYUI_VUE_VERSION
    )

-    watch(isDark, () => {
-      if (isDark.value) {
-        theme.value = "dark";
-      } else {
-        theme.value = "light";
-      }
-    });
-
    watch(
      () => route.path,
      (val) => {
@ -286,7 +298,9 @@ export default {
      locale.value = lang;
    };

-    provide("isDark",isDark);
+    window.matchMedia('(prefers-color-scheme: dark)')
+      .addListener(e => theme.value = e.matches ? "dark" : "light");
+
    provide("theme",theme);
    provide('LayuiVueVersion', layuiVueVersion);

@ -295,12 +309,12 @@ export default {
      menus,
      theme,
      locale,
-      isDark,
      locales,
      currentPath,
      handleClick,
      changeLocale,
      themeVariable,
+      currentPath,
      layuiVueVersion,
    };
  },
@ -308,6 +322,7 @@ export default {
 </script>

 <style>
+
 .layui-layout-document > .layui-header {
  z-index: 99;
  width: 100%;
@ -358,6 +373,10 @@ export default {
  background-color: transparent;
 }

+.layui-header > .layui-nav .layui-active * {
+  color: var(--global-checked-color)!important;
+}
+
 .layui-header .layui-local-badge {
  font-size: 12.4px;
  background: transparent;
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@ -16,17 +16,19 @@
          <router-link class="layui-inline site-down" to="/zh-CN/guide">
            Get Started
          </router-link>
-          <a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
-            
-            {{ isDark ? 'Turn Off' : 'Turn On'}}
+          <a
+            class="layui-inline site-down"
+            href="javascript:void(0);"
+            @click="changeTheme"
+          >
+            {{ theme === "dark" ? "Turn Off" : "Turn On" }}
          </a>
        </div>
        <div class="site-version">
-          <span>{{ t('home.version') }}：v<cite class="site-showv">{{ layuiVueVersion }}</cite></span>
          <span
-            >{{ t("home.version") }}：<cite class="site-showv"
-              >1.0.0</cite
-            ></span
+            >{{ t("home.version") }}：<cite class="site-showv">{{
+              layuiVueVersion
+            }}</cite></span
          >
          <span
            >{{ t("home.download") }}：<em class="site-showdowns"
@ -34,32 +36,32 @@
            ></span
          >
        </div>
-      </div>
-      <div class="site-banner-other">
-        <a
-          href="https://gitee.com/layui-vue"
-          target="_blank"
-          rel="nofollow"
-          class="site-star"
-        >
-          <i class="layui-icon"></i> Star <cite id="getStars">741</cite>
-        </a>
-        <a
-          href="https://gitee.com/layui-vue"
-          target="_blank"
-          rel="nofollow"
-          class="site-fork"
-        >
-          Gitee
-        </a>
-        <a
-          href="https://github.com/layui-vue"
-          target="_blank"
-          rel="nofollow"
-          class="site-fork"
-        >
-          Github
-        </a>
+        <div class="site-banner-other">
+          <a
+            href="https://gitee.com/layui-vue"
+            target="_blank"
+            rel="nofollow"
+            class="site-star"
+          >
+            <i class="layui-icon"></i> Star <cite id="getStars">746</cite>
+          </a>
+          <a
+            href="https://gitee.com/layui-vue"
+            target="_blank"
+            rel="nofollow"
+            class="site-fork"
+          >
+            Gitee
+          </a>
+          <a
+            href="https://github.com/layui-vue"
+            target="_blank"
+            rel="nofollow"
+            class="site-fork"
+          >
+            Github
+          </a>
+        </div>
      </div>
    </div>
    <div style="margin-left: 10%; margin-right: 10%; margin-top: 40px">
@ -109,31 +111,28 @@
 </template>

 <script>
-import { inject, provide } from 'vue';
+import { inject, provide } from "vue";
 import { useI18n } from "vue-i18n";
 export default {
  name: "index",
  setup() {
    const { t } = useI18n();
-    const layuiVueVersion = inject('LayuiVueVersion')
-    const isDark = inject("isDark");
+    const layuiVueVersion = inject("LayuiVueVersion");
    const theme = inject("theme");

    const changeTheme = () => {
-      isDark.value = !isDark.value;
-      if(theme.value === 'dark') {
-        theme.value = 'light';
+      if (theme.value === "dark") {
+        theme.value = "light";
      } else {
-        theme.value = 'dark';
+        theme.value = "dark";
      }
-    }
+    };

    return {
      t,
-      isDark,
      theme,
      changeTheme,
-      layuiVueVersion
+      layuiVueVersion,
    };
  },
 };
@ -187,7 +186,9 @@ body {
  font-size: 16px;
  color: #476582;
  font-weight: 500;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  letter-spacing: 0.2px;
@ -199,7 +200,7 @@ body {
  background: #009688;
  color: white;
 }
-.site-download a+a {
+.site-download a + a {
  margin-left: 20px;
 }
 .site-zfj {
@ -273,8 +274,9 @@ body {
  margin-top: -4px;
 }
 .site-banner-other {
-  position: absolute;
+  position: relative;
  left: 0;
+  top: 40px;
  bottom: 90px;
  width: 100%;
  text-align: center;
--- a/example/vite.config.ts
+++ b/example/vite.config.ts
@ -12,5 +12,16 @@ export default defineConfig({
  define: {
    'import.meta.env.LAYUI_VUE_VERSION': JSON.stringify(pkg.version),
  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules")) {
+            return id.toString().split("node_modules/")[1].split("/")[0].toString();
+          }
+        }
+      }
+    }
+  },
  plugins,
 })
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "0.4.5-alpha.5",
+  "version": "1.0.0",
  "author": "就眠儀式",
  "license": "MIT",
  "description": "a component library for Vue 3 base on layui-vue",
@ -43,6 +43,7 @@
    "@layui/layer-vue": "^1.3.11",
    "@vueuse/core": "^7.6.2",
    "async-validator": "^4.0.7",
+    "cropperjs": "^1.5.12",
    "darkreader": "^4.9.46",
    "evtd": "^0.2.3",
    "moment": "^2.29.1",
--- a/script/build.es.ts
+++ b/script/build.es.ts
@ -55,7 +55,7 @@ export default (): UserConfigExport => {
          entryFileNames: ({ name }) => {
            return name === 'index' ? 'index.js' : '[name]/index.js'
          },
-          assetFileNames: '[name]/index.css'
+          assetFileNames: '[name]/index.css',
        },
        external: ['vue', 'vue-router']
      }
--- a/src/component/button/index.vue
+++ b/src/component/button/index.vue
@ -13,7 +13,7 @@ import {
  ButtonSize,
  ButtonType,
 } from "./interface";
-import { BooleanOrString, String } from "../../types";
+import { Boolean, BooleanOrString, String } from "../../types";

 export interface LayButtonProps {
  type?: ButtonType;
--- a/src/component/datePicker/index.vue
+++ b/src/component/datePicker/index.vue
@ -1,211 +1,168 @@
 <template>
  <div>
    <lay-dropdown ref="dropdownRef">
-      <lay-input :name="name" :value="dateValue" readonly="readonly">
-        <template #prefix>
-          <lay-icon type="layui-icon-date"></lay-icon>
-        </template>
-      </lay-input>
-      <template #content>
-        <!-- 日期选择 -->
-        <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
-          <div class="layui-laydate-main laydate-main-list-0">
-            <div class="layui-laydate-header">
-              <i
-                class="layui-icon laydate-icon laydate-prev-y"
-                @click="changeYearOrMonth('year', -1)"
-              ></i>
-              <i
-                class="layui-icon laydate-icon laydate-prev-m"
-                @click="changeYearOrMonth('month', -1)"
-              ></i>
-              <div class="laydate-set-ym">
-                <span @click="showYearPanel">{{ currentYear }} 年</span>
-                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+      <<<<<<< HEAD <lay-input :name="name" :value="dateValue" readonly="readonly"> ======= <lay-input :name="name"
+          :value="dateValue || modelValue" readonly> >>>>>>> 4c653112a2fca8ef40349518d79c58ec7105e032 <template #prefix>
+            <lay-icon type="layui-icon-date"></lay-icon>
+          </template>
+        </lay-input>
+        <template #content>
+          <!-- 日期选择 -->
+          <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
+            <div class="layui-laydate-main laydate-main-list-0">
+              <div class="layui-laydate-header">
+                <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i><i
+                  class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
+                <div class="laydate-set-ym">
+                  <span @click="showYearPanel">{{ currentYear }} 年</span><span
+                    @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+                </div>
+                <i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i><i
+                  class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
              </div>
-              <i
-                class="layui-icon laydate-icon laydate-next-m"
-                @click="changeYearOrMonth('month', 1)"
-              ></i>
-              <i
-                class="layui-icon laydate-icon laydate-next-y"
-                @click="changeYearOrMonth('year', 1)"
-              ></i>
-            </div>
-            <div class="layui-laydate-content">
-              <table>
-                <thead>
-                  <tr>
-                    <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <template
-                    v-for="(o, i) of dateList.length % 7 == 0
-                    ? dateList.length / 7
-                    : Math.floor(dateList.length / 7) + 1"
-                    :key="i"
-                  >
+              <div class="layui-laydate-content">
+                <table>
+                  <thead>
                    <tr>
-                      <td
-                        v-for="(item, index) of dateList.slice(
+                      <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <template v-for="(o, i) of dateList.length % 7 == 0
+                    ? dateList.length / 7
+                    : Math.floor(dateList.length / 7) + 1" :key="i">
+                      <tr>
+                        <td v-for="(item, index) of dateList.slice(
                          i * 7,
                          i * 7 + 7
-                        )"
-                        :key="index"
-                        :data-unix="item.value"
-                        :class="{
-                          'laydate-day-prev': item.type !== 'current',
-                          'layui-this': item.value === currentDay,
-                        }"
-                        @click="handleDayClick(item)"
-                      >{{ item.day }}</td>
-                    </tr>
-                  </template>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div class="layui-laydate-footer">
-            <span
-              v-if="type === 'datetime'"
-              @click="showPane = 'time'"
-              class="laydate-btns-time"
-            >选择时间</span>
-            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 年份选择器 -->
-        <div class="layui-laydate" v-show="showPane === 'year'">
-          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
-            <div class="layui-laydate-header">
-              <div class="laydate-set-ym">
-                <span class="laydate-time-text">选择年份</span>
+                        )" :key="index" :data-unix="item.value" :class="{
+  'laydate-day-prev': item.type !== 'current',
+  'layui-this': item.value === currentDay,
+}" @click="handleDayClick(item)">
+                          {{ item.day }}
+                        </td>
+                      </tr>
+                    </template>
+                  </tbody>
+                </table>
              </div>
            </div>
-            <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
-              <ul class="layui-laydate-list laydate-year-list">
-                <li
-                  v-for="item of yearList"
-                  :key="item"
-                  :class="[{ 'layui-this': currentYear === item }]"
-                  @click="handleYearClick(item)"
-                >{{ item }}</li>
-              </ul>
+            <div class="layui-laydate-footer">
+              <span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
+              <div class="laydate-footer-btns">
+                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+                  @click="ok">确定</span>
+              </div>
            </div>
          </div>
-          <div class="layui-laydate-footer">
-            <!-- <span
+          <!-- 年份选择器 -->
+          <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
+            <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+              <div class="layui-laydate-header">
+                <div class="laydate-set-ym">
+                  <span class="laydate-time-text">选择年份</span>
+                </div>
+              </div>
+              <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
+                <ul class="layui-laydate-list laydate-year-list">
+                  <li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
+                    @click="handleYearClick(item)">
+                    {{ item }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="layui-laydate-footer">
+              <!-- <span
              class="layui-laydate-preview"
              title="当前选中的结果"
              style="color: rgb(102, 102, 102)"
            >2022</span>-->
-            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 月份选择器 -->
-        <div class="layui-laydate" v-show="showPane === 'month'">
-          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
-            <div class="layui-laydate-header">
-              <i
-                class="layui-icon laydate-icon laydate-prev-y"
-                @click="changeYearOrMonth('year', -1)"
-              ></i>
-              <div class="laydate-set-ym">
-                <span
-                  @click="showYearPanel"
-                  v-if="showPane === 'date' || showPane === 'datetime'"
-                >{{ currentYear }} 年</span>
-                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+              <div class="laydate-footer-btns">
+                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+                  @click="ok">确定</span>
              </div>
-              <i
-                class="layui-icon laydate-icon laydate-next-y"
-                @click="changeYearOrMonth('year', 1)"
-              ></i>
-            </div>
-            <div class="layui-laydate-content" style="height: 220px">
-              <ul class="layui-laydate-list laydate-month-list">
-                <li
-                  v-for="item of MONTH_NAME"
-                  :key="item"
-                  :class="[
-                    { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
-                  ]"
-                  @click="handleMonthClick(item)"
-                >{{ item.slice(0, 3) }}</li>
-              </ul>
            </div>
          </div>
-          <div class="layui-laydate-footer">
-            <!-- <span
+          <!-- 月份选择器 -->
+          <div class="layui-laydate" v-show="showPane === 'month'">
+            <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+              <div class="layui-laydate-header">
+                <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
+                <div class="laydate-set-ym">
+                  <span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
+                    年</span>
+                  <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+                </div>
+                <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+              </div>
+              <div class="layui-laydate-content" style="height: 220px">
+                <ul class="layui-laydate-list laydate-month-list">
+                  <li v-for="item of MONTH_NAME" :key="item" :class="[
+                    { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
+                  ]" @click="handleMonthClick(item)">
+                    {{ item.slice(0, 3) }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="layui-laydate-footer">
+              <!-- <span
              class="layui-laydate-preview"
              title="当前选中的结果"
              style="color: rgb(102, 102, 102)"
            >2021-03</span>-->
-            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 时间选择器 -->
-        <div class="layui-laydate" v-if="showPane == 'time'">
-          <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
-            <div class="layui-laydate-header">
-              <div class="laydate-set-ym">
-                <span class="laydate-time-text">选择时间</span>
+              <div class="laydate-footer-btns">
+                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+                  @click="ok">确定</span>
              </div>
            </div>
-            <div class="layui-laydate-content" style="height: 210px">
-              <ul class="layui-laydate-list laydate-time-list">
-                <li class="num-list" v-for="item in els" :key="item.type">
-                  <ol class="scroll" @click="choseTime">
-                    <li
-                      v-for="(it, index) in item.count"
-                      :id="item.type + index.toString()"
-                      :data-value="index.toString().padStart(2, '0')"
-                      :data-type="item.type"
-                      :key="it"
-                      :class="[
-                        'num',
-                        index.toString().padStart(2, '0') == hms[item.type]
-                          ? 'layui-this'
-                          : '',
-                      ]"
-                    >{{ index.toString().padStart(2, "0") }}</li>
-                  </ol>
-                </li>
-              </ul>
+          </div>
+          <!-- 时间选择器 -->
+          <div class="layui-laydate" v-if="showPane == 'time'">
+            <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
+              <div class="layui-laydate-header">
+                <div class="laydate-set-ym">
+                  <span class="laydate-time-text">选择时间</span>
+                </div>
+              </div>
+              <div class="layui-laydate-content" style="height: 210px">
+                <ul class="layui-laydate-list laydate-time-list">
+                  <li class="num-list" v-for="item in els" :key="item.type">
+                    <ol class="scroll" @click="choseTime">
+                      <li v-for="(it, index) in item.count" :id="item.type + index.toString()"
+                        :data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
+                          'num',
+                          index.toString().padStart(2, '0') == hms[item.type]
+                            ? 'layui-this'
+                            : '',
+                        ]">
+                        {{ index.toString().padStart(2, "0") }}
+                      </li>
+                    </ol>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="layui-laydate-footer">
+              <span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
+              <div class="laydate-footer-btns">
+                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+                  @click="ok">确定</span>
+              </div>
            </div>
          </div>
-          <div class="layui-laydate-footer">
-            <span @click="showPane = 'date'" class="laydate-btns-time">返回日期</span>
-            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-            </div>
-          </div>
-        </div>
-      </template>
+        </template>
    </lay-dropdown>
  </div>
 </template>

 <script lang="ts" setup>
-import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
+import { ref, watch, computed, defineProps, defineEmits, onMounted } from "vue";

 import moment from "moment";
 import LayIcon from "../icon/index";
@ -213,6 +170,17 @@ import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import { getDayLength, getYears, getMonth, getYear } from "./day";

+export interface LayDatePickerProps {
+  modelValue?: string;
+  type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
+  name?: string;
+}
+
+const props = withDefaults(defineProps<LayDatePickerProps>(), {
+  modelValue: "",
+  type: "date",
+});
+
 const dropdownRef = ref(null);
 const $emits = defineEmits(["update:modelValue"]);

@ -232,24 +200,17 @@ const MONTH_NAME = [
  "12月",
 ];

-const hms = ref({ hh: 0, mm: 0, ss: 0 });
+const hms = ref({
+  hh: moment(props.modelValue).hour(),
+  mm: moment(props.modelValue).minute(),
+  ss: moment(props.modelValue).second(),
+});
 const els = [
  { count: 24, type: "hh" },
  { count: 60, type: "mm" },
  { count: 60, type: "ss" },
 ];

-export interface LayDatePickerProps {
-  modelValue?: string;
-  type?: "date" | "datetime" | "year" | "time" | "month";
-  name?: string;
-}
-
-const props = withDefaults(defineProps<LayDatePickerProps>(), {
-  modelValue: "",
-  type: "date",
-});
-
 const currentYear = ref(getYear());
 const currentMonth = ref(getMonth());
 const currentDay = ref<number>();
@ -265,14 +226,13 @@ watch(
  },
  { immediate: true }
 );
-// 格式化
-const fmtMap = {
-  date: 'YYYY-MM-DD',
-  datetime: 'YYYY-MM-DD hh:mm:ss',
-  year: 'YYYY',
-  month: 'MM',
-  '': '',
-}
+
+onMounted(() => {
+  hms.value.hh = moment(props.modelValue).hour();
+  hms.value.mm = moment(props.modelValue).minute();
+  hms.value.ss = moment(props.modelValue).second();
+});
+
 // 计算结果日期
 const dateValue = computed<string>(() => {
  if (currentDay.value === -1) {
@ -347,6 +307,9 @@ const ok = () => {
 // 现在时间
 const now = () => {
  currentDay.value = moment().valueOf();
+  hms.value.hh = moment().hour();
+  hms.value.mm = moment().minute();
+  hms.value.ss = moment().second();
 };

 // 清空日期
@ -381,6 +344,9 @@ const handleYearClick = (item: any) => {
  currentYear.value = item;
  if (props.type === "year") {
    currentDay.value = moment().year(item).valueOf();
+  } else if (props.type === "yearmonth") {
+    currentDay.value = moment().year(item).valueOf();
+    showPane.value = "month";
  } else {
    showPane.value = "date";
  }
@ -390,7 +356,13 @@ const handleYearClick = (item: any) => {
 const handleMonthClick = (item: any) => {
  currentMonth.value = MONTH_NAME.indexOf(item);
  if (props.type === "month") {
-    currentDay.value = moment().month(MONTH_NAME.indexOf(item)).valueOf();
+    currentDay.value = moment(currentDay.value)
+      .month(MONTH_NAME.indexOf(item))
+      .valueOf();
+  } else if (props.type === "yearmonth") {
+    currentDay.value = moment(currentDay.value)
+      .month(MONTH_NAME.indexOf(item))
+      .valueOf();
  } else {
    showPane.value = "date";
  }
@ -410,7 +382,6 @@ const choseTime = (e: any) => {
  if (e.target.nodeName == "LI") {
    let { value, type } = e.target.dataset;
    hms.value[type as keyof typeof hms.value] = value;
-    e.target.scrollIntoView({ behavior: "smooth" });
  }
 };
 </script>
--- a/src/component/empty/index.less
+++ b/src/component/empty/index.less
@ -20,3 +20,7 @@
 .layui-empty-description {
  margin: 0;
 }
+
+.layui-empty-extra {
+  margin-top: 30px;
+}
--- a/src/component/empty/index.vue
+++ b/src/component/empty/index.vue
@ -24,5 +24,8 @@ const props = withDefaults(defineProps<LayEmptyProps>(), {
      <img class="layui-empty-image-default" src="./index.svg" />
    </div>
    <div class="layui-empty-description">{{ description }}</div>
+    <div class="layui-empty-extra">
+      <slot name="extra"></slot>
+    </div>
  </div>
 </template>
--- a/src/component/exception/index.vue
+++ b/src/component/exception/index.vue
@ -35,8 +35,8 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
      <div class="layui-exception-details-content">
        <div class="layui-exception-details-title">{{ title }}</div>
        <div class="layui-exception-details-describe">{{ describe }}</div>
-        <div class="layui-exception-details-operate">
-          <slot name="action"></slot>
+        <div class="layui-exception-details-extra">
+          <slot name="extra"></slot>
        </div>
      </div>
    </div>
--- a/src/component/menu/index.vue
+++ b/src/component/menu/index.vue
@ -32,7 +32,6 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
  collapseTransition: true,
 });

-
 const isTree = computed(() => props.tree);
 const isCollapse = computed(() => props.collapse);
 const isCollapseTransition = computed(() => props.collapseTransition);
@ -67,7 +66,8 @@ watch(
      // 赋值所有打开
      emit("update:openKeys", oldOpenKeys.value);
    }
-  }, { immediate: true }
+  },
+  { immediate: true }
 );

 provide("isTree", isTree);
--- a/src/component/result/index.less
+++ b/src/component/result/index.less
@ -26,10 +26,10 @@
  margin-top: 20px;
  width: 80%;
  border-radius: 10px;
-  background-color: whitesmoke;
+  background-color: white;
  margin-left: 10%;
 }
-.result .action {
+.result .extra {
  padding-top: 10px;
  border-top: 1px whitesmoke solid;
  margin-top: 25px;
--- a/src/component/result/index.vue
+++ b/src/component/result/index.vue
@ -71,8 +71,8 @@ const props = withDefaults(defineProps<LayResultProps>(), {
    <div class="content">
      <slot name="content"></slot>
    </div>
-    <div class="action">
-      <slot name="action"></slot>
+    <div class="extra">
+      <slot name="extra"></slot>
    </div>
  </div>
 </template>
--- a/src/component/subMenu/index.vue
+++ b/src/component/subMenu/index.vue
@ -29,7 +29,9 @@ 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 isCollapseTransition: Ref<boolean> = inject("isCollapseTransition") as Ref<boolean>;
+const isCollapseTransition: Ref<boolean> = inject(
+  "isCollapseTransition"
+) as Ref<boolean>;

 const isOpen = computed(() => {
  return openKeys.value.includes(props.id);
--- a/src/component/switch/index.vue
+++ b/src/component/switch/index.vue
@ -10,26 +10,35 @@ import "./index.less";

 export interface LaySwitchProps {
  disabled?: boolean;
-  modelValue?: boolean;
+  modelValue?: string | number | boolean;
  onswitchText?: string;
  unswitchText?: string;
  onswitchColor?: string;
  unswitchColor?: string;
+  onswitchValue?: string | number | boolean;
+  unswitchValue?: string | number | boolean;
 }

 const props = withDefaults(defineProps<LaySwitchProps>(), {
  disabled: false,
+  onswitchValue: true,
+  unswitchValue: false,
 });

 const emit = defineEmits(["update:modelValue", "change"]);

 const isActive = computed({
  get() {
-    return props.modelValue;
+    return props.modelValue === props.onswitchValue;
  },
  set(val) {
-    emit("change", val);
-    emit("update:modelValue", val);
+    if (val) {
+      emit("change", props.onswitchValue);
+      emit("update:modelValue", props.onswitchValue);
+    } else {
+      emit("change", props.unswitchValue);
+      emit("update:modelValue", props.unswitchValue);
+    }
  },
 });

--- a/src/component/tab/index.less
+++ b/src/component/tab/index.less
@ -9,6 +9,22 @@
  overflow: hidden;
 }

+.layui-tab.is-right {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between
+}
+
+.layui-tab.is-bottom {
+  display: flex;
+  flex-direction: column-reverse
+}
+
+.layui-tab-head {
+  display: inline-block;
+  background-color: @global-neutral-color-1;
+}
+
 .layui-tab-title {
  position: relative;
  left: 0;
@ -37,15 +53,17 @@
  cursor: pointer;
 }

-/** 位置开始 */
-.layui-tab.is-right {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between
+.layui-tab-title li a {
+  display: block;
+  padding: 0 15px;
+  margin: 0 -15px;
 }

-.layui-tab-head{
-  display: inline-block;
+.layui-tab-head.is-top,
+.layui-tab-head.is-bottom,
+.layui-tab-title.is-top,
+.layui-tab-title.is-bottom {
+  width: 100%;
 }

 .layui-tab-title.is-right,
@ -63,48 +81,9 @@
   display: list-item;
 }

-.layui-tab-head.is-right + .layui-tab-content,
-.layui-tab-head.is-left + .layui-tab-content {
-  height: 100%;
-  padding: 0 10px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-more li.layui-this:after,
-.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
-  border: none;
-  border-radius: 0;
-  border-right: 2px solid @global-checked-color;
-  margin-left: 1px;
-}
-
-.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-more li.layui-this:after,
-.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
-  border: none;
-  border-radius: 0;
-  border-left: 2px solid @global-checked-color;
-  margin-right: 1px;
-}
-
-.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title{
-  border-left: 1px solid @global-neutral-color-3;
-}
-
-.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title{
-  border-right: 1px solid @global-neutral-color-3;
-}
-
-/** 位置结束*/
-
-.layui-tab-title li a {
-  display: block;
-  padding: 0 15px;
-  margin: 0 -15px;
-}
-
 .layui-tab-title .layui-this {
  color: #000;
+  background-color: #fff
 }

 .layui-tab-title .layui-this:after {
@ -132,6 +111,101 @@
  border-left-color: #FFF;
 }

+.layui-tab-brief>.layui-tab-head{
+  background-color: #FFF;
+}
+
+.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this {
+  color: @global-primary-color;
+}
+
+.layui-tab-brief>.layui-tab-head>.layui-tab-more li.layui-this:after,
+.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this:after {
+  border: none;
+  border-radius: 0;
+  border-bottom: 2px solid @global-checked-color;
+}
+
+.layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title,
+.layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title {
+  border-right: 1px solid @global-neutral-color-3;
+}
+
+.layui-tab-brief[overflow]>.layui-tab-head>.layui-tab-title .layui-this:after {
+  top: -1px;
+}
+
+.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-more li.layui-this:after,
+.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
+  border: none;
+  border-radius: 0;
+  border-right: 2px solid @global-checked-color;
+  margin-left: 1px;
+}
+
+.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-more li.layui-this:after,
+.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
+  border: none;
+  border-radius: 0;
+  border-left: 2px solid @global-checked-color;
+  margin-right: 1px;
+}
+
+.layui-tab-card {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
+
+.layui-tab-card>.layui-tab-head>.layui-tab-title li {
+  margin-right: -1px;
+  margin-left: -1px;
+}
+
+.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left li,
+.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right li {
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+.layui-tab-card>.layui-tab-head>.layui-tab-title.is-top .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-bottom-color: #fff;
+}
+
+.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-top-color: #fff;
+}
+
+.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-right-color: #fff;
+}
+
+.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-left-color: #fff;
+}
+
+.layui-tab-card>.layui-tab-head>.layui-tab-title .layui-tab-bar {
+  height: 40px;
+  line-height: 40px;
+  border-radius: 0;
+  border-top: none;
+  border-right: none;
+}
+
+.layui-tab-card>.layui-tab-more .layui-this {
+  background: 0 0;
+  color: @global-checked-color;
+}
+
+.layui-tab-card>.layui-tab-more .layui-this:after {
+  border: none;
+}
+
 .layui-tab-bar {
  position: absolute;
  right: 0;
@ -182,10 +256,6 @@
  top: -2px\0 / IE9;
 }

-.layui-tab-content {
-  padding: 15px 0;
-}
-
 .layui-tab-title li .layui-tab-close {
  position: relative;
  display: inline-block;
@ -207,87 +277,14 @@
  color: #fff;
 }

-.layui-tab-brief > .layui-tab-head > .layui-tab-title .layui-this {
-  color: @global-primary-color;
+.layui-tab-content {
+  padding: 15px 0;
 }

-.layui-tab-brief > .layui-tab-head > .layui-tab-more li.layui-this:after,
-.layui-tab-brief > .layui-tab-head > .layui-tab-title .layui-this:after {
-  border: none;
-  border-radius: 0;
-  border-bottom: 2px solid @global-checked-color;
-}
-
-.layui-tab-brief[overflow] > .layui-tab-head > .layui-tab-title .layui-this:after {
-  top: -1px;
-}
-
-.layui-tab-card {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 2px;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
-}
-
-.layui-tab-card > .layui-tab-head.is-top,
-.layui-tab-card > .layui-tab-head.is-bottom {
-  width: 100%;
-}
-
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top,
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom {
-  width: 100%;
-}
-
-.layui-tab-card > .layui-tab-head > .layui-tab-title {
-  background-color: @global-neutral-color-1;
-}
-
-.layui-tab-card > .layui-tab-head > .layui-tab-title li {
-  margin-right: -1px;
-  margin-left: -1px;
-}
-
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left li,
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right li{
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this {
-  background-color: #fff;
-}
-
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
-  border-bottom-color: #fff;
-}
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
-  border-top-color: #fff;
-}
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
-  border-right-color: #fff;
-}
-.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
-  border-left-color: #fff;
-}
-
-.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-tab-bar {
-  height: 40px;
-  line-height: 40px;
-  border-radius: 0;
-  border-top: none;
-  border-right: none;
-}
-
-.layui-tab-card > .layui-tab-more .layui-this {
-  background: 0 0;
-  color: @global-checked-color;
-}
-
-.layui-tab-card > .layui-tab-more .layui-this:after {
-  border: none;
+.layui-tab.is-right>.layui-tab-content,
+.layui-tab.is-left>.layui-tab-content {
+  height: 100%;
+  padding: 0 10px;
+  display: inline-block;
+  vertical-align: top;
 }
--- a/src/component/tab/index.vue
+++ b/src/component/tab/index.vue
@ -104,10 +104,6 @@ provide("slotsChange", slotsChange);
    ]"
    v-if="active"
  >
-    <div v-if="tabPosition === 'bottom'" class="layui-tab-content">
-      <slot></slot>
-    </div>
-
    <div
      :class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
    >
@ -133,7 +129,7 @@ provide("slotsChange", slotsChange);
      </ul>
    </div>

-    <div v-if="tabPosition != 'bottom'" class="layui-tab-content">
+    <div class="layui-tab-content">
      <slot></slot>
    </div>
  </div>
--- a/src/component/timeline/index.less
+++ b/src/component/timeline/index.less
@ -59,3 +59,42 @@
 .layui-timeline-item:before {
  background-color: #eee;
 }
+
+.layui-timeline-horizontal .layui-timeline-item {
+  display: inline-block;
+  width: 25%;
+  text-align: center;
+  padding-top: 10px;
+  vertical-align: top;
+}
+
+.layui-timeline-horizontal .layui-timeline-axis {
+  left: 47%;
+  top: -4px;
+}
+
+.layui-timeline-horizontal .layui-timeline-item:before {
+  left: 0px;
+  top: 5px;
+  width: 100%;
+  height: 1px;
+}
+
+.layui-timeline-horizontal .layui-timeline-item:first-child:before {
+  display: block;
+}
+
+.layui-timeline-horizontal .layui-timeline-item:last-child:before {
+  display: block;
+}
+
+.layui-timeline-horizontal .layui-timeline-content {
+  padding: 15px;
+}
+
+.layui-timeline-horizontal .layui-timeline-title {
+  text-align: center;
+  position: relative;
+  margin-bottom: 10px;
+  line-height: 22px;
+}
--- a/src/component/timeline/index.vue
+++ b/src/component/timeline/index.vue
@ -6,10 +6,24 @@ export default {

 <script setup lang="ts">
 import "./index.less";
+import { computed, withDefaults } from "vue";
+
+export interface LayTimelineProps {
+  direction: "horizontal" | "vertical";
+}
+
+const props = withDefaults(defineProps<LayTimelineProps>(), {
+  direction: "vertical",
+});
+
+const timeLineClass = computed(() => [
+  "layui-timeline",
+  props.direction === "horizontal" ? "layui-timeline-horizontal" : "",
+]);
 </script>

 <template>
-  <ul class="layui-timeline">
+  <ul :class="timeLineClass">
    <slot></slot>
  </ul>
 </template>
--- a/src/component/transition/index.vue
+++ b/src/component/transition/index.vue
@ -17,8 +17,8 @@ export default {
 </script>

 <script setup lang="ts">
-import LayCollapseTransition from "./collapseTransition.vue";
-import LayFadeTransition from "./fadeTransition.vue";
+import LayCollapseTransition from "./transitions/collapseTransition.vue";
+import LayFadeTransition from "./transitions/fadeTransition.vue";

 export interface LayTransitionProps {
  type?: string;
--- a/src/component/transition/transitions/collapseTransition.vue
+++ b/src/component/transition/transitions/collapseTransition.vue
--- a/src/component/transition/transitions/fadeTransition.vue
+++ b/src/component/transition/transitions/fadeTransition.vue
--- a/src/component/upload/cropper.min.css
+++ b/src/component/upload/cropper.min.css
@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.5.12
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-06-12T08:00:11.623Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{image-orientation:0deg;display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
--- a/src/component/upload/index.less
+++ b/src/component/upload/index.less
@ -1,5 +1,5 @@
@import (reference) "../../theme/variable.less";
-
+@import "./cropper.min.css";
 .layui-upload-file {
  // display: none !important;
  opacity: 0.01;
@ -85,3 +85,17 @@
 .layui-btn-container .layui-upload-choose {
  padding-left: 0;
 }
+
+.layui-upload-drag-disable{
+  opacity:0.8;
+  z-index:1;
+  cursor: not-allowed;
+}
+
+.copper-container{
+  // width:1000px;
+}
+._lay_upload_img{
+  display: block;
+  max-width: 100%;
+}
--- a/src/component/upload/index.vue
+++ b/src/component/upload/index.vue
@ -7,11 +7,49 @@ export default {
 import "./index.less";
 import { Recordable } from "../../types";
 import { layer } from "@layui/layer-vue";
-import { ref, useSlots, withDefaults } from "vue";
+import {
+  computed,
+  ComputedRef,
+  getCurrentInstance,
+  nextTick,
+  ref,
+  toRaw,
+  useSlots,
+  withDefaults,
+} from "vue";
 import { templateRef } from "@vueuse/core";
-
+import { LayLayer } from "@layui/layer-vue";
+import Cropper from "cropperjs";
 // 组件的参数字段类型
 //https://www.layuiweb.com/doc/modules/upload.html#options
+export interface LayerButton {
+  text: string;
+  callback: Function;
+}
+export interface LayerModal {
+  title?: string;
+  resize?: boolean;
+  move?: boolean;
+  maxmin?: boolean;
+  offset?: string[];
+  content?: string;
+  shade?: boolean;
+  shadeClose?: boolean;
+  shadeOpacity?: number;
+  zIndex?: number;
+  type?: "component" | "iframe";
+  closeBtn?: boolean;
+  area: string[];
+  btn?: LayerButton[];
+  btnAlign?: "l" | "r" | "c";
+  anim?: boolean;
+  isOutAnim?: boolean;
+}
+export interface cutOptions {
+  layerOption: LayerModal;
+  copperOption?: typeof Cropper;
+}
+
 export interface LayUploadProps {
  url?: string;
  data?: any;
@ -22,8 +60,50 @@ export interface LayUploadProps {
  multiple?: boolean;
  number?: number;
  drag?: boolean;
+  disabled?: boolean;
+  cut?: boolean;
+  cutOptions: cutOptions;
 }

+const getCutDownResult = () => {
+  if (_cropper) {
+    const canvas = _cropper.getCroppedCanvas();
+    let imgData = canvas.toDataURL('"image/png"');
+    let currentTimeStamp = new Date().valueOf();
+    emit("cutdone", Object.assign({ currentTimeStamp, msg: imgData }));
+    let newFile = dataURLtoFile(imgData);
+    commonUploadTransaction([newFile]);
+    nextTick(() => clearAllCutEffect());
+  } else {
+    errorF(cutInitErrorMsg);
+  }
+};
+const closeCutDownModal = () => {
+  let currentTimeStamp = new Date().valueOf();
+  emit("cutcancel", Object.assign({ currentTimeStamp }));
+  nextTick(() => clearAllCutEffect());
+};
+const clearAllCutEffect = () => {
+  activeUploadFiles.value = [];
+  activeUploadFilesImgs.value = [];
+  innerCutVisible.value = false;
+};
+
+let defaultCutLayerOption: LayerModal = {
+  title: "标题",
+  move: true,
+  maxmin: false,
+  offset: [],
+  btn: [
+    { text: "导出", callback: getCutDownResult },
+    { text: "取消", callback: closeCutDownModal },
+  ],
+  area: ["640px", "640px"],
+  content: "11",
+  shade: true,
+  shadeClose: true,
+  type: "component",
+};
 const props = withDefaults(defineProps<LayUploadProps>(), {
  acceptMime: "images",
  field: "file",
@ -31,22 +111,48 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
  multiple: false,
  number: 0,
  drag: false,
+  disabled: false,
+  cut: false,
+  cutOptions: void 0,
 });

 const slot = useSlots();
 const slots = slot.default && slot.default();
-const emit = defineEmits(["choose", "before", "done", "error"]);
+const context = getCurrentInstance();
+const emit = defineEmits([
+  "choose",
+  "before",
+  "done",
+  "error",
+  "cutdone",
+  "cutcancel",
+]);

 // 内部变量
 const isDragEnter = ref(false);
-
+// 待处理的上传文件
+const activeUploadFiles = ref<any[]>([]);
+// 待处理的上传图片
+const activeUploadFilesImgs = ref<any[]>([]);
 const orgFileInput = templateRef<HTMLElement>("orgFileInput");
+let _cropper: any = null;
+let computedCutLayerOption: ComputedRef<LayerModal>;
+if (props.cutOptions && props.cutOptions.layerOption) {
+  computedCutLayerOption = computed(() =>
+    Object.assign(defaultCutLayerOption, props.cutOptions.layerOption)
+  );
+} else {
+  computedCutLayerOption = computed(() => defaultCutLayerOption);
+}
+
 // 统一异常提示的常量
 const defaultErrorMsg = "上传失败";
 const urlErrorMsg = "上传地址格式不合法";
 const numberErrorMsg = "文件上传超过规定的个数";
 const sizeErrorMsg = "文件大小超过限制";
 const uploadRemoteErrorMsg = "请求上传接口出现异常";
+const cutInitErrorMsg = "剪裁插件初始化失败";
+// 统一成功提示
 const uploadSuccess = "上传成功";

 //内部方法 -> start
@ -56,6 +162,8 @@ interface localUploadTransaction {
  files: File[] | Blob[];
  [propMame: string]: any;
 }
+
+const innerCutVisible = ref<boolean>(false);
 const localUploadTransaction = (option: localUploadTransaction) => {
  const { url, files } = option;
  let formData = new FormData();
@ -88,6 +196,20 @@ interface localUploadOption {
  url: string;
  [propMame: string]: any;
 }
+const dataURLtoFile = (dataurl: string) => {
+  let arr: any[] = dataurl.split(",");
+  let mime: string = "";
+  if (arr.length > 0) {
+    mime = arr[0].match(/:(.*?);/)[1];
+  }
+  let bstr = atob(arr[1]);
+  let n = bstr.length;
+  let u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+};

 const errorF = (errorText: string) => {
  let currentTimeStamp = new Date().valueOf();
@ -139,7 +261,13 @@ const localUpload = (option: localUploadOption, callback: Function) => {
    cb();
  }
 };
-
+const filetoDataURL = (file: File, fn: Function) => {
+  const reader = new FileReader();
+  reader.onloadend = function (e: any) {
+    fn(e.target.result);
+  };
+  reader.readAsDataURL(file);
+};
 const getUploadChange = (e: any) => {
  const files = e.target.files;
  const _files = [...files];
@ -165,17 +293,43 @@ const getUploadChange = (e: any) => {
          _sizeErrorFile.name
        } ${sizeErrorMsg},文件最大不可超过${props.size * 1000}kb`;
        errorF(errorMsg);
+        return;
      }
    }
  }
+  for (let item of _files) {
+    activeUploadFiles.value.push(item);
+    filetoDataURL(item, function (res: any) {
+      activeUploadFilesImgs.value.push(res);
+    });
+  }
+  let arm1 = props.cut && props.acceptMime == "images" && !props.multiple;
+  let arm2 = props.cut && props.acceptMime == "images" && props.multiple;
+  if (arm1) {
+    innerCutVisible.value = true;
+    setTimeout(() => {
+      let _imgs = document.getElementsByClassName("_lay_upload_img");
+      let _img = _imgs[0];
+      _cropper = new Cropper(_img, {
+        aspectRatio: 16 / 9,
+      });
+    }, 400);
+  } else {
+    if (arm2) {
+      console.warn(
+        "layui-vue:当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为false,通过@done获取返回文件对象"
+      );
+    }
+    commonUploadTransaction(_files);
+  }
+};
+const commonUploadTransaction = (_files: any[]) => {
  if (props.url) {
-    // 表单提交
    localUploadTransaction({
      url: props.url,
      files: _files,
    });
  } else {
-    // 抛出上传文件信息
    emit("done", _files);
  }
 };
@ -188,21 +342,9 @@ const chooseFile = () => {
 };
 const clickOrgInput = () => {
  let currentTimeStamp = new Date().valueOf();
-  //console.log(currentTimeStamp);
  emit("choose", currentTimeStamp);
 };
-const uploadDragOver = (e: any) => {};
-const uploadDragDrop = (e: any) => {
-  isDragEnter.value = false;
-  console.log(e);
-};
-const uploadDragStop = (e: any) => {};
-const uploadDragEnter = (e: any) => {
-  isDragEnter.value = true;
-};
-const uploadDragLeave = (e: any) => {
-  isDragEnter.value = false;
-};
+const cutTransaction = () => {};
 //内部方法 -> end
 </script>
 <template>
@ -216,11 +358,12 @@ const uploadDragLeave = (e: any) => {
      :name="field"
      @change="getUploadChange"
      :field="field"
+      :disabled="disabled"
      ref="orgFileInput"
    />
    <div v-if="!drag">
      <div class="layui-upload-btn-box">
-        <lay-button type="primary" @click.stop="chooseFile"
+        <lay-button type="primary" @click.stop="chooseFile" :disabled="disabled"
          >上传图片</lay-button
        >
      </div>
@ -228,11 +371,13 @@ const uploadDragLeave = (e: any) => {
    <div
      v-else
      class="layui-upload-drag"
-      :class="isDragEnter ? 'layui-upload-drag-draging' : ''"
-      @dragleave.stop="uploadDragLeave"
-      @dragenter.stop="uploadDragEnter"
-      @dragover.stop="uploadDragOver"
-      @drop="uploadDragDrop"
+      :class="
+        disabled
+          ? 'layui-upload-drag-disable'
+          : isDragEnter
+          ? 'layui-upload-drag-draging'
+          : ''
+      "
      @click.stop="chooseFile"
    >
      <i class="layui-icon"></i>
@ -242,6 +387,34 @@ const uploadDragLeave = (e: any) => {
        <img src="" alt="上传成功后渲染" style="max-width: 196px" />
      </div>
    </div>
+    <lay-layer
+      :title="computedCutLayerOption.title"
+      :move="computedCutLayerOption.move"
+      :resize="computedCutLayerOption.resize"
+      :shade="computedCutLayerOption.shade"
+      :shadeClose="computedCutLayerOption.shadeClose"
+      :shadeOpacity="computedCutLayerOption.shadeOpacity"
+      :zIndex="computedCutLayerOption.zIndex"
+      :btnAlign="computedCutLayerOption.btnAlign"
+      :area="computedCutLayerOption.area"
+      :anim="computedCutLayerOption.anim"
+      :isOutAnim="computedCutLayerOption.isOutAnim"
+      :btn="computedCutLayerOption.btn"
+      v-model="innerCutVisible"
+      @close="clearAllCutEffect"
+    >
+      <div
+        class="copper-container"
+        v-for="(base64str, index) in activeUploadFilesImgs"
+        :key="`file${index}`"
+      >
+        <img
+          :src="base64str"
+          :id="`_lay_upload_img${index}`"
+          class="_lay_upload_img"
+        />
+      </div>
+    </lay-layer>
    <div class="layui-upload-list">
      <slot name="preview"></slot>
    </div>
--- a/src/provider/index.vue
+++ b/src/provider/index.vue
@ -46,8 +46,12 @@ const changeTheme = (theme: string) => {
        brightness: 100,
        contrast: 90,
        sepia: 0,
-        // darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)',
-        // darkSchemeBackgroundColor: '#22272E'
+        darkSchemeTextColor: getComputedStyle(
+          document.documentElement
+        ).getPropertyValue("--global-dark-text-color"),
+        darkSchemeBackgroundColor: getComputedStyle(
+          document.documentElement
+        ).getPropertyValue("--global-dark-background-color"),
      },
      {
        invert: [],
@ -60,8 +64,10 @@ const changeTheme = (theme: string) => {
        disableStyleSheetsProxy: false,
      }
    );
+    localStorage.setItem("layui-vue-theme-dark", "true");
  } else {
    disableDarkMode();
+    localStorage.setItem("layui-vue-theme-dark", "false");
  }
 };

--- a/src/theme/variable.less
+++ b/src/theme/variable.less
@ -60,4 +60,8 @@
  
  --global-neutral-color-8: #c2c2c2;
  
+  --global-dark-text-color: #FFFFFFc9;
+
+  --global-dark-background-color: #22272E;
+
 }
--- a/src/utils/getLayuiVueVersion.ts
+++ b/src/utils/getLayuiVueVersion.ts
@ -1,13 +0,0 @@
-import { useFetch } from "@vueuse/core";
-
-export function getLayuiVueVersion() {
-  const { data } = useFetch(
-    `https://data.jsdelivr.com/v1/package/npm/@layui/layui-vue`,
-    {
-      timeout: 1000 * 2,
-      initialData: "",
-      afterFetch: (ctx) => ((ctx.data = ctx.data.tags.latest), ctx),
-    }
-  ).json();
-  return data;
-}