Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

2022-03-31 03:47:30 +08:00 · 2022-03-31 03:47:30 +08:00 · 47b6158d78
commit 47b6158d78
parent 5a87ed2285 fe0b9f0175
79 changed files with 337 additions and 318 deletions
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@ -102,8 +102,7 @@ export default {

 :::

-::: comment
-:::
+ 

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

 :::

-::: comment
-:::
+ 

 ::: previousNext avatar
 :::
--- a/example/docs/zh-CN/components/badge.md
+++ b/example/docs/zh-CN/components/badge.md
@ -68,8 +68,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext badge
 :::
--- a/example/docs/zh-CN/components/breadcrumb.md
+++ b/example/docs/zh-CN/components/breadcrumb.md
@ -110,8 +110,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext breadcrumb
 :::
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@ -341,8 +341,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext button
 :::
--- a/example/docs/zh-CN/components/card.md
+++ b/example/docs/zh-CN/components/card.md
@ -220,8 +220,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext card
 :::
--- a/example/docs/zh-CN/components/carousel.md
+++ b/example/docs/zh-CN/components/carousel.md
@ -182,8 +182,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext carousel
 :::
--- a/example/docs/zh-CN/components/checkbox.md
+++ b/example/docs/zh-CN/components/checkbox.md
@ -220,8 +220,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext checkbox
 :::
--- a/example/docs/zh-CN/components/collapse.md
+++ b/example/docs/zh-CN/components/collapse.md
@ -249,8 +249,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext collapse
 :::
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@ -170,8 +170,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext color
 :::
--- a/example/docs/zh-CN/components/colorPicker.md
+++ b/example/docs/zh-CN/components/colorPicker.md
@ -66,8 +66,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext colorPicker
 :::
--- a/example/docs/zh-CN/components/confirm.md
+++ b/example/docs/zh-CN/components/confirm.md
@ -83,8 +83,7 @@ layer.confirm(content, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext confirm
 :::
--- a/example/docs/zh-CN/components/container.md
+++ b/example/docs/zh-CN/components/container.md
@ -85,8 +85,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext container
 :::
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@ -112,8 +112,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/dropdown.md
+++ b/example/docs/zh-CN/components/dropdown.md
@ -104,8 +104,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext dropdown
 :::
--- a/example/docs/zh-CN/components/empty.md
+++ b/example/docs/zh-CN/components/empty.md
@ -64,8 +64,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext empty
 :::
--- a/example/docs/zh-CN/components/exception.md
+++ b/example/docs/zh-CN/components/exception.md
@ -144,8 +144,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/field.md
+++ b/example/docs/zh-CN/components/field.md
@ -75,8 +75,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/form.md
+++ b/example/docs/zh-CN/components/form.md
@ -580,8 +580,7 @@ export default {
 ```


-::: comment
-:::
+ 

 ::: previousNext form
 :::
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@ -188,8 +188,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext grid
 :::
--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@ -1137,8 +1137,7 @@ npm install @layui/icons-vue

 :::

-::: comment
-:::
+ 

 ::: previousNext iconfont
 :::
--- a/example/docs/zh-CN/components/iconPicker.md
+++ b/example/docs/zh-CN/components/iconPicker.md
@ -145,8 +145,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext iconPicker
 :::
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@ -192,8 +192,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext input
 :::
--- a/example/docs/zh-CN/components/inputNumber.md
+++ b/example/docs/zh-CN/components/inputNumber.md
@ -147,8 +147,7 @@

 :::

-::: comment
-:::
+ 

 ::: previousNext inputNumber
 :::
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@ -263,8 +263,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext layout
 :::
--- a/example/docs/zh-CN/components/line.md
+++ b/example/docs/zh-CN/components/line.md
@ -48,8 +48,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext line
 :::
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@ -133,8 +133,7 @@ layer.load(load, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext load
 :::
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@ -534,8 +534,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext nav
 :::
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@ -320,8 +320,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext modal
 :::
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@ -94,8 +94,7 @@ layer.msg(content, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext msg
 :::
--- a/example/docs/zh-CN/components/noticeBar.md
+++ b/example/docs/zh-CN/components/noticeBar.md
@ -94,8 +94,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@ -308,8 +308,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext page
 :::
--- a/example/docs/zh-CN/components/panel.md
+++ b/example/docs/zh-CN/components/panel.md
@ -62,8 +62,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext panel
 :::
--- a/example/docs/zh-CN/components/progress.md
+++ b/example/docs/zh-CN/components/progress.md
@ -135,8 +135,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext progress
 :::
--- a/example/docs/zh-CN/components/quote.md
+++ b/example/docs/zh-CN/components/quote.md
@ -61,8 +61,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext block
 :::
--- a/example/docs/zh-CN/components/radio.md
+++ b/example/docs/zh-CN/components/radio.md
@ -127,8 +127,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext radio
 :::
--- a/example/docs/zh-CN/components/rate.md
+++ b/example/docs/zh-CN/components/rate.md
@ -315,8 +315,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext rate
 :::
--- a/example/docs/zh-CN/components/result.md
+++ b/example/docs/zh-CN/components/result.md
@ -78,8 +78,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/scroll.md
+++ b/example/docs/zh-CN/components/scroll.md
@ -46,8 +46,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@ -235,8 +235,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext select
 :::
--- a/example/docs/zh-CN/components/skeleton.md
+++ b/example/docs/zh-CN/components/skeleton.md
@ -113,8 +113,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext skeleton
 :::
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@ -117,8 +117,7 @@ export default {
 | max  |  最大值     | `Number`                   |        -       |    -    |
 :::

-::: comment
-:::
+ 

 ::: previousNext slider
 :::
--- a/example/docs/zh-CN/components/splitPanel.md
+++ b/example/docs/zh-CN/components/splitPanel.md
@ -116,8 +116,7 @@
 :::


-::: comment
-:::
+ 

 ::: previousNext splitPanel
 :::
--- a/example/docs/zh-CN/components/step.md
+++ b/example/docs/zh-CN/components/step.md
@ -468,8 +468,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext step
 :::
--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@ -172,8 +172,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext switch
 :::
--- a/example/docs/zh-CN/components/tab.md
+++ b/example/docs/zh-CN/components/tab.md
@ -304,8 +304,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext tab
 :::
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@ -390,8 +390,7 @@ export default {
 | titleSlot  | 标题插槽   | --   |
 :::

-::: comment
-:::
+ 

 ::: previousNext table
 :::
--- a/example/docs/zh-CN/components/textarea.md
+++ b/example/docs/zh-CN/components/textarea.md
@ -118,8 +118,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext textarea
 :::
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@ -137,8 +137,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext timeline
 :::
--- a/example/docs/zh-CN/components/tooltip.md
+++ b/example/docs/zh-CN/components/tooltip.md
@ -128,8 +128,7 @@

 :::

-::: comment
-:::
+ 

 ::: previousNext tooltip
 :::
--- a/example/docs/zh-CN/components/transfer.md
+++ b/example/docs/zh-CN/components/transfer.md
@ -185,8 +185,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/tree.md
+++ b/example/docs/zh-CN/components/tree.md
@ -268,8 +268,7 @@ function handleClick(node) {

 :::

-::: comment
-:::
+ 

 ::: previousNext tree
 :::
--- a/example/docs/zh-CN/components/upload.md
+++ b/example/docs/zh-CN/components/upload.md
@ -186,7 +186,6 @@ export default {
 :::


-::: comment
-:::
+ 

 ::: previousNext button
--- a/example/docs/zh-CN/guide/dark.md
+++ b/example/docs/zh-CN/guide/dark.md
@ -0,0 +1,17 @@
+::: title 夜间模式
+:::
+
+::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。
+:::
+
+```
+<template>
+    <lay-config-provider :theme="theme">
+        <App />
+    </lay-config-provider>
+</template>
+
+<script setup>
+const theme = ref('dark')
+</script>
+```
--- a/example/docs/zh-CN/guide/problem.md
+++ b/example/docs/zh-CN/guide/problem.md
@ -4,5 +4,4 @@
 ::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
 :::

-::: comment
-:::
+ 
--- a/example/src/assets/background.svg
+++ b/example/src/assets/background.svg
@ -1,3 +1,33 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">

+  <rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="200" cy="150" r="30" stroke="#1a73e8" fill="#1a73e8">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>
+  </circle>
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
+  </rect>
 </svg>
--- a/example/src/assets/logo-png.png
+++ b/example/src/assets/logo-png.png
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@ -236,6 +236,7 @@ const throttle = (func: Function, wait: number) => {
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
  transition: none;
  -webkit-transition: none;
+  color: rgba(0, 0, 0, 0.8);
  &:hover {
    background-color: #e2e2e2;
  }
--- a/example/src/components/LayComment.vue
+++ b/example/src/components/LayComment.vue
@ -1,24 +0,0 @@
-<template>
-    <div id="comment"></div>
-</template>
-<script>
-export default {
-  name: 'Utterances',
-  methods: {
-    initValine () {
-        const utterances = document.createElement('script');
-        utterances.type = 'text/javascript';
-        utterances.async = true;
-        utterances.setAttribute('issue-term', 'pathname')
-        utterances.setAttribute('theme','github-light')
-        utterances.setAttribute('repo',`layui-vue/layui-doc`)
-        utterances.crossorigin = 'anonymous';
-        utterances.src = 'https://utteranc.es/client.js';
-        window.document.getElementById('comment').appendChild(utterances);
-    }
-  },
-  mounted: function(){
-    this.initValine()
-  }
-}
-</script>
--- a/example/src/components/LaySearch.vue
+++ b/example/src/components/LaySearch.vue
@ -31,8 +31,28 @@ onMounted(() => {
 :root {
  --docsearch-logo-color: var(--global-primary-color);
  --docsearch-primary-color: var(--global-primary-color);
-  --docsearch-searchbox-background: rgba(255, 255, 255, 0.05);
-  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.05);
+  --docsearch-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-Button,
+.DocSearch-Button:hover,
+.DocSearch-Button:active,
+.DocSearch-Button:focus {
+  border: 1px solid rgb(224, 224, 230);
+  box-shadow: none;
+}
+
+.DocSearch-Button-Key {
+  border: 1px solid rgba(60, 60, 60, .29);
+  background: transparent;
+  box-shadow: none;
+}
+
+.DocSearch-Button 
+.DocSearch-Search-Icon, 
+.DocSearch-Button-Placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
 </style>
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@ -5,10 +5,10 @@
    :locales="locales"
    :themeVariable="themeVariable"
  >
-    <lay-layout class="layui-layout-document">
+    <lay-layout class="layui-layout-document" style="height:100%">
      <lay-header
-        ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
-          <img src="../assets/logo.png" />
+        ><lay-logo>
+          <img src="../assets/logo-png.png" /><span style="margin-left:12px;font-size:20px;color: rgba(0, 0, 0, 0.8);letter-spacing: -0.2px;opacity: 0.8;">layui - vue</span>
        </lay-logo>
        <ul
          class="layui-nav layui-layout-left"
@ -30,11 +30,6 @@
              {{ t("nav.resources") }}
            </router-link>
          </li>
-          <li class="layui-nav-item">
-            <router-link to="/zh-CN/material">
-              {{ t("nav.material") }}
-            </router-link>
-          </li>
          <li class="layui-nav-item">
            <lay-form>
              <lay-search :datas="menus" />
@ -52,7 +47,6 @@
                  size="15px"
                  type="layui-icon-theme"
                  style="
-                    color: rgba(255, 255, 255, 0.7);
                    padding-left: 30px;
                    padding-right: 30px;
                  "
@ -122,7 +116,7 @@
          </li>
          <li class="layui-nav-item">
            <a href="https://gitee.com/layui-vue/layui-vue">
-              <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
+              Gitee
            </a>
          </li>
          <li class="layui-nav-item">
@ -143,11 +137,6 @@
              >
            </a>
          </li>
-          <li class="layui-nav-item">
-            <a href="https://gitee.com/layui-vue/layui-vue/issues">
-              <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
-            </a>
-          </li>
          <li class="layui-nav-item">
            <a href="javascript:void(0)">
              <lay-switch
@ -298,6 +287,9 @@ export default {
    };

    provide('LayuiVueVersion', layuiVueVersion)
+    provide("isDark",isDark);
+    provide("theme",theme);
+
    return {
      t,
      menus,
@ -320,8 +312,8 @@ export default {
  z-index: 99;
  width: 100%;
  position: fixed;
-  background: #393d49;
-  border-bottom: 1px solid #404553;
+  background: #ffffff;
+  border-bottom: 1px solid #EEEEEE;
 }

 .layui-layout-document > .layui-layout > .layui-side {
@ -330,13 +322,7 @@ export default {
  margin-top: 60px;
  z-index: 99;
  height: calc(100% - 60px);
-  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-}
-
-.layui-layout-document .layui-body,
-.layui-layout-document .layui-menu,
-.layui-layout-document .lay-aside {
-  background-color: var(--global-back-color);
+  border-right: 1px solid #EEEEEE;
 }

 .layui-layout-document > .layui-layout > .layui-body {
@ -347,11 +333,25 @@ export default {
  height: calc(100% - 60px);
 }

+.layui-layout-document .layui-header .layui-form-switch {
+  border: 1px solid rgba(60, 60, 60, .29);
+  background-color: #f1f1f1!important;
+}
+
+.layui-layout-document .layui-header .layui-nav .layui-nav-item > a,
+.layui-layout-document .layui-header .layui-nav .layui-nav-item > a:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.layui-layout-document .layui-header .layui-logo {
+  text-align: left;
+  padding-left: 15px;
+}
+
 .layui-logo img {
-  height: 31px;
-  width: 82px;
+  height: 45px;
  left: 15px;
-  top: 16px;
+  top: 0px;
 }

 .layui-header > .layui-nav {
@ -361,13 +361,6 @@ export default {
 .layui-header .layui-local-badge {
  font-size: 12.4px;
  background: transparent;
-  color: rgba(255, 255, 255, 0.7);
-  border-color: rgba(255, 255, 255, 0.7);
-}
-
-.layui-header > .layui-local:hover {
-  color: white;
-  border-color: white;
 }

 .layui-menu-docs {
--- a/example/src/main.ts
+++ b/example/src/main.ts
@ -6,7 +6,6 @@ import layui from '../../src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
-import LayComment from './components/LayComment.vue'
 import LayAnchor from './components/LayAnchor.vue'
 import './assets/css/index.css'

@ -24,7 +23,6 @@ export function createApp(): {
    .component('LayCode', LayCode)
    .component('LaySearch', LaySearch)
    .component('LayTableBox', LayTableBox)
-    .component('LayComment', LayComment)
    .component('LayAnchor',LayAnchor)

  return { app, router }
--- a/example/src/plugin/common-plugins.ts
+++ b/example/src/plugin/common-plugins.ts
@ -8,7 +8,6 @@ import createTitle from "./create-title";
 import createQuote from "./create-quote";
 import createDescribe from "./create-describe";
 import createTable from "./create-table";
-import createComment from "./create-comment";
 import createAnchor from "./create-anchor";
 import preWrapper from "./pre-wrapper";
 import previousNext from "./previous-next";
@ -32,7 +31,6 @@ const plugins = [
        .use(...createQuote("quote", ""))
        .use(...createTitle("title", ""))
        .use(...createDescribe("describe", ""))
-        .use(...createComment("comment", ""))
        .use(...createAnchor("anchor", ""))
        .use(...previousNext("previousNext", ""));
    },
--- a/example/src/plugin/create-comment.ts
+++ b/example/src/plugin/create-comment.ts
@ -1,27 +0,0 @@
-import container from 'markdown-it-container'
-import type Token from 'markdown-it/lib/token'
-
-type ContainerArgs = [
-  typeof container, string,
-  { render(tokens: Token[], idx: number): string }
-]
-
-export default function createContainer(
-  klass: string,
-  defaultTitle: string
-): ContainerArgs {
-  return [
-    container,
-    klass,
-    {
-      render(tokens, idx) {
-        const token = tokens[idx]
-        if (token.nesting === 1) {
-          return `<lay-comment>`
-        } else {
-          return '</lay-comment>\n'
-        }
-      },
-    },
-  ]
-}
--- a/example/src/plugin/previous-next.ts
+++ b/example/src/plugin/previous-next.ts
@ -30,7 +30,7 @@ export default function createContainer(
          }
        });
        if (token.nesting === 1) {
-          return `<div style="display: flex; justify-content: space-between">
+          return `<div style="display: flex; justify-content: space-between; margin-top:20px;">
                <div><router-link to="${
                  menusChild[prevIndex]?.path
                }" class="lay-link" style="display: ${
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@ -68,6 +68,11 @@ const zhCN = [
            component: () => import("../../docs/zh-CN/guide/locale.md"),
            meta: { title: "语言" },
          },
+          {
+            path: "/zh-CN/guide/dark",
+            component: () => import("../../docs/zh-CN/guide/dark.md"),
+            meta: { title: "夜间" },
+          },
        ],
      },
      {
--- a/example/src/view/guide.vue
+++ b/example/src/view/guide.vue
@ -91,6 +91,11 @@ export default {
            title: '主题',
            subTitle: 'theme',
            path: '/zh-CN/guide/theme',
+          },{
+            id: 3,
+            title: '夜间',
+            subTitle: 'dark',
+            path: '/zh-CN/guide/dark',
          },
          {
            id: 3,
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@ -4,31 +4,35 @@
      <div class="site-banner-main">
        <div class="site-zfj site-zfj-anim">
          <img
-            src="../assets/logo.jpg"
+            src="../assets/logo-png.png"
            style="width: 220px; border-radius: 10px"
          />
        </div>
        <div class="layui-anim site-desc site-desc-anim">
          <p class="web-font-desc">layui - vue</p>
-          <cite
-            >{{ t('home.description') }}</cite
-          >
+          <cite>{{ t("home.description") }}</cite>
        </div>
        <div class="site-download">
-          <router-link class="layui-inline site-down" to="/zh-CN/guide"
-            >Get Started</router-link
-          >
+          <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>
        </div>
        <div class="site-version">
          <span>{{ t('home.version') }}：v<cite class="site-showv">{{ layuiVueVersion }}</cite></span>
          <span
-            ><router-link
-              class="layui-inline site-down"
-              to="/zh-CN/guide/changelog"
-              >{{ t('home.changelog') }}</router-link
+            >{{ t("home.version") }}：<cite class="site-showv"
+              >1.0.0</cite
+            ></span
+          >
+          <span
+            >{{ t("home.download") }}：<em class="site-showdowns"
+              >5463</em
            ></span
          >
-          <span>{{ t('home.download') }}：<em class="site-showdowns">5463</em></span>
        </div>
      </div>
      <div class="site-banner-other">
@ -38,7 +42,7 @@
          rel="nofollow"
          class="site-star"
        >
-          <i class="layui-icon"></i> Star <cite id="getStars">716</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">741</cite>
        </a>
        <a
          href="https://gitee.com/layui-vue"
@ -58,7 +62,7 @@
        </a>
      </div>
    </div>
-    <div style="margin-left: 10%; margin-right: 10%">
+    <div style="margin-left: 10%; margin-right: 10%; margin-top: 40px">
      <div>
        <ul class="layui-row layui-col-space30 site-idea">
          <li class="layui-col-md8">
@ -98,48 +102,68 @@
      </div>
    </div>
    <div class="footer footer-index">
-      <p>
-        Copyright © 2022 <a href="/index.html">www.layui-vue.com</a> mit
-        licence
-      </p>
-      <p></p>
+      <p>Released under the <a href="/index.html">MIT License</a>.</p>
+      <p>Copyright © 2021-2022 layui-vue.com</p>
    </div>
  </div>
 </template>

 <script>
-import { inject } from "vue";
-import { useI18n } from 'vue-i18n';
+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 theme = inject("theme");
+
+    const changeTheme = () => {
+      isDark.value = !isDark.value;
+      if(theme.value === 'dark') {
+        theme.value = 'light';
+      } else {
+        theme.value = 'dark';
+      }
+    }

    return {
      t,
+      isDark,
+      theme,
+      changeTheme,
      layuiVueVersion
-    }
-  }
-}
+    };
+  },
+};
 </script>
 <style>
+#app,
+html,
+body {
+  height: 100%;
+}
 .site-container {
+  background: #fff;
  margin-top: 60px;
-  background-color: whitesmoke;
  height: 100%;
  width: 100%;
 }
 .site-banner {
-  position: relative;
-  height: 600px;
-  text-align: center;
+  height: 100%;
  overflow: hidden;
-  background-color: #393d49;
+  text-align: center;
+  position: relative;
+  border-bottom: 1px solid #eee;
+  background-image: url(../assets/background.svg);
+  background-repeat: no-repeat;
+  background-size: 100%;
 }
 .site-banner-bg {
  background-position: center 0;
 }
+
 .site-banner-bg,
 .site-banner-main {
  position: absolute;
@ -154,21 +178,29 @@ export default {
 }
 .site-download a {
  position: relative;
-  padding: 0 50px 0 50px;
-  height: 60px;
-  line-height: 60px;
+  padding: 0 20px 0 20px;
+  height: 40px;
+  line-height: 40px;
  border-radius: 4px;
-  border: 1px solid #c2c2c2;
-  border-color: rgba(255, 255, 255, 0.2);
-  font-size: 24px;
-  color: #ccc;
+  background: #f1f1f1;
+  border: 1px solid #f1f1f1;
+  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;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
+  letter-spacing: 0.2px;
 }
 .site-download a:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-  border-radius: 50px;
-  color: #ccc;
+  border-radius: 10px;
+}
+.site-download a:first-child {
+  background: #009688;
+  color: white;
+}
+.site-download a+a {
+  margin-left: 20px;
 }
 .site-zfj {
  padding-top: 25px;
@ -203,26 +235,30 @@ export default {
 }
 .site-desc .web-font-desc {
  color: #fff;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 51px;
+  color: #213547;
+  font-size: 52px;
+  opacity: 0.82;
 }
 .web-font-desc {
-  font-style: normal;
-  font-weight: 300;
+  font-size: 76px;
+  line-height: 1.25;
+  font-weight: 900;
+  letter-spacing: -1.5px;
+  max-width: 960px;
+  margin: 0 auto;
 }
 .site-desc cite {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
-  color: #c2c2c2;
-  color: rgba(255, 255, 255, 0.66);
+  color: rgba(60, 60, 60, 0.7);
  font-style: normal;
 }
 .site-version {
  position: relative;
  margin-top: 18px;
-  color: #ccc;
+  color: rgba(60, 60, 60, 0.7);
  font-size: 12px;
 }
 .site-version span {
@ -232,18 +268,23 @@ export default {
  font-style: normal;
 }
 .site-version a {
-  color: #e2e2e2;
+  color: rgba(60, 60, 60, 0.7);
  text-decoration: none;
  margin-top: -4px;
 }
 .site-banner-other {
  position: absolute;
  left: 0;
-  bottom: 35px;
+  bottom: 90px;
  width: 100%;
  text-align: center;
  font-size: 0;
 }
+
+.site-container .layui-field-title {
+  border-top: 1px solid #d2d2d2;
+}
+
 .site-banner-other a {
  display: inline-block;
  vertical-align: middle;
@ -252,10 +293,8 @@ export default {
  margin: 0 6px;
  padding: 0 8px;
  border-radius: 4px;
-  color: #c2c2c2;
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid #c2c2c2;
-  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(60, 60, 60, 0.7);
+  border: 1px solid rgba(60, 60, 60, 0.7);
  font-size: 14px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
@ -265,7 +304,9 @@ export default {
  padding: 30px 15px;
  line-height: 30px;
  text-align: center;
-  color: #666;
+  color: rgba(60, 60, 60, 0.7);
  font-weight: 300;
+  font-size: 13.6px;
+  background: #f9f9f9;
 }
 </style>
--- a/example/src/view/material.vue
+++ b/example/src/view/material.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="alone-banner layui-bg-black">
+  <div class="alone-banner">
    <div class="layui-main">
      <h1>物 料 市 场</h1>
      <p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨<a style="color:white;" href="https://gitee.com/layui-vue/layui-vue/issues/new?issue%5Bassignee_id%5D=0&issue%5Bmilestone_id%5D=0">【投递】</a></p>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "0.4.4",
+  "version": "0.4.5-alpha.1",
  "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",
+    "darkreader": "^4.9.46",
    "evtd": "^0.2.3",
    "moment": "^2.29.1",
    "uuid": "^8.3.2",
--- 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 "src/types";
+import { BooleanOrString, String } from "../../types";

 export interface LayButtonProps {
  type?: ButtonType;
--- a/src/component/card/index.vue
+++ b/src/component/card/index.vue
@ -7,7 +7,7 @@ export default {
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 import "./index.less";
-import { String } from "src/types";
+import { String } from "../../types";
 import { CardShadow } from "./interface";

 const slot = useSlots();
--- a/src/component/checkbox/index.vue
+++ b/src/component/checkbox/index.vue
@ -105,7 +105,7 @@ const handleClick = function () {
      :lay-skin="skin"
    >
      <span v-if="$slots?.default"><slot></slot></span>
-      <i class="layui-icon layui-icon-ok"></i>
+      <i :class="{ 'layui-icon layui-icon-ok': isChecked }"></i>
    </div>
  </span>
 </template>
--- a/src/component/datePicker/interface.ts
+++ b/src/component/datePicker/interface.ts
@ -0,0 +1 @@
+export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
--- a/src/component/tab/index.less
+++ b/src/component/tab/index.less
@ -36,6 +36,7 @@
  text-align: center;
  cursor: pointer;
 }
+
 /** 位置开始 */
 .layui-tab.is-right {
  display: flex;
@ -216,26 +217,36 @@
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
 }

-.layui-tab-card > .layui-tab-title {
+.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-title li {
+.layui-tab-card > .layui-tab-head > .layui-tab-title li {
  margin-right: -1px;
  margin-left: -1px;
 }

-.layui-tab-card > .layui-tab-title .layui-this {
+.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this {
  background-color: #fff;
 }

-.layui-tab-card > .layui-tab-title .layui-this:after {
+.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this:after {
  border-top: none;
  border-width: 1px;
  border-bottom-color: #fff;
 }

-.layui-tab-card > .layui-tab-title .layui-tab-bar {
+.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-tab-bar {
  height: 40px;
  line-height: 40px;
  border-radius: 0;
--- a/src/component/tab/index.vue
+++ b/src/component/tab/index.vue
@ -18,7 +18,7 @@ import {
  watch,
 } from "vue";

-export type tabPositionType = "top" | "bottom" | "left" | "right" ;
+export type tabPositionType = "top" | "bottom" | "left" | "right";

 export interface LayTabProps {
  type?: string;
@ -46,7 +46,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
 };

 const props = withDefaults(defineProps<LayTabProps>(), {
-  tabPosition: "top"
+  tabPosition: "top",
 });

 const emit = defineEmits(["update:modelValue", "change", "close"]);
@ -98,36 +98,39 @@ provide("slotsChange", slotsChange);
 <template>
  <div
    class="layui-tab"
-    :class="[type ? 'layui-tab-' + type : '',
-     props.tabPosition ? `is-${tabPosition}` : '']"
+    :class="[
+      type ? 'layui-tab-' + type : '',
+      props.tabPosition ? `is-${tabPosition}` : '',
+    ]"
    v-if="active"
  >
    <div v-if="tabPosition === 'bottom'" class="layui-tab-content">
      <slot></slot>
    </div>

-    <div :class="[
-      'layui-tab-head',
-      props.tabPosition ? `is-${tabPosition}` : ''
-    ]">
-    <ul :class="[
-      'layui-tab-title',
-      props.tabPosition ? `is-${tabPosition}` : ''
-    ]">
-      <li
-        v-for="(children, index) in childrens"
-        :key="children"
-        :class="[children.props.id === active ? 'layui-this' : '',]"
-        @click.stop="change(children.props.id)"
+    <div
+      :class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
+    >
+      <ul
+        :class="[
+          'layui-tab-title',
+          props.tabPosition ? `is-${tabPosition}` : '',
+        ]"
      >
-        {{ children.props.title }}
-        <i
-          v-if="allowClose && children.props.closable != false"
-          class="layui-icon layui-icon-close layui-unselect layui-tab-close"
-          @click.stop="close(index, children.props.id)"
-        ></i>
-      </li>
-    </ul>
+        <li
+          v-for="(children, index) in childrens"
+          :key="children"
+          :class="[children.props.id === active ? 'layui-this' : '']"
+          @click.stop="change(children.props.id)"
+        >
+          {{ children.props.title }}
+          <i
+            v-if="allowClose && children.props.closable != false"
+            class="layui-icon layui-icon-close layui-unselect layui-tab-close"
+            @click.stop="close(index, children.props.id)"
+          ></i>
+        </li>
+      </ul>
    </div>

    <div v-if="tabPosition != 'bottom'" class="layui-tab-content">
--- a/src/provider/index.vue
+++ b/src/provider/index.vue
@ -7,6 +7,11 @@ export default {
 <script setup lang="ts">
 import { watch } from "vue";
 import { useI18n } from "vue-i18n";
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+} from "darkreader";
+
 const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();

 export interface LayConfigProviderProps {
@ -34,8 +39,30 @@ const changeLocales = (lang: string, locales: any, merge: boolean) => {
 };

 const changeTheme = (theme: string) => {
-  document.body.removeAttribute("lay-theme");
-  document.body.setAttribute("lay-theme", theme);
+  if (theme === "dark") {
+    enableDarkMode(
+      {
+        mode: 1,
+        brightness: 100,
+        contrast: 90,
+        sepia: 0,
+        // darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)',
+        // darkSchemeBackgroundColor: '#22272E'
+      },
+      {
+        invert: [],
+        css: ``,
+        ignoreInlineStyle: [
+          ".layui-colorpicker-trigger-span",
+          "div.layui-color-picker *",
+        ],
+        ignoreImageAnalysis: [],
+        disableStyleSheetsProxy: false,
+      }
+    );
+  } else {
+    disableDarkMode();
+  }
 };

 const changeThemeVariable = (vars: any) => {
--- a/src/theme/index.less
+++ b/src/theme/index.less
@ -276,7 +276,6 @@ a cite {
  text-align: center;
  color: @global-primary-color;
  font-size: 16px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
 }

 .layui-layout-left {
--- a/src/theme/variable.less
+++ b/src/theme/variable.less
@ -44,10 +44,6 @@

  --global-border-radius: 2px;

-  --global-fore-color: #333;
-
-  --global-back-color: #ffffff;
-
  --global-neutral-color-1: #FAFAFA;

  --global-neutral-color-2: #F6F6F6;
@ -63,27 +59,5 @@
  --global-neutral-color-7: #cccccc;
  
  --global-neutral-color-8: #c2c2c2;
-}
-
-body[lay-theme="dark"] {
  
-  --global-fore-color: #ffffff;
-
-  --global-back-color: #333;
-
-  --global-neutral-color-1: #FAFAFA;
-
-  --global-neutral-color-2: #F6F6F6;
-  
-  --global-neutral-color-3: #eeeeee;
-  
-  --global-neutral-color-4: #e2e2e2;
-  
-  --global-neutral-color-5: #dddddd;
-  
-  --global-neutral-color-6: #d2d2d2;
-  
-  --global-neutral-color-7: #cccccc;
-  
-  --global-neutral-color-8: #c2c2c2;
-}
+}
				`@ -0,0 +1 @@`
				`export type DatePickerType = "date" \| "datetime" \| "year" \| "time" \| "month";`